Dear Friends,
What was the latest challenge you accepted? Perhaps something uncomfortable, exciting or slightly frightening? Perhaps doing something you've never done before, or exploring a city you've never visited before? Or maybe even both? Well, we love creative challenges, and we love finding ways of making things work. In fact, we do it with everything, and guess what? Our latest challenge already lies ahead of us.
¡Mañana, mañana! The SmashingConf Barcelona 2015 is coming up in Oct 20–21. It's going to be quite smashing indeed.
A brand new Smashing Conference. In a brand new, special location. With the same guiding principles that we care about — a lot. Connecting with the community. Practical lessons learned. Pragmatic insights from people who've learned a thing or two from their very own experiences. Two days, 16 speakers, lots of networking. Sound like a good recipe to you?
Well, meet SmashingConf Barcelona, taking place on October 20–21st in the (unbelievable!) Palau de la Música Catalana in Barcelona, Spain. The first speakers are already announced, and the tickets go on sale on June 9th, at 14:00 CET. As usual, we only have 400 tickets available. Our new challenge, with a few new, mysterious ideas and good ol' focus on UX and front end. You better not miss this one! Seriously.
¡Mañana, mañana!
Vitaly (@smashingmag)
Table of Contents
1. Perceived Speed And Reactive Design
There is no better way to alienate your users than to make them wait. But even if our hands are tied when it comes to certain technical limitations, we can at least use UX to cater for a smooth and painless experience: perceived speed is the magic word. If you want to dive in deeper into the world of perceived performance, pre-rendering, filler content, and progressive image rendering, Spencer Grover's article "UX Tactics To Make Slow Things Seem Faster" is a good read for you.
Spencer takes a closer look at how renowned companies such as Instagram and Google work around common speed pitfalls to connect their users quickly to the content they want. For even more insights about perceived speed, fellow front-end developer Gabin Aureche has started Reactive Design, a Tumblr blog where he collects interesting insights and little tricks to speed things up — or just make waiting times appear much shorter. Short and sweet, and with links to a plethora of articles on the matter. (cm)
2. Diving Into Browser Hacks
Browser hacks. Hopefully you won't need them, but sometimes you have to be pragmatic and get things done, especially if you need to actively support an old family of old browsers. Obviously, creating a separate partial dedicated specifically for legacy browsers is a good idea, so when the time comes, you can just keep removing stuff from the file, and reduce your technical debt. But how do you keep track of all those nasty browser hacks?
Well, with BrowserHacks. The site provides an extensive list of browser-specific CSS and JavaScript hacks, i.e. for older Android browsers, Firefox, Internet Explorer and even Opera Mini. The list is well documented and tagged. You can search for a specific version of a specific browser and check available tests as well. Hopefully the resource won't be necessary in most cases, but helpful just in case you do end up needing it! (vf)
3. Maps To Get Lost In
Maps partake of something fascinating. They take you to distant places, sometimes even on a trip back in time, and, well, often they are just wonderful eye candy. To celebrate the beauty of the cartographic craft, the Tumblr blog Beautiful Maps is dedicated to maps of all shades.
Old and modern maps are showcased in the collection that Dennys Hess has put together, some of them flagships of precision, some rather artistic takes on the subject. The collection takes you on a stroll through tangled streets and uncharted territories, vibrant graphics and subtle drawings. Such a pity that we rely almost entirely on our smartphones to guide us the way, isn't it? (cm)
Advertisement
4. Smart Front-End Techniques
It doesn't matter how much you experiment with front end, there is always something to be discovered, and new use cases to consider. What if you wanted to establish a dynamic type hierarchy that depends both on width and height of the viewport? Well, you could use calc(2em + 2vw + 2vh) for font-size, for instance, using viewport width and viewport heights to control the size of the type.
Or, to preserve the pixels of a [articular image when it gets bloated up, you could use the image-rendering property in CSS. You could also combine quantity queries with Flexbox to style elements based on quantity, or just arrange icons close to type, and perhaps use fancy pseudo-classes like :empty, :optional and :in-range along the way. Finally, you could also use animated CSS gradients with CSS alone and create motion blur effects for your animation, too. Yes, that's front end today, and it's pretty amazing! (vf)
5. A Set Of Happy And Unique Icons
You know how the saying goes, "Happiness is everywhere if you take the time to look"? Well, icons shouldn't be underestimated in our designs — you need to take the time to decide well. But then there are icons that don't even need a second look because they already look good at first glance, or perhaps just look happy right away. Take a peek at Happycons — you'll probably see what we mean.
This 'lil icon set is a set of 40 colorful, happy icons that will surely freshen up your designs. They're free to download, editable and available in 180px size in AI, Sketch, PNG, SVG and EPS formats. Feel free to use them to in your web projects or even print projects. They won't suit every project, but they might leave your users and visitors happy as well. So, what are you waiting for? (il)
6. Get Back On Track With Batch Install Scripts And Tools
How much time do you need to set up your working environment from scratch? And maybe it's not really about being prepared for the case of an emergency, but just having your tools and your setup ready to be ported to a new machine without unnecessary hassle. It's good to be prepared for every kind of situation, and having a proper setup in place within one hour would be ideal — and will save you quite some headaches down the line.
Automatic back-up is probably going to solve all your issues, but sometimes you might want to adjust global settings or batch install a few applications. You could just store all important data and installation files on a USB with a very detailed restoring machine guidelines for your working environment. There are also other tools and scripts available as well. Just make sure that you don't forget to bring over important files with you.
The guidelines provide an exact instruction what to do and what to avoid, commands to run in Terminal and settings to import, calendars to set up and notes to keep in mind. If you have one, too, why don't you share it as well, so everybody can use it? (vf)
Advertisement
7. Displaying Large Data Sets Easily
If you've been having performance issues displaying large data sets, well, you can now easily solve them with a tiny vanilla JavaScript plugin. To avoid DOM pollution, you can split the list into clusters, then show elements for current scroll position and add extra rows to the top and bottom of the list to emulate the full height of the table. That way, the browser can show a scroll bar for the full list. This lovely, useful little plugin is called Clusterize.js.
You may be wondering whether it can also be used for anything other than a table? Sure, it can also be used for pretty much anything, including ordered and unordered lists or galleries. The library supports modern browsers and IE 8+. Licensed under the MIT license, this plugin could be something you may want to look into asap. (il)
8. Sidestep The Most Common Design Pitfalls
From "Nerd-Eye Blindness" to "Column Soup"... it's a jungle out there for newly-fledged web designers! In this free e-course, delivered weekly via email, author David Kadavy offers a helping hand, assisting the avoidance of the most common pitfalls designers make as they start out. What makes it extra interesting? The six-week course named "Design Pitfalls" is specifically geared towards the minds of developers.
Kicking things off with the all too common font anxiety (how can you be sure you're picking the right one?), before moving on to font size stress, correct color selection and framework issues, the course rounds off with a warning to all hackers regarding UX and holding user attention. Registration closes this week, so if you're keen to join 30,000 other students, make sure not to miss the date. (cc)
9. Mastering The True Craft Of Web Typography
The time when web design was limited to just a handful of default system fonts seems like a distant memory. But with the coming of web font services, and all the choices they offer, the process of selecting and implementing the perfect typeface can sometimes feel like more of a chore and less of the pleasure that it should be.
Donny Truong is here to help change that. With his new free eBook "Pro Web Type", described by Jeremy Keith as "practical and refreshingly succinct", Donny leads his readers step by step through the craft of making beautiful, successful typographic choices. From the various ways of delivering web fonts, through to selecting body text, setting type in the browser and picking type for UI, chapter by chapter, the website offers plenty of practical, applicable advice that is sure to put you back in confident control of your typography. (cc)
Advertisement
10. Keep Calm And Attend A Smashing Workshop
With so many techniques, tools, libraries, design patterns, strategies, abstractions, frameworks and boilerplates available nowadays, what do you really need to know to keep your workflow fast, smart and efficient? That's exactly what our front-end and RWD workshops are all about: practical front-end + RWD workshops that will help you become better front-end developers and designers, today.
Workshop image credits: Marc Thiele
Upcoming Online Workshops (2h):
Upcoming Smashing Workshops and Meet-Ups:
- TYPO Berlin, Talk + WOrkshop, Berin, Germany, May 23,
- Kerning, Talk + RWD Workshop, Faenza, Italy, June 3,
- SmashingConf NYC 2015 in New York, US, June 15–18,
- MediterráneaJS, RWD Workshop, Barcelona, June 20,
- EdgeConf in London, UK, June 27,
- RWD Workshop in London, UK, July 1.
You can also check more workshops coming up later this year. Or, if you'd like to run an in-house workshop at your office, feel free to get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you're facing and would like to solve. Don't worry about the cost — we'll find a fair price for sure. Get in touch — it's that easy!
New On Smashing Job Board
Here are the recent job openings published on our Smashing Job Board:
-
Senior UX Designer at YP (Glendale, CA)
We're looking for a passionate candidate who has the ability to produce top-notch wireframes.
-
Animation Director at Rising Tide Games (Austin, TX)
We're looking for talented and passionate artists to help build the next generation of social casino games in our new Austin studio.
-
Web Developer at Lamar University (Beaumont, TX)
We're looking for a web developer with extensive knowledge of and skills with web technologies and best practices while delivering solutions contributing to user experience and the user interface.
Smashing Highlights (From Our Archive)
-
Writing Systems And Calligraphy Of The World
The beauty of typography has no borders. While most of us work with the familiar Latin alphabet, international projects usually require quite extensive knowledge about less familiar writing systems from around the world.
-
Why Coding Style Matters
When I was studying computer science in college, I had one extremely tough professor. His name was Dr. Maxey and he taught the more complicated courses like data structures and computer architecture.
-
Repurposing Photoshop For The Web
Like any overzealous teenager aspiring to be a Web designer back in 1999, I found myself in an "Electronic Design" class, behind the wheel of one of those old-school aqua iMacs. If you found yourself in a similar situation, chances are you were given Adobe Photoshop as your vehicle for designing the Web. For me, it was version 6.0.
Recent Articles On Smashing Magazine
No comments:
Post a Comment