Forem: Visualway

The Ultimate Javascript Cheatsheet

Visualway — Wed, 26 Jan 2022 02:28:00 +0000

JavaScript Basics

Set of JavaScript basic syntax to add, execute and write basic programming paradigms in Javascript

On Page Script

Adding internal JavaScript to HTML

<script type="text/javascript"> //JS code goes here </script>

External JS File

Adding external JavaScript to HTML

<script src="filename.js"></script>

Functions

JavaScript Function syntax

function nameOfFunction () 
{
// function body 
}

DOM Element

Changing content of a DOM Element

document.getElementById("elementID").innerHTML = "Hello World!";

Output This will print the value of a in JavaScript console

console.log(a);

Conditional Statements

Conditional statements are used to perform operations based on some conditions.

If Statement

The block of code is to be executed, when the condition specified is true.

if (condition) {
// block of code to be executed if the condition is true
}

If-else Statement

If the condition for the if block is false, then the else block will be executed.

if (condition) {
// block of code to be executed if the condition is true
} else {
// block of code to be executed if the condition is false
}

Else-if Statement

A basic if-else ladder

if (condition1) {
// block of code to be executed if condition1 is true
} else if (condition2) {
// block of code to be executed if the condition1 is false and condition2 is true
} else {
// block of code to be executed if the condition1 is false and condition2 is false
}

Switch Statement

Switch case statement in JavaScript

switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}

Iterative Statements (Loops)

Iterative statement facilitates programmer to execute any block of code lines repeatedly and can be controlled as per conditions added by the programmer.

For Loop

For loop syntax in javascript

for (statement 1; statement 2; statement 3) {
// code block to be executed
}

While Loop

Runs the code till the specified condition is true

while (condition) {
// code block to be executed
}

Do While Loop

A do while loop is executed at least once despite the condition being true or false

do {
// run this code in block
i++;
} while (condition);

Strings

The string is a sequence of characters that is used for storing and managing text data.

charAt method

Returns the character from the specified index.

str.charAt(3)

concat method

Joins two or more strings together.

str1.concat(str2)

index of method

Returns the index of the first occurrence of the specified character from the string else -1 if not found.

str.indexOf('substr')

match method

Searches a string for a match against a regular expression.

str.match(/(chapter \d+(\.\d)*)/i;)

replace method

Searches a string for a match against a specified string or char and returns a new string by replacing the specified values.

str1.replace(str2)

search method

Searches a string against a specified value.

str.search('term')

split method

Splits a string into an array consisting of substrings.

str.split('\n')

substring method

Returns a substring of a string containing characters from the specified indices.

str.substring(0,5)

Arrays

The array is a collection of data items of the same type. In simple terms, it is a variable that contains multiple values.

variable

Containers for storing data.

var fruit = ["element1", "element2", "element3"];

concat method

Joins two or more arrays together.

concat()

indexOf method

Returns the index of the specified item from the array.

indexOf()

join method

Converts the array elements to a string.

join()

pop method

Deletes the last element of the array.

pop()

reverse method

This method reverses the order of the array elements.

reverse()

sort method

Sorts the array elements in a specified manner.

sort()

toString method

Converts the array elements to a string.

toString()

valueOf method

returns the relevant Number Object holding the value of the argument passed

valueOf()

Number Methods

JS math and number objects provide several constant and methods to perform mathematical operations.

toExponential method

Converts a number to its exponential form.

toExponential()

toPrecision method

Formats a number into a specified length.

toPrecision()

toString method

Converts an object to a string

toString()

valueOf method

Returns the primitive value of a number.

valueOf()

Maths Methods

ceil method

Rounds a number upwards to the nearest integer, and returns the result

ceil(x)

exp method

Returns the value of E^x.

exp(x)

log method

Returns the logarithmic value of x.

log(x)

pow method

Returns the value of x to the power y.

pow(x,y)

random method

Returns a random number between 0 and 1.

random()

sqrt method

Returns the square root of a number x

sqrt(x)

Dates

Date object is used to get the year, month and day. It has methods to get and set day, month, year, hour, minute, and seconds.

Pulling Date from the Date object

Returns the date from the date object

getDate()

Pulling Day from the Date object

Returns the day from the date object

getDay()

Pulling Hours from the Date object

Returns the hours from the date object

getHours()

Pulling Minutes from the Date object

Returns the minutes from the date object

getMinutes()

Pulling Seconds from the Date object

Returns the seconds from the date object

getSeconds()

Pulling Time from the Date object

Returns the time from the date object

getTime()

Mouse Events

Any change in the state of an object is referred to as an Event. With the help of JS, you can handle events, i.e., how any specific HTML tag will work when the user does something.

click

Fired when an element is clicked

element.addEventListener('click', ()=>{
// Code to be executed when the event is fired
});

oncontextmenu

Fired when an element is right-clicked

element.addEventListener('contextmenu', ()=>{
// Code to be executed when the event is fired
});

dblclick

Fired when an element is double-clicked

element.addEventListener('dblclick', ()=>{
// Code to be executed when the event is fired
});

mouseenter

Fired when an element is entered by the mouse arrow

element.addEventListener('mouseenter', ()=>{
// Code to be executed when the event is fired
});

mouseleave

Fired when an element is exited by the mouse arrow

element.addEventListener('mouseleave', ()=>{
// Code to be executed when the event is fired
});

