Technology

Billy Stinnette

04/16/2014

0

What interactive PDF features work and don’t work on mobile devices

Billy Stinnette // in Technology

When you flip through an interactive PDF on your desktop, it’s often a pleasant experience. There are fun animations, hotspots, and videos that kindly ask for your attention and play right on cue. However, if you ever flipped through that same interactive PDF on your iPad, you’ve probably noticed that all of those fun and exciting features have been stripped from your mobile world. It’s like drinking decaf coffee. The taste is there, and it’s hot, but all the benefits have been removed. So really, what’s the point?*

Recently at Vodori, we wanted to help our Pepper and Pepper Mobile users better understand which features of an interactive PDF will work on different devices. Think of this table as our version of the orange and brown lids on Waffle House coffee pots that distinguish decaf from caffeinated.

A couple functionality notes:

  • Navigation elements work in the majority of instances, however if hotspots are set up to operate as the navigation … they are still considered hotspots and won’t work. Sorry.
  • Placeholder images for videos will still be displayed but they will have a grayed-out play button with a line through it on the iPad, which means exactly what you think: No play.

So what’s an interactive PDF to do?

As a workaround from these interactive PDF shortcomings, Vodori is developing HTML5 Pepper Mobile apps. These apps are being developed specifically for Pepper Mobile (and mobile Safari) but will be fully functional on laptops as well. Hopefully you’ll soon see another entry from me about how HTML5 is the best thing since HTML 4 but until then, be safe and don’t open any interactive PDFs on your iPad until you’re on your desktop.

Writer’s Note: I don’t drink coffee so if any of my coffee-based commentary is untrue, blame TV, co-workers, and friends who fill my head with useless coffee knowledge.

 

Share Article

Dave Krawczyk

04/04/2014

0

10 Best and Free Tools & Resources for iOS engineers

Dave Krawczyk // in Technology

In my time as an iOS Engineer, I have discovered many resources and tools that make my life easier. Below, I’ve compiled a list of links in an effort to spread the love and hopefully make someone else’s day a little easier. For simplicity’s sake, I have only listed my top 10 free and essential tools and resources. Enjoy!

  1. oh-my-zsh

    This framework configures the Terminal to help you fall in love with git in the command line (and just Terminal in general).

  2. Alcatraz

    Check out this package management plugin for Xcode! Browse through and/or install a list of helpful plugins, color schemes, and project templates.

  3. AFNetworking

    A well-supported, open-sourced networking framework, AFNetworking, gets your app making network calls in minutes. (There is an AFNetworking template in Alcatraz.)

  4. Parse

    Using Parse, a cloud-based backend for your apps, will help you easily integrate with some very powerful functionality. Their tutorials are thorough and easy to follow.

  5. r/iOSProgramming

    Join this online community of iOS developers. A good mix of novice and advanced topics are discussed and you can contribute when you can! It’s also a great place to discover and share new tools and techniques.

  6. Meetup

    Check out this site to see if there are any mobile/iOS development meetups in your area. Many meetups consist of a tech talk where someone will present a new technique or tool. It’s also a great place to meet and network with people in the industry. At Vodori, we’ve hosted quite a few meetups for Axure and elasticsearch enthusiasts.

  7. TextMate

    This well-rounded editor has support for a wide range of languages, including JSON and Objective-C.

  8. Resizer

    This developer tool takes a @2x retina image (or a collection of images) and exports/renames the 1x version(s).

  9. FuzzyAutocomplete

    Use this plugin that enables Xcode’s autocomplete to be a little smarter (e.g. typing ‘cellForRow’ now brings up the ‘tableView: cellForRowAtIndexpath’ method).

  10. Simpholders

    No more digging for your iOS Simulator’s Application Directory with Simpholders. This simple utility keeps them in the top toolbar for easy access.

    Bonus Tool:

    You have to pay for this one, but it’s well worth the $39.99 cost.

SparkInspector
This tool is insanely helpful when trying to debug issues with your app’s UI. It allows you to navigate through the view hierarchy of the application to see exactly what’s going on with any view that is on screen or not. This is the only tool on the list that’s not free, but it does have a 30-day free trial.

 

Share Article

Salvador Gaytan

03/05/2014

0

How to Debug Mobile iOS or Android issues in your Local Environment

Salvador Gaytan // in Technology

