Learn about new interesting projects for front-end web development. HTML5, CSS and Sass/Less, image optimization — it’s all here. (For client-side JavaScript projects, see JavaScript section.)
Remember the good old web palette? Colors that have names in CSS: navy, green, maroon, red, etc? Orange that was added in CSS Level 2? Well, they don’t look good anymore. Most designers don’t use these default colors, apart from maybe black and white, instead, they usually create unique color schemes for websites.
If you don’t want to spend a lot of time looking for a good color scheme for your new website, check out Colors, a “a nicer color palette for the web”.
It all started when I saw the latest version of Font Awesome (the icon font I use, love, and recommend) and realized that of 40 new icons, 13 were brand icons, and most of them are, to be fair, useless. Who needs an icon for Leanpub? Or Shirtsinbulk, whatever that is?
While browsers have built-in support for tooltips, which can be added by setting the title attribute, unfortunately, such tooltips don’t look good and have a long delay before they appear. There are many JavaScript libraries for better looking and better behaving tooltips, for example, Bootstrap includes one. It turns out, though, that you can implement them with CSS alone, and that’s what Hint.css does.
Bootstrap is the most popular HTML/CSS framework, and there are many good reasons why lots of developers use it to make websites. There are also many developers who complain about “bootstrapy” look of websites built on it. This is understandable, but as someone said, your users don’t care that your site is “bootstrapy”.
I’ve built a few Bootstrap-based websites, and for me, “bootstapy” look is not that important. What’s really important, though, is that when using Bootstrap, I think in its terms and usually select components from the available set, even though they may be a completely wrong solution to the problem. When you don’t have this popup or that dropdown button available, you won’t slap them everywhere, and think of a better UI. Thus, to clear the clouded mind, it’s a good idea to try other frameworks from time to time. This time I’ll cover minimalistic CSS frameworks, which are good Bootstrap alternatives when you don’t want to use all the features provided by it.
React.js is a revolutionary JavaScript library created by Facebook, described by its developers as “V in MVC”, that is, a view layer. Some time after its release, Facebook introduced Flux application architecture, which used React.js for UI views, and specified how to deal with everything else without MVC architecture shortcomings. Flux is a pattern, not a framework or a library, so there’s a whole field of implementations, helpers, frameworks based on Flux out there. In this article we introduce five of them.
Currently native apps built with web technologies are on the rise. Projects like NW.js (node-webkit) and Atom Shell allow us to write cross-platform GUI applications with HTML5, CSS, and JavaScript. While many projects use one look for every operating system they run on, sometimes you want to have a native look for your hybrid app. That’s when Maverix comes into play: it’s a Bootstrap theme with OS X Mavericks look specifically designed to be used in “native webapps”.
Continue reading “Maverix — Bootstrap theme for webapps with Mac look”
Unlike JPEG, PNG is a lossless image format, which is why it reproduces pictures perfectly, but makes many of them — mostly photographs — much larger than what you’d get with lossy codecs. PNG is also the only way to get pictures with transparency (alpha channel) display in all browsers, so if we need images with alpha channel, we have to use large PNGs. However, there’s a little trick we can use to make them smaller: by applying lossy preprocessing.
Continue reading “Minimize PNG files using lossy compression”
MozJPEG is a project from Mozilla aimed to improve JPEG compression while keeping full backwards compatibility with current decoders. Recently they released version 3 of the library. Previous version reduced files by 5% on average compared to jpeg-turbo, the JPG compression library it is based on. The new version contains more improvements, such as reducing compression artifacts for text on white background, and better quality for high-resolution images.
If you’re using Google Fonts to improve your website appearance, your visitors are always forced to download the initial CSS file describing fonts from Google’s servers every time they load a page, even though requests to the actual fonts may be cached. This can make your site slower. There are benefits to serving fonts from Google’s servers (for example, Google sends differently hinted fonts for Windows and OS X to improve their readability), however if you want to avoid depending on Google, or to improve load times, you may want to host the fonts yourself.
Continue reading “Download web fonts from Google with webfont-dl”