DEV Community: devbookmark

15 Websites to host your projects for free in 2021

devbookmark — Tue, 31 Aug 2021 03:47:17 +0000

A web facilitating administration is one kind of Internet facilitating administration which permits any people or organizations to make their site available on the World Wide Web. For the most part facilitating is paid, however there are numerous free site facilitating options, that can fill your need.

We as a whole love gifts and it should not shock anyone that even in web facilitating there are huge loads of gifts on the off chance that you realize where to look. Not everything free are equivalent however, and this time I will take a gander at what a portion of these free (and "nearly free") web has have to bring to the table.

FOSS Host

They're a non-profit organisation that exists to serve the hosting needs of the global open source community. It's hard to apply there so please read all the instruction before you apply.

Netlify

Netlify functions as publicized, you don't need to think about DevOps taking care of or anything to do with cloud facilitating. You can send your static applications directly from your facilitating supplier, regardless of whether it is Gitlab or Github, it simply works.

The beginning cost is additionally free so you can send your various ventures free of charge and have a custom space, these are highlights I truly appreciate, only straightforwardness at its best.

Firebase

AWS

I have been utilizing S3 for quite a while now, its simple to arrangement and work with. Programming interface reconciliations are extremely simple to arrangement. It can easily hold huge informational indexes, yet in some cases looking on S3 for documents isn't simple, it is a lethargic interaction and hangs the application. On a general level my involvement in S3 is awesome, I would emphatically suggest S3 for capacity.

Heroku

I have been utilizing it for a very long time to grandstand my own ventures to others on GitHub. It's an incredible stage to convey my ventures and it upholds a wide range of programming languages. I like the highlights of sending of my GitHub archives and furthermore set up the webhook for programmed redeployment on changes on my GitHub vaults. It's not difficult to utilize and doesn't have to manage a great deal of foundations as it's a PaaS.

Likewise, the startup can utilize this stage and spotlight more on advancement as opposed to setting up own workers and designing it. Additionally I love highlight of scaling the web applications/administrations starightforword, I simply need to indicate the quantity of dynos to scale it. It offers both the incredible dashboard and CLI so I can perform something on its dashboard or by utilizing its CLI. I love when I can convey a web application in a matter of seconds so its quick and easy to send. It additionally gives free addons like PostgreSQL, redis and so on which I can use in my web applications.

Github Pages

GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process, and publishes a website.

Azure

It is not difficult to utilize and is a solid extraordinary tool for my distributed storage needs. I like that it is not difficult to store a wide range of information and information drop expansions. It is really an astounding on the web stockpiling program.

It permits the sharing of enormous recordings and designs, which are hard to send by email, because of this component, it consummately upholds the work process and adds to the improvement of our business cycle. the joy of sharing significant substance, for example, recordings and designs that I need to partake in an agreeable, quick and secure route with no limitations is priceless.

Vercel

Developing and conveying a frontend application utilizing Vercel is exceptionally viable in term of the expense and time spending. Combination with ember.js is smooth and has no issue in similarity. The capacity to shares the live review of the site to customer and colleagues in a solitary snap truly shortening the typical cycle that are long and distressing.

Surge

Simple, single-command web publishing. Publish HTML, CSS, and JS for free, without leaving the command line.

Stormkit

Powerful infrastructure for modern javascript apps.
Stormkit integrates perfectly with your git flow.
It builds, deploys and scales your javascript apps seamlessly.

Render

the main thing I saw about Render was the means by which everything about sending appears to "simply work". It's a particularly reviving encounter to have the option to follow their documentation, relating to your particular arrangement, and not need to then scour the web searching for the real method to send with their administration.

Further, Render robotizes your site's HTTPS/SSL (TLS these days, ideally) and coordinates with GitHub. They likewise make confining outer admittance to your information base a breeze — security feels amazing and simple to carry out with Render (its majority is taken care of for you).

Furthermore, on the off chance that you have an inquiry, their care staff is instructive, kind, and convenient. It's really caused sending to feel much less like "arrangement" and more like... "we're live!"

Google Cloud Hosting

Google cloud has turned into the go to stage for capacity and information the executives in my work environment. Best of all, a fundamental membership (free) accompanies adequate room for yoou to begin with your information stockpiling, You would then be able to purchase more space with the littlest of cost. (Also, assuming you need to share the extra room theres even a family plan).

This is not free but offers a one year trial that is a lot to just explore around with there amazing features.

The possibly issue I have is when attempting to move a record from the drive to another stage. I need to download it in mass then, at that point discover the document and afterward move it. I do know this is on the grounds that google joining frameworks, however it very well may be somewhat troublesome, extraordinarily assuming you need to move significant documents that you have put away inside the framework.

Gitlab Pages

We can have free private repos, however it has restricted highlights. Yet, we can become acclimated to it prior to buying the item. Additionally, I like the web IDE in GitLab, which is much better than the content tool in other VCS. Additionally, we can check the GitLab ci config document prior to pushing it and testing it ready to go. We can approve the yml script on the GitLab site itself.

Gitlab has a decent number of abilities for making and overseeing vaults. It is additionally loaded with great action checking highlights; Gives us thorough investigations of applications that assist us with improving them.
Permits us to work in a more consistent way and makes interdepartmental correspondences simpler for us.
Accompanies a few helpful combinations and different abilities for time-following and source code the executives, among others.

Hostman

It was not difficult to send my task, I didn't need to do any arrangements. I conveyed a site and it was free for me, so that is a major in addition to. So Hostman is an ideal arrangement when you need to send your undertaking effectively, quick, yet be certain that it's protected.

I utilized Hostman to convey static site. I expected to do it truly speedy, without drawing in DevOps and with Hostman I saw my site live in no time flat. I'm not actually acquainted with this things like introducing conditions, setting up systems administration and the rest that is expected to convey and have a site, so Hostman was an answer for me.

AwardSpace

Incredible web hosting services and straightforward modules!!! Begun to have a test site. How effectively I could understand rule and assemble all parts to distribute is stunning. Very little specialized information needed for this. Plans are additionally entirely sensible and savvy.

Every free thing has some issues or the other, so be ready for some normal issues that show up with it.

Indeed, even the best free facilitating will in general be genuinely shaky, which can bring about vacation. Likewise, suppliers regularly place limitations on capacity and transfer speed, restricting your site's development and traffic limit. Your site may likewise have slow execution.

All things considered, there are times you might need to consider free facilitating. For an individual task, it could be all you need. The equivalent is valid in case you're rehearsing your website architecture and improvement abilities and simply need a space to evaluate groundbreaking thoughts.

Maybe you're setting up a space to test new modules or subjects. All things considered, the constraints of free facilitating shouldn't be an obstruction to what you need to achieve. Obviously, in the event that you essentially need an organizing site, you might need to utilize a neighborhood improvement instrument like Local and not stress over facilitating by any means.

Who doesn't love freebies? So above were some of the websites(PaaS) that offer free services to everyone. You just need to code your project and host and done.

Thanks for Reading😀

12 websites to Ace you programming skills in 2021

devbookmark — Mon, 30 Aug 2021 04:26:34 +0000

Hey everyone building projects and solving real world problems is inarguable one of the best ways you can learn how to code. In a culture dependent on usefulness, more often than not, practice is left to the side. It is now and again viewed as an exercise in futility, particularly for those with more long stretches of involvement.

I'm not discussing simply playing or accomplishing something. I'm discussing intentionally rehearsing an action. With regards to the basics. The nuts and bolts of your calling.

I'm not saying to simply rehearse the entire day. You have work to do, a daily routine to experience. Rest and an even life are just about as significant as training. Yet, save a period in your every day schedule for rehearsing.

It very well may be two hours or 30 minutes. The time you spend doing it will rely upon your experience and the amount you actually need to learn.