mousemove

Fired when the mouse is moved inside the element

element.addEventListener('mousemove', ()=>{
// Code to be executed when the event is fired
});

Keyboard Events keydown

Fired when the user is pressing a key on the keyboard

element.addEventListener('keydown', ()=>{
// Code to be executed when the event is fired
});

keypress

Fired when the user presses the key on the keyboard

element.addEventListener('keypress', ()=>{
// Code to be executed when the event is fired
});

keyup

Fired when the user releases a key on the keyboard

element.addEventListener('keyup', ()=>{
// Code to be executed when the event is fired
});

Errors

Errors are thrown by the compiler or interpreter whenever they find any fault in the code, and it can be of any type like syntax error, run-time error, logical error, etc. JS provides some functions to handle the errors.

try and catch

Try the code block and execute catch when err is thrown

try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}

Window Methods

Methods that are available from the window object

alert method

Used to alert something on the screen

alert()

blur method

The blur() method removes focus from the current window.

blur()

setInterval

Keeps executing code at a certain interval

setInterval(() => {
// Code to be executed
}, 1000);

setTimeout

Executes the code after a certain interval of time

setTimeout(() => {
// Code to be executed
}, 1000);

The Window. close() method closes the current window

window.close()

confirm

The window.confirm() instructs the browser to display a dialog with an optional message, and to wait until the user either confirms or cancels

window.confirm('Are you sure?')

open

Opens a new window

window.open("https://www.google.com");

prompt

Prompts the user with a text and takes a value. Second parameter is the default value

var name = prompt("What is your name?", "Abhiraj");

scrollBy

window.scrollBy(100, 0); // Scroll 100px to the right

scrollTo

Scrolls the document to the specified coordinates.

window.scrollTo(500, 0); // Scroll to horizontal position 500

clearInterval

Clears the setInterval. var is the value returned by setInterval call

clearInterval(var)

clearTimeout

Clears the setTimeout. var is the value returned by setTimeout call

clearTimeout(var)

stop

Stops the further resource loading

stop()

Query/Get Elements

The browser creates a DOM (Document Object Model) whenever a web page is loaded, and with the help of HTML DOM, one can access and modify all the elements of the HTML document.

querySelector

Selector to select first matching element

document.querySelector('css-selectors')

querySelectorAll

A selector to select all matching elements

document.querySelectorAll('css-selectors', ...)

getElementsByTagName

Select elements by tag name

document.getElementsByTagName('element-name')

getElementsByClassName

Select elements by class name

document.getElementsByClassName('class-name')

Get Element by Id

Select an element by its id

document.getElementById('id')

Creating Elements

Create new elements in the DOM

createElement

Create a new element

document.createElement('div')

createTextNode Create a new text node

document.createTextNode('some text here')

The Only stock resources library you will ever need.

Visualway — Thu, 13 Jan 2022 06:00:00 +0000

If you have ever searched the mystic lands of the internet for quality stock photos, videos or music, you have come to the right place. This excerpt from Dev Resources lists the quality websites for stock resources. If I have missed out on any websites, comment down below and they will be added.

If you like this post and need more resources as such, head on to Dev Resources for more.

Stock Photos

Websites that offer free stock photos of all kinds for your websites and apps

Website	Description
Pexels	Free stock photos shared by talented creators
Unsplash	The internet’s source of freely usable images
Pixabay	Over 1.7 million+ high-quality stock images and videos
Magdeleine	Gallery & free high-resolution photo everyday
Picspree	Royalty free images, stock photos, illustrations, and vectors
Burst	Free stock photos collections
Gratisography	Free collection of free high-resolution pictures
Life of Pix	Free high-resolution photography
Stock Snap	Hundreds of high quality photos added weekly
Morguefile	Over 350,000 free stock photos for commercial use
Kaboom Pics	Stock photography and color palettes. Good for product images
New Old Stock	Stock vintage photos
Pic Jumbo	Good collections of different types of photos
Public Domain Pictures	Public domain images of all types
Find A Photo	Searches multiple stock photo websites
Stockvault	Categorized stock photos
Placeholder	A free image placeholder service for the web. You can specify image size and format
Realistic Shots	Free high-resolution stock photos
Negative Space	High-Resolution Free Stock Photos
SkitterPhoto	Free high-resolution photography
PicoGraphy	Gorgeous, High-Resolution, Free Photos
Wunder Stock	Stunningly amazing free photos
PxHere	Free Images & Free stock photos - PxHere
Piqsels	Royalty Free Stock Photos
FoodiesFeed	Food photo stock
Nappy	A website offering Beautiful, high-res photos of black and brown people.
Generated Photos	Unique AI Generated model photos
Reshot	Uniquely free photos. Handpicked, non-stocky images.
Free Images	Find and download free stock photos - all free for personal and commercial use
Lorem Picsum	An easy to use API to get beautiful placeholder images. Size and other parameters can be specified.
scienceimage	An image library specializing in science and nature images
Integration & Application Network Image Library	Free images to provide scientists, resource managers, government agencies, community groups and graphics professionals with a resource for enhancing science communication.
Saxifraga	Free nature images
Creative Commons	Search for free images to reuse.
AllTheFreeStock	a curated list of free stock images, audio and videos.

Stock Videos

I've listed the top ten websites to get great stock video from in this tweet of mine. Do check it out and drop me a follow if you like it.