When it comes to debugging issues on mobile, it can be a bit tricky, especially when you are dealing with security issues. You don’t want to deploy your code to a publicly accessible URL just so you can view it on your phone or tablet and see if the issue has been fixed. Consequently, if the issue hasn’t been fixed, another build will be needed, and in today’s day and age, application builds and deployment can take ages. However, thankfully, there are many workarounds to solve this dilemma. One instance I’ll explain is an Apache module.

The first step is to install and successfully run Apache from your computer. If you’re not already an expert at this, you can use XAMPP in order to complete this simple step. Once this is complete, you need to create a virtual host for the site in order for your mobile device to connect to this local host. Don’t know how to create a virtual host? Turn to my previous blog entry for more detailed instructions.

Connecting Apache and your virtual host

Now that you’ve got all the parts in place, let’s connect your virtual host and the Apache server.

  1. In your httpd.conf file, make sure that you uncomment the mod_authz_host.so module. This tells Apache to be aware of any incoming requests from the network.
  2. Next, make sure you have the words Allow from all appearing inside your <Directory> tags in your virtual host. This tells Apache to fulfill the request to your application to anyone on the network. If this is a security concern, you can say Allow from xxxxxxxxxxxx, where xxxxxxxxxxxx is the ip address of your mobile device. Refer to the documentation to see how you can add more complex filtering.
  3. Restart Apache.

Configuring your mobile device

In order to configure your Android and/or iOS device, you need to make sure that your development environment and your mobile device are connected to the same network.

For iOS devices:

  1. In Settings -> Wifi, tap your current wireless network.
  2. Scroll down to HTTP Proxy and select the Manual button.
  3. Under Server, enter your computer’s IP address. Under Port, enter whichever port your Apache installation is running from. We usually use a number like 80.
  4. After this, exit Settings. You should now be able to enter your development environment’s URL in your mobile browser.

For Android devices:

  1. In Settings -> Wifi, tap the network you are currently connected to. Hold the tap for a few second in order for the Modify Network screen to appear.
  2. Modify Network and check the Show Advanced Options box.
  3. Under Proxy Settings, select Manual.
  4. Under Hostname, enter your computer’s IP address. The port should be 80, or whichever port your Apache installation is running from.
  5. After this, tap Save. You should now be able to enter the URL to your development environment on your mobile browser.

And voilà! You should now be able to see your development environment on your mobile device so you can fix any bugs before actual deployment.

 

Share Article

Technology Team

02/28/2014

0

Top 5 list of mobile apps for developers

Technology Team // in Technology

While many of us use our phone to dominate Candy Crush or check out Buzzfeed, others prefer to use their phone to keep close tabs on the office. Developers are the most prone to be in the work mindset even away from the office, especially when deadlines get imminently close. So in order to assuage this, we have compiled a list of development-oriented applications for mobile that will help you out.

Bitbeaker
If you’re as attached to your code as we are, you’ll love the ability to access it anytime, anywhere. Bitbeaker allows you to view, report, and track issues on the go.

JsConsole
Need to test a small snippet of code but aren’t near your computer? This app allows you to test and debug Javascript from your Android. Solve problems handily from the comfort of your bus seat or bar stool.

Stack Remote
Access most of the content on Stack Exchange  and your inbox from this simple yet functional app. Stack Remote is read-only (i.e., you have to sign into the full site to post something), but it helps us keep a pulse on one of our most useful resources, even when we’re away.

HipChat
Chat, share code, and send files to your project teams. Hipchat makes constant collaboration a cinch, and the huge selection of emoticons (and the ability to upload your own) keeps conversations colorful.

Terminal Emulator
You don’t need to grab your laptop to create scripts. Instead, this app allows you to create scripts directly on your phone with this terminal emulator. The app supports multiple windows, so you can multitask. We also like that it supports VT-100 and xterm.

 

Share Article

Adam Childs

02/19/2014

0

Enhancing the front-end through the back-end with Vaadin

Adam Childs // in Technology

 

As a back-end, server-side developer at Vodori, it’s always nice to find subtle ways to make an impact in the front-end realm. With the popularity of web application programming steadily growing, the emergence of new technologies for this genre of back-end and front-end immersion seems neverending. Vaadin is a Java framework for building modern web applications, providing the security of back-end development while still creating a beautiful user interface.

Vaadin is a “swing-like” derivative for the web; built on top of GWT (Google Web Toolkit) for rendering web pages. Vaadin closely resembles the Swing API with it’s layout management and component architecture. The framework provides many predefined components that can be combined within multiple different layouts to create complex web applications. Vaadin has a few default “themes” (styling for components) which can be used out of box or extended by using custom CSS. Vaadin handles rendering the components on many browsers and devices, abstracting this complexity away from the programmer. Furthermore, many extensions/add-ons exist for Vaadin, including an integration with the Spring framework and many custom components.

