DEV Community: Neto Ukpong

How to solve git not ignoring files in .gitignore

Neto Ukpong — Mon, 28 Aug 2023 13:51:50 +0000

Git is the number one version control system that has made the software development process faster and collaboration on projects much easier.

When working on a project, there will be some files that don't need to be committed and shared with other developers. Such files include configuration files that are specific to your development environment(.env), IDE config files, log files and node_modules folders.

There are 3 main states of files in a git repository:

tracked: These are files/folders that git is aware of and keeps track of any changes made to them.
untracked: These are new files/folders in the working directory that are yet to be staged and committed.
ignored: These are files/folders that git avoids. No tracking, no staging, no commits on these files/folders.

All ignored files are clearly stated in a .gitignore file.

How to create a `.gitignore` file

On Windows, run this command in the command line:
cd . > .gitignore

on Mac/Linux
touch .gitignore

Both commands are run from the root directory of the project.

How to correct files/folders not ignored by Git

After creating our .gitignore file and stating the files we want to ignore. Sometimes, they don't get ignored and are committed and pushed to the remote repository. This usually happens when we commit a file/folder either by mistake or otherwise into git before realising the error and then adding the file/folder to .gitignore. In such cases, we run the following commands after committing any changes made:

git rm -r --cached .
git add .
git commit -m "<commit message>"
git push

git rm -r --cached . - removes all files from the git index and refreshes the git repository
git add . - stages all files/folders not stated in the .gitignore file
git commit -m "<commit message>" - commits all files that have been staged
git push - push to remote repository

The files stated in .gitignore have been left alone by git and all other files uploaded to the remote repository

How to Integrate Tailwind CSS into a React app

Neto Ukpong — Wed, 19 Oct 2022 16:20:02 +0000

Step 1: Create your react project

For this post, we will be using create-react-app to create our react project. This sets up everything we need so that we can start coding relatively quickly. Open the command line and use the following commands.

npm
npx create-react-app react-app-with-tailwind
cd react-app-with-tailwind

yarn
yarn create react-app react-app-with-tailwind
cd react-app-with-tailwind

Step 2: Install Tailwind CSS

After creating our react project, and change the directory to the project folder. This is where we will install tailwind and it's dependencies.

npm
npm install -D tailwindcss postcss autoprefixer

yarn
yarn add -D tailwindcss postcss autoprefixer

This will install tailwindcss postcss and autoprefixer in dev dependencies.

Step 3: Generate Config files

The next step is to generate the configuration files that tailwind css needs. The files can be generated with the following command

npm
npx tailwindcss init -p

yarn
yarn tailwindcss init -p

This will generate two files:

tailwind.config.js
postcss.config.js

The files generated will have the default config already set-up.

Step 4: Configure path to files

Inside tailwind.config.js we need to specify the path to our React files.

module.exports = {
   content: [
     "./src/**/*.{js,jsx,ts,tsx}",
   ],
   theme: {
     extend: {},
   },
   plugins: [],
 }

This will tell tailwind the path to look for its class names and apply the styling associated with those class names.

Step 5: Add Tailwind Directives

Add the following lines to index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

That's it!
Tailwind CSS has been successfully setup in our React app. We can now use the utility classes in our project.

How to Render an SVG Image in Flutter

Neto Ukpong — Tue, 22 Mar 2022 12:43:40 +0000

By default, Flutter does not support SVG images.
You would need an external package to render the images.

In comes flutter_svg to the rescue.

Here's a link to the pub.dev page.

Adding the plugin

To add the package, run:
flutter pub add flutter_svg
This adds the package to your pubspec.yaml file. Afterwards, you will need to install it, run:
flutter pub get

Using flutter_svg in your app

import:'package:flutter_svg/flutter_svg.dart'

@override
Widget build(BuildContext context) {
 return SafeArea(
    child: Center(
      child: SvgPicture.asset('assets/image.svg')
    ),
  );