DEV Community: anitaparmar26

Free Admin Dashboard Template - Dash UI

anitaparmar26 — Thu, 03 Feb 2022 10:14:09 +0000

Bootstrap 5 Admin & Dashboard Template - Dash-UI. Dash UI Kit is a free and open-source components and templates kit fully coded with Bootstrap 5.

It comes with Beautiful UI components & professionally designed, fully responsive pages for admin dashboard.

Our Academy Admin Dashboard Template is available in pro version.
Geeks UI Bootstrap 5 & Geeks React Admin Dashboard

Front End Developer Tools

anitaparmar26 — Fri, 28 Jan 2022 09:58:19 +0000

Hello folks,

Today I am sharing some developers tools which may useful in work. Getting to know the Developer tools of the trade can make your job easier and keep you on top of the skills you need to land a developer job or work better with your current team or clients.

Here some list:

1. Roadmap. sh

roadmap.sh is a community effort to create roadmaps, guides and other educational content to help guide the developers in picking up the path and guide their learnings.

Link

2. RapidAPI

Discover and connect to thousands of APIs

Link

3. Daily. dev

This chrome extension is the fastest growing online community for developers to stay updated on the best developer news..

Link

5. Figma

Create mockups, design templates of your websites here.

Link

6. Small Dev Tools

Useful developer tools which can perform a specific task.

Link

7. Meta Tags

It will let you know how your webpage looks on Chrome, Twitter, Facebook, etc.

Link

Thank you for reading post.
We recently launch our Geeks React UI Kit Project.

Git Command Cheat Sheet

anitaparmar26 — Thu, 30 Dec 2021 11:34:07 +0000

Hello Dev,

We all know about Git but I want to share little bit about that, In daily base where I am using, it is basic cheat sheet need to all developers.

Lots of code conflict had been when we were working in a team to completed project. That time we decided to have one cheat sheet on our office wall above desk.

Git Clone:

git clone https://name-of-the-repository-link

Git New branch, list, deleting:

git branch -b (branch name)
git branch or git branch --list
git branch -d

Git Checkout:

git checkout (branch name)

Git Switch:
git switch means you have already created branch.

git switch (branch name)

Git Status Command for:
like current branch, commit, push or pull, files staged, unstaged or untracked, files created, modified or deleted

git status

Git Add:

git add 
git add -A (for everything)

Git Commit:

git commit -m "commit message"

Git Push: for upload local repo content

git push: it is commonly used to upload local repository content to a remote repository.
git push --set-upstream: Branch 'branch Name' set up to track remote branch 'branch Name' from 'origin'.
git push -u origin: For push working existing branch .

git push 
git push --set-upstream 
git push -u origin

Git Pull: for git fetch from local repo which will merge branch

git pull

Git Merge: for merge branch to another

git checkout (branch name)
git fetch
git merge

Thank you for reading.

Webpack 5 : Guide for beginners

anitaparmar26 — Wed, 13 Oct 2021 11:31:53 +0000

So many times heard from dev that they don't understand how to configure webpack because of the config file. Today we learn how to use webpack to set up bundle styles, JavaScript, images, and fonts for the web.

The first time using webpack lots of questions would be whirling around, it can be difficult to understand how it works and how it should be used. My goal is to help you understand webpack.

Let's dive into webpack Initialization.

What is webpack 5?

In short, webpack is a static module bundler for modern JavaScript applications. It’s impossible to mention all tools and it’s unnecessary for a beginner’s guide like this.

Instead, I'll try to put a small core list to start.

Basic Configuration
- Entry point
- Output
Loaders
- Styles
- Images
- Fonts
- Babel (JavaScript)
Plugins
- HTML Template
Mode
- Development

Getting started with Webpack Basic Configuration

First, create a directory for your project to live and start the project. There before We will begin by creating the following directory structure:

1. Create Project



mkdir webpack-setup
cd webpack- setup
npm init -y # creates a default package.json

2. Webpack setup



npm install webpack webpack-cli –-save-dev

We will make an src/app folder to contain all source files. I will start by creating a simple index.js file

3. Basic Configuration

Let’s create a webpack.config.js at the root of the project.
Touch webpack.config.js

4. Entry & Output

In this example, we'll set the entry point to the src/index.js. We'll have it output in the dist folder, which is where production code gets built. The [name] in the output will be main.

5. Build Webpack

To run the script, we can make a build script that runs the webpack command.

6. Now you can run it.



npm run build

The dist folder has been created with main.bundle.js.

So we now have webpack building successfully.

We will start with Loaders in our example

1. Styles

For style, we will install style loader and SCSS, PostCSS, CSS loader packages.

sass-loader – for SCSS and CSS compile
node-sass – for node sass
postcss-loader - Process CSS with PostCSS
css-loader – resolve CSS imports
style-loader – inject CSS into the Dom



npm i sass-loader postcss-loader css-loader style-loader postcss-preset-env node-sass --save-dev

We will make postCSS.config.js file and add it to the root.

Also, add all loader in webpack config file.

Run to build, you'll see the Sass and PostCSS have been applied.

2. Images

Create src/images and add an image to it, then try to import it into your index.js file.

Once load the file-loader configured in the webpack.config.js



npm i file-loader --save-dev

