DEV Community: Michael Fasani

Useful npm and node commands I use to boost productivity

Michael Fasani — Sun, 28 May 2023 19:43:56 +0000

I prefer to use npx over npm when possible so the commands can be executed without installing dependencies.

How to count the number of lines of code in a git repository?
How to find CRLF line separators in a git repository?
How to find a package which contains a specific dependency?
How to kill a process running on a specific port?
How to kill a process using part of the starting command?
How to list the globally installed npm packages?
How to list all packages installed by homebrew?
How to upgrade dependencies in the package.json file?
How to visualize the size of modules from a webpack bundle or selection of JavaScript files?

How to count the number of lines of code in a git repository?

In some situations you may need to know how many lines of code exist in a project, you can use the following command:

git ls-files | xargs wc -l

How to find CRLF line separators in a git repository?

In some situations you may need to locate files which have usually been created on a Windows machine which contain the CRLF character.

git grep -Il \$'\r'

How to find a package which contains a specific dependency?

For example, you may find an error during a build process with a specific package/module, but perhaps you can not locate where it exists. Usually, it's a dependency of a dependency. You can search the entire node_modules folder for a package name (Insert ):

find ./node_modules/ -name package.json | xargs grep <package_name>

How to kill a process running on a specific port?

For example, you are running a server on port 8000, you could kill that process with the following:

sudo lsof -t -i tcp:8000 | xargs kill -9

How to kill a process using part of the starting command?

For example, you are running webpack-dev-server, you could kill that process with the following:

kill -9 $(ps aux | grep 'webpack' | awk '{print $2}')

How to list the globally installed npm packages?

Generate a list of all of the globally installed packages on your machine:

npm list -g --depth 0

How to list all packages installed by homebrew?

Running brew leaves shows you all top-level packages and the snippet below also outputs a small description for each package:

brew leaves | xargs -n1 brew desc

How to upgrade dependencies in the package.json file?

Upgrading node_modules can be exhausting. These quick commands can help:

npm update to perform safe dependency upgrades.
npm outdated to discover all of the outdated dependencies.
npm install packagename@latest to upgrade a package to the latest major version.
npx npm-check-updates -u to update the version numbers in the package.json file automatically. After updating the package.json file run npm install to upgrade all dependencies to their latest versions.

How to visualize the size of modules from a webpack bundle or selection of JavaScript files?

Pass a single webpack entry file and output the results as HTML:

npx source-map-explorer public/app-57b30d978d142b12cdd0.js --html result.html

Pass all the JavaScript files in a directory and output the results as HTML:

npx source-map-explorer public/*.js --html result.html

That's a Wrap!

I hope you have enjoyed this post and discovered some useful productivity hacks. I love to share and learn from the community if you have a favourite command-line productivity hack post it below!

Creating my first EC2 instance on Amazon Web Services (AWS)

Michael Fasani — Sat, 27 May 2023 11:40:59 +0000

TL;DR

Today I learned Amazon make their own CPU's and have a version of Linux, both were designed to offer a better cloud experience when working with AWS. I set up my own AWS EC2 instance, and soon, I will install Rust and write my first Rust application. Follow me to learn more as I continue on this journey.

My AWS Plan
A noob with questions...
What operating system should I choose, RedHat vs SUSE Linux vs Amazon Linux 2?
What is the difference between 64-bit (x86) 64-bit (Arm)?
Can I run Rust on Arm or x86?
What is the difference between a 32-bit or a 64-bit operating system?
Setting up my AWS EC2 server
What's next...

My AWS Plan

I plan to start working with Rust in the cloud and in the browser using WebAssembley. As a Senior Frontend Developer who spent the last 10 years focusing on JavaScript I know almost nothing about hosting my own servers. I maintained a couple of servers over 15 years ago, which ran Internet Information Services (IIS) on Windows.

I think having experience with AWS will be a valuable skill to have. With the Amazon free tier, you get 12 months of free AWS products to play with and having a playground of unlimited computing power, and modern infrastructure could be very interesting. That is one of the reasons why I am jumping into AWS and documenting my learning process.

A noob with questions...

As I know, almost zero about cloud computing I had to Google a few questions along the way, and below, I have documented my learning process and decisions.

After signing up to AWS and AWS Training, I watched some videos and signed up to this course on Udemy: Free AWS Certified Cloud Practitioner 2019

Next, I started to set up my own EC2 instance. You have to select software and hardware options, and as I am cloud computing noob, I had some questions.

What operating system should I choose, RedHat vs SUSE Linux vs Amazon Linux 2?

Turns out Amazon have their own version of Linux, in a nutshell: Amazon Linux 2 includes support for the latest Amazon EC2 instance capabilities and is tuned for enhanced performance. It contains packages that help ease integration with other AWS Services. Sounds good to me! I decided to go with Amazon Linux 2.

What is the difference between 64-bit (x86) 64-bit (Arm)?

Amazon is making its own Arm chips that should provide better performance when using AWS. I decided to go with an Arm chip, but this was a mistake as it turns out for the free tier option you have to choose x86.

Can I run Rust on Arm or x86?

Here is a list of Tier 1 operating systems which can run Rust. Based on this list it seems I can run Rust on any Linux OS in either 32-bit or 64-bit.

What is the difference between a 32-bit or a 64-bit operating system?

Simply put, a 64-bit processor is more capable than a 32-bit processor, because it can handle more data at once. Here's the key difference: 32-bit processors are capable of handling a limited amount of RAM (in Windows, 4GB or less), and 64-bit processors are capable of utilizing much more.

Setting up my AWS EC2 server

I followed this video for the most part to setup my AWS EC2 server: AWS Training - Introduction to EC2

After setup, I was able to login using the AWS online SSH console.
After logging in, I was told there were four security updates and to run sudo yum update.

Next, I tried to use my SSH *.pem key to log in, which was also a success but I just had to CHMOD the key first, but all of this information was in AWS under the connect option.

chmod 400 my-key-pair.pem
ssh -i my-key-pair.pem my-instance-user-name@my-instance-public-dns-name

I will need to rewatch some of the information from the free Udemy course above to make sure I have set things up in the correct way, for now, I have terminated the server. I will probably set up another one in the same way once I feel happy with the choices I have made and what I have learned today.

What's next...

In my next post on my AWS journey, I will try to install Rust and make a small Rust application, then I plan and then talk to my Rust application over HTTP using JavaScript.

Installing Tailwind CSS on top of the Gatsby starter default

Michael Fasani — Sun, 16 Aug 2020 21:29:13 +0000

If you are interested in using Tailwind CSS and you have not yet started your Gatsby project, you could potentially save time using the Gatsby Starter Tailwind. This post will be more beneficial for people who already have a Gatsby project and want to add Tailwind CSS manually. I recently added TailWindCSS to my blog.

What is Tailwind?
Installing new dependencies
Create a tailwind.config.js file
Configure Gatsby to use Tailwind CSS
Include the Tailwind CSS directives
Testing the Tailwind CSS installation
Purging unused CSS
That's a Wrap!

What is Tailwind?

If you are reading this post and do not yet know what Tailwind CSS is then I suggest you visit the Tailwind CSS site to learn more. I assume you have arrived here via a google search and you are ready to dive right in.

Installing new dependencies

First, you will need to install two new dependencies into your Gatsby project.

Tailwind CSS - A utility-first CSS framework for rapidly building custom user interfaces.

Gatsby PostCSS plugin - Tailwind CSS requires the PostCSS plugin, as we are adding Tailwind CSS to a Gatsby project we will use a Gatsby plugin instead of the default PostCSS plugin. If you want to learn more about PostCSS please visit the Post CSS plugin repository.

Install both plugins:

npm install tailwindcss gatsby-plugin-postcss --save

Create a tailwind.config.js file

Next, we want to create a tailwind.config.js file. The file is optional, but we will need it to reduce the size of our CSS.

npx tailwindcss init

This above command will create a minimal tailwind.config.js file at the root of our Gatsby project:

// tailwind.config.js
module.exports = {
    theme: {},
    variants: {},
    plugins: [],
}

You can learn more about the configuration file on the Tailwind CSS site.

As per the installation guide we will add the following Tailwind CSS plugins because we are using PostCSS and they recommend us to do so.

// tailwind.config.js
module.exports = {
    ...
    plugins: [require('tailwindcss'), require('autoprefixer')],
}

Configure Gatsby to use Tailwind CSS

Next, we will include the PostCSS Gatsby plugin and configure it to use Tailwind CSS and tell it where our tailwind.config.js file is.

// gatsby-config.js
plugins: [
    ...
    {
        resolve: 'gatsby-plugin-postcss',
        options: {
            postCssPlugins: [require('tailwindcss')('./tailwind.config.js')],
        },
    },
],

Alternatively, you can create a postcss.config.js, but I prefer the pattern of having all of my Gatsby plugins in the gatsby-config.js file.

Include the Tailwind CSS directives

I am working with a new Gatsby build, so I was able to remove all of the content in the layout.css file and replace that with the Tailwind CSS import directives.

/* src/components/layout.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

You can learn more about the Tailwind CSS Directives on their site.

Testing the Tailwind CSS installation

We have completed the steps to get Tailwind CSS up and running in our Gatsby project so now we can test if everything was successful. The quickest way to test your Gatsby project is to launch the project using gatsby develop then open up your browser debugger and add a Tailwind CSS class to a DOM element. If you see a visual change and the styles included, then you know the above steps have worked.

Below I have added three Tailwind CSS classes to a H1 DOM node.

<h1 class="bg-black rounded-lg p-6">...</h1>

Purging unused CSS

When we added the directives above, we included the entire Tailwind CSS framework, after building my site, I noticed that my Gatsby CSS was now a whopping 1.08MB.

The last step is to reduce the number of classes included to a minimum. We can modify the tailwind.config.js so that we only add the CSS classes that we are using in our Gatsby components and pages.

// tailwind.config.js
module.exports = {
  purge: ['./src/**/*.js'],
  ...
}

