Wednesday, June 29, 2016

A New Smashing Book: Please Meet “Inclusive Design Patterns”

Accessibility matters. That's why we created
"Inclusive Design Patterns" book on accessibility.

Everything You Need To Know About Accessibility.

Meet "Inclusive Design Patterns", our new book on building and designing fully accessible user interfaces.

Meet

$22.90 $29

Get the bookSave 25% today, get the book in September
(free worldwide airmail shipping). eBook included!

About The Book

Accessibility has always been a slightly unsettling realm for developers. Surrounded with myths and misunderstandings, it used to be a domain for a small group of experts. Today, it's still unclear what makes up an accessible interface and what developers need to know to get there. Let's fix it.

Inclusive Design Handbook gets to the bottom of it all: accessibility myths and rules of thumbs, WAI-ARIA roles, content accessibility guidelines, landmark roles, keyboard and touch accessibility, accessible markup and interaction patterns, accessible forms and widgets, multimedia accessibility and inclusive prototyping. Everything you need to know about accessibility gathered in one practical, smashing book.

The book looks at common accessible interface patterns from the perspective of an inclusive designer and covers practical techniques, gotchas and strategies you need to be aware of when building accessible, inclusive interfaces.

Detailed table of contents. Available as print and eBook. With printed book, you get the eBook for free — but you knew it anyway, didn't you?

Illustration of Smashing Book 5, Chapter 11, Andrew Clarke on The Way Forward
The cover and illustrations in the book were designed by Heydon Pickering.


Why This Book Is For You

There's no such thing as an 'average' user, but there is such a thing as an average developer. This book will take you from average to expert in the area that matters the most: making things more readable and more usable to more people. You'll learn:

  1. Accessibility myths and misconceptions as well as common solutions and rules of thumbs,
  2. A library of well-tested accessible HTML/CSS components that you can use right away,
  3. How to properly use WAI-ARIA roles and Content Accessibility Guidelines,
  4. How to tackle common accessibility issues in RWD,
  5. How to deal with "skip" links and external links, as well as navigation regions and landmarks,
  6. How to keep labels, buttons, tables of contents, dynamic widgets and tabbed interfaces accessible,
  7. How to implement infinite scrolling, grid display and dynamic content accessibly,
  8. How to deal with password validation, error messages, web forms, JavaScript patterns and touch targets,
  9. How to keep an interface accessible in legacy browsers,
  10. How to prototype with accessibility in mind.

Good enough? Alright then! All pre-orders will be shipped in Septemberget your book right away — it won't take more than 45 sec. You will not be disappointed.

$22.90 $29

Get your bookSave 25% today, get the book in September
(free worldwide airmail shipping). eBook included!


Tuesday, June 28, 2016

Everything You Need To Know About Accessibility. Please meet “Inclusive Design Patterns” by Heydon Pickering.

Accessibility matters. That's why we created
"Inclusive Design Patterns" book on accessibility.

Everything You Need To Know About Accessibility.

Meet "Inclusive Design Patterns", our new book on building and designing fully accessible user interfaces.

Meet

$22.90 $29

Get the bookSave 25% today, get the book in September
(free worldwide airmail shipping).

About The Book

Accessibility has always been a slightly unsettling realm for developers. Surrounded with myths and misunderstandings, it used to be a domain for a small group of experts. Today, it's still unclear what makes up an accessible interface and what developers need to know to get there. Let's fix it.

Inclusive Design Handbook gets to the bottom of it all: accessibility myths and rules of thumbs, WAI-ARIA roles, content accessibility guidelines, landmark roles, keyboard and touch accessibility, accessible markup and interaction patterns, accessible forms and widgets, multimedia accessibility and inclusive prototyping. Everything you need to know about accessibility gathered in one practical, smashing book.

The book looks at common accessible interface patterns from the perspective of an inclusive designer and covers practical techniques, gotchas and strategies you need to be aware of when building accessible, inclusive interfaces.

Detailed table of contents. Available as print and eBook. With printed book, you get the eBook for free — but you knew it anyway, didn't you?