So in this post we will talk about 12 websites you can practice coding or in other words you can increase your web development skills.

CodeWell

If you want to level up your HTML, CSS and JavaScript skills, codewell offers real world Figma tempaltes that you can use to improve.

Coderbyte

They offer free challenges to get a feel for the paltform before subscribing to their plans which start at $35/mo.

Project Euler

Investigate a space of numerical difficulties and information structures that require more than numerical bits of knowledge to tackle. The coding issues on the site give an inductive chain learning experience meaning every issue presents new ideas that can assist with taking care of different issues.

In contrast to different destinations on the rundown, you can not code on the actual site so you would need to settle it on a piece of paper.

FreeCodeCamp

Inarguable one of the best and free resources to learn Web Development.

Geektastic

Geektastic has a combination of various decision and companion checked on code difficulties to appreciate. Each different decision question likewise has a point by point clarification with each answer.

Too as finishing difficulties you can likewise make and offer your own difficulties with their worldwide local area. Rank sufficiently high and you may even be welcome to join their survey group who get compensated to code for world's developing tech orgs.

Datacamp

Investigate data science and code with the website's online code editor utilizing Python and R. Their courses offer short quality instructional exercises and more on applying what you have realized. The site likewise allows you to apply your abilities to take care of certifiable issues.

TreeHouse

Treehouse is a great platform to help you learn certain languages like JavaScript or even backend languages like PHP.

LeetCode

LeetCode is a a most popular websites that gives a rundown of 190+ difficulties that can assist you with planning for specialized new employee screenings. You can address the difficulties straightforwardly online in one of 9 programming dialects.

Frontend Mentor

Solve real world HTML, CSS and JavaScript challenges whilst working to professional designs.

CSSBattle

This one is specific to CSS but its gamification system is a great way to track you progress and continue learning.

CodingGame

CodinGame is a bit not the same as different sites, on the grounds that rather than essentially settling coding difficulties in an editorial manager, you really participate recorded as a hard copy the code for games that you play straightforwardly on the web.

The game accompanies an issue depiction, experiments, and a manager where you can compose your code in one of 20+ programming dialects.

Javascript30

A 30 days vanilla JS coding challenge by Wes Bos. You get to build clocks, drum kits and so much more using just javascript.

Figuring out how to program can be hard. It is significantly harder to dominate it.

Likewise with some other expertise, you need to continue rehearsing so you're not neglecting and are improving. Every one of the elite competitors and laborers do it.

Make sure to isolate practice from the genuine game. You need them both to develop as a software engineer. The two of them have their significance in your life.

The Node.js ultimate beginner to pro Cheatsheet in 2021

devbookmark — Fri, 27 Aug 2021 06:16:33 +0000

Many of you guys requested us for NodeJS cheatsheets and here you go guys, this is an ultimate NodeJS cheatsheet.

In programs, the 'high level' scope is the global scope. That implies that in programs in case you're in the global scope 'var' something will characterize a global variable. In Node this is unique. The high level scope isn't the global scope; var inside a Node module will be neighborhood module to that module.

__filename - The filename of the code being executed(absolute path)
__dirname - The name of the directory that the currently execcuting script resides in(absolute path. )
process - The process objecet is a global object and can be accessed from anywhere. It is an instance of Event Emitter.

Modules

var module = require('./module.js'); - Loads the module.js in same directory.
module.require('./another_moude.js'); - Loads another_module as if require() was called frmo the module itself
module.id; - The identifier for the module. Typically this is the fully resolved filename
module.filename; - The fully resolved filename to the module
module.loaded; - Whether or not the module is done loading , or is in the process of loading
module.parent; - The module that required this one
module.children; - The Module objects required by this one.

Path in NodeJS

Use require('path') to use this module. This module contains utilities for handling and transforming file paths. Almost all these methods perform only string transformation. The file system is not consulted to check whether paths are ValidityState.

path.normalize(p); - Normalize a string path, taking care of '..' and '.' parseInt.
path.join([path1], [path2], [...]); - Join all arguments together and normalize the resulting path
path.resolve([from ...], to); - Solve the relative path from from to to.
path.dirname(p); - Return the directory name of a path. Similar to the Unix dirname command.
path.basename(p, [ext]); - Return the last portion of a path. Similar to the Unix basename command.
path.extname(p); - Return the extension of the path, from the last '.' to end of string in the last portion of the path.
path.sep; - The platform-specific file separator. \\ or /
path.delimeter; - The platform-specific path delimiter, ';' or ':'.

Process in NodeJS

process.on('exit', function(code) {}); - Emitted when the process is about ot exit.
process.on('uncaughtException', functiion(err) {}); - Emitted when an exception bubbles all the way back to the event loop
process.stdout; - A writable stream to stdout.
process.stderr; - A writable stream to stderr.
process.stdin; - A readble sream for stdin.
process.argv; - An array containing the command line arguments
process.env; - An object containing the user environment.
process.execPath; - This is the absolute of the executable that started the process.
process.execArgv; - This is the set of node-specific command line options form the executable that started the process.
process.arch; - What processor architecture you're running on 'arm', 'ia32' or 'x64'
process.config; - An object containing the JavaScript representation of the configure options that were used to compile the current node executable.
process.pid; - The PID of the process
process.platform; - What platform you're running on: darwin, freebsd, 'linux', 'sunos' or 'win32'.
process.abort(); - This causes node to emit an AbortController. This will cause node to exit and generate a core file.
process.chidr(dir); - Changes the current working directory of the prcess or throws an exception if that fails.
process.exit([code]); - Ends the process with the specified code. If the omitted, exit uses the 'success' code 0.
process.getgid(); - Gets the group identity of the process.
process.setgid(id); - Sets the group identity of the process.
proces.setuid(id); - Setss the group identity of the process
process.getgroups(grps); - Sets the supplementary group IDs.
process.kill(pid, [signal]); - Send a signal to a process. pid is the process id and signal is the string describing the signal to send.
process.memoryUsaage(); - Returns an object describing the memory usage of the Node process measured in Byte.
process.uptime(); - Number of seconds Node has been running

HTTP in NodeJS

To use the HTTP server and client one must require('http').

