Skip to content

Posts from the ‘Tools’ Category

PostCSS – First Look

January 23, 2016

Vivek

Introduction

PostCSS is an engine/tool for processing/transforming CSS with JavaScript. It help’s us writing CSS faster and more efficiently. There are different plugins that we can use with PostCSS. Some of them include cssnano which helps in compressing the CSS files, Autoprefixer which programmatically adds prefixes to the CSS files, making things like Flexbox easier to code for modern browsers, adding future CSS syntax/features that can work with older browsers using cssnext & finally PreCSS pack, which lets us use a Sass-like syntax for working with our projects.

What is PostCSS?

  • PostCSS at its core is an engine for transforming CSS with JavaScript.
  • 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?

  1. NodeJS
  2. 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.

Resources

  1. PostCSS on GitHub.
  2. Gulp PostCSS Plugin on GitHub.
  3. cssnano and cssnano on GitHub.
  4. Autoprefixer PostCSS Plugin on GitHub.
  5. cssnext PostCSS Plugin.
  6. PreCSS on GitHub.

Webpack

January 19, 2016

Vivek

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 you look at any React project or for that matter any web project, it contains a bunch of static assets like JavaScript, CSS, Sass files, Images, Fonts and so on. Each of these in the Webpack parlance is called a module. These modules can depend on each other. Webpack being a module bundler, combines all of these modules into a highly optimized bundle which can then be deployed onto the web. Webpack also takes care of automatically bundling these modules anytime they change which gives us a nice development time workflow.

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.

The Treehouse Show – Episode 148

July 7, 2015

Vivek

Nick Pettit & Jason Seifer from TeamTreehouse talk about Web Design Trends, Sharing Buttons, Flexbox Techniques and more in Episode 148. Below are links to resources from this episode.

The Treehouse Show – Episode 147

June 30, 2015

Vivek

Nick Pettit & Jason Seifer from TeamTreehouse talk about Web Features, Form Design and Color Pickers in Episode 147. Below are links to resources from this episode.

Bower

November 17, 2014

Vivek

Bower in Practice: A Package Manager for Web Developers

• What is it – A package manager for the web. It is a tool that helps developers manage (download, update, etc) the packages (assets: JS libraries, CSS, etc) that developers use to implement their front-end development projects. More information about Bower can be found on their website at http://bower.io and on GitHub https://github.com/bower/bower
• The alternatives – Other package manager includes, npm (+ Browserify), spm (Static Package Manager), JamJS (JavaScript Package Manager), jspm.io, Component, etc..
• The benefits – Installing, updating and removing packages is dead simple. Dependency management. Discovery (Searching the Bower registry for a particular library & plugins associated with it).
• How to use it
▪ Installing it – Bower is a NodeJS module. Runs on Node.js and npm, so make sure you have Node installed. Then install Bower (its best to install it globally)
⁃ $ npm install -g bower
▪ Searching for packages – You can either search for packages through the web http://bower.io/search/ OR you can search from the command line:
⁃ $ bower search angularjs
▪ Getting detailed information about packages
⁃ $ bower info backbone
⁃ Listing installed packages and details… $ bower list
▪ Configuring your project – $ bower init … ===> bower.json file
⁃ Bower can be configured (customize the way Bower behaves) using JSON in a .bowerrc file which is a configuration file. Some of the configuration options include cwd, directory, registry, proxy and many more and can be found on http://bower.io/docs/config/
▪ Installing packages
⁃ $ bower install jquery
⁃ $ bower install jquery#1.10 ===> installs a specific version of the requested package
⁃ $ bower install jquery#1.10 — save ===> automatically updates your bower.json file for you
⁃ $ bower install <unregisteredPackageName> = <gitEndpoint>
⁃ Recommendations – 1) Specify and use fixed package version numbers. 2) Ensure everyone is using the same package version at all times.
▪ Updating installed packages – There are 2 ways
⁃ $ bower update jquery [—force]
⁃ Manually update your bower.json file with the version for the package you want, and then $ bower install
▪ Using the cache – For offline connectivity situations
⁃ bower cache list
⁃ bower cache clean
▪ Integration with build tools (Grunt): Grunt plugin: grunt-bower-task available at https://github.com/yatskevich/grunt-bower-task
⁃ Install packages from your grunt build script
⁃ Monitor changes to bower.json
⁃ Keep the development team in sync and up-to-date
⁃ Easy package updates: update your bower.json file, run grunt…automatically installs and updates the packages.
• Creating and maintaining your own package
▪ Some fundamentals – Bower is built on top of git. You can’t distribute your package through Bower without it being hosted at some git endpoint somewhere (GitHub, Bitbucket, self-hosted, etc). Package versions are really just git tags. New package version === tagged repository changeset.
▪ bower.json – Minimum requirements {“name”:”YourPackageName”,”version”:”0.0.1”} OR use bower init
▪ Package contents – Don’t include your entire repository in your package. Only include what consumers need to be able to use it. Use the ignore attribute to exclude what consumers don’t need.
▪ Registering your package – Remember to tag your repository and push those tags to your repo name (git push origin master —tags)
⁃ bower register YourPackageName git://github.com/YourGitHubUserName/YourPackageName.git
▪ Updating and maintenance
1) Make and save the changes to your package/code
2) Update version number in your bower.json file
3) Commit changes to your repo
4) Tag repo with the new version number
5) Push your changes to your repo name (don’t forget to use — tags switch when you push!)
6) Verify with bower info <package>
▪ Helpful tools
⁃ GitHub Releases
⁃ Grunt task: grunt-bump