Categories
web design web development

Top 10 Tools for Web Design

Are you looking for magic tools to ease out your design process ?
Well, your search ends here. In this article, I am going to present you 10 tools that are a MUST to ease out your design process and make your overall workflow super efficient.

With me ? Amazing. Here we go.

The first tool is:

1. Pexels

Pexels.com is my top most preferred website to grab royalty free images for my projects. The best part of these images is that they are professional high grade images that you can use in your web designs.

Link: https://pexels.com

2. CSS Clip Path Maker (Clippy)

Clippy is another amazing tool that you can use for image clipping. It gives you different templates that you can apply on your images to make them look different and eases the clipping process. So you drag a couple of points here and there and it gives you the CSS property for same that you can directly paste into your project and you are DONE. Isn’t it dead simple ? Pretty awesome, right?

Link : https://bennettfeely.com/clippy/

3. CSS Gradient

CSS Gradient is another quality tool that helps you in creating amazing and sleek gradients to enhance the overlook look, feel and aesthetics of your website. This is another must have tool for web design.

Link: https://cssgradient.io/

4. Animista

Who can forget Animista ? It is literary one of the best CSS tools that I have used so far for creating amazing, smooth and clean animations. IMO it is the best tool that you can use to animate your CSS elements. It lets you go crazy and creative at the very same time. It also provides tons of COOL animations out of the box which can be useful for most of the cases. You can even tweak them a bit to generate animations with the desired effect that you are looking for.

Link: https://animista.net/

4. ColorHunt

Color Hunt is a free and open platform for color inspiration with thousands of trendy hand-picked color palettes. So use these palettes for colors that look great to the eye.

Link: https://colorhunt.co/

5. Filter CSS Generator

A filter CSS generator that helps you quickly generate filter CSS declarations for your website. It comes with many options and it demonstrates instantly.

Link: https://cssgenerator.org/

5. Keyframes.app

Keyframes helps you write better CSS. It provides dead simple visual tools to help you generate CSS for your projects.It is a pretty new tool but I feel it has tremendous potential. Currently it allows you to play with animations, colors and shadows. So feel free to try this tool as well.

Link: https://keyframes.app/

6. Bounce.js

Bounce.js is a handy JavaScript library that enables you to create complicated animations. Bounce.js has a mature user interface that allows you to either add different components – such as easing, duration, delay, and number of bounces – manually to your animation, or select a ready-to-use preset, then play the animation, and fine-tune the properties if it’s necessary.

Link: https://bouncejs.com

7. Single Element CSS Spinners

Looking for enhancing your CSS designs with simple yet awesome looking animated loading spinners ? If the answer is yes, this CSS spinner library may be the perfect choice for you.

Link: https://projects.lukehaas.me/css-loaders/

8. Normalize.css

A HTML5-ready alternative to CSS resets. It preserves some useful browser default settings, normalizes styles for a wide range of HTML elements, corrects some common browser inconsistencies, and is well commented for easier use.

Link: https://necolas.github.io/normalize.css/

9. Voxel.css

Voxel.css is a CSS library for 3D rendering. Voxel is flexible enough to be used for everything from 3D web animations to full-on video games. It exposes 4 different classes – Scene, World, Editor and Voxel. So it offers a customization that is as close as a full 3D animation website.

Link: http://www.voxelcss.com/

10. Blush

Easily create stunning and beautiful illustrations with collections made by artists across the globe

Link: https://blush.design/

Those are my 10 favorite resources which I use in countless projects, go ahead and try those and let me know what you think of them!

👉🏻 Follow me on Twitter : https://twitter.com/The_Nerdy_Dev

👉🏻 Check out my YouTube Channel : https://youtube.com/thenerdydev

Categories
javascript

A Quick Refresher on Scopes in JavaScript – Function Scope, Global Scope and Block Scope

In this video, we will do a basic refresher on Scopes in JavaScript before we proceed further with more advanced topics in JavaScript. We will first talk about the Global Scope in JavaScript along with Function Scopes where we use the var keyword. Then we will move further and talk about the block scope in JavaScript that uses the modern ES6 introduced let and const keywords.

Follow me on:
👉 Twitter: https://twitter.com/The_Nerdy_Dev
👉 Instagram: https://instagram.com/thenerdydev