http.STATUS_CODE; - A collection of all the standard HTTP response status codes, and the short description of each
http.request(options, [callback]); - This function allows one to transparently issue requests
http.get(options, [callback]); - Set the method to GET and calls req.end() automatically
server = http.createServer([requestListener]); - Returns a new web server object. The requestListener is a function which is automatically added to the request event
server.listen(path, [callback]); - Start a UNIX socket server listening for connections on the given path.
server.listen(handle, [callback]); - The handle object an be set to either a server r socket (anything with an underlying _handle member), or a {fd: <n>} object.
server.close([callback]); - Stops the server from accepting new connections
server.setTimeout(msecs, callback); - Sets the timeout value for sockets and emits a timeout event on the server object, passing the socket as an argument, it a timeout occurs.
server.maxHeadersCount; - Limits maximum incoming headers count, equal to 1000 by default. If set to 0 - no limit will be applied.
server.timeout; - The number of milliseconds of inactivity before a socket is presumed to havea timed out
server.on('request', function (request, response){}); - Emitted each time there is a request
server.on('connection', function (socket) { }); - When a new TCP stream is established
server.on('close', function () { }); - Emitted when the server closes
server.on('checkContinue', function (request, response) { }); - Emitted eachn time a request with an http Expect: 100-continue is received.
server.on('connect', function (request, socket, head) {}); - Emitted each time a client requests a http CONNECT method.
server.on('upgrade', function (request, socket, head) {}); - Emitted each time a client requests a http upgrade.
server.on('clientError', function (exception, socket) { }); - If a client connection emmits an error event - it will forwarded here
request.write(chunk, [encoding]); - Sends a chunk of body
request.end([data], [encoding]); - Finishes sending the requests. If any parts of the body are unsent, it will flush them to the stream.
requests.abort(); - Aborts are requests
request.setTimeout(timeout, [callback]); - Once a socket is assigned to this request and is connect socket.setTimeout(); will be called.
request.setNoDelay([noDelay]); - Once a socket is assinged to this request and is connected socket.setNoDelay() will be called
request.setSocketKeepAlive([enable], [initiateDelay]); - Once a socket is assigned to this request and is connected socket.setKeepAlive() will be called
request.on('socket', function(socket) {}); - Emitted after a soscket is assigned to this request
request.on('connect', function(response, socket, head) { }); - Emitted each time a server responds to a request with a CONNECT methods. If this event isn't being listened for, clients receiving a CONNECT method will have their connections closed.
request.on('upgrade', function(response, socket, head) {}); - Emitted each time a server responds to a request with an upgrade. If this event isn't being listened for, clients receiving an upgraded header will have their connections closed
response.write(chunk, [encoding]); - This sends a chunk the response body. If this method is called and response.writeHead() has not been called, it will switch to implicit header mode and flush the implicit headers
response.writeHead(statusCode, [reasonPhrase], [headers]); - Sends a response header to the request
response.setHeader(name, value); - Sets a single header value for implicit headers. If this headers already exists in the to-be-sent headers, its value will be replaced. Use an array of strings here if you need to send multiples headers with the same name.
response.removeHeader(name); - Removes a header that's queud for implicit sending
reponse.end([data], [encoding]); - This method signals to the server that all of the response headers and body havae been sent; that server should consider this mesage complete. The method, response.end(), methis be called on eaach response.
response.statusCode; - When usinsg implicit headers (not calling response.writeHead() explicitly), tis property controls the status code that will be sent to the client when the headers get flushed
response.headersSent; - Bolean (read-only). True if headers were sent false otherwise
response.sendDate; - When true, the date header will be automatcally generated and sent in the reponse if it is not already present in the headers. Defaults are true.
response.on('close', function() {}); - Indicates that the underlying connection was terminated before response.end() was called or able
response.on('finish', function() {}) - Emitted when the response has been sent
message.httpVersion; - In case of server request, the HTTP version sent by the client. In the case of client response, the HTTP version of the connected to server
message.headers; - The request/response headers object
message.trailers; - The request/response trailers object. Only populated after the 'end' event
message.method; - The request method as a string. Read only. Example: GET and 'DELETE'.
message.url; - Request URL string. This contains only the URL that is present in the actual HTTP request
message.statusCode; - The 3 digit HTTP response status code. Ex: 404.
message.socket; - The net socket object associated with the connection.
message.setTimeout(msecs, callback) - Calls message.connection.setTimeout(msecs, callback) -

URL

This module has utilities for URL resolution and parsing. Call require('url') to use it.

url.parse(urlStr, [parseQueryString], [slashesDenoteHost]); - Take a URL string and return an object.
url.format(urlObj); - Take a parsed URL object, and return a formatted URL string.
url.resolve(from, to); - Take a abse URL, and a href URL and resolve them as a browser would for an anchor tag.

OS in NodeJS

Provides a few basics operating systems related utility funtions. Use require('os') to access this module.

os.tmpdir(); - Returns the operating system's default directory for temp files
os.hostname(); - Returns the hostname of the operating system
os.type(); - Returns the operating system name
os.platform(); - Returns the operating system platform
os.arch(); - Returns the operating system CPU architecture
os.release(); - Returns the operating system release
os.uptime(); - Returns the system uptime in seconds
os.totalmem(); - Returns the total amount of system memory in bytes
os.freemem(); - Returns the total amount of free system memory in bytes
os.cpus(); - Returns an array of objects containing information about each CPU/Core installed: model, speed (in mhz), and times (an object containing the number of milliseconds the CPU/code SPENT IN: USER, sys, idle and irq)
os.networkInterfaces(); - Get a list of network interfaces

Buffer in NodeJS

Buffer is used to dealing with binary data. Buffer is similar to an arrayn of integers but corresponds to a raw memory allocation outside the V8 heap.

Buffer.from(size); - Allocates a new buffer of size octets
Buffer.from(array); - Allocates a new buffer using an array of octets
Buffer.from(str, [encoding]); - Allocates a new buffer containing the given st. encoding defaults to 'utf8'
Buffer.isEncoding(encoding); - Returns true if the encoding is a valid encoding argument or false otherwise
Buffer.isBuffer(obj); - Tests if obj is a buffer
Buffer.concat(list, [totalLength]); - Returns a buffer which is the result of concatening all the buffers in the list together
Buffer.byteLength(string, [encoding]); - Gives the acutal bybte length of string
Buffer.toString([encoding], [start], [end]); - Decodes and returns a string from buffer data encoded with encoding (defaults to 'utf8') beginning at start (defaults to 0) and ending at end (defaults to buffer.length)

Assert in NodeJS

This module is used for writing unit tests for your applications, you can access it with require('assert').

assert.fail(actual, expected, message, operator); - Throws an exception that displays the values for actual and expected separated by the provided operator
assert(value, message); asset.ok(value, [message]); - Tests id value is truthy, it is equivalent to assert.equal(true, !!value, message).
assert.equal(actual, expected, [message]); - Tests shallow, coercive equality with the equal comparison operator ( == ).
assert.notEqual(actual, expected, [message]); - Tests shallow, coercive non-quality with the not eual comparison operator
assert.deepEqual(actual, expected, [message]); - Tests for deep equality
assert.notDeepEqual(actual, expected, [message]); - Tests for any deep inequality
assert.strictEqual(actual, expected, [message]); - Tsts strict equality, as determined by the strict equality operator
assert.notStrictEqual(actual, expected, [message]); - Tests strict non-quality as determined by the strict not equal operator
assert.throws(block, [error], [message]); - Tests strict non-equality as determined by the strict not equal operator
assert.doesNotThrow(block, [message]); - Expects block not to throw an error, see assert.throws for details

- `assert.ifError(value);` - Tests if value is not a false value, throws if it is a true value. Useful when testing the first argument, error in callbacks.

Query String

This module provides utilities for dealing with query strings. Call require('querystring') to use it.

querystring.stringify(obj, [sep], [eq]); - Serialize an object to a query string. Optinally override the default separator ('&') and assignment ('=') characters.
querystring.parse(str, [sep], [eq], [options]); - Deserialize a query string to an object. Optionally override the default separator ('&') and assignment ('=') characters.

We would like thank many people who have contributed this article and the offical NodeJS website, if you have anything to add here please comment it down. If you find any mistakes here please let us know, thanks for reading.

An ultimate guide to Logging in JavaScript

devbookmark — Thu, 26 Aug 2021 07:54:52 +0000

In this post we'll also learn more about Logging in JavaScript. This post is for everyone who wants final guide to Logging in JavaScript.

The console is part of the window object that gives you access to the browser's console. It lets you output strings, arrays and objects that help debug your code.

We can get access to the console on one of two ways:

window.console.log("Hello World!"); 
console.log("I'm sammy"); 

// Hello World
// I'm sammy

The most common element of the console object is console.log(). For most scenarios, you'll use it to get the job done.

There are four different ways of outputting a message to the console:

log
info
warn
error

Where console.error and console.warn out puts to stderr, the other output to stdout.

With the console object and its logging methods, long are the days of calling alert() to debug and get a variable's value.

Besides the general logging methods that we have discussed in the previous part, there are few more methods that we can play around with.

Now we will cover:

Stack tracing
Asserting

Stack tracing

The console.trace() method displays a trace that show how to code ended up at certain point.
Take a look at the below example, to understand how console.trace() works.

function hey(name) {
    console.trace('name:', name); 
    return `Hello ${name}!`; 
}
hey('sammy'); 

// OUTPUT
// "Hello sammy!"

