SVG Icons FTW
Despite the growing popularity of SVG, its time around and excellent browser support, we have a lack of good vector icon approaches. It's time to fill this gap and use SVG as icons in our web projects. A lot of great methodologies and principles arose making our CSS more and more modular, structured and flexible. But think about your icons.
Adaptive Images for Responsive Designs
So you’ve been building some responsive designs and you’ve been working through your checklist of things to do: You started with the content and designed around it, with mobile in mind first. You’ve gone liquid and there’s nary a px value in sight; % is your weapon of choice now.
Using source maps with Sass 3.3
One of the exciting new features in Sass 3.3 that every developer should take advantage of is source maps. As CSS pre-processors, minifiers, and JavaScript transpilers have become mainstream it is increasingly difficult to debug the code running in the browser because of differences with the original source code. For example, if you use CoffeeScript (which compiles to JavaScript) you won't see CoffeeScript while debugging in the browser. Instead, you'll see compiled JavaScript.
Frontend Design
Somewhere between design – a world of personas, pixels, and polish – and engineering – a world of logic, loops, and linux – lies frontend design. Frontend design involves creating the HTML, CSS, and presentational JavaScript code that makes up a user interface. A frontend designer (who may also go by UI developer, client-side developer, UI engineer, design engineer, frontend architect, designer/developer, prototyper, unicorn, or Bo Jackson) lives in a sort of purgatory between worlds:
Choosing a viewport for iPad sites - Allen Pike
The iPad has made choosing a good viewport tag for your site more challenging. You now need to specify something that looks good with your content for screens that are 320px, 480px, 768px, and 1024px wide. Viewports Mobile Safari presents desktop-sized sites on small screens by rendering to a virtual browser screen that is 980px ((Of course, when the iPad is in landscape orientation of 1024px wide, it will use 1024px.)) wide, and letting you pan and zoom that page. Viewport tags let you tell Mobile Safari that your site displays properly narrower than 980px, and set other preferences for scaling your page. Craig Hockenberry famously determined the ideal viewport tag for content sites in the iPhone era.
Live Editing Sass and Less in the Firefox Developer Tools
Sass and Less are expressive languages that compile into CSS. If you’re using Sass or Less to generate your CSS, you might want to debug the source that you authored and not the generated CSS. Luckily you can now do this in the Firefox 29 developer tools using source maps.
A Pixel Identity Crisis
A note from the editors: This article was augmented post production with vendor prefix information to cover Webkit-based and Opera browsers. The pixel has always been the smallest unit in screen-based design. Because it’s been indivisible, it is the concrete unit of measurement among screen-based designers. The phrase “a pixel is a pixel is a pixel” has been adopted to help print designers not used to fixed-screen density understand the concept.
Handy Sass Mixins - Web Design Weekly
Mixins are one of the most powerful features of Sass. Mixins allow for efficient and clean code repetitions as well as an easy way to adjust your code with ease. If you are using Sass in your development workflow, no doubt you are using some of the mixins that I have covered below but some might also be new and helpful.
» Responsive IMGs — Part 1 Cloud Four Blog
In my post “Where are the Mobile First Responsive Web Designs”, I noted that one of the first things I look for when trying to determine whether or not a responsive web design is “mobile first” is whether or not it has a strategy for handling the IMG tag. A recent Smashing Magazine round up of responsive web design techniques included several new approaches for handling IMG tags which makes it the perfect time to dig into this problem and the potential solutions in more depth. Why IMG Tags Suck for Responsive Web Design If you want your site to load as quickly as possible, you do not want to deliver larger files than are needed. Many responsive web design sites provide mobile devices images at sizes appropriate for desktop and ask the mobile device to resize the image. In my research, I found nearly 80% decrease in file size by delivering images at the actual size they were going to be used on a mobile device.
18 Essential Plugins to Get More Out Of Sublime Text
Even though SublimeText comes with a bunch of great features that help our work as web developers, like any other tool, there will always be a room for enhancements. This is when plugins can be real useful (and we are huge fans of plugins). Before we proceed, maybe you’d like to check out our previous posts on SublimeText to see what it can do in its native state: Moving on, in this post, we have put together a few plugins that you may need to install to fill the functionalities that are missing from SublimeText. Recommended Reading: 12 Most-Wanted Sublime Text Tips And Tricks.
» Responsive IMGs Part 2 — In-depth Look at Techniques Cloud Four Blog
Responsive IMGs Part 2 — In-depth Look at Techniques In Responsive IMGs Part 1, I took a high-level look at what responsive IMGs are, the problem they are trying to solve, and the common issues they face. In this post, I’m going to take a deeper look at the specific techniques being used to provide responsive IMGs and try to evaluate what works and doesn’t.
Avoiding Faux Weights And Styles With Google Web Fonts
Advertisement Today, too many websites are still inaccessible. In our new book Inclusive Design Patterns, we explore how to craft flexible front-end design patterns and make future-proof and accessible interfaces without extra effort.
Installation - Package Control
Simple The simplest method of installation is through the Sublime Text console. The console is accessed via the ctrl+` shortcut or the menu. Once open, paste the appropriate Python code for your version of Sublime Text into the console. Sublime Text 3Sublime Text 2
How to use src.sencha.io
This Guide is most relevant to Sencha Touch, 1.x. Sencha.io Src helps you dynamically resize images for the ever increasing number of mobile screen sizes. We’ve previously done a lot of work in Sencha Touch to make your UI resolution independent, and Src expands this to include your image assets. It’s easy to use, and in this guide, we run through the main API options for the service. Sencha.io Src is essentially a proxy that lies between image assets (hosted either on your own server or by a third party) and the browser or application requesting them via HTTP. The API is accessed entirely via placing a prefix before the original image URL.
