- embedresponsively.com helps build responsive embed codes for embedding rich third-party media into responsive web pages. — embedresponsively.com
- dabblet is an interactive playground for quickly testing snippets of CSS and HTML code — dabblet
- An online tool to display formatted source code — Syntax Highlighting
- DevDocs combines multiple API documentations in a fast, organized, and searchable interface.
Getting Started with Yarn is straightforward and of course the first thing that you need to do is install Yarn on your system. Visit Yarn’s website @ https://yarnpkg.com/ and then Click on Install Yarn button. This is going to take you to the installation instructions @ https://yarnpkg.com/en/docs/install for Yarn on your Operating System. Now Yarn needs NodeJS installed. More specifically, it needs NPM. So a lot of these installation instructions are solutions that will also install Node for you. For example, if you are on macOS by using Homebrew you can install Yarn which will also ensure that NodeJS is installed if it’s not already. If you are on Windows, if you install via Chocolatey then it will also ensure that NodeJS is installed. But if you download the installer be sure that NodeJS is installed first. Now this is just one way and chances are very good that you already have NodeJS installed on your computer. So you can install Yarn through NPM. Basically,
$ npm install -g yarn
and that’s going to give you the Yarn CLI. Once you have this installed then all you need to do is use the Yarn command and we will go over the commands that will be replacing NPM in your workflow because that’s essentially what Yarn is going to do. Now when creating a new project the first thing we do is initialize it with npm init and then we go through the process of answering questions and then we end up with a package.json file. And we essentially do the same thing with Yarn. Enter yarn init within the root of your project directory and then we answer the same questions. Now the interface looks a little bit different. Now we still end up with the same package.json file. So let’s say that we want to add React to our project. With NPM you would enter npm install –save react react-dom. With Yarn, we enter the command yarn add react react-dom. Saving is the default here. So we don’t have to say/enter that we want to save it. It is going to be default and it is going to download those dependencies for us. And it’s also going to be faster too because that’s one of the nice things about Yarn.
It’s performance actually comes from 2 separate things. The first is that everything that we install is going to be cached on our system. So whenever we want to install it with another project the first thing it is going to do is check to see if there is a new version. If it’s not new then it is going to use what we have in our cache and that is of course going to be much faster then it is by downloading it over the wire. But the second thing is that Yarn processes in parallel, NPM does not. NPM does things serially which makes sense if one task dependent upon another. But that’s not the case a lot of or even most of the time. So Yarn processes things in parallel which of course is going to be faster. Now I just added react above. Let’s remove that and we would do so by entering yarn remove react react-dom within the root of your project directory. It’s going to remove those packages. But now let’s add them. Let’s say we want to add a specific version, for e.g., version 15.3.1 of react and react-dom. So we will enter yarn add firstname.lastname@example.org email@example.com and that will install that particular version for our project.
Once this is done installing, we are going to look at not just the package.json file but another file called yarn.lock. Because the yarn.lock file is very important with Yarn. First of all the package.json file is standard. We have the dependencies listed as well as their versions. Now one of the problems with NPM is that whenever your committed this to your repository and somebody else cloned it and did npm install and of course it is going to install the dependencies but you aren’t always guaranteed to get that exact version. In some cases, it might download a patch for that version which then you have 2 people working on essentially the same project but using different dependencies and that is a huge problem. So the folks that created Yarn decided to create this lock file. If you look at yarn.lock, the very first thing it says THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. This is created by Yarn whenever you install dependencies and it specifies the package as well as the version. So this is the file that you definitely want to commit to your repository because then whoever installs the packages using Yarn is going to get the same exact packages that are mentioned within the lock file. So if you look into yarn.lock file you will see both react & react-dom of version 15.3.1 installed.
Let’s say we are ready to update to version 15.4.0. For that we enter yarn upgrade firstname.lastname@example.org email@example.com and this is going to update just those dependencies. Looking back into yarn.lock you will see those updated version numbers. So anytime you add, remove or upgrade a package, Yarn is going to update the lock file so that all the versions for all the dependencies are going to be consistent for everybody working on the same project and that is extremely important. That is also the main reason why Yarn was created to begin with. Now its worth noting that the packages that Yarn installs are from the NPM registry. There is not this new registry that have yarn packages. It’s using NPM. So in that sense there are a lot of related commands that are the exact same as NPM.
For example, we have already seen yarn init. There is also link, there is outdated, publish, run, cache clean, login, logout and test. All of these are the same commands as you would run with npm. However, Yarn has few things which NPM does not. For example, if we wanted to inspect all the licenses of our dependencies we would enter yarn licenses ls and it would list all our dependencies, their versions, their license and the URL for their repository. We can also generate our license dependency disclaimer by entering yarn licenses generate-disclaimer and that would generate that disclaimer. Finally, we can find out why we have a particular dependency. For example, let’s say we have a dependency called promise and so using yarn why promise we can see why we have this promise dependency. Running yarn why promise gives us one of the following info i.e. This module exists because “react#fbjs” depends on it.
We live in a world where there are new tools released almost on a daily basis and many of those tools are questionable. I mean there is no question that they are useful but you have to question whether or not it’s something that you want to spend time on. Well, Yarn is not one of those tools. Yes, it replicates NPM’s functionality but it also brings some very useful things to the table. I mean the performance alone is the reason to use Yarn. So install it today and use it in your workflow.
Below is a growing list of Websites that I visit/follow on a regular basis.
- Envato – Tutplus Network
- Design Tips, Tutorials and Inspiration
- Abduzeedo Design Inspiration and Tutorials
- Design Your Trust
- Design Shack
- Naldz Graphics – All Designs,Graphics and Web Resources
- Vandelay Web Design Blog
- BoagWorld : Headscape
- A List Apart
- HappyCog Cognition
- .Net Magazine
- Smashing Magazine
- Red Team Design — CSS Tips & Tricks
- Web Design Ledger
- Web Designer Wall
- Impressive Webs
- David Walsh Blog
- Cats Who Code
- CSS Globe
- Posh CSS
- Six Revisions
- Webdesigner Depot
- 456 Berea St
- Developer Drive
What is the CSS Grid Layout Module?
According to the W3C Working Draft, The CSS Grid Layout module “defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout module, the children of a grid container can be positioned into arbitrary slots in a flexible or fixed predefined layout grid.”
In Plain English, CSS Grid lets us draw a grid inside any container and place content wherever you want within that grid, independent of the current semantic structure. In short, CSS Grid gives us the power of classic print-based grid layout systems with the flexibility of responsive web design.
When can we start using CSS Grid?
The short answer is, “Not yet but soon”. Checkout Can I use CSS Grid?
- Originally proposed by Microsoft in April 2011 and has been available in Internet Explorer 10/11 and Edge 12/13/14 (old spec)
- Chrome (with experimental feature enabled)
- Firefox (with experimental feature enabled)
CSS Grid: The Basics
CSS Grid Terminology
- Any element with its display property set to grid
- Grids have rows and columns
- A Grid Line is the line that makes up the grid. They can be horizontal or vertical or can be referred to by number or name.
- The column lines are counted based on the direction of the defined language. So if a page is set to left to right language, the count is left to right for column lines. If the language is right to left the count is from right to left as well.
- A Grid Track is the space between two grid lines. The grid tracks can be either horizontal or vertical representing rows or columns.
- A Grid Cell is the space between four grid lines top, right, bottom and left.
- A Grid Area is any area within the grid defined by its four outermost grid lines. A grid area may cover multiple lines and contain multiple cells.
- Grid Gutters are the defined space between rows and columns.
- Upcoming feature not currently supported in browsers.
How to use the experimental CSS Grid features in Chrome
Because the CSS Grid layout module is an experimental module still in working draft, there is no support for this feature in normal browsers. Support for CSS Grid can be enabled in Chrome and Firefox from the backend. To turn CSS Grid support on in Chrome, first open the browser and then, visit the following URL, chrome://flags. Search for web platform and you will find Enable Experimental Web Platform Features, which include CSS Grid.
What is PostCSS?
- Uses NodeJS and installs through NPM which allows it to take care of different transformations.
- It can also work with different build tools like GulpJS, GruntJS, Broccoli, and others to handle the transformation process.
- It is 3 – 30 times faster than other tools since it uses NodeJS and has a modular architecture which makes it a lot more efficient. Sass in contrast, needs Ruby installed and when you add some extensions they get added as gems which makes the applications run a little bit slower.
- The first difference that you will notice between PostCSS and Sass or LESS is the super small size of the core engine which makes it more efficient.
- Another big difference between PostCSS and other tools is that its not just limited to pre-processing. PostCSS can also work as post-processor which means it can convert future CSS syntax to CSS, but also do tasks like adding prefixes to a finished stylesheet.
- Although PostCSS is new it has a large plugin base.
- Can handle an amazing number of tasks including support for future CSS features in older browsers like variables or mixins. It can work like Sass providing features like nesting and variables.
- Because of PostCSS’s modular architecture we can use it with our exisiting tools.
- Because PostCSS is modular, fast and flexible it’s quickly becoming a serious contender to take care of common tasks.
What you need to work with PostCSS?
- In order for PostCSS to work, it needs to be integrated into your workflow through a build tool. We can use many different tools, including Gulp, Grunt, Webpack or Node.js itself.
In this post I will talk about Webpack a very popular build tool in the React community. Now if you are used to tools like Grunt or Gulp you can think of Webpack as being something similar. Now Grunt and Gulp are general purpose task runners. So they can technically do what Webpack can do but requires configuring a bunch of plugins. Webpack on other hand is a complete Module Bundler. So what’s a module bundler?
Now if we probe a little deeper into Webpack, we will see 3 fundamental concepts – Loader, Plugin and Chunk. A Loader is responsible for loading a single file and also optionally transforming it. As an example, we have the Sass loader which loads the Sass files and transforms it to CSS. A Plugin can extend the behavior of Webpack and also operate on multiple files at once. As an example, we have the HTML Webpack plugin which can create the index.html based on all the bundles we have in a project. Lastly, Chunk is the output of Webpack. There could be more than one chunk created depending on how the project is structured. Loaders and Plugins can both contribute in creating the Chunk, also known as the Bundle.