Asserting

The console.assert method is an easy way to run assertion tests. If the assertion of the 1st argument fails, the subsequent argument gets printed to the console.

Let's look at this example,

// this will pass, nothing will be logged
console.assert(1 == '1', '1 not == to "1"');

The below assertion fails,

// this will pass, nothing will be logged
console.assert(1 === '1', '1 not == to "1"');

Output:

Assertion failed: 1 not == to "1"

Formatting Logs

There is a way to print out objects in a nice formatted way using console.dir().

For example:

const sammy = {
    topic: 'Logging', 
    platform: 'Javascript', 
    date: {
        year: '2020', 
        month: 'March', 
        day: 'Saturday'
    }
}; 

console.dir(sammy);

You can print out a DOM element's markup in a formatted way using console.dirxml().

for example:

<body>
   <h1>Hey</h1>

   <script>
      console.dirxml(document.body)
   </script>
</body>

The same will be the output 😅

Countings

The console.count() method is used to count the number of times it has been invokedd with the same provided label.

For example, here we have two counter, one for even values and another on for odd values.

[1, 2, 3, 4, 5].forEach(nb => {
    if (nb % 2 === 0) {
        console.count('even'); 
    } else {
        console.count('odd'); 
    }
});

Clearing the logs:

You can clear out all the console logs using the console.clear() method.

Record Timings

You can record how long an operation took to complete using console. You can start a timer with console.time and then end it with console.endTime.

For Example:

console.time('timer'); 
setTimeout(() => console.log, 1000); 
console.timeEnd('timer'); 

// timer: 0.123945114ms

Note: Passing the label in console.time is optional. If you use a label with console.time you must pass-in that same label when calling console.timeEnd.

Grouping logs

You can group the console messages together with console. Use console.group and console.groupEnd to group console messages together.

For Example:

console.group('Even Numbers'); 
console.log(2); 
console.log(4); 
console.log(6); 
console.groupEnd('Even Numbers');

Nested grouping logs

Groups ca also be nested to another one. Take a look at the below example,

console.group('Even'); 
console.log('2'); 
console.group('Odd'); 
console.log('1'); 
console.log('2'); 
console.groupEnd(); 
console.log('6'); 
console.groupEnd();

Styling your logs:

Console logging can be styled using the delimiter %c. The first argument is the message to displayed. Everything that comes after the first %c will be styled by the string provided by the secong argument, then everything after the next %c is styled by the following string argumnet, and so on.

console.log(
    'Hello %csammy%c!', 
    'color: blue; font-weight: bold; font-size: 1rem;', 
    'color: hotpink; font-weight: bold; font-size: 1rem;'
);

Tabular visualization of logs

The console.table() allows to display data in the console in a nice tabular format.

const jsonData = [
    {
        color: "red", 
        value: "#f00"
    }, 
    {
        color: "green", 
        value: "#0f0"
    }, 
    {
        color: "blue", 
        value: "#00f"
    }
]; 

console.table(jsonData);

Any type of JSON can be represented in a tabular view. You can display an Array in a tabular view

const y = [
    ["One", "Two"], 
    ["Three", "Four"]
];

And, you can also display an object in a tabular view. You may wonder how? Take a look at this example.

const x = { a: 1, v: { a: 1 } };

console.table() displays nay object data in a tabular view. But, if a JSON has multiple nested objects inside, it just prints the root level objects in the tabular view.

Let's see that in this example:

const x = [
    { p: 123, i: 1 }, 
    {
        p: 124, 
        i: 2, 
        x: {
            a: 1, 
            b: { s: 23 }
        }
    }
];

Sorting in logs

console.table() comes with an inbuilt sorting. Yoou can sort the table by a particular column by clicking on that column's label.

const y = [
    ["One", "Two"], 
    ["Three", "Four"]
]; 

console.table(y);

⚡Thanks For Reading | Happy Coding🚀

21 essential cheatsheets for Developers in 2021

devbookmark — Wed, 25 Aug 2021 04:58:43 +0000

Essentially, programmers have a great deal of stuff to recall. It's normal quicker to go to the web for answers than to invest energy trying out their own answers. Also, designers who work in groups regularly need to look into specific orders and dialects, particularly when altering others' code.

That is the reason engineers of all expertise levels know about the force of the all-strong cheat sheet. As great as it might feel to concoct the specific right line of code on your first attempt, or review how a past bug was fixed from memory, that is not generally reality.

As a developer, you will depend on a scope of asset advisers for discover answers for normal errors, and that is alright.

DZONE Refcardz

Largest libraries of cheatsheets

JavaScript comprehensive cheatsheet with PDF

From basic to advanced concepts. ES6+, simple explanations, DOM API, Event loop, functions, array, object, Type and so much more. Everything explained in this 13 page JavaScript Cheatsheet

Awesome Cheatsheets

Awesome cheatsheets for popular programming languages, frameworks and development tools.
They include everything you should know in one single file. 👩‍💻👨‍💻

VUE Cheatsheet

Cool visual flexbox cheatsheet

Learn all about the properties available in flexbox through simple visual examples.

HTML5 Security Cheatsheet

HTML5 Security Cheatsheet - A collection of HTML5 related XSS attack vectors

OverAPI

It's just another top website for cheatsheets.

Cheatsheet for designers and Developers

40 Essential Cheatsheets for Web Designers and Developers

HTML Element Cheatsheet

This is a quick reference of elements that are new or have been redefined in HTML5.

awesome cheatsheet

From project management to Security to Tools to Databases to Backend and Frontend development to programming languages covering everything with amazing cheatsheets.

Cheatography

A collection of interactive cheatsheets.

Rico's Cheatsheet

A modest collection of cheatsheets written by Rico.

MODERN JS Cheatsheet

Cheatsheet for the JavaScript knowledge you will frequently encounter in modern projects.

David's PHP CheatSheet

A quick reference guide for PHP, with functions references, a regular expression syntax guide and a reference for PHP's date formating functions.

GitSheet

A dead simple git cheatsheet.

Ultimate Flexbox cheatsheet

Learn Flexbox with 30 Code Tidbits ✨

HTML Cheatsheet

Online interactive HTML Cheat Sheet contains useful code examples and web developer tools, markup generators and more.

Media Queries Cheatsheet

Modern PHP Cheat Sheet

This sample is an excerpt from the ebook Front Line PHP.

CSS Animation Cheatsheet

The CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects

WebDev SEO CheatSheet

A must know SEO cheatsheet for Developers

In the realm of PC programming, there are regularly different approaches to accomplish a similar outcome, and it never damages to pursue a faster route when you can. Ideally these cheat sheets accelerate your interaction and assist you with tidying up your code.

These apparatuses joined will make you a more innovative, certain, and proficient web designer.

29 Largest icon libraries to use in 2021

devbookmark — Tue, 24 Aug 2021 07:38:23 +0000

Typography assumes a major part in a wide range of plans, from item bundling to versatile applications and then some. Today we're investigating the best places to discover free textual styles, and take your plan work to another level.

There are many spots you can download an extraordinary looking text style for nothing. We limited the rundown to the best 29 sites for discovering free text styles. See.

React Icons

svg react icons of popular icon packs

Flag icons CSS

🎏 A collection of all country flags in SVG — plus the CSS for easier integration

IconShock

free icons and premium icon packs. Flat icons, Material icons, Glyph icons, iOS icons, Font icons, and more design styles. Vector files, including PNG and SVG icons. Ready for apps, web or social media projects.

Orion Icon

6014 Free SVG Vector Icons,
Advanced Interactive,
Web App.

Tabler Icons

A set of over 1250 free MIT-licensed high-quality SVG icons for you to use in your web projects.

Weather Icons

215 Weather Themed Icons and CSS

The Noun Project

Icons and Photos For Everything

StreamLineHQ