To test this step, you can comment the line above and run gatsby build and then investigate the size of the CSS file being generated by Gatsby.

While researching the topic of CSS purging, I found the following plugin gatsby-plugin-purgecss but noticed that the above method would do the same but with fewer plugins. I am happier with fewer plugins, so I uninstalled it. Depending on your build, you may prefer to use the additional plugin.

That's a Wrap!

The next step will be to remove your old CSS and start to build your new Tailwind CSS driven site. If you have not already done so, I would recommend reading the core concepts of Tailwind CSS before you start building.

If you found this tutorial to be helpful or for any feedback, leave a comment below.

Twenty years of web development, a change is coming!

Michael Fasani — Sun, 09 Aug 2020 10:16:40 +0000

I have been working in web technology for more than 20 years. I spent the first five years of my career as a full-stack developer. Back then, we used the term webmaster. I would set up servers (which included e-mail and FTP), order domain names, create databases and order SSL certificates. I would code the backend and the frontend, plus open up Photoshop to do a little bit of design and UX from time to time. I was the scrum master and the business analyst plus I would support customers and project manage their websites. These tasks and job titles were all just part of being a webmaster. You crafted the web by yourself, and it lived in a box in the room next door, occasionally you would have to go in and check on it, maybe even restart it.

Later in my career, I saw an opportunity to specialise. Living and working in London, I saw the increasing need for the expert. Recruiters started to ring me, asking about specialist job titles. I very much enjoyed the visual element of working in the browser and JavaScript was growing in power and clearly here to stay. Macromedia Flash had died, and Java applets were long gone. People were talking about HTML5 and making huge promises. The title JavaScript developer was being thrown around in my world for the first time and with JavaScript being such a strange language there was an obvious need for experts, I decided to bet my career on it.

Looking back, I was not wrong. I have had a pretty decent career for the past ten years and rarely have I needed a backend skill set. In today's market, you can easily get by being a specialist and JavaScript is all the rage.

However, recently I find myself somewhat bored of the JavaScript world, keeping up with the latest and greatest frameworks and build tools. It just feels like nothing much is really changing. React and Vue are great libraries but I was able to pick up the basics in just a few hours. Frontend for me just no longer feels like the challenge it once was. Nearly all the browsers are running a version of Chromium and our build tools protect us in terms of backwards compatibility. I no longer need to know the browser quirks and hacks or the strange nuances of JavaScript. Today we can simply write ES6 or TypeScript and JavaScript just works.