The most exciting part about Vaadin is that any developer, with little front-end experience, can build a web application in no time (if they’re happy with the default themes of course). Another plus about Vaadin that is close to heart for programmers is the extensive documentation (Book of Vaadin and the Vaadin API).

Getting started with Vaadin is as easy as including the JAR (Java Archive) in your project or using your favorite dependency management tool to handle that for you (Maven, Ivy, etc.). To render a simple “Hello world” web page, the following would suffice:

import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;
@Title("Hello Window")
public class HelloWorld extends UI {
  @Override
  protected void init(VaadinRequest request) {
    // Create the content root layout for the UI
    VerticalLayout content = new VerticalLayout();
    setContent(content);
    // Display the greeting
    content.addComponent(new Label("Hello World!"));
  }
}

Visiting http://localhost:8080/HelloWorld will show the resulting page.

With Vaadin, not only is it possible for back-end developers to do front-end UI work, it’s also easy to use because of its extensive documentation. If you’ve ever been mystified by JavaScript’s closures and/or dynamic programming, but want to create more complex/interactive websites, give Vaadin a try.

 

Share Article

Grant Gochnauer

11/19/2013

0

Building Pepper on Elasticsearch

Grant Gochnauer // in Technology

Editor’s Note: This blog post originally appeared on the Elasticsearch Blog on Nov. 12.

Two and a half years ago, Vodori set out to redesign its enterprise content management system, Pepper, to deliver high-velocity digital marketing to our customers. With a global scale and complex content management and distribution requirements, Pepper had to be flexible, scalable, and of course, provide rich search capabilities. In 2010, we evaluated technologies that would enable us to meet our product goals and decided on two core technologies: Alfresco and Elasticsearch.

Why Elasticsearch?

Before diving into our decision to use Elasticsearch, it helps to understand a bit more about some of our requirements.

Content management systems base their data storage on an "object model" or "content model" allowing developers to specify how content types are defined and relate to one another in a system. For example, we might have an object called "Document" that contains properties such as "title" and "filename". We can then extend "Document" with a child object in our object model - a "WebDocument". It has additional properties such as "seoDescription" and "url". "WebDocument" inherits the properties defined on "Document".

Pepper provides an object model as part of the core product but allows (and encourages) implementation teams to extend this model depending on the business requirements for the solution being delivered. Alfresco provides its own “object model” out of box and we extend this concept significantly for Pepper in our searching paradigm. Because project implementations can contain widely varied content types and properties, we have to support the myriad ways our customers may want to search and filter content.

While Alfresco implements CMIS, the industry standard for interacting with content data (creating, updating, searching), the performance did not meet Pepper’s specific needs. Our challenge: how to get content out of Alfresco (and by extension, Pepper) in such a way that:

  • Implementation teams could write complex queries based on client-specific business requirements
  • The Pepper team could support more robust control on our searches including sorting, faceting, and paging
  • We could loosely couple Pepper’s user interface and business logic to the underlying data stores (Alfresco and other relational stores), enabling more elegant evolution of each tier

Enter Elasticsearch. After evaluating a number of technology options, we selected Elasticsearch because it met our requirements and also because of the trust we had in the people and product gained through the successful use of ElasticSearch founder Shay Banon’s previous technology, Compass. By introducing this facade layer on top of Alfresco, we not only introduced a high performance and scalable way to interact with our data, it also gave us complete control of how we search content.

Using Elasticsearch in the Pepper Library

One of the many ways users can find and interact with content is through the Pepper Library.

We allow customers to toggle a number of parametric filters as the results appear through an endless scroll list. Elasticsearch provides everything we need to implement this user experience out of the box.

When users toggle filters along the left panel, we simply construct the appropriate Elasticsearch query using the TermsFilter combined with a BoolFilter and Elasticsearch immediately provides the data we need.

We also provide for free text search by using the search box in the upper right corner of the Library. Thankfully this is also extremely easy to do with Elasticsearch - even when searching with the left panel filters applied. If a user types in a search query, we simply append a Match Query to the existing BoolFilter in our previous query. Elasticsearch happily returns what we asked for. We can further customize the way free-text search works by implementing custom Index and Search analyzers for each property.

Modeling Content in Elasticsearch