100,000 icons, illustrations and emoji for all your projects. Customize them to your brand in seconds.

Icono

One tag One icon, no font or svg, Pure CSS

Smashicons

Smashicons is the world's largest and most complete icon set with over 342,450 icons for designers and developers.

Fontisto

The iconic font and CSS toolkit. Fontisto gives you scalable vector icons that can instantly be customized: size, color, drop shadow and anything that can be done with the power of CSS.

PNG Tree

Pngtree provides free download of png, png images, backgrounds and vector. Millions of high quality free png images, PSD, AI and EPS Files are available.

System UICons

System UIcons is an icon library design for systems and products. Use how you want, without attribution.

Nucleyo

Nucleo is a Mac/Windows app to organize, customize and export all your icons, and a library of 31467 icons.

PixelLove

Download 15,000 icons in 6 distictive styles made for professionals

IconStore

The IconStore is a library of free, vector (SVG) icons created by talented designers to download for commercial use.

Feather

Simply beautiful open source icons

Iconmostr

Discover 4512+ free icons in 316 collections. Free simple icons for your next project

Material Design Icons

View all the Material Design Icons and more from the community.

Evil Icons

Simple and clean SVG icon pack with the code to support Rails, Sprockets, Node.js, Gulp, Grunt and CDN.

useIconic

An open source icon set with 223 marks in SVG, webfont and raster formats

Ionicons

Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎

FreeIcons

THE LARGEST DATABASE OF FREE ICONS
Available in PNG, SVG, EPS, PSD and BASE 64 formats.

IconFactory

Our freeware is only for personal use and all copyrights remain the property of their respective holders. We have amazing Design Services for commercial projects.

CSS.gg

700+ Pure CSS, SVG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API

Dribbble - Free Icons

Discover 500+ Free Icons designs on Dribbble. Your resource to discover and connect with designers worldwide.

UX Wing

Exclusive collection of free icons download, Free icons SVG and PNG that can use for commercial use no attribution. For websites, PowerPoint, android apps, etc.

Entypo

Entypo is a suite of 411 carefully crafted premium pictograms by Daniel Bruce.

Bootstrap Icons

Official open source SVG icon library for Bootstrap.

Consequently, these were the absolute best hotspots for investigating free text styles. Choosing the right textual style is vital to the accomplishment of any business.

The clarity of the textual style is likewise significant notwithstanding the plan. It is significant that you get your work done well and chooses the best. Good luck!

22 Must watch programming movies in 2021 (hottest)

devbookmark — Mon, 23 Aug 2021 03:48:37 +0000

We will be owning your weekends now. These movies and series are unique and not like the same content you find on every website. Get some Coke and a seat and ENJOIIII.

Each software engineer couldn't want anything more than to see their jobs according to the viewpoint of films. We as a whole realize Hollywood is notable in exhibiting programming and Artificial Intelligence in the correct manners. Thus, with no further ado, here are the 10 best films that each developer should watch.

So these are are must watch movies for programming geeks and watchers.

We are Legion
Jobs
Tron
Source Code
The Social Dillema
Hackers
TAKEDOWN
Primer
Matrix
The Social Network
The fifth Estate
AntiTrust
Mr Robot
The Pirate Bay Away From Keyboard
Silicon Valley
The Greact Hack
The Founder
EX MACHINA
HER
Untraceable

We are legion

This film reveals a lot of insight into the cloudy and confounding universe of the programmer bunch Anonymous. The movie producers had the option to accomplish amazing admittance to the gathering and recount to the verifiable story generally through interviews with members.

The film is basically ordered so it recounts to their story so that individuals who haven't followed its advancement can acquire some comprehension of an exceptionally confounded and fairly befuddling association.

The film is done in a self-basic design that while for the most part positive isn't reluctant to show the gathering's negatives, its contentions and its inner battles. It is incredibly all around made and profoundly enlightening. The gatherings' practically incidental development from joyful wisecrackers into some kind of political activists is interesting.

While they are obviously propelled by obligation to free discourse – particularly on the web – it is difficult to unmistakably characterize their advancing belief system. I trust that this film is generally seen since it gives a perspective on one of the new political outskirts of the web.

Jobs

It's a totally wooden and tasteless portrayal of the tech symbol, yet for Apple enthusiasts, it'll in any case have an allure as an enlightening biopic.

Occupations presents an entrancing story of how Jobs defeats corporate belittling and channels his own propensity toward fixation to fabricate apparently the most inventive organization of the last decade.

It once in a while slowly inhales and is packed with innovative language, yet it never feels hindered. Halls become animated with symbolism. Minutes from the past crosscut consistently and educate the present, frequently with covering exchange. Furthermore, the glare of the lights and roar of the groups can be so sweeping, they cause you to feel like you were there, as well: on the incline of things to come.

Tron

This was a serious amazement for me. I hadn't seen the first TRON in years, yet I felt like I adequately realized to enter that world once more. After the blended audits began coming out, I'll concede, I was a smidgen apprehensive.

While the story isn't amazing however any means, TRON:LEGACY gave me significantly more than I anticipated. First off, I thought Garrett Hedlund was a decent decision for the job of Sam, and despite the fact that he has a somewhat more "equation legend" feel, he made Sam a lovely affable person. Also, obviously, having Jeff Bridges returning was a delight to watch, despite the fact that his more "loose" approach didn't generally work, however it was still nice to see him once more. Michael Sheen is additionally present, and keeping in mind that I do wish we might have seen a greater amount of him, he made the best of what he was given. Trust me, he's a sight to see.

The champion for me, and numerous others, was Olivia Wilde as Quorra. She brings an irresistible, youngster like appeal to her job - yet in addition somebody not to be messed with in a fight. Frankly, she felt much more human than different characters, and it worked superbly.

Generally, regardless of it's blemishes in the story, TRON:LEGACY ended up being a visual show-stopper, and the strong cast raised the film to a more significant level. Unquestionably one I'm glad to return to!

Source Code

It's uncommon that I discover a film so engaging and mind-twisting. Source Code is a science fiction spine chiller activity brainbuster. You might have to watch it more than once to get every one of the subtleties of this astonishing film. Jake Gyllenhaal is a helicopter pilot positioned in Afganistan who awakens on a train outside of Chicago.

He's in another person's body and has just 8 minutes to discover a fear monger aircraft. You will be snared quick. Cherished it!

The Social Dilemma

It's truly astounding film and I figure everybody ought to need to watch this particularly those young who feel that web-based media is everything .

I saw my a few companions who is consistently accessible on online they're constantly connected with on this public activity . Also, it's truly doesn't imply that her life was absolutely amazing even I saw that she's completely wrecked this current life , her reality . This will in a real sense make you question your life, decisions, feelings. It's a genuine stunner. Particularly for individuals who've consistently viewed as online media a terrible impact.

This is only an entire another explanation and presumably the lone motivation behind why we ought to, with prompt impact get off our gadgets and move out into this present reality, structure genuine suppositions, settle on non one-sided choices. I've generally been very blown a gasket about losing the capacity to fuse assessment, become less lenient and comprehension towards all sides of a discussion.

Hackers

The most under appraised 90's American secondary school film beyond a shadow of a doubt and it very well may be contended that it's the awesome. Respectable plot, high schooler tension, excellent cast, amazing soundtrack, great style. It was a film for the bizarre child in class before individuals were professing to be the unusual child in class.

While staggering visuals and quick altering, give this film it's drive and speed, that make the entirety of this significant; raising a vivid and drawing in film into a sort characterizing religion exemplary.

TAKEDOWN

This freely depicts the genuine story of Kevin. In the event that you read his book (A Ghost in the Wires), it clarifies that he even undermined the film with lawful activity to change the specific pieces of the content. As the first was over misrepresented and basically made Kevin look underhanded. However, genuinely, the book is a wonderful perused. What I for one believe is Hollywood's awful portrayal of programmers is lamentable.

