Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Smashing Newsletter: Issue #187

This newsletter issue was sent out to 227,579 recipients newsletter subscribers on Tuesday, August 1st 2017.

Editorial

One of the very first things to do when travelling abroad is buying a SIM card to stay connected. But what if you didn’t? Or even better — what if you don’t take a phone with you in the first place? As an experiment, after crashing a phone’s glass, I decided to spend 14 days of my travelling abroad without a mobile phone altogether. No access to emails on the go, no tweets, no Facebook, no nothing. That’s all reserved for laptop-only experiences in early mornings or evenings.

The results so far are quite surprising. Without a phone, you have to be more deliberate in your planning and your choices, and you have to plan ahead of time not to get lost. You also have to find a map, and an alarm clock, and you have to train your writing skills to take notes quickly on the go. Rather than picking recommendations from tourists online, I’ve been asking for recommendations from locals offline. As a result, I spent more time interacting directly with locals whom I wouldn’t have met otherwise.

Without a permanent connection or VPN access, it turned out to be difficult to work on the go, but I must admit that working sessions have become much more focused and considerate. Also, interestingly enough, with a connection being flaky most of the time, it’s surprising how slow most websites actually are. Having a 500 MB limit for 3 days is barely enough to purchase tickets or even look up destinations — even in data-saving browser mode. On slow connections, Facebook is remarkably slow, but Twitter is surprisingly fast.

Most importantly, staying without a phone has been a liberating experience. As Craig Mod put it, you might get bored without the phone, but boredom is critical to noticing1 and whitespace is critical for thinking. Almost automatically you start paying more attention to little random things happening around you, living in the moment and actually experiencing it fully.

My experiment is only halfway through, and I’ll share more of my findings mid-August. I think crashing the screen of that phone was one of the best things I’ve done for myself in years.

Stay disconnected,
Vitaly (@smashingmag)

Table of Contents

  1. Complex Grids Without Complex Calculations2
  2. Only 11 Weeks Left For SmashingConf Barcelona!3
  3. Version Control For Sketch4
  4. Best Practices For Designing A Chatbot5
  5. How To Become A Pro Remote6
  6. Make Your Workday More Productive7
  7. Taking Your Color Schemes To The Next Level8
  8. FOUT Without Any JavaScript9
  9. A University In Your Pocket10
  10. Upcoming Smashing Workshops11
  11. New On Smashing Job Board12
  12. Most Popular Articles In July13
  13. Most Recent Articles On Smashing14

151. Complex Grids Without Complex Calculations

Did you note that CSS Grid has been shipped with a new CSS unit called the fr (fraction) unit? The unit makes it possible to quickly slice the grid up into proportional columns or rows. Robin Rendle explains how it works16.

fr-unit.png17

The fr unit can be used with %, px or em when defining grids to set columns to one fraction without causing any overflow on the x-axis, and thus preventing horizontal scrolling. Note that you can’t use calc() in combination with the fr unit, e.g. calc(1fr - 2em) is not allowed. (cm)

182. Only 11 Weeks Left For SmashingConf Barcelona!

The web is constantly changing, and it’s easy to fall behind. So, how do you stay on track? Where can you go to optimize your websites’ performance? How about SmashingConf Barcelona19! On October 17th and 18th, we’ll be returning to the Palau de la Música Catalana with two packed days of hands-on sessions by some of the most respected members of our industry.

SmashingConf Barcelona20

This conference will focus on Design Systems, SVG techniques, performance, accessibility, and user experience, and as always with SmashingConf, will contain loads of useful takeaways. Tickets are available now21. We can’t wait to meet you! (cm)

223. Version Control For Sketch

Devs have Git for version control, and designers? Well, Git. At least if you’re working with a Sketch version not older than 43 and pair it with the version control tool Abstract, as Marie L. describes on uxdesign.cc23.

24

Sketch now allows us to read the underlying structure of a .sketch file by unzipping its content. In it, you’ll find JSON files with details about the position, appearance, contents, and names of each layer, group, and page. And that’s exactly where Abstract25 comes in.

Abstract uses this information to enrich your design workflow with the power of Git’s version control, so that you and your team members can work on your own local versions of a file, then merge them together without creating duplicates. Tracking changes in files, recording their history, opening up branches with different statuses, and a better review process — Abstract is a promising solution to (finally!) make the dream come true for designers. (cm)

264. Best Practices For Designing A Chatbot

