Over the summer, Adobe XD released two great prototyping features: fixed elements and overlays. When you work with prototypes and want them to be more interactive, functions like these will be very helpful. In this article, Manuela Langella will show you how to set a menu bar as a fixed element and how to apply an overlay transition in a prototype, to simulate a menu opening from the click of a button. She’ll also include an Illustrator file with icons, which you can use to set up your examples quickly. Let’s get started!
Read more…
In the last two articles, we have looked at what happens when we create a flex container, and also taken a look at alignment. This time we explore the often confusing issue of sizing in Flexbox. How does Flexbox decide how big things should be? In this article, Rachel Andrew will explain some of the finer points of how Flexbox works out how big the flex items are. It can seem a little academic, however, taking some time to understand the way this works can save you huge amounts of time when using Flexbox in your layouts. If you and your design don’t agree with what Flexbox thinks is best then you can take control back by setting your own flex-basis.
Read more…
The web is evolving at such a fast pace that it can be hard to stay on top of things. To give you an overview of what happened in the web dev world in the past few weeks, Anselm Hannemann once again compiled his monthly update.
Read more…
Smashing Book 6 is now shipping worldwide. With everything from design systems to accessible single-page apps, CSS Custom Properties, CSS Grid, service workers, performance patterns, AR/VR/XR, conversational UIs and responsive art direction. Check table of contents and get the book now.Read more…
Automated accessibility testing is a process where you use a series of scripts to test for the presence, or lack of certain conditions in code. These conditions are dictated by the Web Content Accessibility Guidelines (WCAG), a standard by the W3C that outlines how to make digital experiences accessible. Automated accessibility tests are a great resource to have, but they can’t automatically make your site accessible. Use them as one step of a larger testing process. Today, Eric Bailey will take a deep look into accessibility testing.
Read more…
Learn about the basics of animation in After Effects by animating one of the most famous type characters and the state of the iMessage App Store in 2018 when it comes to stickers. In this article, Simon Schmid brings you a step-by-step guide of setting up a canvas in After Effects and then he will go through with the animation. You’ll also read about how well the app containing more than 30 animated stickers worked and what some of the specific issues are you might be having on the App Store for iMessage.
Read more…
What are the fundamentals of machine learning, and what are the necessary tools to evaluate risk and other concerns in a machine learning application? The goal of machine learning is to find patterns in data and use those patterns to make predictions. In this article, Alvin Wan will cover everything you need to get started. By the end, you should have an understanding of how to advance your practice and study of machine learning. Let’s begin!
Read more…
Building websites is hard. Being user-focussed, having a progressive enhancement mindset, and thinking things through from the beginning can have a real impact on both the speed and quality of delivery. In this article, Shane Hudson is going to explore building a text box, in an exaggeration of situations many of us often find ourselves in. Hopefully, by the end of this article, you can all feel more emphatic to how the journey from start to finish is rarely linear.
Read more…
With the release of iOS 12 and XCode 10, the view controller in the content extension now enables user interaction which means notifications will become even more powerful and customizable. There are several new notification features such as new authorization options, dynamic quick actions and user interaction within notifications. In this article, Kaya Thomas will take a look into how to implement these features and if they are right for your app.
Read more…
This week, CSS Shapes ships in a production version of Firefox with the release of Firefox 62 — along with a very nice addition to the Firefox DevTools to help us work with Shapes. In this article, Rachel Andrew will take a closer look at CSS Shapes and how to create non-rectangular shapes using images, gradients, and basic shapes. We also discover how the new tools in Firefox make editing shapes easier.
Read more…
