As mentioned in the previous newsletter issue, we’ve been busy bees organizing the upcoming SmashingMag Meetup as well as a one-day workshop with CSS Guru Jens Grochtdreis in Frankfurt on Monday the 27th of February. The CSS3 Master class will be held in English and all you have to do to join is to answer a short question related to the topic of the workshop on our meetup page. Last but definitely not least, we’d like to thank MailChimp2 for sponsoring the workshop, and Linotype3 for sponsoring the evening event — both to which we all look very much forward to!
Last week was also pretty exciting for us, especially after the launch of the Smashing Book #3 presale. We’ve received truly smashing feedback and promise to give our best to answer all further requests and questions via our contact form4 and on Twitter (#smbook3). The pre-order is available for just a few days so don’t miss your opportunity to pre-order the Smashing Book #35 at a special price while you can!
In today’s newsletter issue, we’ll be covering some CSS and HTML snippets, a quality free font, a color scheme tool and vintage album covers. We’re also giving away 2 tickets to the Mobilism Conference6 in Amsterdam. Further details regarding the conf tickets are provided below.
We hope you enjoy the newsletter!
Table of Contents
- Quick Peek At A Designer Hall Of Fame7
- Common Patterns Of Markup and Style8
- Entypo: Free Pictogram Font9
- Match Up Your Colors10
- Monitor And Manage Your WordPress Sites11
- The Infinite Preloader13
- Thirty-Three Vintage Album Covers14
- Things Organized Neatly15
Whether you are a design enthusiast or a company marketing director, you’re likely to be always looking for new and exciting designs to spice up your wallpaper/company website. Browsing for nuggets on the Web can be a lot of fun, but sometimes you wish someone would take the time to put together a little designer “Hall Of Fame”… actually, ‘he’16 did.
365 Awesome Designers18 is a “no-frills” — but lots of “design-thrills” — project, that features interesting, creative, (pick your “awesome” adjective of choice) designers and some of their creations. Every day the avid design fan can discover a new craftsperson. And should your interest in a designer go deeper, the website’s creators provide you with all the necessary information to either stalk your new favorite designer online or on Twitter. (jc)
2. Common Patterns Of Markup and Style
Whatever project you’re working on, the chances are high that you’ll be using the same snippets of code that you’ve used in your previous projects as well. Whether it’s a data table, a search, breadcrumbs or pagination — wouldn’t it be nice to have a library of bulletproof reusable CSS/HTML components and just grab them when you need them for your work?
Pea.rs might be just the tool you’re looking for. It’s an open source WordPress theme that lets you collect, test and experiment with interface pattern pairings of CSS and HTML. You can easily have your own pattern library setup and running quickly. Essentially, each pattern is a post in WordPress, code snippets are added using custom fields, and the main content field is used for optional notes. Very useful! (vf)
3. Entypo: Free Pictogram Font
Pictograms are simple symbols that represent signs, instructions, or any other idea. They are also common interface design elements — widely used for apps or general websites. While you could use them separately (or integrate them as sprites in your website), they are often useful to have as perfectly scalable icons, e.g. if you want to display something on a map.
Entypo Pictograms20 is a set of more than 100 pictograms available as OpenType fonts, released under Creative Commons license and also free for commercial use. The collection consists of many navigation elements and other easily recognizable icons. Authors Daniel Bruce and Andreas Blombäck will appreciate seeing any usage of Entypo in your design. (af)
4. Match Up Your Colors
Few people have pitch-perfect color vision. Disregarding the large part of the population that has some form of color-blindness, it is rare that one can say with utter certainty exactly which color corresponds to which. For designers whose work partly depends on matching color palettes, the hit-and-miss approach to color selection can be nerve-wrecking and time-consuming. Colllor2321 represents a viable, if not overly clinical, tool to help choose your color palette.
Colllor2321 helps you find specific colors and their corresponding shades, hues and tones. You can even look for associating colors to broaden your palette, which can be a useful tool in a Web developer’s belt. You can input color names using plain English as well as in Hex code, but don’t expect too much — we have tried (in vain) to get results on ‘rust’, ‘sunset’, and ‘yellow’, to no avail. (jc)
5. Monitor And Manage Your WordPress Sites
So you’ve got about a dozen projects running on WordPress. Some of them are somehow customized, but most are using the same plugins or even the same themes. What do you do if your plugins or themes get outdated, or if a new version comes along? Going through all the websites and updating the plugins manually doesn’t sound very exciting, does it?
WP Remote25 to the rescue. This little online service helps you monitor and manage all of your WordPress-powered websites and keeps you up to date. The tool allows you to instantly take care of core WordPress updates, plugin updates and theme updates, generating daily backups. WP Remote is absolutely free to use; you only need to install the WP Remote plugin on your WordPress sites, activating it with your API key. A great little time-saver for small projects. (vf)
Sorting, filtering, pagination and state-saving in an interactive table sounds like quite an overhead for any developer, especially if you’re keen on high performance and the scalability of your tables. DataTables26 is a highly flexible jQuery plug-in that can help you with exactly that challenge.
7. The Infinite Preloader
Flash preloaders are well-known from the good old days. At that time, loading times on the Web were long, Adobe Flash was kind of cool, and preloaders were not only useful but necessary to indicate the status of the loading process for Flash-based websites. In fact, in 2008 we featured creative Flash preloaders28 in one of our articles. But the New York Web and advertising agency Big Spaceship devoted an entire website to (its own and other) Flash preloaders.
The site is called Prettyloaded30, and it’s actually a (pretty long) Flash movie — with its own preloader, of course. Most of today’s preloaders are much simpler: the notorious AJAX circle ball and its various minimalistic descendants dominate the scene, so no Flash plugin is necessary. Still, looking at creative preloaders might be useful to come up with more original HTML5 preloaders, as well. (sl)
8. Thirty-Three Vintage Album Covers
Some people collect postcards, others collect stamps or pencils. The guys behind Jive Time Records, a Seattle-based store specializing in used vinyl, collect — guess what? — vintage album covers. More than that, they group and classify them according to their shapes: circles, dots, squares, lines, stripes or arrows.
The result is Project Thirty-Three32, a growing collection of vintage album covers that convey their messages with only simple shapes and typography. The website features over 430 covers and the collection keeps growing. Now, that’s an interesting source of inspiration for your next cover design or poster! (vf)
9. Things Organized Neatly
Being organized may be very helpful in our everyday lives. Some people are naturally organized, and without noticing it, create patterns and rules for systemizing their objects. In case you’re one of those talented people who makes a hobby out of this mania, you’d certainly like to visit Things Organized Neatly.33
In the blog curated by Austin Radcliffe, you’ll observe perfectly harmonized compositions that vary in shape, size, material, color, category and related objects. Some examples are vintage matchboxes, headphones, keys, cups, to name a few. There’s also the possibility of posting one of your compositions, in case you’d like to show your friends that organization can also be an art in itself. (tt)
Thank You For Reading!
As always, we sincerely appreciate everyone’s time and support. We would also like to thank our trainees Ana Flasker and Luca Degasperi for all their great work and contribution in the previous months. We hope that your internship at Smashing Magazine has met your expectations and we wish you both all the best in your future endeavours!
As mentioned at the beginning, this time we’re giving away 2 tickets to the Mobilism Conference35 in Amsterdam, Netherlands. If you’d like to win one, all you have to do is tweet “
Goddag @smashingmag take me to #mobilismconf in Amsterdam!” The two lucky winners will be announced on the 2nd of March. Good luck and stay tuned!
Frankfurt, here we come!
The Smashing Team
The authors of this newsletter are: Sven Lennartz (sl), Stephan Poppe (sp), Talita Telma (tt), Vitaly Friedman (vf), Iris Ljesnjanin (il), Lisa Lang (ll), Ana Flasker (af), Jan Constantin (jc).
- 1 https://www.smashingmagazine.com/the-smashing-newsletter/
- 2 http://mailchimp.com/
- 3 http://www.linotype.com/
- 4 https://www.smashingmagazine.com/contact/
- 5 http://www.smashingbook.com/
- 6 http://mobilism.nl/
- 7 #a1
- 8 #a2
- 9 #a3
- 10 #a4
- 11 #a5
- 12 #a6
- 13 #a7
- 14 #a8
- 15 #a9
- 16 http://365awesomedesigners.com/
- 17 http://365awesomedesigners.com/
- 18 http://365awesomedesigners.com/
- 19 http://www.entypo.com/
- 20 http://www.entypo.com/
- 21 http://colllor.com/
- 22 http://colllor.com
- 23 http://colllor.com/
- 24 https://wpremote.com/
- 25 https://wpremote.com/
- 26 http://datatables.net/
- 27 http://datatables.net/
- 28 https://www.smashingmagazine.com/2008/03/13/showcase-of-creative-flash-preloaders/
- 29 http://www.prettyloaded.com
- 30 http://www.prettyloaded.com/
- 31 http://www.projectthirtythree.com/
- 32 http://www.projectthirtythree.com/
- 33 http://thingsorganizedneatly.tumblr.com/
- 34 http://thingsorganizedneatly.tumblr.com/
- 35 http://mobilism.nl/