CSS Weekly – Zoran Jambor – Issue #131
October 6, 2014 at 5:47 PM
Writing CSS (and Sass) That Doesn’t Suck – Ashley Nolan
A list of some of the issues that Ashley Nolan came across when inheriting CSS projects off other developers, that you should avoid when authoring your own projects.
How to Create Off Canvas Layouts with Susy – Zell Liew
How to create an off-canvas navigation using Susy (a Sass add-on for grids).
Articles & Tutorials
How to Create CSS Animations Visually With Stylie – Jeremy Kahn
In this tutorial Jeremy Kahn shows how to use a tool called Stylie to create beautiful animations with just your mouse.
CSS Triggers – Paul Lewis
In this short video Paul Lewis explains to Jake Archibald (and to us) how to tell if a CSS property is going to cause you performance problems.
Accessible HTML Video as a Background – Emma Sax
How to make background videos accessible for everyone.
Building an Instagram Based Portfolio With Bootstrap – Steve Everett
Steve Everett shows how to create a simple Instagram based portfolio.
Responsive Web Design Tips – Jeremy Loyd
Jeremy Loyd shares his lessons learned so far trying to tame the RWD beast.
SVG Circus is a tool that enables you to easily design animated SVG spinners, loaders and other looped SVG animations.
CSStyle is a modern approach for crafting beautifully maintainable stylesheets.
Swirling Dots – Zach Saucier
An impressive and mesmerising CSS animation by Zach Saucier.
Issue #132 – October 13th, 2014
CSS: It Was Twenty Years Ago Today — an Interview with Hakon Wium Lie
Håkon Wium Lie proposed CSS on 10 October 1994 — twenty years ago. Bruce Lawson interviewed him about the past, present and future of the Web’s styling language.
A Guide to SVG Animations (SMIL) – Sara Soueidan
Sara Soueidan digs into SMIL Animation specification and gives us this epic Guide to SVG Animations.
Articles & Tutorials
CSS, DRY, and Code Optimization – Jens O. Meiert
You’re probably repeating yourself too often in CSS. Jens O. Meiert gives a couple of advices on how to keep your CSS DRY.
Understanding CSS Specificity – Brian Stone
How exactly CSS specificity works. You should read the article even if you think that yo do know specifics of CSS specificity.
Six Awesome Things You Can Do with Kouto Swiss for Stylus – Kezz Bracey
Short introduction into Kouto Swiss, a fantastic new mixin library for the CSS preprocessor Stylus.
Write Sass Plugins like a pro – Marc Mintel
10 things to consider when writing Sass plugins for public or shared use.
Cutting-Edge CSS Features You Can Use Today – Guil Hernandez
Guil Hernandez demonstrates a couple of cutting-edge CSS features that you’ll be able to use in production pretty soon.
- Kouto Swiss is a complete CSS framework for Stylus, inspired by great tools like Nib, Compass and Bourbon.
- ProtoTool is a front-end development tool that auto reloads your CSS with basically zero configuration. Also, the tool comes with a pixel perfect mode for mock-up overlay.
CSS Only iPhone 6 – Fabrizio Bianchi
This CSS-only iPhone 6 looks almost like a real thing. Heck, it almost looks better than the real thing. Hats off to Fabrizio Bianchi."
"SVG graphics can be animated using animation elements. The animation elements were initially defined in the SMIL Animation specification; these elements include:
<animate> – which allows you to animate scalar attributes and properties over a period of time.
<set> – which is a convenient shorthand for animate, which is useful for assigning animation values to non-numeric attributes and properties, such as the visibility property.
<animateMotion> – which moves an element along a motion path.
<animateColor> – which modifies the color value of particular attributes or properties over time. Note that the
<animateColor> element has been deprecated in favor of simply using the animate element to target properties that can take color values. Even though it’s still present in the SVG 1.1 specification, it is clearly noted that it has been deprecated; and it has been completely removed from the SVG 2 specification.
In addition to the animation elements defined in the SMIL spec, SVG includes extensions compatible with the SMIL animations spec; these extensions include attributes that extend the functionality of the
<animateMotion> element and additional animation elements."
"HTML5 Important Links
A quick reference guide for Web Developers.
HTML5 Quick Reference Guide
A complete list of all the HTML / XHTML tags arranged in alphabetical order.
HTML5 Tags References
A complete list of all the HTML / XHTML Event Attribute values.
HTML5 Events References
A small HTML editor where you can type your HTML / XHTML code and see the result online.
Online HTML Editor
Download a quick HTML5 tutorial in PDF format.
“w3schools – One stop html5 and CSS 3 api.”
“AngularJS has grown to become one of the most popular single-page application frameworks. Developed by a dedicated team at Google, the outcome is substantial and widely used in both community and industry projects.
One of the reasons for AngularJS’ success is its outstanding ability to be tested. It’s strongly supported by Karma (the spectacular test runner written by Vojta Jína) and its multiple plugins. Karma, combined with its fellows Mocha, Chai and Sinon, offers a complete toolset to produce quality code that is easy to maintain, bug-free and well documented.”
“In short, specs can help us to build the right product more quickly and more efficiently.”
Check out Specctr. You need to be using Photoshop.
"Sliders are cool. When they’re done well, customers love to interact with them. When they’re not done well, they can cause a lot of frustration (not to mention lost sales) by standing between your customers and what they want. And getting them wrong is surprisingly easy.
In this article, we will present a solution, including the design and code, for a new type of Android slider to address common problems, along with a downloadable Android mini-app for you to try out. It’s a deep dive into sliders based on a chapter in Android Design Patterns. The experimental inventory-based slider we will look at would be at home in any application that asks for a price, a size, or any other faceted input within a widely distributed range."
"When designing mobile first, navigation takes a back seat to content, and ruthless editing paves the way for more focused experiences. The pursuit of simplicity, combined with the tight spatial constraints of mobile viewports, often leads us to strip away elements in an attempt to minimize the interface. But the space-saving convenience we gain through clever editing and a compact UI can come at the expense of the very navigational aids our users rely on.
To help balance the craving for visual simplicity with the need to keep websites easy to navigate, we can borrow some concepts from the world of wayfinding. This article shows how you can apply these concepts to the mobile web."
"Providing WordPress support is an important but often, thankless job. From support forums to IRC, there’s no shortage of people who need help with WordPress. However, participating in the various support channels is one of the easiest ways to contribute back to WordPress. In particular, if you’re interested in becoming a volunteer on the support forums, there’s a new guide available that walks you through the process.
It’s called the Troubleshooting Handbook. It explains how the forum works and teaches volunteers how to troubleshoot common WordPress issues they’re likely to see in the forum. In the second section of the handbook, there are several items known as Break/Fix lessons. Break/Fix is meant to be a hands-on guide to troubleshooting broken WordPress sites. Each lesson represents a common problem you may come across when helping others in the WordPress.org support forums."