The Server Timing header provides a discrete and convenient way to communicate backend server performance timings to developer tools in the browser. Adding timing information to your application enables you to monitor back-end and front-end performance all in one place. Over the years developer tools have been improved to help us troubleshoot these sorts of performance issues in the front end of our applications. Browsers now even have performance audits built right in. This can help track down front end issues, but these audits can show up another source of slowness that we can’t fix in the browser.
Read more…
In this article, William Lim describes the effect of scroll bouncing and how it works on different web browsers. It contains reviews of several different solutions that are suggested on the web that can be used to prevent scroll bouncing. The CSS property, overscroll-behavior, which was implemented in Chrome on December 2017 and in Firefox on March 2018, is also described here. A good understanding of this effect is very helpful for building or designing any website that has fixed elements.
Read more…
The Beacon API is a lightweight and efficient way to log information from a web page back to a server. It is used for sending small amounts of data to a server without waiting for a response. Think of it like a postcard sent home when on vacation. You put a small amount of data on it, put it in the mailbox, and you don’t expect a response. In this article, Drew McLellan will help you find out how that can be used and what makes it so different from traditional Ajax techniques.
Read more…
We asked the Smashing Community for their favorite tips and tricks when editing text and code. With so many great suggestions, Rachel Andrew decided to collect them all into one article so you can add it to your useful bookmarks. Thanks to everyone who took the time to reply and share their best-appreciated tools and techniques — we sincerely appreciate it!
Read more…
When it comes to performance, what works in the browser doesn’t necessarily suit Node.js. So, how do we make sure a Node.js implementation is fast and fit for purpose? Node is a very versatile platform, but one of the predominant applications is creating networked processes. In this article David Mark Clements is going to focus on profiling the most common of these: HTTP web servers.
Read more…
Since last year, it has been possible to add Siri support to an app if it fits into one of Apple’s pre-defined use cases. Adding Siri support to an app has a lot of steps, with a lot of configuration. But the code needed to handle the requests is fairly simple. In this article, Lou Franco will take you through the steps of setting up a extension on Apple’s developer website and of adding the Siri extension code to the app. Find out if SiriKit will work for you and how to use it.
Read more…
Manually clicking through different browsers as they run your development code, either locally or remotely, is a quick way to validate that code. However, it’s not a solution for testing the full breadth of your site’s code base on the assortment of browsers and device types available to your customers. That’s where automated testing really comes into its own. In this article, Jason McConnell provides an overview of the concepts, technologies and coding techniques involved with running test scripts against browsers automatically using WebDriverJS on Windows 10 and Microsoft Edge.
Read more…
When Denys Mishunov was invited to speak at one of the best front-end conferences in Europe, he felt like he did not deserve to be at that conference. And he didn’t even know that those feelings of his had a name! This is called impostor syndrome and it is a real psychological issue, rooted deeply in many of us. If we do not pay attention to its symptoms, if we blindly follow its triggers, then we can get into real psychological trouble. The good news is that, even though there is no pill for it, we can change out attitude towards it. Simply acknowledging the feeling can help to neutralize its effect.
Read more…
Karim Maaloul decided to start a series of short WebGL experiments on Codepen, and he has finally found the time to compile them all together on a single website named “Moments of Happiness”. In this article, Karim has detailed the solution used to make a running cycle. On his Codepen page, all of these experiments are available, with the code at your disposal. Feel free to play around and make your own interactive toys. As you’ll see, all of the experiments share one principle: The behavior of each character responds programmatically to user input. No precalculated animation — every movement is defined at runtime.
Read more…
Making toggle button inclusive is a question of language, visual design, markup, and behavior. In this inaugural post, Heydon Pickering will be exploring what it takes to make toggle buttons inclusive. As with any component, there’s no one way to go about this, especially when such controls are examined under different contexts. However, there’s certainly plenty to forget to do or to otherwise screw up, so let’s try to avoid any of that. You can take the basics explored here and add all sorts of design nuances, including animation. It’s just important to lay a solid foundation first.
Read more…
