Do you know Redux’s real power is beyond managing the state? Do you want to design with an understanding of how Redux works in mind? Let’s dig deeper into what Redux can do, why it does its things, what the downsides are, and how it relates to design. Have you heard of Redux? What is it? No googling, please! “Fancy backend stuff.”“I have heard of it, but I’m not aware of what it is. It’s a React f
Once web apps function like native apps, the design interactions would also change to address the use case — namely, the ubiquity of animations. As web developers, we need a good foundation to create animations that are both performant and maintainable, which is paramount to the native web app landscape. In this article Christopher Ng will show you how to go from After Effects to CSS transitions,
Transitions between pages can enhance the experience by retaining the user’s context, maintaining their attention, and providing visual continuity and positive feedback, while also being aesthetically pleasing and fun and can reinforce branding when done well. In this article, Luigi De Rosa will create, step by step, a transition between pages. He will also talk about the pros and cons of this tec
With the coming of the Client Hints, Variants and Key specifications, there’s a lot to take in, and while it can be interesting to understand how the browser works under the hood, Andrew Betts shows you some simple things you can distil from it: Browsers ignore Vary for resources pushed using HTTP/2 server push, so don’t vary on anything you push. Vary is not as useful as it could be, and Key pair
Prior to CSS Grid Layout landing in browsers, many people saw flexbox as the answer to all of our design-related problems. However, flexbox doesn’t provide a grid system any more than floats do, although it does make creating one simpler. CSS Grid is such a different way of approaching layout that there are a number of common questions Rachel Andrew is asked as people start to use the specificatio
How can we build an internationalized React front-end application? With the help of this article, you can learn how to detect the user’s locale, save it in the cookie, let the user change their locale, translate the user interface, and render currencies in their appropriate formats. Also, Yury has you prepared with a list of some traps and issues you might face along the way. First of all, let’s d
In this article, Nick Babich will talk about the role of functional animation in UX design and see when to incorporate motion into a design. If you’d like to follow along and spice up your designs with animations, Adobe introduced Adobe XD which you can download and test for free, and get started right away. Identifying the places where animation has utility is only half the story. If you’re going
Let’s make 2021… fast! An annual front-end performance checklist (available as PDF, Apple Pages, MS Word), with everything you need to know to create fast experiences on the web today, from metrics to tooling and front-end techniques. Updated since 2016. Ah, you can also get useful front-end tips in our email newsletter. This guide has been kindly supported by our friends at LogRocket, a service t
Houdini is a new W3C task force that introduces a new set of APIs that will give developers the power to extend CSS itself, and the tools to hook into the styling and layout process of a browser’s rendering engine. In this article, Philip Walton is going to talk about how Houdini will solve CSS feature problems and list some of the more exciting features currently in development. He’ll also offer
Some websites outperform others, whether in their content, usability, design, features, and so on. Details of interaction design and animation make a fundamental difference on modern websites. We’ll share some lessons drawn from various models and analyze why these simple patterns work so well. When we design digital products, we often use design applications such as Photoshop and Sketch. Most peo
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
At StaticGen, our open-source directory of static website generators, we’ve kept track of more than a hundred generators for more than a year now, and we’ve seen both the volume and popularity of these projects take off incredibly on GitHub during that time, going from just 50 to more than 100 generators and a total of more than 100,000 stars for static website generator repositories. Influential
As the volume of data on the web has increased, web scraping has become increasingly widespread, and a number of powerful services have emerged to simplify it. You can use Node.js to create a powerful web scraper that is both extremely versatile and completely free. A basic understanding of Node.js is recommended for this article; so, if you haven’t already, check it out before continuing. Also, w
Thanks to CSS3, we can create effects and animations without using JavaScript, which will facilitate the work of many designers. Thanks to CSS3, we can create effects and animations without using JavaScript, which will facilitate the work of many designers. But we must be careful to avoid abusing CSS3, not only because old browsers do not support all of its properties. In any case, we all see the
CSS Specificity is not simple. However, there are methods to explain it in a simple and intuitive way. And that’s what this article is all about. Apart from Floats, the CSS Specificity is one of the most difficult concepts to grasp in Cascading Stylesheets. The different weight of selectors is usually the reason why your CSS-rules don’t apply to some elements, although you think they should have.
Have you ever heard the phrase “Content is King”? Being a Web developer, and therefore having a job that’s often linked to content creation, it’s likely you have. It’s a fairly overused but true statement about what draws visitors to a site. From a Web developer’s perspective, however, some may argue that speed is king. More and more, I’m starting to favour that stance. In recent years many experi
In this article, Varya Stepanova & Juuso Backman will talk about style guides that are generated directly from the style definition sources — i.e. CSS and its modern variants. Style guides are useful in many aspects of development and maintenance, so it’s little wonder that developing them has become a highly popular practice. But even with the clear benefits, taking the necessary steps to start u
Spartan is a project that has been in the making for some time now. It will be a matter of few months until users and developers alike will be able to try Spartan for themselves, but we can share some of the interesting bits already today. In this article, Jacob Rossi will cover the inside story of the rendering engine powering Spartan, how it came to be, and how 20 years of the Internet Explorer
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く