Illustration of Smashing Book 5, Chapter 11, Andrew Clarke on The Way Forward
The cover and illustrations in the book were designed by Heydon Pickering.


Why This Book Is For You

There's no such thing as an 'average' user, but there is such a thing as an average developer. This book will take you from average to expert in the area that matters the most: making things more readable and more usable to more people. You'll learn:

  1. Accessibility myths and misconceptions as well as common solutions and rules of thumbs,
  2. A library of well-tested accessible HTML/CSS components that you can use right away,
  3. How to properly use WAI-ARIA roles and Content Accessibility Guidelines,
  4. How to tackle common accessibility issues in RWD,
  5. How to deal with "skip" links and external links, as well as navigation regions and landmarks,
  6. How to keep labels, buttons, tables of contents, dynamic widgets and tabbed interfaces accessible,
  7. How to implement infinite scrolling, grid display and dynamic content accessibly,
  8. How to deal with password validation, error messages, web forms, JavaScript patterns and touch targets,
  9. How to keep an interface accessible in legacy browsers,
  10. How to prototype with accessibility in mind.

Good enough? Alright then! All pre-orders will be shipped in Septemberget your book right away — it won't take more than 45 sec. You will not be disappointed.

$22.90 $29

Get your bookSave 25% today, get the book in September
(free worldwide airmail shipping).


Tuesday, June 21, 2016

Smashing Newsletter #160: Service Workers, Conversational UI, CSS Carousels

With service workers, fonts, form validation, and creative experiments. Issue #160 Tuesday, June 21st 2016 189,226 readers View in the browser

The Smashing Email Newsletter

Dear Friends,

Service workers. You've probably already heard about all of their benefits, such as background processing, customized offline fallback experience, persistent caching and overall improved performance. However, there aren't that many sites that make use of the technology (despite rapidly growing browser support). Well, a few months ago, we decided to team up with the (fantastic!) Cloudfour team to figure out a solution of how to integrate service workers into our WordPress setup. Last week, we were finally able to roll out the update that now contains a hard-working service worker — among a number of other things.

A service worker can manage caching and network, delivering content faster. Just one of the many scenarios of how a service worker could be used.
A service worker can manage caching and network, delivering content faster. Just one of the many scenarios of how a service worker could be used. (Image credit)

If you now try to access Smashing Magazine offline, you should be able to read the latest article (of course, if you have accessed the site at least once before that). Now, what makes a good offline experience? Well, we're pre-caching offline avatar placeholders and images, caching the "offline" page which displays everything you can see when you are offline, and last but not least, caching the Books and Conferences pages. We're also using service workers to manage caching of JavaScript, CSS and SVG files as well as font files. In fact, since most assets are used repeatedly throughout the site, on subsequent loads pretty much everything is coming from a service worker — no HTTP requests needed at all. That's right: and there are many more ways how service workers can be immensely helpful.

The result? Smashing Magazine is now available offline. We admit, we do have some performance hiccups, and we're still figuring them out, e.g. start render is delayed in some browsers because the service worker loads other pages in the background (yep, not cool at all). Also, CDNs and subdirectories required a special handling, and integration into WordPress wasn't as straightforward as we hoped it would be.

Things do look bright though! At this moment, we're experimenting and measuring, so if you find any bugs, issues or just weird behavior on the site, please do let us know via Twitter. We're very excited to see the performance boost once the service worker has been properly set, and of course, we'll keep you updated.

Stay smashing (even offline)!
– Vitaly (@smashingmag)


Table of Contents

1. Infecting Your Screen For Your Enjoyment
2. Conversational Interfaces, The Easy Way
3. A Monospace Font To Do Good
4. Snapper Refines CSS Snap Points Carousels
5. Better Linting With Pre-Commit Hooks
6. Product Design And Email Marketing In Numbers
7. The Right Way To Ask For App Permissions
8. Techniques For Better Form Validation
9. Upcoming Smashing Workshops
10. New On Smashing Job Board
11. Smashing Highlights (From Our Archives)
12. Recent Articles On Smashing Magazine

1. Infecting Your Screen For Your Enjoyment