Categories
css

Creating Complex Animations using CSS Keyframes [video]

In this video, we will learn how we can create complex animations using CSS Keyframes. We will make use of the @keyframes CSS rule to define the percentage of time through a timing sequence.

Follow me on:
👉 Twitter: https://twitter.com/The_Nerdy_Dev
👉 Instagram: https://instagram.com/thenerdydev

Categories
nodejs

Node.js Architecture – Understanding its Internal Components [video]

In this video, we will understand the Node.js Architecture namely the Application, V8 JavaScript EngineNode.js BindingsLibuvEvent Loop and Worker Threads

Alt Text

Follow me on:
👉 Twitter: https://twitter.com/The_Nerdy_Dev
👉 Instagram: https://instagram.com/thenerdydev
👉 YouTube: https://youtube.com/thenerdydev

PS – Make sure to subscribe to my YouTube Channel for FREE content on Web Development and loads of other technologies

Categories
nodejs

Understanding the Events Reactivity System of Node.js and The Event Emitter Class [video]

In this video, we will learn about the Events Core Module in Node.js and then we will also understand the Event Emitter class of Node.js and the methods that we can use on the event emitter instances that we create to listen for an event ( on method ) and to fire an event, we have the emit method that is used to emit an event name to which you can optionally pass a payload as well.

Follow me on:
👉 Twitter: https://twitter.com/The_Nerdy_Dev
👉 Instagram: https://instagram.com/thenerdydev
👉 YouTube: https://youtube.com/thenerdydev

PS – Make sure to subscribe to my YouTube Channel for FREE content on Web Development and loads of other technologies.

Categories
nodejs

Working of Node.js | Blocking & Non-Blocking Architecture Explained (video)

In this video, we will understand how Node.js works and then we will understand the difference between the blocking and non-blocking architecture. Node.js as we know is asynchronous and non-blocking and we will understand why this architecture that Node.js uses is better than a conventional blocking architecture.

Follow me on:
👉 Twitter: https://twitter.com/The_Nerdy_Dev
👉 Instagram: https://instagram.com/thenerdydev
👉 YouTube: https://youtube.com/thenerdydev

PS – Make sure to subscribe to my YouTube Channel for FREE content on Web Development and loads of other technologies.

Categories
javascript

How Hoisting works in JavaScript ?

What is Hoisting in JavaScript?

JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code.

Hoisting allows functions to be safely used in code before they are declared.

Variable and class declarations are also hoisted, so they too can be referenced before they are declared. Note that doing so can lead to unexpected errors, and is not generally recommended.

Hoisting is JavaScript’s default behavior of moving declarations to the top.

However there is a big misconception among developers regarding this concept of hoisting.

Now as a JavaScript developer, it is super important for you to truly understand the concept of hoisting not only because it will give you a better understanding of the language but also because this is one of the most important concepts that can easily award or cost you some points in interview rounds of a web development interview.

Let us see an example to understand more about hoisting
logUsername();
console.log(username); 

// define the username variable 
var username = "Alex";
function logUsername() { 
   console.log(username);
   console.log('logged...');
}

Here is what we get as the output for the above code :

HOW JAVASCRIPT WORK UNDER THE HOOD ?

When the JavaScript Engine goes over your code, it parses it and simply analyze it, it creates something called as the Execution Context. So this execution context is kind of a wrapper around your currently running code. It comprises of the global variable, the this object (you may know it as the this keyword) and the lexical variable environment of that execution context. Let us see an example first and then we will understand the concept of Hoisting in these examples using the Execution Context:

var num = 10;

function foobar() {
  console.log("function foobar is called!")
}

foobar();
console.log(num);

If we execute the above code, we get the following output :

Now what will happen if we move the last 2 lines of code in the beginning like this ?

foobar();
console.log(num);

var num = 10;

function foobar() {
  console.log("function foobar is called!")
}

We will get the following output if we run the above code :

Ideally for this case we would expect JavaScript to raise an exception because the function foobar is getting called right before it is declared and the variable num  is getting referenced before its declaration.

