Dear Friend,
This week, we were hoping to run our very first online conference, SmashingConf Live. Smashing has always been about community and bringing people together for a celebration of one another.
However, we don’t feel like now is the time for a ‘celebration.’ The murder of George Floyd, Ahmaud Arbery, and Breonna Taylor, and the protests around the world against racism and police brutality should be the focus right now. Therefore, we took the difficult decision to postpone the conference.
Instead, we’ll host a free Smashing Meets event today. An event that is open to everyone in the web community. With sessions on performance, CSS, GraphQL, and creative courage. If you’d like to come along to listen and to chat with friends around the world, we’d love you to join us.
— Rachel (@rachelandrew)
Table of Contents
1. Black Illustrations
Black people and people of color are often underrepresented in illustrations and visuals. To spark change in the digital landscape, the team at 5four created Black Illustrations, illustration packs that paint a more diverse picture and show black people and people of color in a myriad of tasks.
There are six illustration packs that can be used on websites, pitch decks, infographics, or anywhere you like. Two of the decks are free to download: “The Office Hustle” shows people in an office environment, working from home, and having conversations, as well as in a healthcare setting, while “The Movement Pack” calls attention to #BlackLivesMatter and the fight against racial inequality. Other packs include education- and lifestyle-themed images. Beautiful designs with a powerful message. (cm)
2. Increase Conversion Without Alienating Customers
Does your manager insist on using dark patterns to trick customers into buying? Or has an A/B test shown that an annoying pop-up does increase sign-ups? Whether we are designers, marketers, entrepreneurs, or product owners, we are all in the same boat: We want to give users a good experience, but we also need them to take action. More often than not, these things are considered to be mutually exclusive, but they don’t have to be.
That’s why we teamed up with Paul Boag to create Click! How to Encourage Clicks Without Shady Tricks, a practical guide that shows you how to increase clicks, build trust and loyalty, and drive leads while keeping users respected and happy at the same time. You can download the complete first chapter as a free PDF excerpt (17.3 MB) or get your copy right away, of course. Books are now shipping worldwide.
3. The Future Is Here
Imagine you are working on a project and want to add a picture of a book to it. You have the book right beside you on your desk, so you take out your phone, take a picture of the book, send the picture to your computer, open it in Photoshop, remove the background, and, finally, include the picture in your file. Well, now what if you could copy and paste the book from reality onto your screen, just where you want it to be? What might sound like science fiction, is already possible today.
The research prototype AR Copy Paste allows you to copy elements from your surroundings and paste them into an image editing software. Three independent modules make it happen: a mobile app, a local server that acts as the interface between the app and Photoshop and finds the correct position on your screen, and, last but not least, an objection detection/background removal service to cut the image into shape. An impressive peek at the future of AR. (cm)
4. Insights Into How Developers Work Today
Since almost a decade, the yearly Developer Survey conducted by Stack Overflow is the largest survey of people who code. This year, they made it more representative of the diversity of programmers, asking 65,000 developers from around the world how they learn, which tools they use, and what they want. The survey was conducted in February and the results offer a comprehensive look inside the community.
The survey covers the developers’ professional and demographical background, looks at tools and their popularity, what the respondents’ dev environments look like and how they learn and solve problems, just like at their career values, job priorities, and working conditions. Interesting insights guaranteed. (cm)
From our sponsor
Join web.dev LIVE: A three-day web developer digital event by Google
On June 30 untill July 2, you can tune into web.dev LIVE and join Google’s Web Platform team from the comfort of your homes to learn modern web techniques and connect with each other.
5. A Magic Notebook For Exploring Data
Open source has transformed software development, making sharing, collaboration, and transparency the norm. Inspired by this, Observable aims at reimagining data science for a connected world. To make it more approachable, accessible, and social.
Described as a “magic notebook for exploring data and thinking with code”, Observable lets you sketch with live data. You can prototype visualizations, connect to Web APIs, and see your “notebook” update instantly when changes are made. Learning from one another, sharing and reusing components with a community of fellow authors is a key part of the concept, teams are even able to edit a notebook together in realtime. Now what to make with it? Reports, explanatory visualizations, UI prototypes, documentation, art projects, visual designs — only your imagination is the limit. (cm)
6. Global And Component Style Settings With CSS
Have you ever considered using CSS Variables to create a pattern library? If not, Sara Soueidan shares some valuable tips for doing so.
The ability to scope variables to components comes in especially handy to create more manageable project styles and more portable patterns, as Sara shows. You can use them to create a stylesheet that contains the global settings of a project (think colors, fonts, type scales, icons, etc.) so that, whenever any of those settings need to change, you know exactly where to make that change, and it will propagate consistently throughout the entire system. To go a step further, Sara also explains how she uses CSS Variables to define a library of local, component-scoped styles that can be used across projects. A great way to speed up your prototyping workflow. (cm)
7. See Easing Curves In Action
Movement in the real world is something fluid, no harsh or instant starts or stops, no constant speed. Easing curves help us bring that natural feel to motion on the web. However, in practice, they can be quite abstract to grasp, too.
With Easings, Paul Macgregor built a useful tool to visualize the effect common easing curves have on a range of interfaces — from a gallery carousel to a side menu, scroll jack, and modal. Just choose an easing curve from the collection to see it in action or enter a custom one. One for the bookmarks. (cm)
From our sponsor
Build in-demand skills in Northwestern’s online MS in Info. Design & Strategy
Earn your master’s degree online.
8. Licenses Summarized At A Glance
Too long, didn’t read. That’s the reaction many of us have when it comes to licenses or terms of service. However, sometimes there’s no getting around them. TLDRLegal might help you in those cases.
The site summarizes popular open source and software licenses at a glance, giving short and concise information on what can be done, what cannot, and what’s necessary to keep in mind. The summaries are peer-reviewed, the most visible licenses even checked by a lawyer. A real timesaver. (cm)
9. CSS Art In A Single Div
What can you do in a single div? Lynn Fisher has a lot of creative answers to this question, as her CSS drawing project A Single Div shows.
Every drawing is made up of CSS living inside a single div element and uses a combination of Pug for templating and Stylus for CSS preprocessing. From lettering and geometrical patterns to random objects and little characters, each colorful tile is a wonderful example of what can be accomplished with CSS. (cm)
10. Upcoming In Smashing Membership
Click! How to Encourage Clicks Without Shady Tricks is finally here, our new practical guide on how to build trust, increase conversion, and boost business KPIs effectively — without alienating people along the way. The eBook (PDF, ePUB, Kindle) is, and always will be, available to Smashing Members for free.️
We’re also busy preparing new Smashing TV live sessions at the moment, so be sure to keep an eye on the schedule to not miss out on anything.
Dear friends, thank you for your kind support. It allows us to bring you great content, pay all our contributors fairly, and reduce advertising on the site. Join us in Smashingland where everyone is beautiful and you never get merge conflicts. 😉
11. Our Next Smashing Workshops
In our workshops, we explore best practices and interesting techniques in front-end and interface design, always focusing on actual solutions to real-life problems.
We also have online workshops that are designed to give you the same experience and access to experts as in an in-person workshop, but without needing to leave your desk.
Meet Smashing Online Workshops on front-end & UX, with Miriam Suzanne, Marcy Sutton, Harry Roberts and many others.
Or, if you’d like to run an online workshop with your team, please get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you’re facing and would like to solve. Get in touch — it’s that easy! (vf)
12. New On Smashing Job Board
-
IT Specialist at U.S. Securities & Exchange Commission (Washington. DC)
“If selected, you will join a well-respected team within the Human Resources Technology & Information Management Branch that is responsible for recommending and/or providing technology solutions to expand the technical capabilities of HR systems and applications, and developing solutions to meet the increasingly complex HR needs of the SEC.”
-
Full-Time Web And Graphic Design Instructor at Madison Area Technical College (Madison, WI)
“The School of Business & Applied Arts at Madison College in Madison, Wisconsin is now hiring for two full-time instructors who will complement the depths and strengths of the Web and Graphic Design faculty, program and certificates.”
-
Software Engineer — Site Reliability Engineering (SRE) at Microsoft (Dublin)
“At Microsoft, our mission is to empower every person and every organisation on the planet to achieve more. As a member of our engineering team, you will play an integral part in making that happen, navigating us into the future and impacting the lives of people all around the world.”
13. Our Most Popular Articles
-
How To Design A Brand Logo (With Ease)
Designing a logo is just as complex a task as building a website. Not only do you need to understand what goes into making a great logo, but you need the right tools to create it. This article explains how easy it is to create a logo with tools such as the well-known Wix Logo Maker.
-
How To Feel More Energized Even When You’re Stuck At A Desk All Day
Just because working indoors, at a desk, in front of a computer screen has been known to cause issues, that doesn’t mean you can’t take steps to lessen or remove those negative side effects from your workday. Learn how e-bikes (like the ones you can get from Rad Power Bikes) can help you keep moving.
-
From Static Sites To End User JAMstack Apps With FaunaDB
To make the move from “site” to app, we’ll need to dive into the world of “app-generated” content. In this article, we’ll work on a simple demo by ingesting and posting data to FaunaDB and then extend that functionality in a full-fledged application.
This newsletter issue was written and researched by Cosima Mielke, Iris Lješnjanin, Rachel Andrew, Vitaly Friedman and Christiane Rosenberger.
Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.
Follow us on Twitter • Join us on Facebook
