Time passes quickly, and another year is soon coming to an end. We’re immensely proud and happy of everything we have achieved this year, and eagerly look forward to the official release of the Smashing Book #442 next week. As we’re known to be big fans of adding icing on the cake, we’ve prepared something quite extraordinary for you.
Have you marked the 26th of November on your calendar yet? A mystery will be waiting for you on the Smashing Magazine front page this upcoming Tuesday at 14:00 CET. The first dozen of readers to try their luck and solve the mystery will win very special and unique prizes. Make sure you don’t miss out! ;-)
Cheerio everyone, and keep an eye open for hints!
Table of Contents
- Dashed, Animated CSS Background5
- Happy Fox, A Free Font6
- When Intuition Just Isn’t Good Enough7
- Free Quality Photos: Use As You Please8
- Clean Up Your Photoshop Swatches And Styles9
- Making Website Testing More Efficient10
- Color Scheme Repository For Google Maps11
- Web Services (Not) In Control12
- Exploring How Writing Works13
- Encoding: How To Get It Just Right14
- The Cubicle Is Dead: Rethinking Workspaces15
- Life Is Like Riding A Bicycle…16
- Draw Me A Typographic Iceberg17
- Keep Calm… And Attend A Smashing Workshop!18
1. Dashed, Animated CSS Background
If you are into shadows, dashes, animations and CSS, today is probably going to be the best day of your life. Well, what if you combine them all to produce a nice visual effect for type on your website? Well, that’s what Lucas Bebber did.
The result is a Sass/Compass mix20 in which you can define foreground, background and shadow colors, distance of the shadow, the cut distance as well as the size, ratio and angle of strips being displayed in the shadow — and you can animate it all, too. Lucas used
:after pseudo-elements, a linear gradient and
background-size for stripes alone. It’s a good idea to replace pt definition in type size with ems though. Funky! (vf)
2. Happy Fox, A Free Font
Happy Fox is their first typeface project, and they’re quite proud of it. You can download it and spread the word with a tweet or post about it on your blog. Psst, there’s also another goodie hidden inside the download folder — check it out! (il)
3. When Intuition Just Isn’t Good Enough
You can’t always trust your intuition, and you don’t have to reinvent the wheel all the time. If you’d like to set up a good typographic hierarchy for headings and body copy on your website, you can use one of the tested and proven scales out of the box.
Type Scale24 provides a quick visual reference for choosing the proper scale. Derived from Tim Brown’s Modular Scale calculator25, it lets you select a scale and preview it right away. Basically, you just need to enter the base font-size for your body content (16px works), examine the em values that the tool outputs and choose the ones that work best. No guesswork necessary! (vf)
4. Free Quality Photos: Use As You Please
When was the last time you felt inspired by generic, random stock photos? Stock photos are actually quite easy to spot, and usually look alienated, unfit or plain ridiculous. With Gratisography26, Ryan McGuire has decided to provide free high-resolution pictures which are freely available for personal and commercial projects.
While admittedly some pictures do look like stock photos, most pictures are unique in their own right, shot professionally from unique angles. All of the pictures have been captured by Ryan McGuire himself, with new ones being added to the gallery every week. Definitely worth bookmarking! (vf)
5. Clean Up Your Photoshop Swatches And Styles
Photoshop has many features and default styles as well as swatches that can empower us and invite new users to play and explore the endless possibilities. However, if you’re an experienced designer, chances are high that the pile of defaults has cluttered up your work environment and has eventually slowed you down. Instead of copying and pasting styles and colours, you might find it more efficient to clear out any defaults and build custom palettes to you current project instead.
Selecting color and styles individually and deleting them is tedious work. Luckily, Mindy Wagner provides a time-efficient solution for this. She has created two empty palettes for you to download. Simply replace the swatches and styles defaults with these empty palettes and you’ll have a blank toolbox that can be filled with your very own custom styles. If you want to learn more about creating you own portable design toolkit, check out Martin Gittin’s article28. (ml)
6. Making Website Testing More Efficient
You know the drill: building responsive websites involves a lot of testing and making adjustments — sometimes a pretty tedious cycle. However, the right tools can help to make your testing workflow a lot more efficient. One of these little helpers is browser-sync29. Developed by Shane Osbourne, the command-line tool keeps multiple browsers and devices in sync — just as the name implies.
Browser-sync comes with some really nice features. It does not only make your browsers follow your clicks, but also reloads live, and watches your CSS files and injects them when they change. It even serves static files, and copies data to all of your browsers when you fill out a form once. Sounds good, doesn’t it? (cm)
7. Color Scheme Repository For Google Maps
Google Maps is a great tool to visualize locations and directions, but there is one downside that can’t be denied. Unfortunately, the visual appearance doesn’t really blend well into most website designs. Well, at least it hasn’t until now. The team behind Snazzy Maps31 decided to give back a little something to the Web community by releasing a repository of color schemes for Google Maps.
8. Web Services (Not) In Control
Kelly Slater once said, “Surfing is like the mafia. Once you’re in — you’re in. There’s no getting out.” But did you ever think that getting out of a Web service could be as difficult as getting out of surfing? Guess what, it can! Registering to services like Skype, Picasa or Netflix is mostly very easy, but deleting your account can be very difficult and sometimes even requires you to contact customer service. Hmm, dark patterns!
Luckily, two guys have switched on the lights and have created Just Delete Me34 — a directory of direct links to delete your account from particular Web services. At present, 300 services are listed. All links are marked as either easy, medium, hard or impossible to indicate the difficulty level. You not only get the direct URL to delete your account, but in most cases also additional information on how to completely remove it. On top of that, Just Delete Me offers you a very smart Google Chrome Extension and a Fake Identity Generator. A big Thank You to Robb35 and Ed36 — well done, guys! (ea)
9. Exploring How Writing Works
On the Web, writing, editing and publishing has become an almost ubiquitous activity. Everybody has to prepare, manage and “meet” content at some point. Yet, while we’ve recently started discussing Content Management Systems37 more than ever, not enough attention is paid to actual content “production”, i.e. writing.
Editorially’s STET39 (which stands for Let It Stand) aims to fill this gap and encourage more discussions between writers and editors. It’s a writers’ journal on culture and technology which pairs good writing with notes that explain what makes writing so good. Each article is thoroughly designed, copyedited and presented, with contributions ranging from technical to design topics. A good journal with brilliant content to give copy the attention it deserves. (vf)
10. Encoding: How To Get It Just Right
The issues of encoding have been identified ten years ago, and so have the solutions for getting it just right. Nevertheless, common editors still save in ASCII by default, many Web developers still don’t know about character encoding and the Internet is still full of websites showing garbled text. Oli Studholme40 summarizes what is essential for building a Web page with bulletproof encoding.
11. The Cubicle Is Dead: Rethinking Workspaces
Where do you feel most creative? At a bustling coffeeshop, at a desk in an open space office, or lounging on a couch in some quiet corner? Everyone is different and so are our needs when it comes to workspaces. Luckily, companies have started to realize that our surroundings significantly influence creativity, and that sitting in a gray, inflexible cubicle from 9 to 5 isn’t the best motor for groundbreaking ideas. Young, dynamic startups were among the first to break with the outdated concepts of what an office typically looks like — and many companies have followed with fresh ideas. Want to sneak a peek behind closed doors?
Custom Spaces43 lets you browse through thousands of photos of unique office spaces, every single one of them bubbling over with ideas on how to make work more pleasant, and as a consequence, more productive. Delve into impressive lounge areas, quiet spaces, meeting rooms, play areas, and kitchens! A nice bonus feature: each office portfolio is accompanied by the contact data of interior designers and vendors that have helped bring it to life. But be warned, chances are high that you’ll get at least a bit jealous at the sight of half-pipes, fully-equipped bars and rooftop terraces. (cm)
12. Life Is Like Riding A Bicycle…
Now here’s a little something for all the athletes among you — well, cyclists, to be more precise. Neil Stevens strikes again with another fresh set of prints that celebrate the success of British Cycling44. Among the prints in the forthcoming series (soon to be available in Neil’s online shop) are the Mark Cavendish, Bradley Wiggins and the Velodrome designs.
These giclée prints will be printed on 315gsm uncoated paper and look good on any wall. One of our favorite quotes: “Life is like riding a bicycle. To keep your balance you must keep moving!” (il)
13. Draw Me A Typographic Iceberg
Imagine you receive a call from someone who asks you to draw a typographic iceberg. What would you say? You probably wouldn’t know how to answer, and end up saying, “Huh?” Or let’s say, Sesame Street calls you to draw hand-lettered quotes of Bert or Ernie. Well, we’ve come across someone out there who actually has received these kind of assignments, and what she makes of them is just too stunning and beautiful — we just had to share!
Meet Mary Kate Mc Devitt47, a letterer and illustrator living and working in Brooklyn, NY, and lean back to dive into her colorful showcase of Hand Lettering & Illustration48 gallery. Mary doesn’t just display her work but also shares interesting bits of information behind every assignment and where she gets her inspiration from. If you take a closer look, you’ll also be able to figure out what an iceberg and a hermit have in common. (ea)
14. Keep Calm… And Attend A Smashing Workshop!
Do you feel like you’re just not advancing enough in your front- or back-end skills? Have you had a chance to check out our line-up of Smashing Workshops49 yet? With our full-day workshops in London, Berlin and Zurich, we encourage you to grab a seat and say goodbye to your programming woes. Now if one of these workshops don’t help you get better and smarter, what will?
Workshops in Zurich, CH
Workshops in Berlin, DE
Would you like us to organize workshops in your city? Is there a particular topic that you’d like to master? Let us know by getting in touch with us and we’ll be there before you know it!
The authors in this newsletter are: Iris Lješnjanin (il), Vitaly Friedman (vf), Shavaughn Haack (sh), Christiane Rosenberger (research) and Elja Friedman (tools).
- 1 https://www.smashingmagazine.com/the-smashing-newsletter/
- 2 https://www.smashingmagazine.com/books/#the-smashing-book-4
- 3 https://www.smashingmagazine.com/books/#the-smashing-book-4
- 4 https://www.smashingmagazine.com/books/#the-smashing-book-4
- 5 #a1
- 6 #a2
- 7 #a3
- 8 #a4
- 9 #a5
- 10 #a6
- 11 #a7
- 12 #a8
- 13 #a9
- 14 #a10
- 15 #a11
- 16 #a12
- 17 #a13
- 18 #a14
- 19 http://codepen.io/lbebber/pen/BzoHi
- 20 http://codepen.io/lbebber/pen/BzoHi
- 21 http://lauryngreen.blogspot.de/2013/04/introducing-happy-fox-free-font.html
- 22 http://lauryngreen.blogspot.de/2013/04/introducing-happy-fox-free-font.html
- 23 http://type-scale.com/
- 24 http://type-scale.com/
- 25 http://modularscale.com/
- 26 http://www.gratisography.com/
- 27 http://www.gratisography.com
- 28 https://www.smashingmagazine.com/2013/07/03/building-portable-design-toolkit/
- 29 https://github.com/shakyShane/browser-sync
- 30 https://github.com/shakyShane/browser-sync
- 31 http://snazzymaps.com/
- 32 http://snazzymaps.com/
- 33 http://justdelete.me/
- 34 http://justdelete.me/
- 35 http://robblewis.me/
- 36 http://edpoole.me/
- 37 http://bradfrostweb.com/blog/post/the-future-of-content-management-rachel-andrew-at-smashing-conference/
- 38 http://stet.editorially.com/
- 39 http://stet.editorially.com/
- 40 http://the-pastry-box-project.net/oli-studholme/2013-october-8/
- 41 http://the-pastry-box-project.net/oli-studholme/2013-october-8/
- 42 http://www.customspaces.com/
- 43 http://www.customspaces.com/
- 44 http://www.crayonfire.co.uk/30440/1032497/work/british-cycling-print-series
- 45 http://www.crayonfire.co.uk/30440/1032497/work/british-cycling-print-series
- 46 http://marykatemcdevitt.com/
- 47 http://marykatemcdevitt.com/about/
- 48 http://marykatemcdevitt.com/
- 49 https://shop.smashingmagazine.com/workshops/
- 50 https://shop.smashingmagazine.com/smashing-workshop-planning-building-front-end-zurich.html?pk_campaign=nl-97
- 51 https://shop.smashingmagazine.com/smashing-workshop-planning-building-front-end-zurich.html?pk_campaign=nl-97
- 52 https://shop.smashingmagazine.com/smashing-workshop-planning-building-front-end-zurich.html?pk_campaign=nl-97
- 53 https://shop.smashingmagazine.com/smashing-workshop-responsive-design-zurich.html?pk_campaign=nl-97
- 54 https://shop.smashingmagazine.com/smashing-workshop-responsive-design-zurich.html?pk_campaign=nl-97
- 55 https://shop.smashingmagazine.com/smashing-workshop-responsive-design-zurich.html?pk_campaign=nl-97
- 56 https://shop.smashingmagazine.com/workshops/#Zurich
- 57 https://shop.smashingmagazine.com/smashing-workshop-the-front-end-warrior-workshop-berlin.html?pk_campaign=nl-97
- 58 https://shop.smashingmagazine.com/smashing-workshop-the-front-end-warrior-workshop-berlin.html?pk_campaign=nl-97
- 59 https://shop.smashingmagazine.com/smashing-workshop-the-front-end-warrior-workshop-berlin.html?pk_campaign=nl-97
- 60 https://shop.smashingmagazine.com/smashing-workshop-pragmatic-ux-berlin.html?pk_campaign=nl-97
- 61 https://shop.smashingmagazine.com/smashing-workshop-pragmatic-ux-berlin.html?pk_campaign=nl-97
- 62 https://shop.smashingmagazine.com/smashing-workshop-pragmatic-ux-berlin.html?pk_campaign=nl-97
- 63 https://shop.smashingmagazine.com/smashing-workshop-adaptive-interfaces-berlin.html?pk_campaign=nl-97
- 64 https://shop.smashingmagazine.com/smashing-workshop-adaptive-interfaces-berlin.html?pk_campaign=nl-97
- 65 https://shop.smashingmagazine.com/smashing-workshop-adaptive-interfaces-berlin.html?pk_campaign=nl-97
- 66 https://shop.smashingmagazine.com/workshops/#Berlin