Stylish, and accessible, ordered lists with LESS CSS

The design process for most front end designers has evolved over the last few years to remove Photoshop from the workflow, to one where the design goes from wireframe to browser as soon as possible. It allows us to work faster and present a design concept that can be viewed on multiple screens and devices right off the bat.

The basic design concept for the login and signup pages for the MAGICapp project called for a numbered list of the benefits of creating a new account. In years past I might have used icons or images crafted in Photoshop to achieve the desired look, but with what can be achieved in CSS, it’s possible to be able to create the design in code that renders well on all screens and devices. Here is a screenshot from the Balsamiq wireframe that shows the basic list design:

Obviously this should be coded as an ordered list. It’s semantically correct to do so and it’s also nice that it can still be accessible to screen readers. Basically, when the CSS is disabled, it should still render as a numbered list. But, the biggest design challenge with styling ordered lists in CSS is figuring out how to target the numbers separately from the text as shown in the wireframe above. Here’s the solution I came up with.

Standard html for the list:

And the basic CSS for the list and first list item:

It seems a little backwards, but to style the numbers required hiding them from the list by using ‘list-style: none’ in the CSS and then inserting the numbers as content in the :before tag of each list item. Using nth-child, each list item can now be targeted in order. Then, just make as many nth-children as the list calls for. This becomes very redundant listing out the same CSS values over and over for each list item. Using LESS, these common CSS values can be made as a mixin that can be pulled into the main stylesheet when needed.

The first basic mixin we’ll need is one for the border radius of the circled number:

Next, is a mixin for the circled numbers that are displayed in each of the list items. The .border-radius() mixin being used. Having a common element like this as a LESS mixin allows for much easier style changes across the app, making design in code much more practical. These numbers can be styled however you want.

And lastly a function that can be called from the main LESS stylesheet to generate the CSS for each of the list items.

So, now anytime in the main LESS stylesheet when I want to use this style of ordered list, I just call the function as you can see in the updated example below. This is for a list with 5 items in it.

And here it is all together. I hope this is helpful to others out there.

See the Pen qDuBl by Rob F (@robfracisco) on CodePen.

Get in touch

Let us know about your CSS tips and tricks in the comments or reach out to us with your web development questions or needs.

Passing arguments to Intern tests

theinternWe have started to use Intern to test MAGICapp, a medical guideline authoring application we are currently working on. I wanted the flexibility to run a test against any of our environments and didn’t want to hard code the server host name into the test. After looking through the Intern wiki and related blog posts I found nothing to explain how to pass an arguments into a test.

Digging in the source of the Intern I found ‘intern/lib/args‘ which has the following comment in the top of the file:

So if you include ‘intern/lib/args’ into your tests you’ll be able to pass the host you want to test against. You could pass other things like if the test should be ‘read’ or ‘write’ as you may not want to run tests that change data again your production application.

You can then pass arguments via the command line when you start you tests.

Feel free to reach out to us with your web application automation questions or needs.

Interview on Dojo site for MAGICapp JavaScript development

Our very own Deno Vichas was interviewed by Dylan Schiemann, CEO at SitePen, and co-founder of the Dojo Toolkit for Dojo’s Case Study Series.

magicapp2-1024x614Deno talks about managing complex JavaScript web applications and developing rich user interface components using Dojo.

MAGICapp is a cutting edge clinical practice guideline authoring and publishing application used by evidence based medicine practitioners and is featured for the interview.

MAGICapp was developed from the ground up by the Fullstack team and makes extensive use of the Dojo Toolkit.

Read more »

HTML multi select with ordering on JSFiddle

jsfiddle-htmlJSFiddle is a great tool for interactive JavaScript development and prototyping.

I needed an HTML select where the user could change the ordering and select to edit the values. Developing this interactively right in the browser made it easy to quickly see updates.

Here’s a live demo on JSFiddle of the finished product implemented in JavaScript with some help from Dojo:

http://jsfiddle.net/denov/ShLrs/

 

 

Database restore with Elastic Beanstalk

So you have an Elastic Beanstalk environment with an RDS instance with automated backup and you just hosed your database and need to restore.

aws

At first you may think this should be a quick and simple process until you try to restore your database. With RDS you can only restore a backup to a new instance. This seems reasonable until you figure out there’s no way to change your RDS endpoint in your Beanstalk environment, or at least no solution was readily available in the documentation. You also can’t create a new environment from an automated backup.

Here’s the steps I used to solve this problem:

  • Restore the database to a new RDS instance.
  • Make a manual backup of this new RDS instance.
  • Create a new Beanstalk environment using your manual RDS backup.
  • Test to make sure everything is working as expected.
  • Update URLs or DNS to make sure traffic is routed to your new environment.

Let us know in the comments if you found a better solution or this saved you some headache.

 

SQL IN like query with Dojo stores

Sometime you need a little more that passing an object to query() of a Dojo store to do a simple compare of a property or two. In those cases you can pass a function that returns a boolean. As an example say you want to return the object where the key is in a list. You can use the following:

Here’s a demo using a FilteringSelect dijit – http://jsfiddle.net/denov/3FQxf/