One of the challenges we faced when building our architecture was making it easy for product engineering to create content models without worrying about the details of Elasticsearch. Similarly, we wanted to provide a layer of abstraction so that our implementation teams could focus on the client solution and not on the intricacies of Elasticsearch mapping and index creation.

We built a framework that allows us to annotate our Java content object model in such a way that generates Elasticsearch mappings that abstract the complexities from our engineers. Our framework provides the contract between our product API’s and Elasticsearch.

In this example, "logicalName" represents the filename of a document exposed to the end-user which is different than the system generated physical filename we store in Alfresco. With our @ElasticSearchProperty annotation, we can specify the following:

  • type: This is the field type that Elasticsearch uses to define how this value is indexed
  • filterable: Whether we want to be able to use Elasticsearch Filters on this value. When set to true, we don’t want to analyze the values.
  • freeTextSearchable: Whether we want to index the analyzed value for free text searching.
  • searchAnalyzer: The custom analyzer we use when searching.
  • indexAnalyzer: The custom analyzer we use when indexing the document.

When using a combination of "filterable" and "freeTextSearchable" we index the value in a "multi_field" type in Elasticsearch so that we can use either the analyzed or non-analyzed value. Our framework is smart enough to know when to use each.

Parent/Child Relationships

The other Elasticsearch modeling feature we use heavily is Parent/Child relationships. We needed to support the ability to manage and distribute a single document in many different distribution channels (Website, iPad, social media, etc). By leveraging the Parent/Child relationships, we can index a single source document which represents the canonical binary asset and an "index card" that represents a pointer back to the source document with additional descriptor metadata. We can then create additional index card objects in each channel of distribution, all pointing back to the same source document. The index card becomes the parent document with the source document becoming the child document.

Our framework also extends this idea with another annotation on the child source document:

So why would we want to use a parent/child relationship in this way? Among other things, it allows us to write really interesting queries to fetch all content for a distribution channel while also filtering on values in the source document. Let’s look at two examples.

Our customers store product marketing and catalog data within Pepper. As we mentioned earlier, this content is leveraged across many different distribution channels. As a global marketing manager, I may need to search across the entire content ecosystem and find where a particular set of documents are being used. With Elasticsearch and our Parent/Child relationships, we can execute queries that answer this question by leveraging the has_child filter. We simply search for child documents with a specific attribute value (e.g. productCatalogId) and Elasticsearch will return all the parent documents. Parent documents represent our "index card" which is specific to a distribution channel and contains specific usage metadata for that channel.

{
  "from": 0,
  "size": 2,
  "filter": {
    "has_child" : {
      "type" : "com.vodori.pepper.content.model.document.PepperWebpage",
      "query" : {
        "term" : {
          "productCatalogId" : "CRX1234A"
        }
      }
    }
  }
}

We also need to be able to serve and query content by distribution channel. For example, when our iPad application, Pepper Mobile, needs to fetch all the content approved for consumption from within the iOS application, we can perform this search using the has_parent filter. In this case, we want to find child "source documents" where the parent object has a specific attribute value such as a distributionChannelId value of 5.

{
  "from": 0,
  "size": 2,
  "filter": {
    "has_parent" : {
      "type" : "com.vodori.pepper.content.model.descriptor.PostDescriptor",
      "query" : {
        "term" : {
          "distributionChannel" : "5"
        }
      }
    }
  }
}

What’s next for Pepper’s usage of Elasticsearch?

We have a number of new features on our roadmap that will be based on Elasticsearch. A few examples include:

  • Index Aliasing: This will allow us to rebuild our Elasticsearch Index while the existing index remains in service. Once complete, we can simply update the alias so that Pepper points to the newly rebuilt index. Zero downtime.
  • Updating Mappings API: Elasticsearch provides capabilities to update its mappings on the fly, which means that when we release new versions of Pepper, it will be smart enough to inspect the current mappings and apply an update to the index based on changes in the Product version requirements.
  • Distributed Percolator: We are very excited about this 1.0 feature because it will allow us to build a mechanism for our customers to subscribe to content updates in the system and be notified of any kind of relevant changes or compliance issues that they specify. It allows our products to be proactive about what’s going on in the system based on arbitrary business criteria defined by our customers. Very exciting.

The supportive Elasticsearch community

It has been really exciting to see the Elasticsearch product and team grow over the last two years. The Elasticsearch community has been fantastic and really reinforces the fact that we made the right decision on our choice to use Elasticsearch. In fact, we were lucky to host two Chicago Elasticsearch Meetups on Oct. 24 and Nov. 18 with representatives and developers from Elasticsearch and hear from others in the Chicago area on how they use Elasticsearch.