PRIMER

A dazzling, confounding and startling wreck of a film that doesn't avoid coming to the heart of the matter of conceivable cerebrum harm. Each and every subsequent feels intentional, making each review special. The sort of film will keep you up around evening time contemplating it each time you watch it.

Its a low spending film the thought, story is acceptable yet I didn't actually loved the film since I was completely lost as crowd in the main half and its sluggish as well. It's in reality eventually with extraordinary tolerance you will become acquainted with the film better and it's acceptable film.

Matrix Series

An incredible film that is relatively radical, simply the prospect of how individuals are stunned by this film on the year it was delivered entertains me. Individuals in those days were likely stunned and in wonder of the idea that in those days was practically difficult to get a handle on. After 20 years I figure the crowd will in any case be stunned similarly as how it astounded me, despite the fact that there have been many movies that fundamentally had a similar plot and executed a lot more prominent CGI impact.

the plot and idea were completely executed well through embellishments and extraordinary actin. It was an extraordinary film that gives the watchers new discernment particularly at the time it was discharge, it was the time another thousand years was drawing closer. It offered motivation to numerous scifi and superhuman thoughts and film ideas of the 21st century.

The Social Network

The first occasion when I caught wind of the interpersonal organization, I wasn't intrigued and thought it was simply going to be an exhausting film. In any case, a couple of years after the fact I discovered the number of good surveys that this film had.

So I gave watching it a shot netflix and I really adored the interpersonal organization. The film is about the maker of facebook, Mark Zuckerberg. Jessie Eisenberg is an incredible depiction as Mark. No big surprise it won an Oscar for best adjusted screenplay.

It has wonderful acting, coordinating, composing, characters, and plot too. The film likewise has incredible cinematography. Andrew Garfield had the best execution out of the entire film and should've been designated for best supporting entertainer. I additionally truly loved Justin Timberlake as well.

Generally, the interpersonal organization was perhaps the best film that I found in my life and it merited best picture. In any case, basically it won a few honors.

The fifth Estate

Benedict Cumberbatch does an attractive depiction of Wikileaks originator Julian Assange. The controls and the smoke screens make the whole demonstration ethically dim. The Internet for sure gives an essential fifth home of society.

Benedict as regular has given appropriate equity to the said job. Fair depiction of the "Free Information" perspective on the screen. Supporting entertainers satisfying their hopes, over every one of the a decent bundle of a genuine exciting story.

AntiTrust

I suggest all software engineers, security experts, new companies, and individuals working in the field of data innovation and PC to watch this film. The film is all around made and I see it like clockwork. It gives you a feeling of energy, experience and secret. I love this film and "The I Inside" with the Actor Ryan Philippe. This film is as relatable to whats going on today with exploiting skilled individuals.

Mr Robot

Best series I have watched, not just for dramatization, anticipation and psyche softening turns, the melodic score and sound is carefully incredible.

In case you were ever an old fashioned raver or advanced music fan, the feeling of your spine shivering when certain form ups occur in the series is as fulfilling. Possibly a bit too nostalgic in certain spaces for millennial's nevertheless it was ideal for me.

The subsequent season appears to be slow yet it isn't, simply need to continue onward and you'll see. I thought Ram Malek was splendid before this as I had appear him in 24(series), just for a couple of scenes, yet the scene with him and Keifer Sutherland is entrancing and unfortunate, however the absolute best acting I had scene in a television series.

Christian Slater has consistently been one of my number one entertainers too, and the female cast in this is sublime, with solid astonishing exhibitions by all. I have watched the series since finish again and it is simply genuinely virtuoso all around and must be number one series for me last decade, without a doubt.

Silicon Valley

Ostensibly the best consummation of a TV series that I've seen.

On the off chance that you observe each of the six seasons, you'll get a total story that beginnings in a single outlook, and finishes in a totally unique one, with a characteristic movement and development en route.

The characters are silly. The world structure is incredible. Furthermore, as you're giggling so hard, it's truly saying something. It's a story of a Silicon Valley startup, investigating topics of innovative arrangement, conscience, realism, industrialism, insatiability with a portion of psychological well-being... furthermore, it's grand.

I don't think of it as overstatement to put this among the best TV shows ever. Assuming you need to genuinely pass judgment on a series, judge it on an entire, and the conclusion is ostensibly the main piece... how would they end it?
As I said in the opening, this is hopefully acceptable... to the extent conveying a very much themed idea beginning to end without thinking twice, this has a place in the discussion with "Breaking Bad" as being that extraordinarily complete.

Mike Judge is the John Hughes within recent memory... he's putting out less work than Hughes, however to the extent truly catching the human and social side of an age, it's difficult to contend that Idiocracy, Office Space, and this, aren't original works that unequivocally characterize a timeframe. Hell, I'll even put Bevis and Butthead on that rundown.

This is comical, a total direct story with theming hopefully acceptable, and an ideal closure. I adored each snapshot of this show, my solitary objection is that seasons didn't have twenty two scenes so I could remain in this world longer.

The Pirate Bay Away From Keyboard

I'm amped up for this film, its plot will be substantially more fascinating than any of the motion pictures that Hollywood has been letting out and flipping us off with throughout the previous thirty years (with special case of not very many movies of coarse)

The Great Hack

This narrative splendidly clarifies the Cambridge Analytica embarrassment that associates Facebook, Brexit, Trump and the manner in which our own information are taken from Social Media and weaponized for political purposes. It's vital and done. I watched it in the wake of seeing Netflix' "The Social Dilemma," another information and majority rules system uncover.

These issues are not surely known by people in general, even the informed public, which limits the issue with information protection. I was in that class yet these movies have raised my mindfulness. Great narratives are significant

HER

"Her" is a clever (however very upsetting) study uncovering the course humankind is going in case AI is permitted to continue to develop, unchecked.

In a social environment of phony dating profiles and the fancy of going gaga for a photograph and not the real individual behind it, it's not really difficult to accept that somebody could experience passionate feelings for an OS, which is actually what befalls the primary person in this film.

Joaquin Phoenix handles his job satisfactorily as the tortured essayist and Scarlet Johansson's hot Samantha is an unmistakable success.

I figure I would have partaken in this film more had it not scared the dickens out of me, precisely portending what is shockingly soon to come.

The Founder

Never heard the first McDonalds story, so the film sort of left me in shock before its finish. Every one of the entertainers and particularly Michael Keaton potraying the lead character(Ray) worked effectively. I felt a profound association with the characters that I failed to remember I was observing only a film.

It left me disrupting , how a diligent, profoundly driven at this point not really effective sales rep with more than 30 years of involvement like Ray has acquired the possibility of the two ethically grounded, inventive McDonalds siblings and fabricated a domain and fortune out of it.

The handshake bargain reminds " an arrangement made with even the firmest of handshakes can never rise to a straightforward composed understanding". Not certain if the McDonalds siblings were too guiltless to even consider believing Ray about the eminences or Ray played his business cards excessively well. Yet, I wish the siblings accepted their due credit ,whose brainchild were the proficient activity of the food goliath and the brilliant circular segments. Indeed Ray did sure skyrocket its deals, however it would have been non existent without its unique originators.

The story was described in a holding way from start till end. Particularly the person change of Ray keeps you stuck till end. I was thinking about what is this current person's job when there are originators who have astonishing ideas.Oh kid, he made a huge difference!

The Imitation Game

The film just came on Netflix and I found the opportunity to watch it interestingly. From the absolute first second, the film is extremely fascinating and the story (in view of genuine occasions) was spectacular. In the wake of watching, Sherlock and The Imitation Game, one thing is extremely obvious to me that Benedict Cumberbatch is likely the best entertainer to play these marginally unconventional, most astute individual in the room jobs.

