Frontend Stuff #2
September 4-7, 2019. A collection of articles, tutorials, news and code on all things HTML, CSS and JS.
- HTML / CSS Articles
- Github Repositories
- Youtube Videos
HTML / CSS Articles
Various Methods for Expanding a Box While Preserving the Border Radius https://css-tricks.com
I've recently noticed an interesting change on CodePen: on hovering the pens on the homepage, there's a rectangle with rounded corners expanding in the back.
Using a PostCSS function to automate your responsive workflow https://css-tricks.com
A little while back, you might have bumped into this CSS-Tricks article where I described how a mixin can be used to automate responsive font sizes using RFS. In its latest version, v9, RFS is capable of rescaling any value for value for any CSS property with px or rem units, like margin, padding, border-radius or even box-shadow.
Flexbox cheatsheet inside VS Code https://dzhavat.github.io
Another week, another VS Code extension. I’ve published two so far and this is my third in just a month. I’m not participating in any sort of “30 VS Code extensions” challenge. It’s just the ideas that keep popping up in my head and I can’t help myself but try to make something out of them.
Overflow And Data Loss In CSS https://www.smashingmagazine.com
In this article, Rachel Andrew explores the situations in which you might encounter overflow in your web designs and explains how CSS has evolved to create better ways to manage and design around unknown amounts of content.
Understanding Specificity in CSS https://alligator.io
Specificity in CSS refers to the how browsers determine the importance, relevance, and “seniority” of CSS styles. Here we’ll look at all the CSS styling types and use the company analogy to understand how competing styles get resolved.
Jagged Little Pill: Issues with Rounded Buttons https://cloudfour.com
Even though flat, minimal interfaces have been the rage for most of the decade, purely rectangular buttons aren’t as common as you’d think. Designers like me frequently “round” the corners, dulling those sharp points that might make an interactive element feel less inviting to tap or click.
Making a Neon Clock using React Hooks https://dev.to
Because we will be using React to render our clock, we do not really need to write a lot of HTML just now; rather we will just link our JS libraries and stylesheets and create a container div with id root where React will render our application.
How to Create a Webcam Audio Visualizer with Three.js https://tympanus.net/codrops
A tutorial on how to create a Three.js powered audio visualizer that takes input from the user's webcam.
Svelte Web Interfaces with Svelte https://dev.to
Array.find method is a convenient way to find and return the first occurence of an element in an array, under a defined testing function. When you want a single needle from the haystack, reach for
Conceptually, Objects are same in all programming languages i.e they represent real-world things that we want to represent inside our programs with characteristics/properties and methods.
Module Augmentation in TypeScript https://alligator.io
Before getting into module augmentation, let’s look at some TypeScript merging principles which will become useful as we progress.
Offline listings https://remysharp.com
If you're a regular visitor of this blog then my service worker (only deployed in the last few weeks) will collect those posts you visit in a dedicated cache. If you then try to visit a URL that hasn't been cached, say a post or page like popular posts (and so on) you'll be presented with a page saying that the page isn't available offline but you can re-visit an existing post.
A Configurator for Creating Custom WebGL Distortion Effects https://tympanus.net/codrops
A configurator for creating unique fullscreen image animations with WebGL distortion effects powered by Three.js.
Creating Complex Animations in React Using react-spring https://alligator.io
Before, we went over how to create single animations with react-spring. Now we’ll be looking over the different methods for combining multiple springs for more complicated animations.
Handling complex form state using React hooks https://levelup.gitconnected.com
An alternative to using
How React works under the hood https://www.freecodecamp.org
Model-Based Testing in React with State Machines https://css-tricks.com
Testing applications is crucially important to ensuring that the code is error-free and the logic requirements are met. However, writing tests manually is tedious and prone to human bias and error. Furthermore, maintenance can be a nightmare, especially when features are added or business logic is changed.
TypeScript Enum Declaration and Merging Alfred M. Adjei
This is the second post on declaration merging in TypeScript. In the previous post, we looked at what declaration merging is and started with interfaces. In this post, we will look at how to merge enums.
1000+ vector icons as easy to use React Components.
vue to react
Turn a Vue component into a React component.
Add watermark to your react components in a more elegent way.
react to vue
Turn a React component into a Vue component.
Svelte image is a preprocessor which automates image optimization using sharp.
Audiobook UI app built with react native.
3D carousel with mouse controls.
Successful Web & React Native Code Sharing Strategies
At Nozbe, we share almost all component-level code between React for the web and React Native (both iOS and Android) — without ReactXP, react-native-web, or react-primitives! Let me show you how we did this — from project setup, through shared infrastructure, all the way up to shared components and styling — and how you can achieve the same thing.
Globalization Tools - The State of the Web
Developing for the global web is so much more than just translating content into multiple languages. In this episode of the State of the Web, Rick Viscomi (Developer Programs Engineer at Google) sits down with Andrey Sitnik (Lead Frontend Engineer at Evil Martians) to talk about considerations for globalization and the tools available to web developers.