Abhiraj Bhowmick

@rainboestrykr

10 websites to get beautiful stock videos 🎥📸

A thread 👇🧵

#stockvidoes #webdev #webdeveloper #programming

07:37 AM - 14 Dec 2021

Stock Music & Sound Effects

Websites that offer free stock music and/or sound effects

Website	Description
Free Stock Music	Royalty free stock music for YouTube videos, podcasts, etc
Bensound	Download Royalty Free Music for free and use it in your project
Mixkit	Free music for your projects
Freesound	Free stock music and sounds
Free Music Archive	Collaborative database of creative-commons licensed sound for musicians and sound lovers
Musopen	An online copyright free classical music library
Unminus	Free Premium Music for Your Projects 🎁 Royalty Free. Cleared for YouTube.

Thank you for reading

If you liked this post, subscribe to our newsletter to never miss out on our blogs, product launches and tech news.

Subsribe to Visualway's newsletter

5 websites to create awesome favicons

Visualway — Tue, 11 Jan 2022 11:30:00 +0000

1️⃣ Favicon.io

Generate a favicon from text, from an image, or from an emoji. Download in .ico and .png formats

https://favicon.io/

2️⃣ Favicomatic

Generate favicons of all the sizes and formats as well as the HTML code needed to support every possible browser or device

https://favicomatic.com/

3️⃣ Favicon Generator

Generate icons for all platforms (Windows, iOS, Android)

https://realfavicongenerator.net/

4️⃣ FontIcon

Generate favicons and images from Font Awesome icons

https://gauger.io/fonticon/

5️⃣ Icon Kitchen

Powerful and free all-in-one icon generator

https://icon.kitchen

Thank you for reading

If you liked this post, subscribe to our newsletter to never miss out on our blogs, product launches and tech news.

Subsribe to Visualway's newsletter

15 awesome CSS animation libraries you need to know.

Visualway — Mon, 10 Jan 2022 08:00:00 +0000

Transitions from one CSS style configuration to another can be animated using CSS animations. A style describing the CSS animation and a set of keyframes indicating the start and end states of the animation's style, as well as possible intermediate waypoints, make up an animation.

CSS animations provide three major advantages over traditional script-driven animation techniques:

They're simple to use for simple animations; you don't even need to know JavaScript to make them.
Even with moderate system load, the animations work well. In JavaScript, simple animations often run poorly. To make the performance as smooth as possible, the rendering engine can use frame-skipping and other approaches.
Allowing the browser to regulate the animation sequence allows the browser to improve performance and efficiency by limiting the update frequency of animations in tabs that aren't currently visible, for example.

While most animations can be done with pure CSS, you can use animation libraries and frameworks to create better animations in lesser time.

Website	Description
Animate.css	Just-add-water CSS animations
Anime.js	Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes, and JavaScript Objects
CSShake	CSShake delivers exactly what it says on the box — a CSS library designed specifically for shaking elements within your web page
Hover.css	Hover.css is a CSS animation library designed for use with buttons and other UI elements in your website
AniJS	AniJS is an animation library that allows you to add animations to elements in a simple ‘sentence-like’ structure
Animista	CSS Animations On Demand
Tachyons-animate	Tachyons itself is an atomic CSS library with a ton of utility classes for essentially designing anything by adding classes to what you need
Sequence.js	Sequence.js is a JavaScript library that provides a responsive CSS framework for creating unique sliders, presentations, banners, and other step-based applications
Infinite	These animations, like rotations and pulses, that are specifically designed to run and repeat forever
OBNOXIOUS.CSS	Animations for the strong of heart, and weak of mind
MOTION UI	A Sass library for creating flexible CSS transitions and animations
Keyframes.app	A graphical user interface for generating custom CSS keyframe animations
AnimXYZ	AnimXYZ helps you create, customize, and compose animations for your website. Built for Vue, React, SCSS, and CSS
Whirl	CSS loading animations with minimal effort!
Hamburgers	Hamburgers is a collection of tasty CSS-animated hamburger icons. Also included is the source as a Sass library. It’s modular and customizable, so cook up your own hamburger.

Thank you for reading

If you liked this post, subscribe to our newsletter to never miss out on our blogs, product launches and tech news.

Subsribe to Visualway's newsletter

5 WEB UX LAWS EVERY DEVELOPER SHOULD KNOW

Visualway — Wed, 29 Dec 2021 08:21:55 +0000

1. JAKOB’S LAW

Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know. Websites do better the more standardized their design is.

2. FITT’S LAW

The time it takes someone to select an object in the screen depends on how far the cursor is from the object and the size of the object. Thus, the longer the distance and the smaller the target’s size, the longer it takes.

3. MILLER’S LAW

The average person can only keep 7 (plus or minus 2) items in their working memory. Organize content into smaller chunks to help users process, understand, and memorize easily.

4. LAW OF PROXIMITY

Objects that are near, or proximate to each other, tend to be grouped together.

Proximity helps to establish a relationship with nearby objects.
Proximity helps users understand and organize information faster and more efficiently.

5. HICK'S LAW

The time it takes to make a decision increases with the number and complexity of choices. Hick’s Law is a fairly commonsense idea: the more choices you present to a person, the longer they take to make a decision. It’s essentially a fancier way to describe the KISS rule: Keep It Simple, Stupid!

