Post thumbnail: Frontend Stuff #2

Frontend Stuff #2

September 4-7, 2019. A collection of articles, tutorials, news and code on all things HTML, CSS and JS.

Table of Contents:

  1. HTML / CSS Articles
  2. JavaScript Articles
  3. Github Repositories
  4. 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.

    Ana Tudor
  • 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.

    Martijn Cuppens
  • 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.

    Dzhavat Ushev
  • 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.

    Rachel Andrew
  • 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.

    Jess Mitchell
  • 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.

    Tyler Sticka

JavaScript Articles

Github Repositories

  • React Unicons

    1000+ vector icons as easy to use React Components.

    Iconscout
  • vue to react

    Turn a Vue component into a React component.

    EGOIST
  • watermark enhancer

    Add watermark to your react components in a more elegent way.

    大狗
  • react to vue

    Turn a React component into a Vue component.

    EGOIST
  • svelte image

    Svelte image is a preprocessor which automates image optimization using sharp.

    Maxim Matyunin
  • Audio Book

    Audiobook UI app built with react native.

    Olamilekan Ibrahim
  • 3D Carousel

    3D carousel with mouse controls.

    Hoang Tran

Youtube Videos

  • 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.

    Coding Tech
  • 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.

    Google Chrome Developers
back to top