In this case if we see the output, the function foobar is getting executed even though we called it way before its declaration point and for the variable num we are getting an undefined. This simply means that JavaScript has access to the the foobar function and the num variable which is stored somewhere. Now in order to understand this, we need to understand the phases of execution context in JavaScript :

Execution Context comprises of two phases:

  1. CREATION PHASE:

During the creation phase of the execution context, JavaScript performs memory space allocation for the functions and the variables that we define. In case of functions, the whole function body gets stored but in case of the variables, it is declared and assigned a default value of undefined. This entire thing is also termed as Hoisting in JavaScript.

An important thing to understand is, the value of num is set to undefined during this phase because JavaScript in this case finds a variable num defined somewhere in our above code. If we remove the line var num = 10 then it will result in an error 

Uncaught ReferenceError: num is not defined.

So in the above when JavaScript ran console.log(num),  the var num is not assigned any value at that point so it picked up the value from the memory space which is set to undefined during the creation phase and printed that value.

As a side note, it is recommended not to rely on hoisting, that means it is a good practice to declare and define the variables and the functions before they are referred.

2. EXECUTION PHASE:

In this phase, JavaScript executes our code line by line and assigns the value to all our variables. In our above example, a value of 10 is assigned to the variable num

To understand this, let us have a look at the below code :

function foobar() {
  console.log("function foobar is called!")
}
foobar()
console.log(num);
var num = 10;
console.log(a)

Since we now understand the different phases of Execution, we can easily say by looking at the above code that the output of our code should be :

  • The function foo gets called and it prints the following message to the console : function foobar is called!
  • Now on the next line as we know that during the creation phase, JavaScript assigns a default value of undefined to the num variable. So this gives undefined as output.
  • The last line logs 10. Now the reason for getting 10 here is that in the execution phase, assignment of variable happened and num got the value of 10

So this is it for this article. Thanks for reading.

If you enjoy my articles, consider following me on Twitter for more interesting stuff :

Image description

⚡Twitter : https://twitter.com/The_Nerdy_Dev

Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Categories
Uncategorized web development

Top Web Development Tools in 2022

The demand for web developers is increasing exponentially as new, optimal and efficient ways are popping up for creating websites. To accelerate the pace at which websites are created and at the same time ensuring that the websites that we create are progressive, more and more tools are coming up. With improved technologies and modern workflow, we can now create modern websites at much faster pace than what we used to when these tools were not there or were in in developing phase.

Let’s discuss some tools that we can use in 2022 to improve our development skills.

Text Editors

As a developer, the first thing we need to get started with development is an editor of choice. You can use a text editor like Sublime Text or an IDE like Webstorm for building your web applications. The editor that I recommend using for building web applications is Visual Studio Code. With Visual Studio Code, you have an option to plug extensions into it to make it behave like an IDE so that it can provide us with great development experience. The only tools that we need for writing our code is a text editor and a web browser to execute our code and see the output for it.

1. Sublime Text Editor

Sublime Text is a commonly-used text editor used to write code in more than 20 programming languages. Sublime Text’s slick user interface along with its numerous extensions for syntax highlighting, source file finding and analyzing code metrics make the editor more accessible to new programmers than some other applications like Vim and Emacs.

2. Visual Studio Code

Visual Studio Code is a streamlined code editor with support for development operations like debugging, task running, and version control. It aims to provide just the tools a developer needs for a quick code-build-debug cycle and leaves more complex workflows to fuller featured IDEs, such as Visual Studio IDE.

Web Framework

A web framework is a software library that enables developers to write software that runs on the web. Common areas where developers use web frameworks are:

  • Backend: The software that runs on servers and serves web sites, web apps, and also APIs for the exchange of data.
  • Frontend: The software that runs on clients, in web browsers and provides content and interactivity to the user.

Web frameworks may be written in different languages and using different methodologies. The term ‘stack’ is applied to refer to the collection of different languages, software, and frameworks in use behind a specific service

As the web-development is divided into two main ends, known as front-end and back-end, so developers have created various frameworks for both ends.

Front-End Web-Frameworks

1. Angular

Angular is a modern frontend framework for building amazing and sleek user interfaces.

