This is a quick tutorial of how you can get set up with Tailwind CSS for your React project.

Step 1: Create your project

$ npx create-react-app project-name
$ cd project-name

Step 2: install tailwind dependencies

# Using npm
$ npm install tailwindcss --save-dev

# Using Yarn
$ yarn add tailwindcss --dev

Step 3: Setup PostCSS & Autoprefixer

Run the following command to create a tailwind.js file with tailwind’s default configuration

$ npx tailwind init tailwind.js --full

Then install PostCSS for transforming your styles

$ npm install postcss-cli autoprefixer --save-dev
or
$ yarn add postcss-cli autoprefixer --save-dev

(Optional): If you…

As someone who had recently been learning unit testing with react, I found that there are many complications using ‘enzyme’ in react 17 at the moment. This led me to try and find an other solution. I decided to try and use react testing library along with jest to test components.

In this article I will be taking you through the steps that allowed me to setup jest testing on components while state is being held in a Redux Store.

Step 1

You will need to get your environment setup with the correct dependencies. Run the following commands to install dependencies:

1. $…

As someone looking to create beautiful, responsive, web applications with react it can be a little daunting trying to decide what libraries to pick when you are planning out your project. There are so many & picking out the libraries that best fit your project idea can be pretty difficult. This is why I decided to create a list of react libraries that are worth checking out.

Libraries For Styling

Styling libraries can save hours of time for developers who are not worried about having completely custom components on their site. …

For many who are fairly new to programming, like myself, it can be difficult to know where to begin when you are jumping into a new project. I believe that everyone should find a workflow that works for them, because nobody’s is going to be exactly the same. But if there’s anyone who was like me when I first started it can be difficult to even know where to begin.

Today I want to share a some steps i’ve learned to take during my project workflow with the hope that others can use these steps to save them time later…

(applies to ‘Collection_radio_buttons’ and ‘Collection_check_boxes’ as-well)

Using ‘collection_select’ on a html form in ruby can seem pretty complex, the documentation is unclear and there are not many sources to look at when trying to find a clear explanation of how it works. So i’m here to try and break it down so it is easier to understand.

Today I will explain the 5 elements of Collection_select that are required to make a collection_select. These elements look like this:

Collection_select(object, method, collection, value_method, text_method)

A simple way to look at the ‘collection_select’ elements is like this -

1. ‘Object’ - What…

Let’s start by reviewing the ‘.sort’ enumerable.

# In case you didn't know, .sort == .sort { |a, b| a <=> b }# using .sort enumerablenumbers_array = [2,1,3,5,4]numbers_array.Sort #=> [1,2,3,4,5]alphabet_array = ["b", "c", "a"]alphabet_array.sort #=> ["a","b","c"]

As shown above, the ‘.sort’ enumerable takes an array and by default sorts the array using ‘< = >’ (spaceship operator). However, you are able to be specific on how you wish to sort the array. For example if you wish to sort the numbers_array from largest to smallest instead of smallest to largest you would do:

numbers_array.sort {…