“Infecting your screen for your enjoyment” is the motto of the creative agency Resn. Their site is a playground full of interactive experiments; stupefying, gooey, magical. As you enter it, you’ll be greeted by a faceted drop on a black background. Like a crystal, it reflects light and moves and turns as you hover over it. This itself is an impressive piece of work, but the drop is only your gate to where the real magic happens, so click and drag it, and it will catapult you to one of six interactive experiments.

Resn

We don’t want to spoil the surprise, and words couldn’t properly describe what’s going on in the experiments anyway, so check them out yourself (and don’t forget to turn your speakers on). It’s going to be a beautiful and bizarre experience, that’s for sure. If you easily get dizzy, be careful then. There’s one experiment in particular that is, well, psychedelic and may strain your eyes a bit too much. (cm)


2. Conversational Interfaces, The Easy Way

When building experiences focused on conversational UI, we tend to believe that our bots should be capable of understanding human language and responding intelligently to perfectly meet users' needs. However, in reality it seems to be very, very difficult to accomplish. We can build high-level applications on top of existing platforms such as IBM Watson and Facebook Messenger Platform already. Skype bots are coming, too, and Viv is supposed to be a new groundbreaking change in the ecosystem altogether.

Scott Logic

What all of these tools have in common is that they allow us to design with intent rather than with natural language; as designers and developers, we can define an intent (e.g. "booking") first. The platform will render user's input, deduct intent and act according to our application's logic. For example, that's how KLM Messenger came to be.

But aren't we overcomplicating things? Wouldn't it be easier to design simplified chatbots capable of merely understanding commands and responding in a humble way? Take online banking, for example. On desktop, using commands such as /balance or /transactions to check up the bank account is still easier than logging into a website every single time. /send $20 to Patrick for Lunch might work well, too (if the chatbot's response doesn't sound too boring and machine-alike). Conversational eCommerce is coming — it's just up to us to figure out what a great experience for our customers will look like. (vf)


Advertisement
Ad


3. A Monospace Font To Do Good

A new typeface is always nice to have in your toolkit. And even better if you can do good when you purchase it. Swedish-based designer Daniel Feldt created the monospace typeface Alma Mono exactly for this purpose: you pay what you want for a personal license (professional licenses start at $50), and Daniel will donate all proceeds to charity. But it’s not only the social aspect that makes it worth to check out Alma Mono.

Alma Mono

Alma Mono comes in five weights and looks great both as a heavy display type as well as in long format text. If you are fed up of looking at the same ol’ font in your text editor or terminal, Alma Mono will give it a fresher and younger look. The idea for the typeface originally started as a side project at work, and it’s actually the first font that Daniel designed with several weights. Kudos!

If you’re on a tight budget and need a free font for your project, good news for you, too: Google Fonts was updated and now makes it easier to find that one font. Its new preview allows you to tweak the font size, weight, and sample text to get a better idea of what a typeface could look like out in the wild. (cm)


4. Snapper Refines CSS Snap Points Carousels

Carousels. Well, not this kind of carousels. You might love them or hate them, but one thing is for sure: they can be useful, when designed well. On e-commerce websites, for example, when you want to show several product images on a product page without adding more noise. CSS Snap Points now extends the functionality of carousels, and enables CSS overflow scrolling regions to snap to points in their scrolling span. A handy feature that does, unfortunately, not work in all browsers yet. The team at Filament Group took this as an occasion to refine the concept and make snapping work more broadly. The result: Snapper.

Snapper

The lightweight script uses CSS and JavaScript to create functional snap-points carousels, building on a simple overflow container and native CSS snap points. But Snapper is more than just a polyfill. It adds a smooth sidescroll navigation as well as optional previous and next buttons to your carousels and also supports thumbnail and dot navigation links. The ability to loop back to the start of the carousel when you reach its end has also been added. Want to give it a try? You’ll find the Snapper code on GitHub. And don't forget to add some context to your carousel thumbnails — text and small preview are always better than arrows and dots! (cm)


Advertisement
Ad


5. Better Linting With Pre-Commit Hooks

