In this two-part article, you’ll learn how to build your our own Sketch plugins from scratch — giving you the skills needed to accomplish tasks much faster, easier, and better.
Read more…
Currently, with WordPress supporting Markdown, the format has become even more widely used. In this article, Sameer Borate will show you how to use Node.js and the Express framework to create an API endpoint. The context in which we will be learning this is by building an application that converts Markdown syntax to HTML. Along the way, you will also add authentication to your API endpoint, and you will also find ways to test your application endpoint using Postman.
Read more…
In this article, you can learn how to build the animated note display from the Awwwards website. It discusses the HTML5 SVG circle element, its stroke properties, and how to animate them with CSS variables and Vanilla JavaScript.
Read more…
Caching delivers a faster response, and frees up resources in the server. When optimizing the speed of our websites from the server side, caching ranks among the most critical tasks to get just right. In this article, Leonardo Losoviz examines an architecture based on self-rendering components and SSR, how do we identify those sections of code that require user state, isolate them from the page, and make them be rendered on the client-side only?and analyzes how to implement it for WordPress sites through Gutenberg.
Read more…
Overusing inline CSS or JS code, as opposed to serving code through static resources, can harm the site’s performance. In this article, Leonardo Losoviz will learn how to load dynamic code through static files instead, avoiding the drawbacks of too much inline code. You will see, as an example, how WordPress loads 43kb of scripts to print the Media Manager, which are pure JavaScript templates and could perfectly be loaded as static resources.
Read more…
What does Gutenberg bring to the future of WordPress? In this article, Leonardo Losoviz will analyze several implications of building sites through a component-based architecture and through Gutenberg (as the implementation), including what new functionalities it can deliver, how much better it can integrate with current website development trends, and what it means to the future of WordPress.
Read more…
Attribute selectors are magical. They can get you out of sticky problems, help you avoid adding classes and point out some problems in your code. But don’t worry, while attribute selectors are complex and powerful, they’re easy to learn and easy to utilize. In this article, John Rhea will discuss how they operate and give you some ideas about how to use them. By the end of this article, you’ll use them to run diagnostics on your site, fix otherwise unsolvable problems, and generate technologic experiences so advanced they feel like magic.
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…
Developers conduct AB tests, accessibility audits, unit tests and cross-browser checks. Once you’ve solved a problem, you don’t want to repeat that effort. By building a reusable component library, we can continuously utilize past efforts and avoid revisiting already solved design and development challenges. In this article, Oliver Williams looks at augmenting HTML with components that have built-in functionality and styles. He’ll also show you how to make these custom elements reusable across projects using NPM.
Read more…
In this tutorial, you will build a sci-fi ID card for Avengers. Today, Kunal Sarkar will teach you Flexbox, Nested Flexbox, CSS animations, and a ton of other CSS techniques while building this interesting project. You will learn an effective way of making a full-page background, centering elements with Flexbox and auto margins, and see the basic usage of Flexbox and nested Flexboxes to make single dimension layouts. Let’s get started!
Read more…