Chatbots are changing the way we design experiences, and this means that we have to rethink how we make our design decisions. It’s not so much about what users see anymore, but what the conversation with the bot feels like. To get you fit for the challenges that conversational UIs bring along, Ish Jindal, founder of the chatbot building platform Tars27, wrote up his lessons learned and best practices from designing chat experiences.

Chatbot Best Practices28

Which role do message delays29 play when designing a bot? What’s the optimal message length30? And how does rich media content31 like GIFs and memes influence the conversation? These are the questions that this three-part article series attempts to answer. Good pointers when you want to start building your first chatbot. (cm)

325. How To Become A Pro Remote

No doubt, working remotely has its advantages, but there are also quite some hurdles you need to overcome in order to make collaboration between team members (who are miles or even time zones apart) fruitful and efficient. To give your remote team a boost, the folks at Hanno put together a Remote Starter Kit33 jam-packed with tools that have proved themselves invaluable when working together as a team of 10 designers who are spread all across the globe.

Remote Starter Kit34

In the starter kit you’ll find useful apps, tried and tested processes (for weekly updates, for example), and tools to connect the team and facilitate discussions, help brainstorm ideas, or simply foster the team spirit. Handy little helpers to keep your remote team happy. (cm)

356. Make Your Workday More Productive

What tasks does your job include? And how do you prioritize them? There probably isn’t an easy answer to these questions, especially if your job requires you to switch contexts frequently. To help prioritize your work better and bring order to the task-switching chaos, Rian van der Merwe shares a useful little tip: create a mind map36 to gain a better understanding of what you’re doing.

Mind Mapping To Clarify Your Job37

The idea is to create a detailed map of all the things you do during a particular week, so you can identify and prioritize your focus areas. By doing this, you’ll also notice where your work overlaps with that of your team members and where you might maybe need to scale back. An eye-opening experience that is bound to make your workday a lot more productive. (cm)

387. Taking Your Color Schemes To The Next Level

You’re looking for a quick way to create color palettes and get some fresh color inspiration as well? Then be sure to check out Coolors39. The browser tool lets you create color palettes as easily as pressing the spacebar on your keyboard.

Coolors40

In fact, just press the spacebar, and Coolors will present you a random color palette. To gain more control over the result, you can also lock individual colors of your palette to pair them with matching colors. Or you pick up starting colors from your images and get the perfect combination automatically. A nice bonus: To prevent bad surprises when using your palette in an actual project, the tool offers a mode in which you can see what the palette will look like to color-blind users. Once you’re happy with the result, you can export the palette in a number of formats (PNG, PDF, SCSS, or SVG) or just copy the URL to share it.

Speaking of color schemes. Have you already heard of the new Sketch plugin Chain41? It lets you create dynamic color relations in Sketch with just one click. All you need to do is select the layers to chain, the reference color and the transformations you want to apply, and — ta-daa — you get perfectly harmonious color relations. Nice! (cm)

428. FOUT Without Any JavaScript

With the recent Chrome 60 stable release, we got a small step closer to support for font-display. Why we might want to have it? Well, by adding font-display: swap to your @font-face block, you can opt-in to FOUT; font-display: fallback or font-display: optional can be used if you consider web fonts unnecessary to the design, as Zach Leatherman describes43.

font-display44

Only one single CSS descriptor to handle FOUT without any JavaScript polyfill and without the need to modify the font itself through subsetting or otherwise, font-display has the makings to make it happen — if browser support will become more widespread someday. Apart from Chrome 60+, Opera versions 47 and newer currently support the desriptor, and it’s in progress and behind a flag on Firefox Platform Status. As support is still very limited today, font-display by itself isn’t a sufficient solution yet. However, it’s still a good idea to plan ahead and add it to your font-face blocks already today. (cm)

459. A University In Your Pocket

To get better at what we do and improve ourselves further, there’s one credo we should always keep in mind: never stop learning. So why not take a bit of time aside each week to learn something new? A programming language you don’t master yet, some new business skills maybe, or even a foreign language? If you’re thirsty for knowledge, Class Central46 certainly has something to keep you busy.

Class Central47

The platform lets you search online courses from over 700 universities around the world on all kinds of subjects — from web development, art and design, marketing, computer and data science to engineering, science, humanities, and many more, as well as lectures from renowned companies such as Google and Microsoft. The courses are taught mainly through short video lectures that you can watch whenever and wherever you want. Discussion forums, assignments, online quizzes and exams help you strengthen your newly acquired skills. Taking the courses is free, costs for receiving graded assignments or a certificate at the end of the course vary depending on the provider. (cm)