A magnificent film that should be watched, all the more so in light of the fact that it has, among others, four extremely skilled and noticeable entertainers - Benedict Cumberbatch, Mark Strong, Charles Dance and Keira Knightley. A solid five stars for the whole cast and team just as the content. Praise to the writer of the book bearing a similar name on which this film is based.

Ex Machina

This is likely extraordinary compared to other piece of sci-fi that I've at any point watch. It is about a Turing trial of an AI, a Turing Test is a technique for request in man-made reasoning (AI) for deciding if a PC is fit for having a similar outlook as a person.

Indeed, even in the first piece of the film you will feel that what you're watching isn't what it appears, it resembles there's a going thing on behind the person's activities.

Untraceable

This is an exceptionally under-evaluated film that says a lot about our current culture of media utilization and, as it were, fundamental human instinct. Simply take a gander at the sort of unscripted television shows and mainstream news station inclusion that are being marched as early evening diversion today.

Should extol the scholars and overseer of the film. Diane Lane does an amazing exhibition as the persevering single parent and the supporting cast is splendid as well.

These were a portion of the top programming films that each software engineer should watch. The Matrix series is by a wide margin the best establishment that shows hacking. Beside it, The Social Network and Jobs verge on showing reality.

The rundown doesn't end here.. Here. We will bring additional astonishing films out there.

17 Top CSS3 libraries to use in 2021

devbookmark — Sat, 21 Aug 2021 05:40:25 +0000

No big surprise, then, at that point, that CSS Frameworlds arose over the long haul and took the vast majority of the aggravation away. Today we can't envision coding without our #1 CSS structure, as focusing on numerous screen sizes has become a need.

In any case, how would you realize your system is the awesome the current task? Additionally, in case you're new to front-end improvement, which structure should help you pick?

Milligram

A minimalist CSS framework.

CSS Wand

Easy Copy-Paste Beautiful CSS,
That can be easily customized further at your own choice

TailwindCSS

Rapidly build modern websites without ever leaving your HTML. A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

PureCSS

A set of small, responsive CSS modules that you can use in every web project.

SpectreCSS

A Lightweight, Responsive and Modern CSS Framework.

Susy

Susy was a responsive layout engine for Sass, before flexbox and CSS grid were available.

TacIT

Tacit is a CSS framework for dummies, who want their web services to look attractive but have almost zero skills in graphic design, just like myself.

AnimateCSS

Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.

Primer

The design system that powers GitHub. Everything consisting of React components, CSS Framework, Octicons, ViewComponents, Figma components.

SemanticUI

User Interface is the language of the web. Design Beautiful Websites Quickly
Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.

DestyleCSS

Opinionated reset stylesheet that provides a clean slate for styling your html.

Foundation

Foundation.
The most advanced responsive front-end framework in the world.

RaisinCSS

An Utility CSS only library. It supports css grid and many more useful css properties.

Bulma

Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.

VoxelCSS

VoxelCSS make 3d rendering Easy.

UIKit

A lightweight and modular front-end framework,
for developing fast and powerful web interfaces.

WaterCSS

A drop-in collection of CSS styles to make simple websites like this just a little bit nicer.

CSS is a developing language. It stays up with the latest with the furthest down the line disclosures can at times end up being fairly troublesome. A structure assists with overcoming any issues between composing every single question yourself. It additionally gives you a library so you can do it without anyone's help.

With regards to creating inside a group climate, CSS systems permit engineers to chip away at a venture together. They can do this at a lot faster speed. This permits them to set aside some improvement time, and eventually save financial plan too.

Super ultimate guide to Regex in 2021 (how to use in JavaScript)

devbookmark — Fri, 20 Aug 2021 04:55:43 +0000

Regular expressions play a vital role in every high-level programming language and so in JavaScript. Let's know them all in detail...

A Regular Expression (RegEx) is a sequence of characters that defines a search pattern. It helps you to "match" part of the text (string) by given rule.

// Let's get our hands dirty with an examples: 

const regex = /[A-Z]\w+/g; // (We ommited ' ')
// regex holds a regular expression which will match words starting with a capital letter. 

const str = `Rahul, Taylor and Susanne are coders who live in India`; 

// When we apply the regex to str, it returns all matches in a simple array! 
// console.log( str.match(regex) )
//["Rahul", "Taylor", "Susanne", "India"]

You can do the same operation by using plain JavaScript, but regex can save you hundreds of lines & you can use it with almost any language (and even CLI tools)

The Core and Some Basics

When you write a RegEx, it always starts with / and ends with /. Your write the code in between the two slashes. The simplest example - to match the word 'apple' use /apple/ RegEx. This, however, won't match 'APPLE' or 'aPpLe', because RegEx is case sensitive.

To disable case sensitivity in RegEX, use what is called an i flag /apple/i now it will match 'apple', 'APPLE' & 'aPpLe'. To match both 'apple' and 'nut' use apple|nut/ RegEx. Simple, ugh?

How to use in JavaScript

Let's learn the most basic methods in JS for working with RegEx'es

str.match(regex) : Returns an array with all the matches it has found. Actually. there's a little catch here😉. If you try doing this: "apple apple" .match(/apple/) you would expect to get ['apple', 'apple'] nut that's not the case. In reality it returns just ['apple']. To get a full array with multiple matches, you should add g flag.
str.test(str) : regex is a variable assigned to your RegEx. str is the string you test with the RegEx. The method returns true if it finds any matches or false.

  // Let's hang with them
  let regex = /code|easy/i; 
  const str = 'this code is EaSy super easy'; 
  regex.test(str) // true; means we have a match😍

  str.match(regex) // ["code", index: 5, input..]

  // Oops! We forgot adding the g flag
  regex = /code|easy/ig;

  str.match(regex) // ["code", "EaSy", "easy"]
  // ALRIGHT!!

Concept of Wildcard Period

We learned how to statically match a word, let's say 'hug' (/hug/). But what if we want to match 'huh', 'hug', 'hum' at the same time? Wildcard period! That's the answer. /hu./ This will match all 3 letters long words starting with 'hu'.

Match single character with multiple possibilities

A lot of times you want something in-between. Instead of targeting every character by using . you might want to target only a, b, c, d, e characters. That's when the nest 'tricks' come in handy.

// CHARACTER CLASSES allow you to define a group of characters you wish to match. You put the chards in [] "car cat cam cal car".match(/ca[rt]/g); 
// returns: ['car', 'cat', 'car']

// match "bag", "big", "bug", but nit "bog" "big bag has a bug bog".match(/b[aiu]g/g); 
// ["big", "bag", "bug"]

// MAKE CHARACTER CLASSES SHORTER by using [X-Y] which will match fro letter x to letter y. Example: [a-zA-Z] will match all capital and not capital letters from a to z

"abcdefghijklmnopqr".match(/[d-j]/g); 
// ["d", "e", "f", "g", "h", "i", "j"]

//same as: 
"abcdefghijklmnopqr".match(/defghij/g); 
// ["d", "e", "f", "g", "h", "i", "j"]

// Use it with a number too: 
"1234567890".match(/4-9/g); 
//["4", "5", "6", "7, "8", "9"]

Reverse the character classes

a-z will match all letters from a to z. To match all symbols, EXCEPT the letters from a to z, use [^a-z]. The ^ operator reverses the behaviours when used in[ ].

Matching characters that occur more than one times

// With +
let regex = /a+/g; 
"abc".match(regex) //["a"]
"aabc".match(regex) //["aa"]
"aabac".match(regex) //["aa", "a"]
"bbc".match(regex) //null

//without +
regex = /a/g; 
"abc".match(regex) //["a"]
"aabc".match(regex) //["aa"]
"aabac".match(regex) //["aa", "a"]
"bbc".match(regex) //null

Search for patterns from the beginning of the end of the string

