Posts about front end development

  • Responsive imagemap with highlighting, using SVG

    Implementing a CSS- and SVG-based responsive imagemap for a client in Toronto.

    Read more

  • Why using BEM for your CSS is a good idea

    Four years after writing that BEM syntax in CSS indicates weak coding principles, it’s time for a retraction.

    Read more

  • Scrrenshot of Rachel Andrew's website, built using CSS Grid

    The wonders of CSS Grid

    I’m beginning to delve into the newest extension of the CSS style rule possibilities at a professional level, in order to design and create websites which break the mould.

    Read more

  • Simple CSS specificity rule guide

    There are a few ways to apply CSS styling rules to an element. Each one is less or more specific than another. Applying a rule using a class selector when you’ve applied a different rule using an ID selector won’t work. Batificity isn’t the CSS specificity guide you deserve, but the one you need right now, […]

    Read more

  • Responsive imagemap with interactive highlighting function

    A short post to help anyone who is looking to implement a responsive HTML imagemap, which also features an interactive highlighting function.

    Read more

  • Technical case study: CSS Flexbox for BEKB Flash

    CSS Flexbox has been ready for mainstream use for a while now, and I’ve implemented it on a third client project for my employer.

    Read more

  • Optimizing layout changes with separate CSS files

    HTTP/2 allows you to separate your CSS, JavaScript and other template resources into individual files, without running into problems with multiple requests.

    Read more

  • The CSS :not() selector

    One of the best CSS tips I’ve come across in recent months is the :not() selector. Rather than having to define a set of rules for an element, then re-defining new rules for the element when it has a certain class or attribute, you can use :not() to be more specific in the first place. […]

    Read more

  • Technical case study: !frappant

    My employer re-branded recently, which meant a new corporate identity and a new website using Zurb Foundation, CSS Flexbox and TYPO3.

    Read more

  • Avoiding specificity issues in CSS

    Holy moly. What a discussion we’ve gotten into over on Twitter about CSS specificity, BEM, and inheritance. I wrote yesterday that the idea is flawed and tries to work around problems which aren’t actually problems at all, but part of the language of CSS. As Duncan noted: the problem is actually, “people write bad CSS”. Dirk from […]

    Read more

  • Why using BEM for your CSS is a bad idea

    I came across the BEM (Block, Element, Modifier) technique for CSS coding today. On reading half a dozen basic introductions to the technique, I saw immediately that the concept is based on weak coding principles, not code simplicity and reusability.

    Read more

  • Adding diagonal edges to HTML elements

    Using CSS pseudo elements to add diagonal borders and edges to the sides of block level elements.

    Read more

  • CSS Reset done properly

    A CSS Reset (or “Reset CSS”) is a short, often compressed set of CSS rules to reset the styling of HTML elements to a consistent standard. I’ve rolled my own; based on my own experience of CSS programming over the past fourteen years and based on other, well-known reset files.

    Read more

  • Can I Use…?

    The most useful website I’ve found to use over the past year for front-end web development is “Can I Use” by Alexis Deveria.

    Read more

  • CMS: separating authorship from layout

    My first job in Switzerland was for a newspaper publisher, where I remained for seven years whilst co-developing a newspaper and website publishing system. Building on the basic experience I was gaining whilst making little blogs using b2/cafelog – on which WordPress was built – this phase of my career was where I learned to […]

    Read more

  • Percentage-based CSS column layouts

    Laying out a page using percentage-based columns seems to be pretty easy. However, in responsive layouts, you’ll quickly run into problems if you don’t take legibility into account. The most obvious case is when the columns are predominantly text-based, where a suitable gutter between the columns is essential for the sake of legibility. (If you […]

    Read more

  • Cleaner layout and better navigation

    If you’re reading this on the website (and not in an RSS reader or the like) then you’re seeing the new version of the website. Similar to the old one in general terms, but re-built (again) from the ground up using LESS and a dusting of jQuery. There are new features and content pages coming, […]

    Read more

  • Image gallery grid layout

    Information about the technical solution I’ve implemented for the grid layout in my photo galleries here on the website.

    Read more

  • Technical case study: Bike To Work

    Back in 2011, the organizers of Bike To Work Switzerland approached my employer !frappant Webfactory to re-develop their website and the participants’ admin system. I worked with a third-party usability consultant to re-think and re-design the project, before I carried out the design work in Photoshop and the team and I subsequently produced the website on the base […]

    Read more

  • Help navigating breakpoints when coding responsive layouts

    If you’re like me, a web developer, and programme responsive web layouts using @media queries, you’ll often get lost knowing precisely which set of rules are currently applied to the page. Here’s a handy tip to make things easier.

    Read more

  • Good things

    Cool new techniques for creating responsive websites and for saving you loads of time when writing CSS are helping me to rebuild the technical infrastructure of this (and other) websites.

    Read more