Rationalizing Functional CSS

This post by Marcelo Somers looks at the good and bad parts of writing functional CSS.

I loved writing really clever, powerful CSS classes. I argued for it because of “ease of developer consumption.” My goal was that a developer could add a single class to an element and it would automagically do everything for them. Basically, the opposite of functional CSS.

3 months into a functional approach to CSS architecture, I’m addicted. The times I’ve used the old monolith approach, it’s become a tedious challenge in jumping between files constantly. I think I’m convinced, but I’m still trying to rationalize scalability issues as my functional codebases grow and evolve.

I’m a massive fan of functional CSS and would highly recommend experimenting.

jQuery 3.0 Final Released!

jQuery 3.0 is now released! This version has been in the works since October 2014. We set out to create a slimmer, faster version of jQuery (with backwards compatibility in mind). We’ve removed all of the old IE workarounds and taken advantage of some of the more modern web APIs where it made sense.

In a nutshell:

  • Faster
  • Deleted oldIE code
  • Slim version (removes ajax/effects)
  • Promises/A+ Deferred

What are you waiting for! Go and update your version of jQuery


Instant visual diffing with CSS blend modes!

A handy little site built by Una Kravets that enables you to easily compare your development site against your production one. Oh and you can even test locally hosted addresses which is awesome.

A Look Into Web Design Weekly

The team over at Campaign Monitor did a little interview with me that looks into how Web Design Weekly has grown over the years.

Web Design Weekly doesn’t just incorporate email marketing into their marketing tactics — it IS email. Jake uses Campaign Monitor to grow his audience and believes that consistency is the key to his success. He’s kept it simple, and that’s worked extremely well for Web Design Weekly.

CSS and Scalability

When I read about or listen to ideas on how to scale an app’s css – most of the talk is about how to write css. The real way to scale css, is to stop writing css. Abstract out the things you use most and move to a multi-class pattern where you compose visual patterns in your html. You might be amazed at how quickly your team starts to move.

If you write CSS, this is a must read.

CSS Stats

Adam Morse and Brent Jackson just pushed a nice new update out.

If you are in need of gathering some quick insights into your CSS, this is your tool.

AM – Attribute Modules for CSS

Glen Maddern:

Attribute Modules (AM) is a technique for using HTML attributes and their values rather than classes for styling elements. In doing so, each attribute effectively declares a separate namespace for encapsulating style information, resulting in more readable and maintainable HTML & CSS.

A super interesting concept developed by 3 talented individuals. Looking forward to digging into it a little further.

Documentary about Jeffrey Zeldman

A documentary that highlights Jeffrey’s two decades of designing, organising and most of all sharing on the web.

Make time for it!

A Compendium of SVG Information

Of late Chris Coyier has been devoting lots of energy to SVG. In this post on CSS-Tricks he does a massive brain dump about all things SVG.

Rob Dodson and Web Components

A super awesome Shoptalk episode with Rob Dodson talking all about Polymer and Web Components.

Web Components are a pretty hot topic in front end web development and this episode helps clarify what they are all about, why Google and others are investing heavily in the development and how you can begin getting your hands dirty and start developing your own components today.

Single Responsibility Principle

Drew Barontini:

Hopefully that gives you a glimpse into how you can apply the Single Responsibility Principle to your CSS modules. Limit the scope of your modules, keep the styles small, and make sure your modules are properly encapsulated to ensure that your styles are both maintainable and predictable. Use submodules, modifiers, and context classes to make sure that your modules are nice and flex-y.

A super easy to follow article which introduces the fundamentals of writing better CSS.

Front End Ops Conference Videos

Front End operations goodness!

An outstanding lineup speakers talking about real world challenges which are now all online.

Dream On

Mark Otto:

My dream is to help awesome people do awesome shit. Nothing else gets me more stoked out of my mind than that. I get goosebumps thinking about how much the web has changed and how we can continue to shape it just by writing code and sharing our experiences.

A very positive and inspiring piece by Mark.

Choose tools you’ll use

Addy Osmani:

If you’re new to front-end development, I suggest staying close to the grain: just use HTML, CSS and JavaScript. Build with them, learn them inside out, experiment with them. These languages have some amazing primitives that we sometimes forget the raw power of.

With so many tools being released every week it sure is easy to be overwhelmed. The main takeaway from this great post by Addy is to “keep it simple for as long as possible”. I couldn’t agree more.

Custom CSS preprocessing

Nicolas Gallagher:

Did you know that you can build your own CSS preprocessor with Node.js libraries? They can be used alongside established preprocessors like Sass, and are useful for defining tasks beyond preprocessing.

A great insight into some of the benefits of using tools like Rework to help manipulate CSS during development.

Sass 3.3 is Released

After ironing out a bunch of bugs in numerous release candidates, we’re finally ready to release Sass 3.3.0, codename Maptastic Maple, for public consumption.

To get things rocking on your end all you need to do is hop into the terminal and run:

gem update sass

Massive props to all the contributors!


Jeremy Keith:

Every so often, some smart, talented web designers will bemoan the lack of recognition afforded to their craft, industry, work. They wish for the same level of respect that architects or film-makers get, or for the iconic status given to the best of the advertising world’s output in decades past.

Be careful what you wish for, I say. Not only are these the same industries that are rife with horrible business practices like spec work, they are notoriously unfair when it comes to praising individual achievement over the efforts of the group. Worst of all, the proliferation of high-profile awards leads to the practice of producing “award-winning work” i.e. work designed purely to win awards.

I’ve had the same thoughts for sometime, but never had the guts to express them. Thanks Jeremy!

Bulletproof Accessible Icon Fonts

Zach Leatherman:

Care must be taken when implementing icon fonts to ensure a great experience for all users. What happens when your font doesn’t load? What happens when @font-face isn’t supported in the browser?

Another very informative article with a nice easy-to-include library.

Grumpicon – A Web app for the Grunticon workflow.

Grumpicon is a browser-based app. Just drag and drop your SVG files onto the browser window and it will return a downloadable zip that mirrors the output you’d get from the command-line tool.

Big ups to the Filament Group and Eric Ponto!