Thank you for reading

If you liked this post, subscribe to our newsletter to never miss out on our blogs, product launches and tech news.

Subsribe to Visualway's newsletter

5 Common HTML Mistakes you should avoid.

Visualway — Tue, 28 Dec 2021 10:44:57 +0000

1. Semantic Header and Footer

Divs have no semantic structure. Instead of using divs to create headers or footer structures, use "header" and "footer" elements.

Don't do this

<div id="header">
...
</div>
<div id="footer">
...
</div>

Do this

<header>
...
</header>
<footer>
...
</footer>

2. Use Figure Element

If you need to add a caption to your image, use the "figure" element combined with the "figcaption" element.

Don't do this

<img src="image url" alt="image description" />
<p> Lorem Ipsum Description </p>

Do this

<figure>
<img src="image url" alt="image description" />
<figcaption>
         <p> Lorem Ipsum Description </p>
</figcaption>
</figure>

3. Don't use bold or italic tags

The "b" and "i" tags are used for bringing attention to and for idiomatic text respectively, and have no semantic meaning. But browsers still give them the bold and italics stylings for historical purposes. Change the font-weight/font-style in the CSS or use the "strong" or "em" element.

Don't do this

<b>Bold</b>
<i>Italics</i>

Do this

<strong>Bold</strong>
<em>Italics</em>

4. Using descriptive links

A link’s text should be explicit and convey where is redirecting the user to, both users and search engines can more easily understand your content and how it relates to other pages.

Don't do this

<a href="url">
Check our pricing...
</a>

Do this

Check our <a href="url"> pricing </a>

5. Using inline styles

Writing inline styles violates the principle of having the structure (HTML) separate from the presentation (CSS). Instead write the styles in a stylesheet.

Don't do this

<h1 style="font-size: 24">
 Header
</h1>

Do this

h1 {
font-size: 24
}

Thank you for reading

If you liked this post, subscribe to our newsletter to never miss out on our blogs, product launches and tech news.

Subsribe to Visualway's newsletter

Thanks for reading!!

10 Tailwind resources for you to make better websites

Visualway — Fri, 17 Dec 2021 09:47:09 +0000

Tailwind CSS is a "utility-first" CSS framework that provides a deep catalog of CSS classes and tools that lets you easily get started. Rather than focusing on the functionality of the item being styled, Tailwind is centered around how it should be displayed.

1️⃣ Pallete Generator

Color palette generator that outputs Tailwind CSS configuration files.

https://adevade.github.io/color-scheme-generator

2️⃣ tail-animista

Configurable custom animation utility generator for Tailwind CSS.

https://tail-animista.vercel.app/

3️⃣ Flowrift

Beautifully designed Tailwind CSS UI blocks.

https://flowrift.com/

4️⃣ Windframe

Tailwind CSS drag and drop builder to rapidly build and prototype websites.

https://www.devwares.com/windframe/

5️⃣ Windy

Browser extension to convert HTML elements to Tailwind CSS.

https://usewindy.com/

6️⃣ Updrafts.app

Advanced online no-code drag and drop editor for Tailwind CSS.

https://updrafts.app/

7️⃣ Play

Advanced online playground for Tailwind CSS.

https://play.tailwindcss.com/

8️⃣ Tailwind Cheat Sheet

Tailwind CSS utility class names in a searchable interface.

https://flowbite.com/tools/tailwind-cheat-sheet/

9️⃣ Beginners to Advanced Tailwind Course

An all-in-course for people to start learning Tailwind or brush up their knowledge.

https://www.youtube.com/watch?v=lZp4salRFFc

🔟 Wicked Templates

Your one-stop shop for Tailwind Templates and components.

https://wickedtemplates.com

Thank you for reading

If you liked this post, subscribe to our newsletter to never miss out on our blogs, product launches and tech news.

Subsribe to Visualway's newsletter

50 Javascript Snippets you need to know right now

Visualway — Thu, 16 Dec 2021 07:28:13 +0000

One of the most popular languages to learn is JavaScript. "If you're only going to learn one programming language, learn JavaScript," as many people advise. In an interview, Quincy Larson, the founder of FreeCodeCamp, was asked which language developers should learn first. "JavaScript," he replied. "The world is being eaten by software, and JavaScript is eating software." With each passing year, JavaScript gains in popularity, and no one knows what will finally replace it. If you don't have a compelling need to learn a new language (for example, if your employment requires you to maintain non-JavaScript code), my humble advise is to concentrate on improving your JavaScript skills."

If this sounds compelling to you, here are 50 Javascript snippets you can keep at your fingertips to write better code, faster.

1️⃣ all

This snippet returns true if the predicate function returns true for all elements in a collection and false otherwise. You can omit the second argument 'fn' if you want to use Boolean as a default value.

const all = (arr, fn = Boolean) => arr.every(fn);

all([4, 2, 3], x => x > 1); // true
all([1, 2, 3]); // true

2️⃣ arrayToCSV

This snippet converts the elements to strings with comma-separated values.

const arrayToCSV = (arr, delimiter = ',') =>
  arr.map(v => v.map(x => `"${x}"`).join(delimiter)).join('\n');

arrayToCSV([['a', 'b'], ['c', 'd']]); // '"a","b"\n"c","d"'
arrayToCSV([['a', 'b'], ['c', 'd']], ';'); // '"a";"b"\n"c";"d"'