Code quality matters, and a common way to guarantee that the code is written according to code guidelines and best practices is by linting it. But what if you have a large distributed team, with everybody using their own development environment and continuous integration tools? You really can't be sure that the code is in a proper shape before the commit or a pull request is made.

Linting tools

A simple way to improve the workflow a little bit is by introducing a git pre-commit hook which allows you to run linting (or any other npm scripts) before the code is committed to a git repository. You don't have to reinvent the wheel though; there are tools and libraries like pre-commit npm package and commitizen npm package that you can use right away. An easy way to avoid bugs in your GitHub repo! (vf)


6. Product Design And Email Marketing In Numbers

What is the state of product design? That’s the question the Product Report 2016 attempts to answer. To approach it, Invision asked more than 11,650 designers from 65 countries actively working in design about their roles, careers, and feelings for the future. The report does not only explore their background and working environment but also uncovers tool preferences, design-related behaviors and income variables. What do design teams look like today? What kind of benefit packages do designers receive? And what factors contribute to professional happiness? The report offers an in-depth look at the industry and the people that keep it running.

Product Report 2016

An interesting report for everybody involved in email marketing comes from Litmus. Their 2016 State Of Email Report is based on data from over 13 billion email opens worldwide and looks at trends that defined email marketing in the past year to get you fit to send more effective campaigns today. It features info on email client market share just like summaries of all new email applications and how to optimize for them — think Apple Watch, rendering quirks in Outlook and Yahoo Mail now supporting media queries. Updates to delivery and spam are also included. You can download the report after providing your email address. (cm)


Advertisement
Ad


7. The Right Way To Ask For App Permissions

Asking users to grant your app permission to access their location, their contacts or to use their camera, is a tricky thing. When you don’t do it properly, you risk harming the user experience and, in the worst case, your users will abandon your app and never come back again. To help you avoid common pitfalls in your permission request logic, Nick Babich shares his strategy to take the pain out of asking for permissions.

The Right Way To Ask For App Permissions

The key takeaway: Don’t ask too early or for too many things at once. Nick suggests to request critical permissions up-front; when it comes to secondary permissions you’re better off asking for them in context. To gain your users’ trust, also make sure to always be crystal clear about why your app needs a certain permission and what they’ll get in return. Ask nicely and don’t leave room for false assumptions — that’s the best foundation for a positive answer. (cm)


8. Techniques For Better Form Validation

No one likes to fill out a form. That’s why, to make the task as painless as possible, it’s crucial for every developer to provide proper guidance and feedback. Form validation is the magic term here, and Ire Aderinokun wrote up how to get it right.

Techniques For Better Form Validation

In her form validation techniques article, Ire explains how to use CSS to properly style valid and invalid inputs depending on whether they are required or optional fields. For more complex forms, she also provides tips to add multiple error messages to one tooltip with JavaScript and explains how to add error messages directly to the DOM so all error messages will be displayed for all inputs at once. A boilerplate for real-time validation is also available. One for the bookmarks. (cm)


9. Upcoming Smashing Workshops

With so many techniques, tools, style guides, 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 classes are all about: practical front-end and RWD workshops that will help you become better front-end developers and designers, today.

Workshops at SmashingConf Freiburg

SmashingConf Barcelona

Workshops at SmashingConf Barcelona

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 costs — we’ll find a fair price for sure. Get in touch — it’s that easy! (vf)

10. New On Smashing Job Board

Here are the recent job openings published on our Smashing Job Board:

  • Frontend UI Developer at OptioPay (Berlin, DE)
    “OptioPay is a payment processor with a difference. Our software increases the value of any payment received by consumers from companies, by combining bank transfers with higher value gift cards. [...] We are looking for an experienced Frontend UI Developer to start as soon as possible. We offer the opportunity to gain experience and practical skills in an e-commerce startup, build a network of entrepreneurs and exercise real responsibility in a dynamic environment.”
  • Designer (Part Time) at Everyday Health (NYC, USA)
    “What to Expect, the world’s most recognized pregnancy and parenting brand is looking for a talented, eager and curious designer to join our Creative Services team. The designer works on a variety of digital and print projects for including mockups and product concepts for sales proposals, engaging digital advertising and other promotional projects as assigned.”
  • UX Designer at Marktplaats (Amsterdam, NL)
    “We’re on a journey to bring design thinking to every corner of Marktplaats. Because design isn’t just about crafting pixels or making products, it’s about creating possibilities. Do you want to join the UX team at Marktplaats and help us create a truly meaningful experience?”

