In a previous post, we took a look at how LESS can help you manage your CSS, by providing you with a powerful superset of features that makes CSS feel (and work) much more like a traditional object-oriented programming language. Given the power that the LESS pre-processor provides to CSS, it’s no surprise that a lot of web design frameworks are built using LESS. Examples of such frameworks include fusionCSS, the Gantry framework, and the biggest contender of them all, Twitter’s Bootstrap.
In and of itself, Bootstrap is already quite a powerful framework that allows anyone to design a Web interface that just plain works, first time round. Part of what makes Bootstrap so compelling for Web developers, however, is the fact that it is extremely flexible. You can build your website using the UI components that come as default with each Bootstrap installation, and then use CSS (and hence LESS) to override them – making your website look like Windows (of any kind), or OSX, or KDE, or GNOME… anything you can think of.
One of the ways in which LESS is used by Bootstrap is through the modification of the various default settings that Bootstrap encodes as LESS variables. For example, in plain CSS, every style defined can include colour settings – but each colour value is set individually of the others, so if you have a series of related elements using the same colour(s), and you want to change them, you have to laboriously find-and-replace the colour number(s). By using LESS, Bootstrap centralises all of these default colours in defined variables, so you only need to change the values in the variable declarations for the changes to be reflected elsewhere.
Nor are colour values the only things that LESS (and Bootstrap) can store and use in variables. Anything that CSS accepts as valid values, including font types, pixel sizes, and percentages can be placed in a variable. Using LESS’ support of nesting, you can even place a variable inside another variable. Without changing a single line of your HTML page, you can make it look entirely different simply by manipulating the default values stored in the Bootstrap-defined variables.
In addition to default variables, Bootstrap also makes full use of mixins, the LESS equivalents of functions and procedures. Mixins essentially allow you to create a style class and import all the properties of that class into another class. By using variables with mixins, you can create a function that allows you to modify the default parameters of the mixin.
Mixins in Bootstrap are used to create various UI elements simply by calling them, rather than having to define these elements from scratch. In addition, Bootstrap mixins also allow you to apply a number of transform effects to various elements quickly and easily.
LESS supports various mathematical operations, namespaces and other advanced functionality which Bootstrap takes full advantage of. As a result, if you want to really play around with Bootstrap, you need to understand how LESS works and how Bootstrap builds itself on it as well.
In the early days of the World Wide Web (WWW), browsers were served static HTML pages. Page design back then was simple; only a few font families were supported, HTML was more or less “RTF + hyperlinks”, and the ability to incorporate graphics into the Web page was considered as cutting-edge. A lot of people would like to skip over the time that followed shortly thereafter, when Web sites had garish backgrounds and browsers introduced the infamous (and thankfully non-standard) <blink>and <marquee> tags. Content that was important or emphasized were highlighted by these and other similar HTML tags to draw people’s attention to them.
Over time, of course, people began to realise that while formatting tags such as <i> or <b> and content tags such as <em> or <strong> were usually rendered identically by the browser, they were supposed to be entirely different, semantically speaking. Strongly emphasizing a particular bit of text did not necessarily mean making it bold; a similar effect might be obtained by highlighting the text instead, and in certain circumstances, perhaps more desirable.
Enter Cascading Style Sheets, or CSS. By completely decoupling the semantics of HTML tags from the way they were presented in the browser, CSS enables both Web designer and Web user to customize the way that HTML pages look and feel. Given the same HTML input, but two different stylesheets, a browser may well render the pages entirely different. With CSS, you can modify almost every single HTML tag to mean precisely what you want them to mean, while allowing your HTML content to be almost free of formatting directives. CSS also gives you the option to control – and if need be, change wholesale – the look and feel of your entire website using a single file.
Well and good, but CSS by itself can be quite verbose, even though it’s supposed to cut down on the verbosity of your HTML output. It can also be tedious to modify, if the changes are significant enough. In this regard, CSS is not very different from the C programming language (and in fact, HTML5 + CSS3 is apparently Turing-complete). And just as C has the C pre-processor that greatly enhances it, CSS has Leaner CSS (LESS) as one of its pre-processors.
LESS is a super set of CSS, so you don’t have to unlearn anything to use it. It provides a number of useful features and capabilities that make CSS much, much easier to deploy. It also goes a long way into making CSS a full-fledged programming language, with the inclusion of variables, functions and operations.
If you have ever found CSS to be useful but difficult to work with, LESS can make your life much easier. Check LESS out at http://lesscss.org for a more in-depth tutorial at what its feature set is, how you can use it, its GitHub site and a reference manual. Once you start using LESS, you will never go back to normal CSS – and that’s a good thing.
Churches. Associations. Guilds. Clubs. Unions. Sports teams. Squads, companies, battalions and regiments. Mankind was designed to be social creatures from the beginning, and the varied number of ways in which we group together – and form bonds – proves the adage that “it is not good for Man to be alone”.
In the past, the primary means by which people kept in touch, renewed their bonds and shared information (otherwise known as ‘gossiping’) was by congregating in various locations that facilitated these social activities in a welcoming and warm environment. The village pub or local church halls served as informal community centres; men met together in country clubs outside of the workplace while women had sewing circles; and children socialised on the playground or during camps. Today, social media serve very much the same purposes.
The earliest form of ‘social’ media on the Internet was the Usenet newsgroups. Using NNTP to transfer information from news server to news server, Usenet allowed the formation of specific groups dedicated to particular interests or themes with people responding to posts from all over the world – the forerunner of modern Web forums.
During the same timeframe, Bulletin Board Systems (BBSes) were also quite popular as local phenomena, where users were mostly from within the same area code as the operator of the BBS. People would dial up to the BBS, where they could do many things including file transfers, email and posting bulletins. There were a few large BBSes (CompuServe, AOL and Prodigy come to mind), but by and large, a BBS served as the local watering hole for geeks and nerds.
Yet another early form of Internet social media was Internet Relay Chat (IRC), which was the forerunner of Instant Messaging (IM) and live chat clients and services. IRC was a natural progression of Usenet; where Usenet’s architecture was more like that of email, IRC allowed users to interact in real-time.
While most of these Internet services are still available, today’s social media revolves around the World Wide Web. Highly complex Web applications are now run on top of HTTP instead of their own specific protocols, and can provide all of the functionality of their predecessors… and more. Social networking sites such as Facebook, LinkedIn, Google+ and the like offer such a rich feature set and user experience that more and more, people spend most of their time on them.
The power of such sites and services lies in user-generated content. Social media sites are useful because people share so much of their personal details and even their entire lives on them. They are useful to people searching for those whom they have lost touch with, and for people to keep in touch with others. They are useful to the advertisers, who can target their advertising more effectively. They are useful to businessmen seeking to expand their network of contacts. And they are useful to organisations who conduct data mining.
Different types of social media services provide different unique propositions. Twitter offers the convenience of quick updates as well as easily-digestible sound bites. LinkedIn started out as a corporate networking tool for the high-level decision maker. And the current champion of the whole industry, Facebook, offers everything – email, IM, news, picture storage, corporate website – for free.
At the times when we at Digital Peak where a one man show I didn't care about coding standards. I had my formatter in Eclipse and all was fine. As we are more developers nowadays we needed some rules the code formatting has to follow, otherwise it will be hard for others to read and maintain it. So we decided to adopt to the Joomla coding standards (which was a hard decision for me as I'm an advocate of the Java coding standard) for our Joomla extensions. I'm an Eclipse lover since the early days of Eclipse (was coding my own Eclipse plugins) so I faced the challenge to integrate the PHP codesniffer into the Eclipse IDE. To safe you time, I'm writing down here the steps to accomplish this task.
This should work on windows and linux.
We at Digital Peak had to adapt some sniffs, because we didn't need so strict rules like Joomla has, so we created our own fork. This means we are able to merge future changes of the Joomla code style and at the same time we can add/modify/remove our own rules. How you can fork a github repository could be found on the web and we do not cover it here again.
As a last step checkout the project somewhere into you file system or even better into your workspace as a repository in eGit.
git clone https://github.com/Digital-Peak/coding-standards.git Joomla
The code sniffer plugins are maintained by an external project and do not come built in with the PDT plugins. How you can install the plugins can be found here. Install the whole stack and restart Eclipse. Make sure PHP executable is installed too, on windows you have to download it manually and on ubuntu run
apt-get install php5
In the project properties (Project->Properties->PHP Tools->PHP CodeSniffer) add your code sniffer standard. After you click ok Eclipse asks you to build the project, click on yes.
I suggest that you enable print PHP output to console and set Tab width to 0 (otherwise the code sniffer will convert the tabs to spaces).
If you are using the coding standards from Joomla as reference you need to update the codesniffer version to at least version 1.4.4, otherwise it will fail (thanks to the PHP console output I figured it out).
If you are a lazy developer as I am you should know the key combination Ctrl+Sift+F. It formats the file according to a rule set from a formatter in your Eclipse preferences (Project->Properties->PHP->Code Style->Formatter). You can find a working formatter on our repository as the one in the Joomla project is broken on Eclipse Kepler. The install screen will then look like
With our brand new DPCalendar version 3.3 we welcome your site visitors and let them to attend on your events. Reminders will be sent out to them when an event will happen that they will not miss the action. Beside that we introduced some more nice little adons which we will explain in more detail afterwards. But first we want to express some compatibility status about DPCalendar itself.
DPCalendar runs on Joomla 2.5 and 3.x and has the same look and feel on both versions. This means we use the same code on both branches. Joomla 2.5 contains no bootstrap library or the jQuery framework which DPCalendar contains as falback if they are not available. With that we can guarantee full responsiveness of DPCalendar and no version mismatch or missing features on Joomla 2.5.
Now lets dive into the new great features of DPCalendar the Joomla calendar of your choice.
If the event has enough capacity the visitor can attend an event by providing his name and email address. Additionally he can define the time before the event starts when he want's to be notified per mail as reminder. You as user have to run a cron job every minute to check if reminders need to be sent out. If the event is a series event the visitor can specify if he/she wants to attend the whole series or only single events. The creator of the event has the option to directly attend the event on the edit form when a event is modified or created.
In the permission tab of the calendar the event belongs to the site administrator can define the rules which user groups can attend events. This means you have the possibility to let only a few chosen people to attend events.
Nowadays it became state of the art to have a Facebook page if you have a product, are a business or brand or an organisation. Facebook allows to create events on your fan page. But you want to let your web site visitors know about this events. DPCalendar allows not to include events up to 10 pages without a breeeze. Just provide your page id, app id and the secret to get access to the events in the DPCalendar Facebook plugin and we do the rest. The events will be integrated in DPCalendar as your ordinary events.
Of course your personal events from your Facebook account can still be integrated by the old way.
A big demand from web site administrators is to manage the Joomla calendars from DPCalendar from their preferred Calendar applications like Outlook, Thunderbird or iCal from Apple, even right from their smartphone or tablet is needed. Till now it was only possible to manage the personal calendars. But now you can manage the global DPCalendar calendars through CalDAV. In your CalDAV application you cal login with your Joomla credentials and as calendar url you can use an url with the following schema:
http(s)://{{joomla-site-url}}/components/com_dpcalendar/caldav.php/calendars/{{username}}/dp-{{calid}}
We improved the performance fro Firefox and Internet Explorer rendering. Beside that we are offering some new configuration options for the main calendar menu link and mini module. And last but not least we fixed some little bugs to deliver you a rock solid stable Joomla calendar extension suite.
In our next release we will focus on more flexibility in external calendar integration. This means you will be able to add unlimited external calendars from your desired event system. We try to implement two way sync on as many systems as possible when allowed.
It will also be possible to buy tickets to events through a payment processor to automate the event registration.