3️⃣ arrayToHtmlList

This snippet converts the elements of an array into list tags and appends them to the list of the given ID.

const arrayToHtmlList = (arr, listID) =>
  (el => (
    (el = document.querySelector('#' + listID)),
    (el.innerHTML += arr.map(item => `<li>${item}</li>`).join(''))
  ))();

arrayToHtmlList(['item 1', 'item 2'], 'myListID');

4️⃣ bifurcate

This snippet splits values into two groups and then puts a truthy element of filter in the first group, and in the second group otherwise.

You can use Array.prototype.reduce()and Array.prototype.push()to add elements to groups based on filter.

const bifurcate = (arr, filter) =>
  arr.reduce((acc, val, i) => (acc[filter[i] ? 0 : 1].push(val), acc), [[], []]);
bifurcate(['beep', 'boop', 'foo', 'bar'], [true, true, false, true]); 
// [ ['beep', 'boop', 'bar'], ['foo'] ]

5️⃣ byteSize

This snippet returns the length of a string in bytes.

const byteSize = str => new Blob([str]).size;

byteSize('😀'); // 4
byteSize('Hello World'); // 11

6️⃣ capitalize

This snippet capitalizes the first letter of a string.

const capitalize = string =>
    `${string?.[0]?.toLocaleUpperCase() ?? ""}${string?.slice(1) ?? ""}`;

7️⃣ dayOfYear

This snippet gets the day of the year from a Dateobject.

const dayOfYear = date =>
  Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);

dayOfYear(new Date()); // 272

8️⃣ decapitalize

This snippet turns the first letter of a string into lowercase.

const decapitalize = ([first, ...rest]) =>
  first.toLowerCase() + rest.join('')

decapitalize('FooBar'); // 'fooBar'
decapitalize('FooBar'); // 'fooBar'

9️⃣ countOccurrences

This snippet counts the occurrences of a value in an array.

const countOccurrences = value => array =>
    array.filter(item => item === value).length;

🔟 default
This snippet assigns default values for all properties in an object that are undefined.

const defaults = (obj, ...defs) => Object.assign({}, obj, ...defs.reverse(), obj);

defaults({ a: 1 }, { b: 2 }, { b: 6 }, { a: 3 }); // { a: 1, b: 2 }

1️⃣1️⃣ allEqual
This snippet checks whether all elements of the array are equal.

const allEqual = arr => arr.every(val => val === arr[0]);

allEqual([1, 2, 3, 4, 5, 6]); // false
allEqual([1, 1, 1, 1]); // true

1️⃣2️⃣ approximatelyEqual
This snippet checks whether two numbers are approximately equal to each other, with a small difference.

const approximatelyEqual = (v1, v2, epsilon = 0.001) => Math.abs(v1 - v2) < epsilon;

approximatelyEqual(Math.PI / 2.0, 1.5708); // true

1️⃣3️⃣ attempt
This snippet executes a function, returning either the result or the caught error object.

const attempt = (fn, ...args) => {
  try {
    return fn(...args);
  } catch (e) {
    return e instanceof Error ? e : new Error(e);
  }
};
var elements = attempt(function(selector) {
  return document.querySelectorAll(selector);
}, '>_>');
if (elements instanceof Error) elements = []; // elements = []

1️⃣4️⃣ bifurcateBy
This snippet splits values into two groups, based on a predicate function. If the predicate function returns a truthy value, the element will be placed in the first group. Otherwise, it will be placed in the second group.

You can use Array.prototype.reduce()and Array.prototype.push()to add elements to groups, based on the value returned by fnfor each element.

const bifurcateBy = (arr, fn) =>
  arr.reduce((acc, val, i) => (acc[fn(val, i) ? 0 : 1].push(val), acc), [[], []]);

bifurcateBy(['beep', 'boop', 'foo', 'bar'], x => x[0] === 'b'); 
// [ ['beep', 'boop', 'bar'], ['foo'] ]

1️⃣5️⃣ bottomVisible
This snippet checks whether the bottom of a page is visible.

const bottomVisible = () =>
  document.documentElement.clientHeight + window.scrollY >=
  (document.documentElement.scrollHeight || document.documentElement.clientHeight);

bottomVisible(); // true

1️⃣6️⃣ castArray
This snippet converts a non-array value into array.

const castArray = val => (Array.isArray(val) ? val : [val]);

castArray('foo'); // ['foo']
castArray([1]); // [1]

1️⃣7️⃣ compact
This snippet removes false values from an array.

const compact = arr => arr.filter(Boolean);

compact([0, 1, false, 2, '', 3, 'a', 'e' * 23, NaN, 's', 34]); 
// [ 1, 2, 3, 'a', 's', 34 ]

1️⃣8️⃣ currentURL
This snippet returns the current URL.

const currentURL = () => window.location.href;

currentURL(); // 'https://abhiraj.mdx.one'

1️⃣9️⃣ defer
This snippet delays the execution of a function until the current call stack is cleared.

const defer = (fn, ...args) => setTimeout(fn, 1, ...args);

defer(console.log, 'a'), console.log('b'); // logs 'b' then 'a'

2️⃣0️⃣ degreesToRads
This code snippet can be used to convert a value from degrees to radians.

const degreesToRads = deg => (deg * Math.PI) / 180.0;

degreesToRads(90.0); // ~1.5708