11. Smashing Highlights (From Our Archives)

  • Creating Advanced Animations In Photoshop
    While animation in Photoshop is not a new concept, it definitely has come a long way in the last few years: The Timeline panel has been overhauled, video layers have been introduced, as has the ability to create keyframe animation. These additions have really upped Photoshop’s game.
  • A User In Total Control Is A Designer’s Nightmare
    How do you balance the creative control you give to the users, the usability of the product they make with your tool and the flexibility of that tool?
  • My (Simple) Workflow To Design And Develop A Portfolio Website
    A long time ago in a galaxy far, far away… a young designer embarked on an epic journey strewn with perilous layout challenges, constant procrastination, devious jQuery errors and deadly Internet Explorer bugs. It was a rite of passage that all designers must take in order to stand proud with their peers in this wide world we call the Web. Yes, I’m talking about creating your own portfolio website.

12. Recent Articles On Smashing Magazine

Design Articles

Coding Articles

Inspiration, Freebies, Misc.


Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.

Email: newsletter@smashingmagazine.com
Follow us on Twitter Join us on Facebook

The authors are: Cosima Mielke (cm), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).

unsubscribe update preferences view in your browser


Tuesday, June 7, 2016

Smashing Newsletter #159: Front-End Time Savers, React and… Star Wars!

With helpful front-end tools, type terms, React.js and, of course, Star Wars. Issue #159 Tuesday, June 7th 2016 188,525 readers View in the browser

The Smashing Email Newsletter

Dear Friends,

As designers and developers, we seem to be used to waiting. Hardly any article that gets published introducing a new technology passes by without a comment on how we "still" can't use the features due to the lack of support in legacy browsers. As a result, we tend to get stuck compromising on what we can't achieve rather than what we can accomplish.

However, no new technology literally breaks the experience in legacy browsers. Oh, a legacy browser doesn't support Flexbox? Well then, use JavaScript, table-cell and minimal positioning or floats as a fallback. No media queries support? Deliver a fixed-width layout. No SVG animations? Deliver an alternative image, or just change the view altogether.

In many scenarios, legacy browser support means supporting older versions of IE. That doesn't have to stop you though.
In many scenarios, legacy browser support means supporting older versions of IE. That doesn't have to stop you though.

Whenever a new technology appears in a modern browser that's used by a good segment of your user base, we can use it to progressively enhance experiences for capable browsers, providing the fallback for, you know, the other ones. For example, <link rel="preload"> gives us the ability to define custom loading logic without suffering the performance penalty, has been shipped in Chrome stable, so we can use it today. Furthermore, we can of course also make use of perceived performance optimization by using resource hints such as prefetch, dns-prefetch and even prerender as well, dynamically injecting them whenever necessary.

The same goes with CSS Containment, which we can use to can isolate style, layout and paint, so processing of components like the off-canvas navigation will be deferred by the browser unless the user needs them.

We don't have to wait — the technology is already available, but it's up to us to find the most interesting and efficient ways to use it to craft better experiences for our users. In fact, that's exactly what we're going to explore at our next conference, SmashingConf NYC next week. We do have a few tickets left, you know, and we'd love to see you there!

Keep designing, keep building!
Vitaly (@smashingmag)


Table of Contents