Angular is a development platform, built on TypeScript. As a platform, Angular includes:

  • A component-based framework for building scalable web applications
  • A collection of well-integrated libraries that cover a wide variety of features, including routing, forms management, client-server communication, and more
  • A suite of developer tools to help you develop, build, test, and update your code

With Angular, you’re taking advantage of a platform that can scale from single-developer projects to enterprise-level applications. Angular is designed to make updating as straightforward as possible, so take advantage of the latest developments with a minimum of effort. Best of all, the Angular ecosystem consists of a diverse group of over 1.7 million developers, library authors, and content creators.

2. React.js

React.js is a JavaScript library for building user interfaces.

React.js is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. It’s used for handling the view layer for web and mobile apps. React allows developers to create large web applications that can change data, without reloading the page.

3. Vue.js

Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web. It is yet another frontend framework that you can use for building amazing and sleek user interfaces. Vue follows the MVVM architecture and it is also a great alternative for building frontends. It also has an easier learning curve compared to other frameworks like Angular and React.

Backend frameworks

1. Django

Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of web development, so you can focus on writing your app without needing to reinvent the wheel. It’s free and open source

2. Ruby on Rails

Rails is a full-stack framework. It ships with all the tools needed to build amazing web apps on both the front and back end. Rendering HTML templates, updating databases, sending and receiving emails, maintaining live pages via WebSockets, enqueuing jobs for asynchronous work, storing uploads in the cloud, providing solid security protections for common attacks. Rails does it all and so much more.

4. Express.js

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. With a myriad of HTTP utility methods and middleware at your disposal, creating a robust API is quick and easy. Express provides a thin layer of fundamental web application features, without obscuring Node.js features that you know and love.

Package Managers:

package manager or package-management system is a collection of software tools that automates the process of installing, upgrading, configuring, and removing computer programs for a computer in a consistent manner.

A package manager deals with packages, distributions of software and data in archive files. Packages contain metadata, such as software’s name, description of its purpose, version number, vendor, checksum (preferably a cryptographic hash function), and a list of dependencies necessary for the software to run properly. Upon installation, metadata is stored in a local package database. Package managers typically maintain a database of software dependencies and version information to prevent software mismatches and missing pre-requisites. They work closely with software repositories, binary repository managers and app stores.

Package managers are designed to eliminate the need for manual installs and updates. This can be particularly useful for large enterprises whose operating systems typically consist of hundreds or even tends of thousands of distinct software packages.

1. NPM

Relied upon by more than 11 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has become the center of JavaScript code sharing, and with more than one million packages, the largest software registry in the world. Our other tools and services take the Registry, and the work you do around it, to the next level.

2. pip

pip is a package-management system written in Python used to install and manage software packages. It connects to an online repository of public packages, called the Python Package Index. pip can also be configured to connect to other package repositories, provided that they comply to Python Enhancement Proposal 503.

3. Yarn

Yarn is a new package manager that replaces the existing workflow for the npm client or other package managers while remaining compatible with the npm registry. It has the same feature set as existing workflows while operating faster, more securely, and more reliably.

Git Clients

Git is a DevOps tool used for source code management. It is a free and open-source version control system used to handle small to very large projects efficiently. Git is used to tracking changes in the source code, enabling multiple developers to work together on non-linear development.

1. GitHub Desktop

It is a software by GitHub which helps you to create and manage GitHub repository on your desktop. GitHub Desktop is currently available for macOS and Windows Operating Systems. If you do not like to work with git commands or terminal you can simply download GitHub desktop and use its interactive interface to commit and manage your GitHub repository.

2. GitKraken

Millions of developers and teams around the world choose GitKraken Client to make Git work for them. It makes Git more visual and accessible with an intuitive UI, the flexibility to switch between a GUI or a terminal, and a seamless experience across operating systems. Integrations with GitHub, GitLab, Bitbucket, and Azure DevOps make it swift and simple to clone, fork, and add remotes. You can even create, view and manage pull requests.

API Testing tools

API stands for Application Programming Interface, and API testing tools are the software which is used to test the quality of the API and the tool check whether the API stands on all the expectation or there are some shortcomings in that API.

1. Postman

Postman is an API platform for building and using APIs. Postman simplifies each step of the API lifecycle and streamlines collaboration so you can create better APIs—faster.

Thanks for reading the article !

