Issue #184 (Why Vue.js, CSS/HTML, Frameworks, Uncats)01/26/17
I recently had the privilege of doing a cover story for issue 289 of net Magazine, in which I discussed 15 hot web design tools for 2017. One of the tools I described, which many of you are probably already familiar with, is Vue.js, a "progressive" JavaScript framework for building user interfaces .
I've just started to look into Vue myself, starting with the research I did for that piece, so I thought I'd do a quick introduction here. Vue is now at version 2.x, and it's more or less a React alternative but it seems to be easier to get into for those who aren't as strong with JavaScript.
It's described as "progressive" because, as the docs explain:
"Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects."
The GitLab team explained their reasons for choosing Vue.js by praising its simplicity:
"Primarily what drew us to Vue.js is that it allows our team to easily write simple JavaScript. Getting started with Vue.js is extremely easy. Its source code is very readable, and the documentation is the only tutorial you'll ever need."
Another really neat thing brought out in the framework comparison document on the official website has to do with markup, specifically discussing React:
"In React, everything is Just JavaScript, which sounds very simple and elegant – until you dig deeper. The unfortunate reality is that reinventing HTML and CSS within JavaScript, while solving some issues of the traditional model, can also cause pain of its own. In Vue, we instead embrace web technologies and build on top of them."
This point alone will be enough to attract lots of new developers to choose Vue over similar frameworks, and this is a big reason why I'll be looking into Vue more in the coming months.
Now on to this week's tools!
|
CSS and HTML Tools
ReactCSSOM
CSS selector for React Components. ReactCSSOM attempts to develop a system that allows you to separate JavaScript and CSS.
Bttn.css
A CSS button library with various sizes and colors to choose from.
react-css-variables
A React component to set CSS variables.
ColorMe
A tool to better understand and generate the code for the new CSS color() function.
Table Grid
A semi-experimental library for writing a simple, responsive, and mobile-first CSS grid system using CSS tables.
enformed
The hassle-free way to use HTML forms and notifications. Just add our URL and your token to your form action and they'll take care of all of your form submissions.
htmlemail.io
Responsive HTML email templates, tested across multiple email environments.
CSSPeeper
Chrome extension. Smart CSS viewer tailored for designers, to easily look up design- and typography-related styles on any website.
Runway
Go from stylesheet to styleguide instantly. This tool will read your stylesheet and build a beautifully formatted styleguide.
|
Front-end Frameworks
React Native for Web
React Native components and APIs for the Web. Brings React Native's building blocks and touch handling to the Web.
awsm.css
A CSS library for beautify semantic HTML markup without classes, attributes, etc. Use tags only. Good choice for a blog or simple homepage.
Material Components
Create beautiful apps with modular and customizable UI components. Helps developers implement the Material Design guidelines across Android, iOS, and the web.
react-md
This project's goal is to be able to create a fully accessible material design styled website using React Components and Sass.
Switzerland
Takes a functional approach to Web Components by applying middleware to your components. Supports Redux, mobx, attribute mutations, CSS variables, React-esque setState/state, etc.
UIkit
Now at version 3.x. A lightweight and modular front-end framework
for developing fast and powerful web interfaces.
Yoga
A cross-platform flexbox-based layout engine enabling maximum collaboration within your team by implementing an API familiar to many designers.
Ant Design of React
Following the Ant Design specification, a React UI library that contains a set of high quality components and demos for building rich interactive desktop applications.
react-redux-starterkit
React / redux boilerplate project based on ES6, JSX, ESLint, webpack, and more.
|
The Uncategorizables
Flatpak
The new framework for desktop applications on Linux.
Scale
API For Human Intelligence. Humans On-Demand. Get tasks done within minutes.
Base Theme
A minimal, light, and responsive WordPress theme.
RapidAPI
Find and Connect to any API in the World. RapidAPI is the world’s largest API marketplace.
Pusher
Build apps, not infrastructure. Add interactive and engaging features to your apps with APIs, libraries and developer tools in a matter of minutes, not weeks.
Spark
An open source, hackable platform to create and sell your own courses.
Radar
From Stripe. Modern tools to help you beat fraud, fully integrated with your payments.
Website Downloader
Download all the source code and assets of any website.
GatherContent
Simple web content management software that helps you organise and produce content before it's published to your CMS.
|
|
