Louis is a dev blogger at Impressive Webs, author, and is currently SitePoint's HTML and CSS editor. He loves all things front-end, and curates Web Tools Weekly, a newsletter for front-end developers primarily focused on tools.

Louis's articles

  1. 11 CSS Learning Tools and Resources

    The industry of late has been overrun with articles, tutorials, and tools focused on Sass, even here on SitePoint we’ve been publishing more Sass content than ever before. But we haven’t forgotten about our roots: CSS. For those of you still learning CSS, or wanting to go a little deeper into specific CSS subjects, I […]

  2. What are You Going to Learn This Month in Front-end Development?

    In March, I wrote an article on the abundance of tools and technologies in the industry today, and how overwhelming it can feel. The article resonated nicely with many in the industry.

    Many agreed that although we are ‘drowning’ in tools, and it can be intimidating, the best approach is to focus on the tools and technologies that are going to help us become more productive and solve problems.

    So I thought it would be cool to open up the discussion and ask everyone: What are you going to learn next?

    Is it a new language? A new CSS framework? A grid system? Maybe you haven’t touched Sass yet (shame on you! :). Maybe you want to become more familiar with a back-end technology, to complement your front-end stack. Or maybe it’s a new JavaScript library or framework. Whatever it is, I’d like to hear about it.

    But I’ll go first.

    What I’ve Neglected

    Here’s a short list of some stuff I’ve been meaning to enhance my understanding of (or get started with!) and that I’ve simply procrastinated for far too long:

    SVG

    SVG is huge and it’s here to stay. It has great browser support, and can be polyfilled or you can declare some kind of fallback or conditional. A great starting point is Chris Coyier’s recent SVG roundup. There’s also SitePoint author Joni Trythall’s upcoming SVG book (if you haven’t noticed yet, Joni is becoming to SVG what Hugo is to Sass).

    In addition to the tons of articles and tutorials on the subject, there are a number of SVG-related tools worth looking into, many of which I’ve listed in my newsletter.

  3. Get Paid to Write About HTML, CSS, and Sass!

    Since I took over as Managing Editor of SitePoint’s HTML and CSS content, I’ve been constantly on the lookout for new authors.

    In addition to my usual one-on-one contacts, I thought it would be helpful to spread the word by means of a post to let everyone know what we’re looking for and how you’ll benefit from writing for SitePoint.

    First Things First: What’s the Pay?

    SitePoint pays $150 for articles and $200 for tutorials. A tutorial is generally any in-depth article that has either a demo or code download link or that is very code-heavy in general, even if it doesn’t have an actual demo. We are also willing to pay $300 or more for articles and tutorials that are lengthier and that we feel will do well traffic-wise.

    If you provide us 3 articles or tutorials per month, that could be anywhere from $450 to $600 per month in supplemantary income. Not a bad deal.

    Now that I’ve lured you in, let’s discuss the types of content I’m looking for.

    Write About CSS

    CSS is constantly a hot topic in the community, so I’ll always consider a CSS article or tutorial idea. Below are some tips for what we’re looking for in CSS content:

    • Demos! We’re using SitePoint-themed CodePen embeds for our demos on the HTML and CSS channels. Articles with at least one embedded demo almost always do well.
    • A good handle on the subject from a standards, browser, and compatibility standpoint. CSS is not a new subject, so it’s important that authors show a good grasp of the subject being covered.
    • Coverage of a popular CSS framework, tool, or library. For example, pretty much anything with “Bootstrap” in the title will do well, but the key is to provide something fresh and new.

    For reference, here are our top 5 CSS articles from this year, by traffic:

    1. 12 Little-Known CSS Facts
    2. Understanding Bootstrap Modals
    3. Beyond Bootstrap and Foundation: Frameworks You’ve Never Heard Of
    4. The Current Generation of CSS3 Selectors
    5. The Power of em Units in CSS

    Just to illustrate how much people enjoy articles on obscure CSS tips, the first article on that list has accumulated about as much traffic as all the other four combined!

    That should give you an idea of what kinds of things get high amounts of traffic in the realm of CSS.

  4. 5 Libraries and APIs for Manipulating HTML5 Audio

    Over the past few months, I’ve come across a number of different libraries that take advantage of the relatively new HTML5 Audio API as well as the more well known HTML5 Audio Element and its simpler API.

    I thought I would share a small handful of these libraries in this post to show you what’s possible and what options you have if you choose to create a game or app that requires manipulation of sound files.

    Some of the demos included with some of these libraries are pretty nice, and the code for each of these is pretty clean and easy to use.

    webaudiox.js

    Webaudiox.js is not quite a library, but a set of helpers for using the Web Audio API. It has zero dependencies and will work in any browser that supports the Web Audio API.

    The documentation provides a simple code example in the form of a boilerplate, as follows:

    [code language="javascript"]
    // after including the webaudiox library
    var context = new AudioContext()

    // Create lineOut
    var lineOut = new WebAudiox.LineOut(context)

    // load a sound and play it immediatly
    WebAudiox.loadBuffer(context, 'sound.wav', function(buffer){
    // init AudioBufferSourceNode
    var source = context.createBufferSource();
    source.buffer = buffer
    source.connect(lineOut.destination)

    // start the sound now
    source.start(0);
    });
    [/code]

    As indicated in the first code comment, the webaudiox.js helpers file must be included first in order for this to work.

    That doesn’t tell us a whole lot about these helpers other than how their syntax looks. To see how it works, take a look at the analyser2canvas Helper. This helper takes advantage of the AnalyserNode Interface to display a visualisation of the played sound in real time.

    webaudiox example

    The webaudiox.js GitHub repo has a number of other examples to try. Naturally, in order for these demos to work, your browser has to support the Web Audio API (more on that later). This set of helpers is not a polyfill, so if you need older browser support, this would not be a good choice unless you were planning to couple this with another script or library, or some kind of fallback.

  5. Will “Specifiction” Improve the Standards Process?

    Those of you who are interested in following how various web development specifications are progressing might want to check out a new project called Specifiction. The aim of the site is to help encourage open discourse on the evolution of web standards, without all the trouble involved in doing so. To quote their welcome message: […]

  6. Using modern.IE to Identify Common Coding Problems

    This article was sponsored by Modern.ie. Thank you for supporting the sponsors who make SitePoint possible!

    By now, many of you are probably familiar with modern.IE and many of the testing tools it offers. One of the lesser-known features of this project is the Site Scan feature that, according to the modern.IE team, allows you to scan your website “for common coding problems to make sure users get the best possible experience”.

    You’ll definitely want to check out this tool and in this post I’ll describe exactly what it does.

    You can access the tool by entering a URL in the appropriate field on the modern.IE home page, highlighted below:

    Site Scan on modern.IE

    Or by going to the Browser Testing Report page, which is the main page for the Site Scan feature where you’ll see the results of your scan:

    Browser Testing Reports page

    For this article I’ll be using my own website, Impressive Webs. I haven’t redesigned or recoded it in almost two years, and it’s a WordPress site, so I think it’s a good candidate to allow us to see some interesting results.

  7. 20 Useful Docs and Guides for Front-End Developers

    I come across so many interesting info-apps and documents in my daily research, so I thought I’d provide a list of those here.

    True, not everyone likes the “list post” or roundup, but hey, we can’t please everyone. And we don’t do these types of posts too often anyhow.

    In this case, this is a great way to bookmark a few things maybe for some evening or weekend reading. I guarantee you’ll find at least a few links in here that you’ll want to come back to.

    Enjoy!

    1. CSS Vocabulary

    A great point-and-click little app to get you up to speed with all the different parts of CSS syntax and what the proper name for them is.

    CSS Vocabulary

    2. Liquidapsive

    A very simple informational layout that, by means of a select box, lets you choose between Responsive, Adaptive, Liquid, and Static, so you can see what is the difference between the four layout types.

    Liquidapsive

    I imagine this would be nice even to show to clients, so they can see how things adjust using the different styles.

    3. Superhero.js

    A collection of the best articles, videos, and presentations on helping to maintain a large JavaScript code base.

    Superhero.js

    Included are some general principle-type stuff, sources on testing, tools, performance, security, and more.

    4. HowToCoffeeScript.com

    A cheat sheet for learning and remembering CoffeScript syntax.

    HowToCoffeeScript.com

    5. The HTML Landscape

    This is pretty interesting. It’s a W3C document that describes the “perceptible differences” between three HTML specifications: WHATWG, W3C’s HTML5.0, and W3C’s HTML5.1.

    The HTML Landscape

    Might be a little overly technical, but you might be able to find some interesting new stuff here.

  8. 12 Little-Known CSS Facts

    CSS is not an overly complex language. But even if you’ve been writing CSS for many years, you probably still come across new things — properties you’ve never used, values you’ve never considered, or specification details you never knew about.

    In my research, I come across new little tidbits all the time, so I thought I’d share some of them in this post. Admittedly, not everything in this post will have a ton of immediate practical value, but maybe you can mentally file some of these away for later use.

    The color Property Isn’t Just for Text

    Let’s start with the easier stuff. The color property is used extensively by every CSS developer. Some of you not as experienced with CSS may not realize, however, that it doesn’t define only the color of the text.

    Take a look at the demo below:

    See the Pen CtwFG by SitePoint (@SitePoint) on CodePen.

    Notice in the CSS, only one color property is used, on the body element, setting it to yellow. As you can see, everything on the page is yellow, including:

    • The alt text displayed on a missing image
    • The border on the list element
    • The bullet (or marker) on the unordered list
    • The number marker on the ordered list
    • The hr element

    Interestingly, the hr element, by default does not inherit the value of the color property, but I had to force it to do so by using border-color: inherit. This is kind of odd behaviour to me.

    All of this is verified by the spec:

    This property describes the foreground color of an element’s text
    content. In addition it is used to provide a potential indirect value
    … for any other properties that accept color values.

    I can’t think of anything else that would qualify as ‘foreground’, but if you do, let us know in the comments.

  9. The Power of em Units in CSS

    With every complex feature in CSS, you’ll always have that turning point when you see how truly powerful the feature is. And, believe it or not, my personal turning point with ems came long after I wrote a pun-filled introduction to the subject.

    Although I understood ems fairly well by that point, I really started to see how powerful they are when I read Simurai’s post on Medium called Sizing (Web) components.

    So I’m going ride his coattails in this post. Here you’ll find a quick introduction to em units, followed by a live demonstration of the technique he describes.

    What are ems?

    In CSS, an em unit is equal to the computed font-size for the element to which the em is applied. When em units are declared on child elements that don’t have a font-size defined, they will inherit their font-size from their parent, or from another ancestor element, possibly going all the way back to the root element on the document.

  10. Drowning in Tools in the Web Development Industry

    Every once in a while in this industry we need a reminder that our trade as front-end developers — and I say this in the most positive way possible — can be a frustrating thing.

    A few years ago when I mocked the number of frameworks and libraries that were proliferating at the time, and poked fun at the manner in which they were being presented, that whole concept seemed to strike a chord seemingly with everyone in the industry. That website went viral and I don’t remember a single person saying that I was out of line for making light of the situation.

    “Oh, your head hasn’t exploded yet? This should do it.”
    H9RBS.js

    Amazingly, we might be in an even worse situation today.