We think that this technology will continue its growth into new industries and applications as more companies realize the power and flexibility of Elasticsearch. We are excited to be a part of that growth.

 

Share Article

David Hunt

10/30/2013

0

Revealing What Makes the “Elastic” in Elasticsearch

David Hunt // in Technology

When you pull back an elastic band, it snaps back. Quickly. The material allows you to pull, tug and otherwise deform the band before snapping it back into place, seemingly untouched in its place. Flexibility at the speed of sound is a fair description of an elastic band's properties. It's also not a bad way to describe one of the tech industry’s hottest search software, Elasticsearch.

On Oct. 24, Vodori hosted developers from around the Chicago area to discuss this popular technology as part of the Chicago Meetup series. The event gave a high-level look into a technology that is being used around the 'net, including Vodori and other small to large software companies.

Shawn Sickler, the senior director of sales at Elasticsearch, opened the meetup by giving a brief introduction to the software and the technology industry in general. Later, Steve Mayzak, a member of the Elasticsearch sales engineering team, broke down the technological details that make Elasticsearch, well, elastic.

About 25 developers, which included several Vodorians, munched on sandwiches while Mayzak explained how Elasticsearch can hold JSON data in a non-relational database. The “clusters” that make up the database have the capacity to hold and retrieve any type of data, as long as it can be put into JSON format (i.e., one of the most popular forms of data transport on the web).

Mayzak discussed in detail the plug-ins and tools being used in conjunction with Elasticsearch today – several of which have been developed by the Elasticsearch development team, such as Kibana, a tool to let you visualize data in a more efficient way.

As more developers have opened up to the benefits of Elasticsearch, the more the technology will expand. Those who are getting exposed to it will be poised to develop at the speed of sound.

If you missed out on this first Elasticsearch meetup, never fear because Vodori is also hosting the next Elasticsearch meetup on Nov. 18. Two core developers from Elasticsearch, Uri Boness and Zachary Tong, will be joining us to continue the Elasticsearch conversation. RSVP today!

Event Details


What: Elasticsearch User Group Meetup

When: 6 p.m., Monday, Nov. 18

Where: 315 N. Racine, Second Floor, Chicago, IL

Other important details: Food and beverages will be served. Doors open at 6 p.m.

To RSVP (space is limited to the first 45 participants) or for more event details, visit the meetup page for the Chicago Elasticsearch User group.

 

Share Article

Adam Childs

10/23/2013

0

Join Us for the Next Two Chicago Elasticsearch Meetups

Adam Childs // in Technology

Elasticsearch is the heart and soul of what powers Vodori's software, Pepper. That’s why we’re excited to have the opportunity to host the next two Chicago Elasticsearch meetups on Oct. 24 and Nov. 18. We welcome all software developers and fellow techies in the Chicago area to join Vodorians and Elasticsearch speakers for some fun and insightful evenings.

Elasticsearch is a “flexible and powerful open source, distributed real-time search, and analytics engine for the cloud.” Elasticsearch provides the necessary tools for software projects of any size; it’s very easy to maintain and to scale as your software grows. Elasticsearch powers software not only for companies like Vodori, but for other large scale software companies, including GitHub, Stackoverflow, SoundCloud and StumbleUpon.

At these meetups, we will share our experiences using Elasticsearch as the core technology for Pepper, our enterprise content management system. You’ll hear about how we created JAVA libraries to assist in generating Elasticsearch mappings based on Java objects and we’ll describe how we filter and search for content. Elasticsearch enables us to provide a high level of functionality to our end-users not previously possible through standard query capabilities in traditional CMSs.

In our October meetup, attendees will also hear from Steve Mayzak of Elasticsearch. In November, we expect to have one or two of the core Elasticsearch developers join us.

We look forward to seeing you there!


Event Details


What: Elasticsearch User Group Meetup

When: Thursday, Oct. 24, 2013 at 6:30 p.m. or Monday, Nov. 18

Where: 315 N. Racine, Second Floor, Chicago, IL

Other important details: Food and beverages will be served. Doors open at 6 p.m.

To RSVP (space is limited to the first 45 participants) or for more event details, visit the meetup page for the Chicago Elasticsearch User group.

 

Share Article

Salvador Gaytan

09/26/2013

0

From Front End to Back End

Salvador Gaytan // in Technology

