In this round of this series, you’ll find front-end web development tools such one to load prefetch links, a library to lazy load images, videos, and iframes, and a library to create a file uploader easily. Let’s jump in to see the full list.
A collection of special visual effects that apply to button, input, and a loader. These effects are built purely with CSS with very minimal CSS and HTML, and you can apply the effect by simply copying and pasting the code.
Fusuma is a tool that allows you to create presentation using Markdown file and syntax. It’s connected to the native browser Presentation API so it can deliver the similar experience as the presentation tool like PowerPoint and Keynote.
As React.js is included in WordPress 5.0 to empower Gutenberg, we can also immediately use it to power up our plugin or theme front-end. Frontity is a tool that will allows us to do just that; building a modern WordPress theme with React.js. The project is currently in early stage. You can follow the progress in their Github repository.
This tool is Google Chrome team initiative to make website loads as fast as possible by prefetching links within the viewport. Quick link is designed as a drop-in library with very minimal configuration. You can simply add the library to your page and execute the link, and that’s all.
A CSS framework designed for scalable applications. Unlike a framework like Bootstrap which comes with some opiniated UI components, Brevis simply set “specification” which rule out the CSS reference, naming convention, some patterns, and palletes. It does not assumes the UI you’re going to build.
A handy tool to visualize CSS Transform. The tool support 2D and 3D transformations including Rotation, Scale, Perspective, and Skew. It’s a great tool to learn how CSS Transform works.
A browser extension for Google Chrome and Firefox to get the typographic information of selected text. The information includes the
A pretty tool to generate CSS gradients. It provides some controllers that allow you to customize the gradient output such as adding gradient composition, change their color and opacity, and drag their position.
A collection of React.js UI components that resembles the Windows 95 UI. You can find the Buttons, Date Picker, Table, Tabs, and Tooltips. Feeling nostalgic?
Flexbox is one of powerful module in CSS3 to create page layout, but it could sometimes be confusing. This tool would help by visualizing it in real time as you change the Flex properties configuration.
Uppy is an advanced file uploader library which allows you to upload files from many different sources including Dropbox, Instagram, Google Drive and of course your computer. On top of that it also supports multiple upload destinations. You transfer the upload to an Amazon S3 bucket, Tus, aside of uploading to your own server.
Formation is a Shell script to run on your new macOS to streamline installation to some of the most common tools and apps that you will need works and digital needs, including browser (Chrome and Firefox), package and version manager like NVM and Yarn, and many other things.
A collection of fonts for your nerd soul. The collection aggragates from some popular fonts with nerdy characters such FontAwesome, Powerlines, Devicons, Octicons, Font Linux to name a few. NerdsFont also patched these fonts to be compatible with Windows, Linux, and macOS.