I feel a change is coming and a big one, words like serverless, static sites and cloud computing are popping up daily, people are talking about writing C++ in the browser and compiling it to WebAssembley. We have exciting new browser API's like WebGPU, USB, Midi, Web Speech and WebVR. Some exciting things are starting to happen and potentially JavaScript will die, it will be a slow death for sure. But we need to remember that nothing lasts forever.

Today I hear people say JavaScript won't die and WebAssembley will just be an extension of JavaScript. But what is that based on? I think they say it just to cling to what they already know.

It's certainly exciting times for the web and I guess I have a fear that I will be left behind in the JavaScript world. I feel like it's time for me to break free from the chains of JavaScript. It's time to learn something new.

Where are we headed? I am not sure. I just know that I don't feel like learning yet another JavaScript framework.

I have decided that I will commit to learn Rust and dive into WebAssembly. Rust is a powerful language like C++ yet safer. I can use it in the browser and on the server, plus it will be a challenge for me to switch from JavaScript to a low-level programming language like Rust.

My current plan is to focus on several interconnected paths. I will dive into Rust, WebAssembley, Amazon Web Services (AWS) and of course, Gatsby so I can share my experiences on my personal blog.

I hope you will join me on this journey as we explore some of these new technologies together.

5 tips for getting involved in open-source projects on GitHub

Michael Fasani — Wed, 24 Jun 2020 14:22:26 +0000

I joined GitHub in October 2010, most of those years since were spent working on private repositories but recently I have become more and more active in open-source projects on GitHub and in the past month I have made 107 commits into 8 repositories.

I currently help maintain the react-spring organisation and I am a moderator for the three.js slack community. I have been writing software since I was 7 years old and professionally for more than 20 years. I have spent many hours interacting with people and projects on GitHub and I absolutely love developing software.

I believe that being part of an open-source project can really help you professionally in a multitude of ways and together I think we are the ones who change the world, we are the ones who bring passion and commitment to the projects which help literally thousands of developers and companies deliver great software.

Recently I saw a comment on slack and another post here on this website which led me to write these following tips.

1) Dogfooding

A funny term which simply means “use your own product”. Many of us use hundreds of libraries in our projects and any one of those can be a great candidate to get involved with. When you use a piece of software you better understand it’s purpose and your commitment to making it better is going to reward you as well as the other people using that piece of software.

Being involved in a piece of software you actually use is much easier than picking a random piece of software. Maybe you are not using the software today but you plan to use it in the future, that is also fine. Working on a project you enjoy using will just make contributing much easier.

A normal path into open-source is fixing a bug you have found or at least reporting it. After reporting a bug, take a look at other open issues and perhaps the maintainers are looking for help, maybe you can pick up a task or even fix the bug you discovered.

“Eating your own dog food or dogfooding is the practice of an organization using its own product. This can be a way for an organization to test its products in real-world usage. Hence dogfooding can act as quality control, and eventually a kind of testimonial advertising.” - Wikipedia

2) Code reviews, testing and debugging

In my opinion, the goal of being part of a community is to simply improve the software for everybody who uses it. That does not always mean writing code.

Other ways to contribute, check out open pull requests and see if you can contribute to those. Take an open branch and test it, include screenshots and examples of any bugs you find (I even use video sometimes to explain complex issues when needed). Feeding back on pull requests helps build trust and helps you understand the software better before attempting to change it.

When helping people, if I don’t know the answer I will be honest. I state that I am not 100% sure and maybe they could try XYZ with an example. Format your response well, check your spelling and remove ambiguity. A poorly formatted comment or opinion can lead to time wasted by all maintainers and consumers, remember why you are trying to help so be helpful.

If you find an interesting repository, simply star it, watch it and then start interacting with that community. Join the conversation and bring value to the people who are already contributing.

3) Start small, build trust