2️⃣1️⃣ average
This snippet returns the average of two or more numerical values.

const average = (...nums) => nums.reduce((acc, val) => acc + val, 0) / nums.length;
average(...[1, 2, 3]); // 2
average(1, 2, 3); // 2

2️⃣2️⃣ averageBy
This snippet returns the average of an array after initially doing the mapping of each element to a value using a given function.

const averageBy = (arr, fn) =>
  arr.map(typeof fn === 'function' ? fn : val => val[fn]).reduce((acc, val) => acc + val, 0) /
  arr.length;

averageBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], o => o.n); // 5
averageBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], 'n'); // 5

2️⃣3️⃣ capitalizeEveryWord
This snippet capitalizes the first letter of every word in a given string.

const capitalizeEveryWord = str => str.replace(/\b[a-z]/g, char => char.toUpperCase());

capitalizeEveryWord('hello world!'); // 'Hello World!'

2️⃣4️⃣ Create Directory
This snippet uses existsSync() to check whether a directory exists and then mkdirSync() to create it if it doesn’t.

const fs = require('fs');
const createDirIfNotExists = dir => (!fs.existsSync(dir) ? fs.mkdirSync(dir) : undefined);
createDirIfNotExists('test'); 
// creates the directory 'test', if it doesn't exist

2️⃣5️⃣ deepFlatten
This snippet flattens an array recursively.

const deepFlatten = arr => [].concat(...arr.map(v => (Array.isArray(v) ? deepFlatten(v) : v)));

deepFlatten([1, [2], [[3], 4], 5]); // [1,2,3,4,5]

2️⃣6️⃣ difference
This snippet finds the difference between two arrays.

const difference = (a, b) => {
  const s = new Set(b);
  return a.filter(x => !s.has(x));
};

difference([1, 2, 3], [1, 2, 4]); // [3]

2️⃣7️⃣ differenceBy
This method returns the difference between two arrays, after applying a given function to each element of both lists.

const differenceBy = (a, b, fn) => {
  const s = new Set(b.map(fn));
  return a.filter(x => !s.has(fn(x)));
};

differenceBy([2.1, 1.2], [2.3, 3.4], Math.floor); // [1.2]
differenceBy([{ x: 2 }, { x: 1 }], [{ x: 1 }], v => v.x); // [ { x: 2 } ]

2️⃣8️⃣ differenceWith
This snippet removes the values for which the comparator function returns false.

const differenceWith = (arr, val, comp) => arr.filter(a => val.findIndex(b => comp(a, b)) === -1);

differenceWith([1, 1.2, 1.5, 3, 0], [1.9, 3, 0], (a, b) => Math.round(a) === Math.round(b)); 
// [1, 1.2]

2️⃣9️⃣ digitize
This snippet gets a number as input and returns an array of its digits.

const digitize = n => [...`${n}`].map(i => parseInt(i));

digitize(431); // [4, 3, 1]

3️⃣0️⃣ distance
This snippet returns the distance between two points by calculating the Euclidean distance.

const distance = (x0, y0, x1, y1) => Math.hypot(x1 - x0, y1 - y0);

distance(1, 1, 2, 3); // 2.23606797749979

3️⃣1️⃣ Drop Elements
This snippet returns a new array with n elements removed from the left.

const drop = (arr, n = 1) => arr.slice(n);

drop([1, 2, 3]); // [2,3]
drop([1, 2, 3], 2); // [3]
drop([1, 2, 3], 42); // []

3️⃣2️⃣ dropRight
This snippet returns a new array with n elements removed from the right.

const dropRight = (arr, n = 1) => arr.slice(0, -n);

dropRight([1, 2, 3]); // [1,2]
dropRight([1, 2, 3], 2); // [1]
dropRight([1, 2, 3], 42); // []

3️⃣3️⃣ dropRightWhile
This snippet removes elements from the right side of an array until the passed function returns true.

const dropRightWhile = (arr, func) => {
  while (arr.length > 0 && !func(arr[arr.length - 1])) arr = arr.slice(0, -1);
  return arr;
};

dropRightWhile([1, 2, 3, 4], n => n < 3); // [1, 2]

3️⃣4️⃣ dropWhile
This snippet removes elements from an array until the passed function returns true.

const dropWhile = (arr, func) => {
  while (arr.length > 0 && !func(arr[0])) arr = arr.slice(1);
  return arr;
};

dropWhile([1, 2, 3, 4], n => n >= 3); // [3,4]

3️⃣5️⃣ elementContains
This snippet checks whether the parent element contains the child.

const elementContains = (parent, child) => parent !== child && parent.contains(child);

elementContains(document.querySelector('head'), document.querySelector('title')); // true
elementContains(document.querySelector('body'), document.querySelector('body')); // false

3️⃣6️⃣ Filter Duplicate Elements
This snippet removes duplicate values in an array.

const filterNonUnique = arr => arr.filter(i => arr.indexOf(i) === arr.lastIndexOf(i));

filterNonUnique([1, 2, 2, 3, 4, 4, 5]); // [1, 3, 5]

3️⃣7️⃣ findKey
This snippet returns the first key that satisfies a given function.

const findKey = (obj, fn) => Object.keys(obj).find(key => fn(obj[key], key, obj));

