Testing is a critical process that developers should integrate into their workflow to minimize the number of bugs that get caught in the quality assurance phase. In this article, Lawrence Howlett shows you what to consider when creating a front-end testing plan and how to test efficiently accross browsers, devices and web pages. Front-end testing also needs to be budgeted for — with time, resources and money. Whichever tool you pick, stick with it, define a process and put the effort in. The result will be a better website, with significantly fewer bugs.
Read more…
In the wake of so much “CSS versus JavaScript animation” infighting, a new API specifically for web animation is coming out that might just unite both camps. In 2014, Rachel Nabors had the chance to travel the world to talk about using animation in user interfaces and design. She met and interviewed dozens of people who use and champion both CSS and JavaScript. What you’re about to read is purely observational and as unbiased an account as you will be able to find on the subject of web animation.
Read more…
In this article, Daniel Sternlicht walks you through the development process of a Chrome extension with modern web tools and libraries. It all begins with an idea. Daniel thought it would be nice to create a Chrome extension that enables you to mark your reading progress in articles so that you can continue reading them later — anywhere. “Markticle” is the name he chose for this extension. He’ll share here the technologies that he used to develop it. After reading this article, you’ll have a ready-to-use “Save for Later”-like Chrome extension.
Read more…
In this article, Sara Soueidan will go over the prerequisites and techniques for working with CSS in SVG.
She’ll also go over how to export and optimize SVGs, techniques for embedding them and how each one affects the styles and animations applied, and then we’ll actually style and animate with CSS. Make your SVGs accessible! You can do several things to make that happen. In addition to accessibility, don’t forget to optimize your SVGs and provide fallbacks for non-supporting browsers. We hope you’ll find this article to be useful.
Read more…
CSS is usually considered a language for applying styles to webpages. However, in this article Krasimir Tsonev will show you that it is more than that. It is also a handy tool for collecting statistics. What matters in the end is the impact for clients. Are they getting more products sold or are there more visitors for their campaign sites? The final results usually show if your project is successful. Google Analytics is a powerful way to collect data. In this article, you will see a CSS-only approach for tracking UI interactions using Google Analytics.
Read more…
Design blueprints could mean the difference between a correctly implemented design that improves the user experience and satisfies customers and a confusing and inconsistent design that corrupts the user experience and displeases customers. For those of you who create digital products, design specs could mean the difference between efficient collaboration and a wasteful back-and-forth process with costly implementation mistakes and delivery delays. Specs can help you to build the right product more quickly and more efficiently. Effective collaboration requires effective communication. Investing in the development of workflows and tooling around to make this communication easier will pay off big with the effectiveness with which products are built.
Read more…
One of the reasons for AngularJS’ success is its outstanding ability to be tested. The main factor that made Sébastien switch from “Well, I just launch the app and see if everything works” to “I’ve got unit tests!” was that, for the first time, he could focus on what matters and on what he enjoys in programming: creating smart algorithms and nice UIs. After having fixed it, re-updated the application and apologized to customer service, he decided to entirely rewrite this component in test-driven development style. The test file ended up being twice as long as the component file. It has been improved a lot since, especially its poor performance, but it never failed again in production. Rock-solid code.
Read more…
Eight years is a long time on the web, yet for us it really doesn’t feel like a long journey at all. We’d love to share a few things that we’ve learned over the last years about the performance challenges of this very website and about the work we’ve done recently. If you want to craft a fast responsive website, you might find a few interesting nuggets worth considering. In this article you will find a little story about the things that happened on this little website over the last year. Thanks for keeping us reading throughout all these years. It means a lot. You are quite smashing indeed. You should know that.
Read more…
JavaScript-based animation is often as fast as CSS-based animation — sometimes even faster. CSS animation only appears to have a leg up because it’s typically compared to jQuery’s $.animate(), which is, in fact, very slow. However, JavaScript animation libraries that bypass jQuery deliver incredible performance by avoiding DOM manipulation as much as possible. In this article, Julian Shapiro will smash some myths, dive into some real-world animation examples and improve your design skills in the process. If you love designing practical UI animations for your projects, this article is for you!
Read more…
Most plugins try to do too many things, which makes it difficult for designers and developers to integrate them in their projects. Apple introduced the iPhone 5S, which was accompanied by a presentation website on which visitors were guided down sections of a page and whose messaging was reduced to one key function per section. Pete Rojwongsuriya found this to be a great way to present a product, minimizing the risk of visitors accidentally scrolling past key information, and he set out to find a plugin that does just this. To his surprise, he didn’t find a simple solution to integrate in his current projects. That is when One Page Scroll was born.
Read more…