When I first start contributing to people’s projects I focus on low hanging fruits. Tidying up documentation and spell checks are nearly always accepted. Usually, the projects I contribute to are projects I use. This means I am a consumer of the documentation and when I come across missing information I simply add it in. This can include adding a Table of Contents, expanding on an example, adding additional links to other documentation pages, spell checking, adding missing parameters to methods or adding a README.md to an example folder which simply explains how to run the project locally. As a consumer of the documentation, you can easily spot shortcomings and this is a great place to start contributing.

4) Avoid huge rewrites

I think some people can become easily offended and code can be personal on smaller repositories. Imagine you head out to do some grocery shopping and you come home to find someone has removed your driveway and placed a pond in the middle of the garden. The pond may be extremely beautiful but it was unexpected and not requested. Until you are a trusted member of the community doing large changes may cause feelings of discomfort, stick to smaller open issues and avoid huge rewrites. Huge rewrites can create huge bugs and additional work for maintainers. If it’s not broken don't fix it. If you plan to make a larger change then it saves time to start a discussion first, then you can gather requirements and not waste time writing a change which will never be accepted.

Open very clean, small commits, separate concerns with different commits. Look for open issues and start talking to the repository owners before making big changes. You need to build trust and show you are professional. Ideally, you use the library personally so that you can help maintain it over time.

Spend extra time on writing a decent pull request message. Explain why you think the change is needed and what problem you are solving. Include images and video if need be. A seemingly random code change may be misunderstood by the maintainers and ignored.

Double-check everything, adding bad code to a project may mean future endeavours will be ignored, take responsibility for your changes and think about possible side effects. It can be quite awkward if you unintentionally break things.

5) Be a decent human being

This one should be obvious but when commenting and interacting with the community double-check how your mood is, are you frustrated and being angry towards the person you are replying to? Remember the person behind the screen may be having a really bad day, frustrated by an issue they believe is connected to your software.

Just because someone is being hard work doesn't mean you should respond negatively to them. Try harder to come across as friendly and try to remember the person you are talking to may only have 1 week of coding experience behind them.

Somedays if I notice I am writing a response with a bad tone or being a little annoyed I often just stop replying and I revisit the topic the next day when I am in a better more helpful mood. Often someone else has responded and the issue resolved with an apology from the original poster. Remember you do not have to get involved in every single topic that is being discussed.

Proudly sharing my GitHub contributions for the past year, private and public... Visualised by this awesome open-source project on GitHub Isometric contributions plugin

The final word

I hope this post has given you some ideas on how you can become part of an open-source community. If you liked my post please give me some love and if you have any questions please drop a comment below. If you are already contributing, let me know any other ideas or tips you have, plus if you are looking for contributors to help maintain your projects please feel free to shout out the project below.

DEV Community: Michael Fasani

Useful npm and node commands I use to boost productivity

How to count the number of lines of code in a git repository?

How to find CRLF line separators in a git repository?

How to find a package which contains a specific dependency?

How to kill a process running on a specific port?

How to kill a process using part of the starting command?

How to list the globally installed npm packages?

How to list all packages installed by homebrew?

How to upgrade dependencies in the package.json file?

How to visualize the size of modules from a webpack bundle or selection of JavaScript files?

That's a Wrap!

Creating my first EC2 instance on Amazon Web Services (AWS)

TL;DR

My AWS Plan

A noob with questions...

What operating system should I choose, RedHat vs SUSE Linux vs Amazon Linux 2?

What is the difference between 64-bit (x86) 64-bit (Arm)?

Can I run Rust on Arm or x86?

What is the difference between a 32-bit or a 64-bit operating system?

Setting up my AWS EC2 server

What's next...

Installing Tailwind CSS on top of the Gatsby starter default

Table of contents

What is Tailwind?

Installing new dependencies

Create a tailwind.config.js file

Configure Gatsby to use Tailwind CSS

Include the Tailwind CSS directives

Testing the Tailwind CSS installation

Purging unused CSS

That's a Wrap!

Twenty years of web development, a change is coming!

5 tips for getting involved in open-source projects on GitHub

1) Dogfooding

2) Code reviews, testing and debugging

3) Start small, build trust

4) Avoid huge rewrites

5) Be a decent human being

Proudly sharing my GitHub contributions for the past year, private and public... Visualised by this awesome open-source project on GitHub Isometric contributions plugin

The final word