findKey(
  {
    barney: { age: 36, active: true },
    fred: { age: 40, active: false },
    pebbles: { age: 1, active: true }
  },
  o => o['active']
); // 'barney'

3️⃣8️⃣ findLast
This snippet returns the last element for which a given function returns a truthy value.

const findLast = (arr, fn) => arr.filter(fn).pop();

findLast([1, 2, 3, 4], n => n % 2 === 1); // 3

3️⃣9️⃣ insertAfter
This snippet can be used to insert an HTML string after the end of a particular element.

const insertAfter = (el, htmlString) => el.insertAdjacentHTML('afterend', htmlString);

insertAfter(document.getElementById('myId'), '<p>after</p>'); // <div id="myId">...</div> <p>after</p>

4️⃣0️⃣ insertBefore
This snippet can be used to insert an HTML string before a particular element.

const insertBefore = (el, htmlString) => el.insertAdjacentHTML('beforebegin', htmlString);

insertBefore(document.getElementById('myId'), '<p>before</p>'); // <p>before</p> <div id="myId">...</div>

4️⃣1️⃣ flatten
This snippet flattens an array up to a specified depth using recursion.

const flatten = (arr, depth = 1) =>
  arr.reduce((a, v) => a.concat(depth > 1 && Array.isArray(v) ? flatten(v, depth - 1) : v), []);

flatten([1, [2], 3, 4]); // [1, 2, 3, 4]
flatten([1, [2, [3, [4, 5], 6], 7], 8], 2); // [1, 2, 3, [4, 5], 6, 7, 8]

4️⃣2️⃣ forEachRight
This snippet executes a function for each element of an array starting from the array’s last element.

const forEachRight = (arr, callback) =>
  arr
    .slice(0)
    .reverse()
    .forEach(callback);

forEachRight([1, 2, 3, 4], val => console.log(val)); // '4', '3', '2', '1'

4️⃣3️⃣ forOwn
This snippet iterates on each property of an object and iterates a callback for each one respectively.

const forOwn = (obj, fn) => Object.keys(obj).forEach(key => fn(obj[key], key, obj));
forOwn({ foo: 'bar', a: 1 }, v => console.log(v)); // 'bar', 1

4️⃣4️⃣ Get Time From Date
This snippet can be used to get the time from a Dateobject as a string.

const getColonTimeFromDate = date => date.toTimeString().slice(0, 8);

getColonTimeFromDate(new Date()); // "08:38:00"

4️⃣5️⃣ Get Days Between Dates
This snippet can be used to find the difference in days between two dates.

const getDaysDiffBetweenDates = (dateInitial, dateFinal) =>
  (dateFinal - dateInitial) / (1000 * 3600 * 24);

getDaysDiffBetweenDates(new Date('2019-01-13'), new Date('2019-01-15')); // 2

4️⃣6️⃣ getStyle
This snippet can be used to get the value of a CSS rule for a particular element.

const getStyle = (el, ruleName) => getComputedStyle(el)[ruleName];

getStyle(document.querySelector('p'), 'font-size'); // '16px'

4️⃣7️⃣ getType
This snippet can be used to get the type of a value.

const getType = v =>
  v === undefined ? 'undefined' : v === null ? 'null' : v.constructor.name.toLowerCase();

getType(new Set([1, 2, 3])); // 'set'

4️⃣8️⃣ hasClass
This snippet checks whether an element has a particular class.

const hasClass = (el, className) => el.classList.contains(className);
hasClass(document.querySelector('p.special'), 'special'); // true

4️⃣9️⃣ head
This snippet returns the head of a list.

const head = arr => arr[0];

head([1, 2, 3]); // 1

5️⃣0️⃣ hide
This snippet can be used to hide all elements specified.

const hide = (...el) => [...el].forEach(e => (e.style.display = 'none'));

hide(document.querySelectorAll('img')); // Hides all <img> elements on the page

Thank you for reading

If you liked this post, subscribe to our newsletter to never miss out on our blogs, product launches and tech news.

Subsribe to Visualway's newsletter

10 tips to improve your website design.

Visualway — Thu, 07 Oct 2021 05:28:20 +0000

1. A Logo and Favicon

A logo is the most prominent brand element on your website. It will almost always live in the site navigation, near the top of the page, and in the footer. If you don’t have a logo, consider getting one. You can do it yourself or hire a graphic designer. Regardless of the route you choose, make sure you have the proper file types (AI, EPS, PDF, SVG, PNG, JPG) for your logo. It’s helpful to have two versions of your logo. The primary logo design is used most and may include a wordmark and other detailed design features. Your secondary logo should be smaller and is easier to fit into tight spaces. A favicon is the small logo icon shown in the URL address bar. A favicon makes your site look more trustworthy and professional. Here’s a screenshot of our favicon (and secondary logo):

2. Color Palette

Do you have brand colors? If not, now is the time to select a color palette for your brand identity. A typical palette consists of three colors. The primary color is usually for text and major design elements. A secondary color works well for accents. The third, and usually the most vivid, will be an “action color” for buttons, call-out boxes, and links This is an example of a color palette:

3. Typeface System

Typefaces (also called fonts) are one of the most underrated design components. A nice typeface can transform an average design into something really special. The typefaces you choose should align with the brand’s image and work well together. It’s best to choose a typeface with several weights (i.e., bold, italics) because it can be used in a variety of ways.

4. Forms