To search a character exactly at the beginning of a string using ^

let regex = /^K/; 

regex.test("__K_K_") // false - K is not exactly at the beginning!
regex.test("K___K___") // true 

//To search for a character at the end of string use $ like so

regex = /K$/; 

regex.test("__K__K_") // false - K has to be at the end

regex.test("__K") // true

Optional character

let regex = /colou?r/; // makes 'u' capital

let american = "color"; 
let british = "colour"; 

regex.test(american); // true
regex.test(british); // true
regex.test("cologr"); // false

Let's take this to advance level

Common shorthands

Instead of [A-Za=z0-9]

Use -> \w

Instead of [^A-Za-z0-9]

Use -> \W

Instead of [0-9]

\d

Instead of ^ 0-9

Use -> \D

Specify the upper and lower limit of matches

What if you want to match a sequence of characters that repeats X times, for example - match exactly a sequence of 5 letters 'a'? Here we go a{5} This would match only 'aaaaa' but not 'aa' or 'aaaaaaa'.

Let's see...

let str = "ama baalo maaaaamal aaaaaa"; 
console.log( str.match(/a{5}/g ) ); 
//prints ["aaaaa". "aaaaa"]

//to match 'm' letter followed by 5 x 'a'
console.log( str.match( /ma{5}/ ) ); 
// prints ["maaaaa", indes: 10, ...]
//which means we have a match at index 10

// to match empty space followed by 4 x 'a'
console.log( str.match(/\sa{4}/ ) ); 
// prints [" aaaa", index: 19, ...]
// match at index 19

You saw how to match an exact number of repeating characters a{5} matches "aaaaa". But what if you want to match not exactly 5, but in a more flexible manner - from 1 to 3 repeating characters? Here we go a{1,3} which will match "a" , "aa", "aaa", but not "aaaa".

We can go even further - by omitting the first or the second parameter a{3} will not match "a", "aa", but will match "aaa", "aaaa" or higher.

## Match characters t#hat occur multiple times

Above we have briefly covered this topic, now is the moment to go deep.

To match one or more characters, use after the target character.

let str = "ama balo maaaaamal"; 
console.log( str.match( /a+/g ) ); 
// ["a", "a", "aa", "aaaaa", "a"]

console.log( str.match( /a/g ) ); 
// ["a", "a", "a", "a", "a", "a", "a", "a", "a", "a"]

To match zero or more characters, ue after the target character

let str = "aaa"; 
console.log( str.match( /a*/g ) ); 
// ["aaa", ""]

consolle.log( str.match( /a/g ) ); 
// ["a", "a", "a"]

To match zero or one character, use after the target character

let str = "aaa"; 
console.log( str.match( /a?/g ) ); 
// ["a", "a", "a", ""]

Positive and Negative lookahead

This is considered one of the abstract topics in regex, but I will try to cover 80/100 of what you need to know.

a(?=g) - Positive lookahead Matches all "a" that is followed by "g", without making the "g" part of the match.
a(?!g) - Negative lookahead Matches all "a" that are NOT followed by "g", without making "g" part of the match.

But it can be even more flexible. See this example -> (?=regex) ?!regex

On the place of regex, you can put any valid regex expression. Let's hang with this...

let str = "IsFunBaloonIsLearningRegExIsLean"; 

console.log (str.match( /Is(?=Learning)/ ) ); 
//["Is", index: 11, ...]
//Matches the 2nd "Is", right before "Learning"

console.log( str.match( /Is(?=Lean)/ ) ); 
//["Is", index: 26, ...]
//Match the 3rd "Is", right before "Lean"

console.log( str.match( /Is(?=L)/g ) ); 
// ["Is", "Is"]
//Matches all "Is" which are followed by "L"

console.log( str.match(/Is(?!L)/ ) ); 
//["Is", index:0, ...]
// Matches all "Is" which aren't followed by "L"

What if you want the opposite - check the character before, not after the target character? You use a LookBehind ;P

Reusing patterns with capture groups

We all know the DRY programming principle - Don't Repeat Yourself. Capture groups help us to do exactly this.

/(bam+)\w\1/g  same as 
/(bamm+)\w(bamm+)/g same as
/bamm+\wbamm+/g

/(\w+)\s(\1\1\1)\2/g same as
/(\w+)\s\1\1\1\1\1\1/g

/(\w+)\s\1\1\1/g  same as
/\w+\s\w+\w+\w+/g

Now let's learn how to unleash this potential regex power and fuel it all to your JavaScript skills!

Creating RegEx in JavaScript

let regex = /a[0-9]b+/

//if you want to pass flags (like i and g)
let regex = /a[0-9]b+/ig

-> Compiles when script is loaded

Using the RegEx constructor function

  let regex - new RegExp('a[0-9]b+')

  //if you want to pass flags (like i and g)
  let regex = new RegExp('a[0-9]b+', 'ig')

-> Compiled on runtime

FLAGS

In JavaScript we have 6 flags which affect the match:

i - Makes the match case-insensitive. No difference between 'C' and 'c'
g - Without this flag, only the first match will be returned
m - Multiline more; only affects the behavior of ^ and $
s - Dotall mode; allows wildcard period . to match newline character \n
u - Enabled full Unicode support
y - Sticky mode. Enabled searching at a specific position

LET'S SEE JS METHODS THAT USE RegEx IN SOME FORM OR ANOTHER

str.match(regexp) - Finds all matches of regexp in the string str and returns an array of those matches
regexp.exec(str) - Similar to the match method but it's meant to be used in a loop when the regexp is stored in global variable but not passed directly

// Difference between the two methods

let re = /bla/g; 
let str = "bla and yea bla yeh"; 

re.exec(str)
// -> ["bla", index: 0, ...]
re.exec(str)
// -> ["bla", index: 13, ...]
re.exec(str)
// -> null
re.exec(str)
// -> ["bla", index: 0, ...]                
// STARTS AGAIN

//USAGE WITH A LOOP
let match, str = "bla and yeah bla yeh ble"; 
while (mathc = re.exec(str)) {
    console.log(match); 
}
// ["bla", index: 0, input: ...]
// ["bla", index: 13, input: ...]

// on the other side, match works pretty simple
str.match(re)
// ["bla", "bla"]

str.matchAll(regexp) - A new JS feature and improvement on the match method. 3 Differences:
- Returns an iterable object with matches instead of an array.
- Each match is in the same format as str.match without the 'g' flag.
- If there are no matches it returns empty iterable object rather than null if you used to match.

Always add g flag when using this one!

let regexp = /bla/g; 
let str = 'bla and yeah bla yeh'; 
const matches = str.matchAll(regexp); 
for (let match of matches) {
    console.log(match)
}
// ["bla", index: 0, ...]
// ["bla", index: 13, ...]

regexp.test(str) - Looks for at least one match of regexp in str. If found, returns true. Otherwise false.
str.search(regexp) - Returns the index of the first available match. If no match is found returns -1.
str.match(separator) - Instead of passing a simple string to separator like ' ', we can also pass regex for more precise split/
str.replace(from, to) - from is what to match. It can be a string or regex. The first match will be replaced with the string you have passed to the to argument. Instead of a string, you can pass a function too, but this is outside of the scope of this tutorial.
str.repalceAll(from,to) - Same as replace, except instead of replacing only the first match it will replace all matches with the provided to. Example:

  let str = "stuffed str living fforever pff"
  let regex = /f+/; //match one or more 'f'

  let repl = str.replace(regex, '*'); 
  //repl is "stu*ed str living fforeverpff"
  let repl = str.replaceAll(regex, '*'); 
  // repl is "stu*ed str living *orever p*"
  // NOTE: If you add g flag to replace it works like replaceAll

A bit tough and lengthy. Hope you liked it! Use the comments for sharing your views and questions.

🔐Thanks For Reading | Happy Coding 📘