You will get an option for output files where we want the exact path (dist/assets/images/**.jpg).

3. Fonts

First, put your font files into one folder of your project's application.

Need to load url-loader for features.



npm i --save-dev url-loader

4. Javascript

We are using babel-loader for js. Babel is next-generation JavaScript. There are a few additional dependencies for Babel as well.

babel-loader - Transpile files with webpack.
@babel/core - Backwards compatible JavaScript
@babel/preset-env - Smart defaults for Babel
@babel/plugin-proposal-class-properties - Custom Babel config



npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-env @babel/plugin-proposal-class-properties

Now we will add some code for load js in webpack.config.js.

We create a .babelrc file in the root of the project for Babel Plugins.

Run npm build, all code set without any error.



npm run build

5. Plugins for HTML

How can configuring webpack to generate HTML with
HtmlWebpackPlugin which create file from a template. First, install the plugin.



npm install html-webpack-plugin --save-dev

Create a template.html file in the src folder. We can pass a hash of configuration 'title' options to html-webpack-plugin.

And also add code in webpack config file to build HTML

Now run a build again. See the dist folder now contains an
index.html with the bundle.

6. Mode of Development

To set up for development, we will install webpack-dev-server. Webpack gives us the option to easily install a server with live
reloading.

webpack-dev-server - Development server for webpack ```

npm install --save-dev webpack-dev-server

Again add a line `mode:'development'` to webpack.config.js file. and for run server add a script in package.json:

![Webpack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7vll5vo6z6qg8dbbjyww.png)
![Webpack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m25fpgqm6g8dbszfotjh.png)

npm start

When running this command, a link to **localhost:8080** will automatically pop up in your browser

That shall be enough to get you to start with webpack! We've covered all (Basic,Plugins,Loaders) of the basic Webpack concepts. For further exploration of webpack’s capabilities we recommend official docs [Webpack](https://webpack.js.org/)

Hope you like it guys here we end our Webpack basic setup! Thank you so much for reading the post.

I am working on Dash UI project which build on gulp js.[Dash UI](https://github.com/codescandy/Dash-UI) 

Happy Coding :)

How to update package.json dependencies

anitaparmar26 — Wed, 25 Aug 2021 06:03:46 +0000

If you've ever installed npm packages and you got same version (not upgrade packages). So not worry just three lines of code will help to update.

This npm-check-updates is a utility that automatically adjusts a package.json with the latest version of all dependencies.

$ npm i -g npm-check-updates
$ ncu -u
$ npm install

1. $ npm i -g npm-check-updates

2. $ ncu -u

3. $ npm install

Thank you for reading.

How to use 'CSSNANO' in Gulp

anitaparmar26 — Fri, 16 Apr 2021 10:11:19 +0000

Hello Folks,

This is Anita here and it’s my first post. I want to share how to use cssnano to minify CSS through gulp js which is very flexible & the fastest build tool for Front end development.

What is Gulp?

First, let’s define what is Gulp. According to the official site, Gulp is a toolkit to automate & enhance your workflow and also enables you to compile, minify and concatenate any files around your project directory where you will be running a web server. So we will go into more detail a bit further down setup.

Some quick setup

First of all, you will need to have a node installed on your machine.

node --version
npm install --global gulp-cli
npm init (for package.json)
npm install gulp --save-dev (devDependencies)
npm install gulp-sass --save-dev (devDependencies)
npm install autoprefixer --save-dev (devDependencies)
npm install postcss gulp-postcss --save-dev (devDependencies)
npm install cssnano --save-dev (devDependencies)
npm install gulp-rename --save-dev (devDependencies)

After installing with the --save-dev mark will include it in the package.json underneath the devDependencies. Let’s start to create a new file, name it gulpfile.js which writes all the code to automate tasks.

function defaultTask(cb) {
    console.log ('hello word')
    cb();
  }

 exports.default = defaultTask

Let’s try it on command prompt and type:

gulp

Hit the enter and you will see something like below.

[13:50:33] Using gulpfile E:\2021\gulp-post-cssnano\gulpfile.js
[13:50:33] Starting 'default'...
hello word
[13:50:33] Finished 'default' after 4.64 ms

Congratulations. You’ve just written your first Gulp task.

The default task was run.

Start with CSSNANO

Before diving into a purposeful task for CSS minify through ‘CSSNANO’. When I am using gulp-cssnano facing the issue px into pt convert in gulp build time.

So we are installing:

Folder Setup

src — source files, pre-processed, un-minified.
dist — production files, processed, minified.

Let’s get started with the gulpfile.js task CSS minify from SCSS files.

const { src, dest } = require("gulp");
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const cssnano = require('cssnano');
const autoprefixer = require('autoprefixer');
const rename = require('gulp-rename');


// SCSS to CSS minify

function cssminify(callback) {
    return src('./src/scss/*.scss')
        .pipe(sass().on("error", sass.logError))
        .pipe(dest('./dist/css'))
        .pipe(postcss([ autoprefixer(), cssnano() ]))
        .pipe(rename({
            extname: '.min.css'
          }))
        .pipe(dest('./dist/css'));
    callback();
}
exports.cssminify = cssminify

Run the task “cssminify”

abcd@abcd-PC MINGW64 /e/2021/gulp-post-cssnano
$ gulp cssminify
[14:19:33] Using gulpfile E:\2021\gulp-post-cssnano\gulpfile.js
[14:19:33] Starting 'cssminify'...
[14:19:37] Finished 'cssminify' after 4.09 s

There’s so much more to learn about Gulp, this was just for CSS minify. Hope you guys had as much fun reading this article as I had writing it. Feel free to share if you believe it will be of help to someone.

We used CSSNANO in our product Geeks Bootstrap Theme,
Geeks - beautiful designed UI Components based on Bootstrap Framework. It has marketing pages, course pages, & an admin dashboard.

Thanks for reading.