Opt-in Forms If you want to build an email list or subscription service, you’ll need a form visitors can use to sign up. The form connects to an email service that generates a response when someone joins your list.

Contact Form A contact form makes it easy for people to get in touch with you. To increase the likelihood that people will use it, don’t ask for too much information. First name and email address should be enough.

Calls-to-Action A call-to-action invites a site visitor to engage with you. The action could be as small as clicking on a link to read a blog post or sign up for your email list. It could also involve a much more significant step, such as buying a product. Decide what you want visitors to do when landing on the site and make calls-to-action prominent.

5. 404 Page

An error can occur when links break or change. A custom 404 page lets visitors know something went wrong and redirects them back to your site.

https://codepen.io/Navedkhan012/pen/vrWQMY

6. Theme

A theme is like the website’s foundation. Themes provide design features, layout, and other front-end elements users will see. Once you select a theme, you won’t be able to change it without damaging the site, so choose wisely.

7. Content

Your website’s content consists of individual web pages, such as the home, about, and contact pages. Blog posts often account for most of a site’s content, but images, graphics, and videos count too. It’s essential to assimilate all content before you begin the design process. Adding content as you design the site is like building a house one room at a time. Developing content first reduces the risk of building a disjointed and confusing site. Make the most valuable content easy to access. It is best to position relevant content on the home page or only one click away. Once site content is complete, check links to make sure they work. Edit text for spelling and grammatical errors. Grammarly and the Hemingway Editor are helpful tools for writing web copy.

Images make or break your website’s visual appearance. Use high-quality images and graphics that apply to site content. Images with vague meanings often confuse or bore users.Too many images overwhelm visitors. Image-heavy sites also take longer to load, which inhibits the user’s experience. I have discussed about the usage and sources for stock resources below.

https://abhirajb.hashnode.dev/the-only-stock-resources-library-you-will-ever-need

8. Footer

This section is at the bottom of the page and usually contains links to contact, terms, and privacy pages. You can also use the footer to help visitors navigate the site by placing key links inside of it. By habit, most users scroll down to the bottom of the page, which means your footer will be highly visible.

9. Announcement Bar

Do you have something important to say to your visitors? Maybe you have a big sale going on or want to share some news related to COVID-19. An announcement bar at the top of your page will grab attention so your site visitors don’t miss it.

10. Responsive Design

Responsive design refers to a website’s ability to adapt to various devices and browsers. The screen sizes of an iPhone, iPad, a Surface, and a Galaxy are unique. Likewise, Microsoft Edge, Google Chrome, and Mozilla Firefox are independent web browsers. Responsive design enables the site to adjust and provide the optimal viewing experience.

The width of iPhone screens ranges from 4 to 6.7 inches. So, a website’s display may change, depending on the site’s design and the screen’s size. Responsive design is essential for a good user experience. Unfortunately, search engines penalize sites that aren’t responsive.

Thank you for reading

If you liked this post, subscribe to our newsletter to never miss out on our blogs, product launches and tech news.

Subsribe to Visualway's newsletter

5 design tips every web dev should follow

Visualway — Thu, 23 Sep 2021 08:37:06 +0000

1. Follow a color scheme

Color schemes always come in handy when creating feature-packed projects. Suppose, you have made a SaaS app and a logo for that. Now if the color of the logo and the website or landing page you're designing, you are ultimately making a brand out of it.

How Do People Respond to Brand Colors?

Red evokes a passionate and visceral response.
Purple is a sophisticated yet mysterious color.
Blue is the most popular color choice for the top brands.
Green is a color that is synonymous with calmness, safety, and freshness.

A very popular example of how color schemes can shape your brand,

2. Creating responsive design

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. With responsive design, you will have the flexibility to scale up rather than scale down.

With a well-functioning mobile product, you have already prioritized features and capabilities and identified the essential elements of your platform.

Look below how Dropbox optimizes responsive design

3. Stick to one font or icon family

All icons/illustrations should come from the same family, and they should maintain the same stylistic rules through out.

Aim for only one or two fonts, three if you absolutely need it. Make sure the font you use co-relates to your brand scheme and feel. Know the difference between serif, sans-serif and monospaced.

Below given are screenshots from Atlassian's website.

4. CSS frameworks

When possible, don't use a CSS framework. It will heavily add to your core understanding of CSS. Some disadvantages of heavily styled CSS frameworks:

You will probably spend more time overriding styles/functionality than learning core-awesome CSS/HTML features.
You will have to eventually do something that can’t be achieved using the CSS framework, you either have to build it from scratch or pull in some library that fits your needs, either way, now you will have multiple sources of truth for your own design.
You’ll need to put in some time learning how to use any CSS framework, I think this time is better spent on learning how to build any component from scratch.

But if you must choose a framework, try going for something which is not heavily styles focused like Tailwind.

I have explained more about CSS frameworks in my earlier post. Click below to read it.Read here.

5. Appealing to your audience

The most important part of building a brand and website is keeping your target audience in mind. All design choices need to answer how you can best serve them and create a positive, memorable and unique experience for them. Without this, you won’t be able to stand up next to competitors. Use language and imagery that will appeal to them and reflect values they can relate to.

An example of how you can connect with your audience via design.

Thank you for reading

If you liked this post, subscribe to our newsletter to never miss out on our blogs, product launches and tech news.

Subsribe to Visualway's newsletter