Categories
html

HTML Tags that you might not know

In this article, let us see some of the awesome but rarely used HTML tags that could be helpful in your new projects.

1. <details> tag

The <details> tag is used to specify additional details that the user can open and close on demand. So this means that the user can hide or show some information behind a heading or some other element. So in essence it is used to create an interactive widget like thing that can be opened and closed on the user’s interaction. The widget that we create by default appears as closed. On opening, it expands and displays the content that is present within it..

We can add any sort of content within the <details> tag.

Let us see an example for same :

2. <bdo> tag

BDO stands for Bi-Directional Override.

The <bdo> tag is used to override the current text direction. The <bdo> tag takes dir attribute which is used to change the direction of the text before presenting it. The dir attribute can take two values – ltr and rtl. So if you want the text direction from left to right, then use the ltr value otherwise use the rtl value. This is also a required attribute and using it you can specify the text direction inside the <bdo> element. Let us see an example for same:


3. <abbr> tag

The <abbr> tag is used to define an abbreviation or an acronym like “ASAP” (as soon as possible), “HTML” (hyper text markup language)

Let us move to an example for same :

If you hover over the rendered content, then you will see a popup with the abbreviation of the enclosed text.

3. <kbd> tag

The <kbd> tag is used to define keyboard input. The content inside is displayed in the browser’s default monospace font.

So this it for this article. Thanks for reading !

Categories
javascript

JavaScript – toLowerCase and toUpperCase methods

Hey guys,
I am back with a new article. In this article, let us learn about simple methods that have in JavaScript using which we can convert a given string to its uppercase and its lowercase representation respectively. So without a further ado, let’s get started.

Introduction

So we have the JavaScript’s toLowerCase method that returns a string without any uppercase letters. Similarly, we have the toUpperCase method which returns us a string representation of the given string without any lowercase letters. So essentially both these methods take a string and convert it into a different representation.

Now when you are working with a string in JavaScript, you may encounter a situation where you feel the need to convert the case of a string. For example, if you’re creating a sign-up form that collects the username of a user, then you may want the email address to appear in all lowercase.
That’s where these methods (toLowerCase and toUpperCase) comes in. These methods allow us to convert a string to all lowercase and all uppercase, respectively.

In this article, we’ll explore how to use the toUpperCase() and toLowerCase() string methods in JavaScript. We’ll also walk through an example that demonstrates the usage of each of these methods.

Case Sensitivity in Strings

Now strings, as we know, represents a sequence of characters that joined together. Strings can include things like letters, symbols, numbers, and white spaces.

In JavaScript, we can declare strings using three types of quotes :

  1. Single Quotes (”)
  2. Double Quotes (“”)
  3. Backticks (“)

Single and double quotes can be used interchangeably, although you should keep your usage of either of these in a consistent manner throughout your program.

So let us take an example of a string in JavaScript :

Image description

Strings are case sensitive. What does this mean ? This means that when we compare strings, or when we search through strings, or otherwise manipulate them, the case of each individual character will make no impact on how we work with the string. So for example, if we compare two strings in different cases, the strings will not be considered the same by JavaScript.

toUpperCase method

So first we have the toUpperCase method that converts a string to uppercase letters. toUpperCase does not change the value of a string, instead it takes a copy of the string, mutate that by converting each character of that copied string into its uppercase form and then eventually return that instead of returning the original string.

Let us see the syntax for the toUpperCase method. So let us convert our username to its uppercase representation :

Image description

The toUpperCase method as you can see from the above example does not take any argument. It is just applied as a method on the string that we want to transform so basically using the dot operator. This then returns us a copy of the string with all characters in uppercase.

toLowerCase method

The toLowerCase method converts a given string into its lowercase representation. Like the toUpperCase method, it does not alter the original string. Instead, it simply makes a copy of the original string and mutate that so basically converting each of the given characters of the string into its lowercase representations.

Let us see the syntax of toLowerCase method in action

Image description


This toLowerCase method instead turns the string into its lowercase representation.

Conclusion

In this guide, we discussed how we can make use of the toUpperCase and toLowerCase method to convert a string to all-uppercase and all-lowercase, respectively.

So this is it for this article. Thanks for reading.