Hello, and welcome to the Vodori blog once again, or if you are a new visitor, welcome all the same! Avid regulars no doubt already have some knowledge that Vodori employs software design patterns, as well as being able to run multiple local sites during development. However, do not distress if you haven’t read those blog posts. We shall journey back a bit and define a system and its components from the front end to the back end for web application programming.

The Front End

Upon firing up any web application, you may be greeted by all sorts of visual elements: images, links, backgrounds, and in some instances, music and video. In general, the “front end” encapsulates all items that a user can manipulate on a web page. A front end programmer/coder writes all of the code that you, the user, can manipulate via a click, drag, touch, or type. Go ahead, try it! On IE10, press F12. On Firefox and Chrome, right click and then choose “Inspect Element” from the list. Find a tab that says “Console”, and type document.body.innerHTML = null.  After you pressed “Enter”, what happened? Hopefully the page has disappeared. And don’t worry, you have not erased the page from the Internet. No, this was JavaScript code that just told the browser to clear the contents of the webpage.


Has the realization hit? You just wrote JavaScript that obliterates pages in one line, but also you now have discovered that JavaScript is indeed a front end technology. By definition, JavaScript falls within the boundaries of “all items that a user can manipulate”. Exceptional readers may realize that JavaScript was just the tool of web terror we just saw, but HTML was the victim. Therefore, HTML must also be a front end technology, and indeed it is. The only technology spared in this experiment was CSS. JavaScript, HTML and CSS are the trio of languages that make up the foundation of all front end web technologies. You see them in action often because they are rendered on your computer screen in the pretty colors, fonts, images and buttons that you see on a website.

The Back End

So where does the back end play into this? Well, that’s a little more tricky because the back end can’t be seen on your computer. The closest you can get to discovering back end code at work is when you submit a form on a web page. The information submitted on a form is sent out to the Internet to a machine called a server. This is where all of the back end code is run. It contains the logic of where to store this data and where to direct you when processing is complete (i.e. a “Thanks for your submission!” page). Java, PHP, Python and Ruby are common back end languages. The back end is usually defined as the place where the user interface meets some business logic, whether it happens at a form submission, or sending a user’s time spent on page to the server. Sometimes, the term “back end” is broadened to include database and content repository structures, but in our web application example, we will not discuss where those fall.

Journey’s End

It is at this time in our journey that we must part ways. Vodori offers many positions in both the stylish art of front end development and the robust field of back end coding where you may continue to master your skills.

 

Share Article

Mike Volovar

08/28/2013

0

LESS: The Dynamic Stylesheet Language

Mike Volovar // in Technology

Introduction to LESS

LESS is a CSS extension that is fondly known as "The dynamic stylesheet language." It adds a new set of functionality to the creation of stylesheets, enabling more flexibility in CSS. One of its best features is that plain CSS can be written in a LESS file without any problems.


Benefits of LESS

LESS adds many features, but the most noticeable one is the ability to nest CSS selectors inside one another. It may not be the fanciest feature but it is one of the most widely used. Instead of rewriting class names to target specific elements, LESS allows them to be nested, which speeds up the creation of stylesheets.

Another feature of LESS is the ability to define variables and use selectors as mixins. Variables are defined with an @ symbol and are an easy way to update properties throughout a site. Each variable has a value that will be compiled into CSS. So if there is a color that will be used in multiple places, it can be defined in the variable @main-color and set to the color red. Anywhere @main-color is used (such as background: @main-color), it will be output as the variable value (background: red).

Mixins work in a similar way to variables, but are selectors instead of newly created variables. If a selector is nested inside a rule without the brackets (such as .bordered), it will be output with any of the rules of that selector (.bordered will be replaced with border: 1px black solid).

How Vodori uses LESS

It's possible to process LESS on the server-side or client-side. Client-side processing loads Javascript in the visitor's browser and then processes the LESS file into CSS. Server-side processing creates the CSS on the server before sending the files to a visitor's browser, which is the way we implement LESS at Vodori. In addition to using nesting, variables and mixins, a major benefit is the ability to reload LESS without reloading the page. This speeds up the ability to test new styling while a site is in development.

LESS in a nutshell

The features of LESS make it a worthy addition to any web developer's toolbox. It simplifies coding selectors and makes updating stylesheets easier. With its similarities to CSS, LESS is easy to pick up and understand. I’ve just covered the surface of the benefits of LESS in this blog post so if you want to read about them or see what new features are in development, check out their official site.

 

Share Article