Link

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.

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.

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 […]

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.

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 […]

Front End Ops Conference Videos

Front End operations goodness!

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

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.

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 […]

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.

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 […]

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.

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!

Spirit

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!

Front-End Ops

A front-end operations engineer is not a title you’ve likely come across, but hopefully one that you will. Such a person would need to be an expert at serving and hosting front-end resources. They’d need to be pros at Grunt (or something similar) and have strong opinions about modules. They would find the best ways to piece together the parts of a Web application, and they’d be pros at versioning, caching and deployment.

A front-end operations engineer would own external performance. They would be critical of new HTTP requests, and they would constantly be measuring file size and page-load time. They wouldn’t necessarily always worry about the number of times that a loop can run in a second — that’s still an application engineer’s job. They own everything past the functionality.

One for the front-end developers out there. With more application logic being deferred to the client side, Alex Sexton makes the case that front-end developers should transition to front-end operation engineers; becoming “the bridge between an application’s intent and an application’s reality”.

Chrome DevTools Revolutions 2013

Paul Irish:

As the complexity of the web apps you build keeps moving, so do the Chrome DevTools. We’ll give you the latest update on your favorite companion; explore new features like emulating mobile devices, remote debugging, Canvas and WebGL profiling, Sass preprocessor support, developing completely within Chrome using the new Workspaces support, and 20 other features that are brand-new to you and will hugely improve your development.

Make time for this one if you use the dev tools. The future is bright!

Blink: A rendering engine for the Chromium project

Chromium blog:

Chromium uses a different multi-process architecture than other WebKit-based browsers, and supporting multiple architectures over the years has led to increasing complexity for both the WebKit and Chromium projects. This has slowed down the collective pace of innovation – so today, we are introducing Blink, a new open source rendering engine based on WebKit.

In the short term, Blink will bring little change for web developers. The bulk of the initial work will focus on internal architectural improvements and a simplification of the codebase. For example, we anticipate that we’ll be able to remove 7 build systems and delete more than 7,000 files—comprising more than 4.5 million lines—right off the bat. Over the long term a healthier codebase leads to more stability and fewer bugs.

The Chromium team are moving forward at an alarming rate and are doing everything to continue. Smart move.

How to Lose Weight (in the browser)

The definitive front-end performance guide.

A group of highly talented individuals from companies like Google, Opera and Twitter have put together a great resource that will no doubt become a ‘go-to’ source for getting your site in shape.

Introducing Preboot

Say hello to Mark Otto’s (creator of Bootstrap) reborn project.

Preboot is a comprehensive and flexible collection of LESS utilities. Its original variables and mixins became the precursor to Bootstrap. Since then, it’s all come full circle.

If you roll with LESS then this will no doubt become a handy resource to help you write better CSS.

Viewsource

Jonathan Neal (co-creator of Normalize.css) put the source in the source so you can view the source while you view source. Super handy for people that tend to view the internet by its source.

Sun – Simple HTML5 Weather App

An awesome HTML5 iPhone weather app. Just visit the site from your iPhone and then save it to your home screen. Seems to be a little sluggish but don’t let this put you off. Beautifully executed.

Prototyping Responsive Typography

Viljami Salminen:

Basically, a typography prototype is a single web page that consists of the project’s actual content. It’s designed in the browser using real web fonts and tools like Typecast. A typography prototype includes font choices, styles for the basic text content and a typographic scale, but nothing else.

Having an approach that focuses on the most important part of any website is fundamental to producing an outstanding experience. It’s so simple but many avoid it. Me included.

The finished typography prototype will be used as the foundation for the rest of our work. We have the recipe, and now we need to start thinking how the colours and the layout will be cooked. This way, when we start our work from the most crucial parts — the content and the typography — and build everything else up from that point, there’s much less chance that we will get lost along the way.

I know where I am starting my next project.