4810. Upcoming Smashing Conferences

We create practical, hands-on conferences highlighting techniques, strategies and design patterns used in real-life products by experienced designers and developers. No fluff, no theory: just 2 days packed with practical front-end and UX techniques. Coming up: SmashingConf Freiburg, Germany49 (Sep 11–12) and SmashingConf Barcelona, Spain50 (Oct 17–18). That — and we love cats, too.

SmashingConf Freiburg 201751

SmashingConf Freiburg, Germany (Sep 11–12)

SmashingConf Barcelona 201757

SmashingConf Barcelona, Spain (Oct 17–18)

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.com67 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!

6811. New On Smashing Job Board

Here are some of the most recent job openings at Smashing Jobs69:

  • Project Manager — Digital, Websites, Apps70 at Morley (Saginaw)
    “We’re looking for someone to lead digital projects from concept to completion and can communicate via both marketing speak and tech talk. If you understand these acronyms – HTML, CSS, CMS, API, FTP, SEO, – and you experience with formal project management methodologies, you could be a great fit for this position.”
  • Senior Graphic Designer71 at Verily Magazine (New York, New York)
    “Verily is currently looking for a full-time Graphic Designer to join our positive lifestyle editorial team. We’re a small, passionate and entrepreneurial team, which means you’ll have influence over every touch point our brand has, either through hands-on creation or creative oversight.”
  • React.js Developer72 at Moss Corporation (Cleveland, OH)
    “We are seeking a Front End Web Developer with advanced knowledge of React.js or other Component-based UI Architectures. The ideal candidate is motivated to combine the art of design with the art of programming.”

7312. Most Popular Articles In July

  • Designing The Perfect Date And Time Picker74
    Not every date picker fits every interface, just like not every interface actually needs a date picker. But when a date picker is required, quite often it’s just a bit too tedious and annoying to specify that one date. So how can we do better?
  • “Why We Didn’t Use A Framework” (Case Study)75
    When Nick Gauthier and his team set out to build MeetSpace (a video conferencing app for distributed teams), they had a familiar decision to make: What’s their tech stack going to be? In this case study, Nick shares why they avoided a front-end framework and decided to use vanilla JavaScript.
  • Designing The Perfect Accordion76
    The Accordion is an immensely useful pattern for progressive disclosure — highlighting important details of a section and revealing more details upon a tap or click, if necessary. But how do you design the perfect accordion? The choice and position of the icon matters, and so does interaction design. A detailed run-down.

7713. Most Recent Articles On Smashing

  • Designing The Perfect Slider78
    More often than not, sliders are just a bit too difficult to use, require just a bit too much precision, are a bit too confusing to navigate and a bit too difficult to grab and move around. So what are the do’s and don’ts and things to keep in mind when designing one?
  • Progressively Enhancing CSS Layout: From Floats To Flexbox To Grid79
    The CSS grid layout module is one of the most exciting developments since responsive design, and, naturally, the specification is one of the hot topics at meet-ups and conferences. But there’s still a good amount of uncertainty about using it. Manuel Matuzović addresses common questions.
  • The Missing Advice I Needed When Starting My Career80
    Do you ever wish you had a time machine? Paul Boag does, but not for the usual reasons. He wants a time machine so he can go back and have a frank conversation with his younger self. The missing advice you might need when starting out.

