Fresh Resources for Web Designers and Developers 2019
The Web has changed a lot compared to when I just got started in this industry. Native Web API are more standardized across the browsers, and new CSS and JavaScript specification are introduced. These allow developers to build new tools surrounding these features.
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 frames, and a library to create a file uploader quickly. Let’s see the full list.
A collection of special visual effects that apply to the button, input, and a loader. These effects are built purely with CSS with very minimum CSS and HTML, and you can apply the effect by simply copying and pasting the code.
Site Inspire
My absolute favorite website to get design motivation from. If you’re running low on creative juices, then this site should be your first port of call. The design quality of the sites submitted is a top draw. You won’t find a better web design inspiration site than this.
Flexbox is one of the power modules in CSS3 to create a 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.
A great resource for design inspiration and one that can also help you learn different techniques and skills from other designers. A good place to ask questions about various design issues as well.
A lightweight JavaScript library to create a popup modal. Built with Accessibility in mind, Micromodal complies with the WAI-ARIA standard guideline for a modal interface. It’s an overall small JavaScript library with powerful characteristics.
Land-Book
An ideal resource if you’re working on a product landing page. There are so many examples of exceptionally designed and built sales landing pages which can help you create one of your own.
An ideal resource if you’re working on a product landing page. There are so many examples of exceptionally designed and built sales landing pages which can help you create one of your own.
A collection of fonts for your nerd soul. The collection aggregates from some popular fonts with nerdy characters such as FontAwesome, Powerlines, Devices, Octicons, Font Linux to name a few. NerdsFont also reinforced these fonts to be compatible with Windows, Linux, and macOS.
An advanced JavaScript library that allows you to adjust typographical features like size, leading, and grades for continuously responsive typography on your website.
Uppy is an advanced file uploader library which enables 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.
Land-Book
An ideal resource if you’re working on a product landing page. There are so many examples of exceptionally designed and built sales landing pages which can help you create one of your own.
An ideal resource if you’re working on a product landing page. There are so many examples of exceptionally designed and built sales landing pages which can help you create one of your own.
This tool is the Google Chrome team leadership to make website loads as fast as possible by prefetching links within the viewport. A 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.
FLTDSGN
This web design inspiration site gives you a daily dose of amazing UI app and website designs. Like Site Inspire, the site has high-quality examples that you can gain a lot of design inspiration from.
A JavaScript library from Polymer to create custom native Web Component. It enables creating the custom component easily and provides a polyfill for the browsers that do not support
Fusuma is a tool that allows you to create a presentation using the Markdown file and syntax. It’s connected to the native browser Presentation API so it can deliver a similar experience as the performance tool like PowerPoint and Keynote.
Svelte is a tool that allows you to build web apps. Unlike React.js and Vue.js that will enforce you to write your web apps in a special or proprietary syntax and use so-called Virtual DOM, it will do just with HTML, CSS, and JavaScript syntax. It’s a quite exciting approach to building a web app.
A CSS framework designed for scalable applications. Unlike a framework like Bootstrap which comes with some opinionated UI components, Brevis simply set “specification” which rule out the CSS reference, naming convention, some patterns, and pellets. It does not assume 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
Awwwards
Take inspiration from award-winning websites that have been credited for their creativity, innovation and functionality.
Take inspiration from award-winning websites that have been credited for their creativity, innovation and functionality.
A browser extension for Google Chrome and Firefox to get the typographic information of the selected text. The information includes the font-family, font-weight, font-size, and color.
One Page Love
If you’re working on a one-page website or sales landing page, then you will love this site. It’s full of amazing examples of one-page websites which push the boundaries in design and innovation. Check out One Page Love and be encouraged to create more visually appealing and user-friendly one page
If you’re working on a one-page website or sales landing page, then you will love this site. It’s full of amazing examples of one-page websites which push the boundaries in design and innovation. Check out One Page Love and be encouraged to create more visually appealing and user-friendly one page
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 JavaScript library to implements the same image zoom effect as seen on Medium. Quite fancy!
Yall.js is a JavaScript library to enable “lazy” loading on your images, videos, and frame. It’s also able to lazy-load image attached a background through CSS. Despite these powerful features, Yall.js supports many modern browsers, surprisingly, including the Internet Explorer 11.
The 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 the browser (Chrome and Firefox), package and version supervisor like NVM and Yarn, and many other things.
New Resources for Web Designers and Developers 2019
Suggested Read:
FREE WEB DESIGN RESOURCES 2019
Great Resources for Web Design Inspiration 2019
Suggested Read:
FREE WEB DESIGN RESOURCES 2019
Great Resources for Web Design Inspiration 2019
No comments:
Post a Comment