1. Do Great Work From Anywhere
2. Helpful Front-End Tools
3. Designing A Galaxy Far Far Away
4. A Simple And Intuitive Color Palette Generator
5. A Highly-Scalable, Offline-First React Boilerplate
6. Type Terms Explained
7. Compo: A Plugin To Handle UI Components In Sketch
8. Upcoming Smashing Workshops
9. New On Smashing Job Board
10. Smashing Highlights (From Our Archives
11. Recent Articles On Smashing Magazine

1. Do Great Work From Anywhere

Great work can be done from anywhere. All it takes is a laptop and a stable wifi connection — perhaps a cup of coffee, too. To help you find nice places where you can settle down and get stuff done, Workfrom collects remote work spots for digital nomads, freelancers and anyone who needs a bit of bustle around them to be productive.

Do Great Work From Anywhere

The platform lets you discover and share the best coffee shops, cafés, bars and co-working spaces in over 300 cities around the world, and to make your choice easier, you can use a range of filters to narrow down the hits. You need to concentrate and are looking for a quiet and spacious location? You want to bring your dog and enjoy some artisanal food along the way? Workfrom sure has the right place for you. Information on available power sockets, the level of background noise, work-friendly hours, and, if you log into the site, even on WiFi speeds, prevent you from surprises and lay the foundations for a productive stay. (cm)


2. Helpful Front-End Tools

If there's a repeating front-end problem, chances are high that somebody has already built a tool to solve it. SVG Crowbar is a Chrome-specific bookmarklet that extracts SVG nodes and accompanying styles from an HTML document and downloads them as a SVG file. AnyPixel.js makes it possible to use the web to create big, unusual, interactive displays. Chrome Canary now has a great workflow for capturing screenshots of live pages and hardware.

AnyPixel

Animated heat distortion effects? Done. Responsive punch-out avatars? Done, too. And if you want to ensure the code quality with every commit or deployment, you can use Stylelint or Parker to enforce consistent conventions and avoid errors in your stylesheets. Handy, and boosting the front-end workflow right away. (vf)


Advertisement
Ad


3. Designing A Galaxy Far Far Away

Take 22 Illustrator files that measure 1024 × 465152 px combined, put in 1000 hours of work, and add the story of Star Wars Episode IV. What you'll get is a project that will make your jaw drop: SWANH. Brought to life by illustrator and graphic novelist Martin Panchaud, SWANH tells the whole story of "Star Wars: A New Hope" in a huge infographic that requires 403.5ft (123m) of scrolling to get from top to bottom. And, well, it's worth it.

SWANH

Made up of 157 images, the sheer dimensions of the piece are impressive, and so is the love to detail that Martin Panchaud put into creating the Star Wars universe. But SWANH is more than eye candy for Star Wars lovers. It's also an experiment that wants to create a contrast to what we usually expect on the web: quickly understandable contexts and short stories. Brilliant. (cm)


4. A Simple And Intuitive Color Palette Generator

So you're looking for some fresh color inspiration? Then check out Color Supply. The in-browser tool lets you create color palettes intuitively with just two clicks. Simply select a base color from the color wheel and choose if you want to create a complimentary, split-compliment, analogous, triad or square harmony with it. It will then generate a palette of up to four colors based on your choice. Nifty!

Color Supply

You can also fine-tune the saturation of the palette with a slider, and to get a better impression of what the colors will look like in a real context, a small preview shows them applied to four icons. Color Supply also provides you with the hex values of your palette, so if you like what you see, you can go ahead and use your newly generated palette directly in your project. (cm)


Advertisement
Ad


5. A Highly-Scalable, Offline-First React Boilerplate

If you're building with React.js, and are looking for a performant as well as a highly-scalable boilerplate, react-boilerplate might be just for you. It provides a strong foundation for your React application while at the same time it also offers a pleasant experience for developers. For example, you can generate components and routes from the command line and skip the boilerplate writing. Also, saved changes to the CSS and JS are instantly reflected without having to refresh the page.

React Boilerplate

Other features that make both your workflow and your product a lot smoother include predictable state management, next-generation JavaScript with support for template strings, object destructuring, arrow functions and JSX syntax, as well as next-generation CSS, which allows you to code-split and ship only the styles that are on the page. With its focus on offline-first, the boilerplate also makes sure your applications are available even without a network connection from the moment your users load the app. And thanks to the boilerplate's unidirectional flow, change logging and time travel debugging are possible, too.

Sounds like something for you? To get up and running, simply clone the repo, install the dependencies, and clean the git repo. Once you've deleted the example app, you're ready to use some boilerplate magic for your own application. (cm)


6. Type Terms Explained

How well do you know typography terminology? Have you ever heard of a "counter"? Do you know what a "terminal" is? If you feel you have some catching up to do or want to refresh your memory, Type Terms is just the place to go.

Type Terms

The typography cheatsheet gets you familiar with the basics of typography jargon in a clear, concise and beautiful way. Twenty terms are described, each of them accompanied by a small, animated graphic to visualize it. By the way, a "counter" describes the (partially) enclosed area of white space in the "a", "b" or "d" letters. And "terminal" is the end of any stroke that doesn't include a serif, but a circular or tapered shape instead (think of the ball-shaped end of the top stroke of an "r", for example). Typography can be so much fun! (cm)


7. Compo: A Plugin To Handle UI Components In Sketch

UI components are the foundation of every design. However, surprisingly, most design tools aren't geared towards working with components. Time to close the gaps ourselves. That's exactly what designer Roman Shamin had in mind. Frustrated by the facts that Sketch lacks support for dynamic buttons and that even small changes in a component will prevent an already configured Symbol from working, he built the Sketch plugin Compo.

Compo

Compo gives you more flexibility, while removing some of the typical Sketch drawbacks. Once installed, you trigger the plugin by pressing ⌘J, and it will turn a text layer into a button or put an existing component in order. The buttons are dynamic and adapt their width to the field label. Additionally, you can influence the margins around the text by defining them directly in the layer name. The same works to align text in other components, too, of course. Compo is free and open source. (cm)


8. Upcoming Smashing Workshops

With so many techniques, tools, style guides, 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 classes are all about: practical front-end and RWD workshops that will help you become better front-end developers and designers, today.

Workshops at SmashingConf New York

Workshops at SmashingConf Freiburg

Workshops at SmashingConf Barcelona

Upcoming Smashing Workshops

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 costs — we'll find a fair price for sure. Get in touch — it's that easy! (vf)


9. New On Smashing Job Board

Here are the recent job openings published on our Smashing Job Board:

  • PHP/WP Developer at maam (Anywhere)
    "You're good with PHP! You like the idea of working in a startup with users as the part-time developer because you want something different from the usual agency work. We're looking for a person that can commit five to eight days per month for at least three months to start."
  • Sr. Front-End Engineer: Food Network at Scripps Networks Interactive (New York, New York)
    "Ever thought of combining your passion of engineering with your love of great lifestyle brands such as FoodNetwork.com, CookingChanneltv.com and Food.com? Now's your chance to work with such award winning websites that attract almost 50 million unique visitors a month in a Sr. Front End Engineer role."
  • Web Developer at Uni of Texas System (Austin, TX)
    "The Web Developer will use their skillset of HTML, PHP, JavaScript and JQuery to build websites, develop features for our CMS platforms, coordinate with the Communications team to achieve their goals, program front-end themes and address site issues."

10. Smashing Highlights (From Our Archives)

  • The Making Of "In Pieces": Designing an Interactive Exhibition With CSS Clip Paths
    Web-based interactive experiences are widely used in the modern age for a variety of reasons. After discovering the little-known clip-path property of CSS, Bryan James embarked upon a five-month interactive production journey of my own with a different purpose: to raise awareness of the struggles of 30 similarly little-known endangered species.
  • Career Advice For Graduating Web Design Students
    Jeremy Girard recently said goodbye to some of my own website design and development students. Instead of teaching lessons in design principles or responsive websites, he spent their final evening together answering their questions. One of those questions was, "What is the best career advice you've ever received?"
  • Gone In 60 Frames Per Second: A Pinterest Paint Performance Case Study
    The article discusses how to improve the paint performance of your websites and web apps. This is an area that we web developers have only recently started looking at more closely, and it's important because it could have an impact on your user engagement and user experience.

11. Recent Articles On Smashing Magazine

Design Articles

Coding Articles

Productivity, Inspiration, Misc.


Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.

Email: newsletter@smashingmagazine.com
Follow us on Twitter Join us on Facebook

The authors are: Cosima Mielke (cm), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).

unsubscribe update preferences view in your browser