Footnotes

  1. 1 https://twitter.com/craigmod/status/891318793380691968
  2. 2 #a1
  3. 3 #a2
  4. 4 #a3
  5. 5 #a4
  6. 6 #a5
  7. 7 #a6
  8. 8 #a7
  9. 9 #a8
  10. 10 #a9
  11. 11 #a10
  12. 12 #a11
  13. 13 #a12
  14. 14 #a13
  15. 15 #
  16. 16 https://css-tricks.com/introduction-fr-css-unit/
  17. 17 https://css-tricks.com/introduction-fr-css-unit/
  18. 18 #
  19. 19 https://smashingconf.com/barcelona-2017/
  20. 20 https://smashingconf.com/barcelona-2017/
  21. 21 http://smashingconf.com/barcelona-2017/registration/
  22. 22 #
  23. 23 https://uxdesign.cc/in-search-for-the-perfect-workflow-version-control-for-sketch-powered-by-git-9f584ed6d167
  24. 24 https://uxdesign.cc/in-search-for-the-perfect-workflow-version-control-for-sketch-powered-by-git-9f584ed6d167
  25. 25 https://www.goabstract.com/
  26. 26 #
  27. 27 https://hellotars.com
  28. 28 https://blog.hellotars.com/chatbot-building-best-practices-1-message-delays-9fc8eb75e3b6
  29. 29 https://blog.hellotars.com/chatbot-building-best-practices-1-message-delays-9fc8eb75e3b6
  30. 30 https://medium.com/@hellotars_ai/bot-best-practices-2-message-length-bea349838f7f
  31. 31 https://blog.hellotars.com/chatbot-building-best-practices-3-rich-media-content-bcee038f909f
  32. 32 #
  33. 33 http://www.remotestarterkit.com/
  34. 34 http://www.remotestarterkit.com/
  35. 35 #
  36. 36 http://www.elezea.com/2017/07/mind-mapping-job-productivity/
  37. 37 http://www.elezea.com/2017/07/mind-mapping-job-productivity/
  38. 38 #
  39. 39 https://coolors.co/
  40. 40 https://coolors.co/
  41. 41 https://lalomrtnz.github.io/Chain/
  42. 42 #
  43. 43 https://www.zachleat.com/web/comprehensive-webfonts/#font-display
  44. 44 https://www.zachleat.com/web/comprehensive-webfonts/#font-display
  45. 45 #
  46. 46 https://www.class-central.com/
  47. 47 https://www.class-central.com/
  48. 48 #
  49. 49 https://www.smashingconf.com
  50. 50 https://smashingconf.com/barcelona-2017/
  51. 51 https://smashingconf.com
  52. 52 https://shop.smashingmagazine.com/products/smashingconf-freiburg-2017
  53. 53 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-ux-freiburg-2017
  54. 54 https://shop.smashingmagazine.com/products/workshop-alla-kholmatova-freiburg-2017
  55. 55 https://shop.smashingmagazine.com/products/workshop-umar-hansa-freiburg-2017
  56. 56 https://shop.smashingmagazine.com/products/workshop-rachel-andrew-freiburg-2017
  57. 57 https://smashingconf.com/barcelona-2017/
  58. 58 https://shop.smashingmagazine.com/products/smashingconf-barcelona-2017
  59. 59 https://shop.smashingmagazine.com/products/workshop-alla-kholmatova-barcelona-2017
  60. 60 https://shop.smashingmagazine.com/products/workshop-gemma-obrien-barcelona-2017
  61. 61 https://shop.smashingmagazine.com/products/workshop-horace-dediu-barcelona-2017
  62. 62 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-rwd-barcelona-2017
  63. 63 https://shop.smashingmagazine.com/products/workshop-anton-irene-barcelona-2017
  64. 64 https://shop.smashingmagazine.com/products/workshop-brad-frost-barcelona-2017
  65. 65 https://shop.smashingmagazine.com/products/workshop-paul-boag-barcelona-2017
  66. 66 https://shop.smashingmagazine.com/products/workshop-sarah-drasner-barcelona-2017
  67. 67 mailto:vitaly@smashingconf.com
  68. 68 #
  69. 69 http://jobs.smashingmagazine.com/
  70. 70 https://jobs.smashingmagazine.com/j/Project-Manager-Digital-Websites-Apps/2503551
  71. 71 https://jobs.smashingmagazine.com/j/Senior-Graphic-Designer/2503466
  72. 72 https://jobs.smashingmagazine.com/j/React-js-Developer/2503458
  73. 73 #
  74. 74 https://www.smashingmagazine.com/2017/07/designing-perfect-date-time-picker/
  75. 75 https://www.smashingmagazine.com/2017/05/why-no-framework/
  76. 76 https://www.smashingmagazine.com/2017/06/designing-perfect-accordion-checklist/
  77. 77 #
  78. 78 https://www.smashingmagazine.com/2017/07/designing-perfect-slider/
  79. 79 https://www.smashingmagazine.com/2017/07/enhancing-css-layout-floats-flexbox-grid/
  80. 80 https://www.smashingmagazine.com/2017/07/missing-advice-when-starting-career/

↑ Back to top Tweet itShare on Facebook

The Smashing Editorial prepares bi-weekly newsletter issues with lots of love and appreciation for the good ol' web with the latest tips and tricks for designers and web developers. Vitaly Friedman, Smashing Magazine's editor-in-chief, started this project back in early 2010. Today, we can't imagine a better way of informing and communicating with our fans and readers!

Comments are closed.

↑ Back to top