Forem: Garvit Motwani

All About Switching Branch In Git 🚀

Garvit Motwani — Sat, 08 May 2021 13:35:32 +0000

Whether you're an open-source contributor, project manager, or even a normal github user for personal projects maybe, you need to know how to Switch Branches In Git.

So let's get started!!

How to create a new branch

Normally you use git checkout with a -b flag and pass a name for the branch.

If you are on the branch called master, this will be the case for you:

$ (master) git checkout -b new-branch
Switched to a new branch 'new-branch'
$ (new-branch)

How to switch to an existing branch

To switch to an existing branch, you can use git checkout but without the -b flag and pass the name of the branch you want to switch to, something like this:

(new-branch)$ git checkout master
Switched to branch 'master'
(master)$

Bonus:

There is a shortcut to return the previous branch you were in, you can just use - after git checkout

(master)$ git checkout -
Switched to branch 'new-branch'
$ (new-branch)

PLEASE FOLLOW, LIKE, SHARE, AND COMMENT

Follow me on Dev and Twitter

You should also check:

8 JavaScript Tips & Tricks That No One Teaches 🚀

Garvit Motwani ・ Apr 6 ・ 3 min read

#javascript #webdev #html #es6

250+ JS Resources to Master Programming 💥 Cheat Sheet

DevLorenzo ・ Apr 20 ・ 19 min read

#javascript #webdev #productivity #beginners

6 Python Tips & Tricks that no One Teaches 🚀🐍

Daniel Diaz ・ Apr 26 ・ 5 min read

#python #tutorial #beginners #programming

Subscribe to our newsletter

ES6 Cheatsheet 🔥 - All You Need 🚀

Garvit Motwani — Thu, 29 Apr 2021 13:30:55 +0000

Hey Devs, This is an all you need ES6 cheatsheet for beginners and seasoned developers!

So let's get started!!

🎉 Giveaway

We are giving away any course you need on Udemy. Any price any course.
To enter you have to do the following:

👍 React to this post
✉️ Subscribe to our newsletter

--> Grab the downloadable PDF version here

Block scoping

Let

function fn () {
  let x = 0
  if (true) {
    let x = 1 // only inside this `if`
  }
}

Const

const a = 1

let is the new var. Constants work just like let, but can't be reassigned.
Check: Let and const

Backtick strings

Interpolation

const message = `Hello ${name}`

Multiline strings

const str = `
hello
world
`

Templates and multiline strings.
Check: Template strings

Binary and octal literals

let bin = 0b1010010
let oct = 0o755

Check: Binary and octal literals

New methods

New string methods

"hello".repeat(3)
"hello".includes("ll")
"hello".startsWith("he")
"hello".padStart(8) // "   hello"
"hello".padEnd(8) // "hello   " 
"hello".padEnd(8, '!') // hello!!!
"\u1E9B\u0323".normalize("NFC")

Check: New methods

Classes

class Circle extends Shape {

Constructor

  constructor (radius) {
    this.radius = radius
  }

Methods

  getArea () {
    return Math.PI * 2 * this.radius
  }

Calling superclass methods

  expand (n) {
    return super.expand(n) * Math.PI
  }

Static methods

  static createFromDiameter(diameter) {
    return new Circle(diameter / 2)
  }
}

Syntactic sugar for prototypes.
Check: Classes

Exponent operator

const byte = 2 ** 8
// Same as: Math.pow(2, 8)

Promises

Making promises

new Promise((resolve, reject) => {
  if (ok) { resolve(result) }
  else { reject(error) }
})

For asynchronous programming.
Check: Promises

Using promises

promise
  .then((result) => { ··· })
  .catch((error) => { ··· })

Using promises with finally

promise
  .then((result) => { ··· })
  .catch((error) => { ··· })
  .finally(() => { // logic independent of success/error })

The handler is called when the promise is fulfilled or rejected.

Promise functions

Promise.all(···)
Promise.race(···)
Promise.reject(···)
Promise.resolve(···)

Async-await

async function run () {
  const user = await getUser()
  const tweets = await getTweets(user)
  return [user, tweets]
}

async functions are another way of using functions.

Check: async function

Destructuring

Destructuring assignment

Arrays

const [first, last] = ['Nikola', 'Tesla']

Objects

let {title, author} = {
  title: 'The Silkworm',
  author: 'R. Galbraith'
}

Supports for matching arrays and objects.
Check: Destructuring

Default values

const scores = [22, 33]
const [math = 50, sci = 50, arts = 50] = scores

// Result:
// math === 22, sci === 33, arts === 50

Default values can be assigned while destructuring arrays or objects.

Function arguments

function greet({ name, greeting }) {
  console.log(`${greeting}, ${name}!`)
}

greet({ name: 'Larry', greeting: 'Ahoy' })

Destructuring of objects and arrays can also be done in function arguments.

Default values

function greet({ name = 'Rauno' } = {}) {
  console.log(`Hi ${name}!`);
}

greet() // Hi Rauno!
greet({ name: 'Larry' }) // Hi Larry!

Reassigning keys

function printCoordinates({ left: x, top: y }) {
  console.log(`x: ${x}, y: ${y}`)
}

printCoordinates({ left: 25, top: 90 })

This example assigns x to the value of the left key.

Loops

for (let {title, artist} of songs) {
  ···
}

The assignment expressions work in loops, too.

Object destructuring

const { id, ...detail } = song;

Extract some keys individually and remaining keys in the object using rest (...) operator

Spread

Object spread

with Object spread

const options = {
  ...defaults,
  visible: true
}

without Object spread

const options = Object.assign(
  {}, defaults,
  { visible: true })

The Object spread operator lets you build new objects from other objects.

Check: Object spread

Array spread

with Array spread

const users = [
  ...admins,
  ...editors,
  'rstacruz'
]

without Array spread

const users = admins
  .concat(editors)
  .concat([ 'rstacruz' ])

The spread operator lets you build new arrays in the same way.

Check: Spread operator

Functions

Function arguments

Default arguments

function greet (name = 'Jerry') {
  return `Hello ${name}`
}

Rest arguments

function fn(x, ...y) {
  // y is an Array
  return x * y.length
}

Spread

fn(...[1, 2, 3])
// same as fn(1, 2, 3)

Default, rest, spread.
Check: Function arguments

Fat arrows

setTimeout(() => {
  ···
})

With arguments

readFile('text.txt', (err, data) => {
  ...
})

Implicit return

numbers.map(n => n * 2)
// No curly braces = implicit return
// Same as: numbers.map(function (n) { return n * 2 })
numbers.map(n => ({
  result: n * 2
}))
// Implicitly returning objects requires parentheses around the object

Like functions but with this preserved.
Check: Fat arrows

Objects

Shorthand syntax

module.exports = { hello, bye }
// Same as: module.exports = { hello: hello, bye: bye }

Check: Object literal enhancements

Methods

const App = {
  start () {
    console.log('running')
  }
}
// Same as: App = { start: function () {···} }

Check: Object literal enhancements

Getters and setters

const App = {
  get closed () {
    return this.status === 'closed'
  },
  set closed (value) {
    this.status = value ? 'closed' : 'open'
  }
}

Check: Object literal enhancements

Computed property names

let event = 'click'
let handlers = {
  [`on${event}`]: true
}
// Same as: handlers = { 'onclick': true }

Check: Object literal enhancements

Extract values

const fatherJS = { age: 57, name: "Brendan Eich" }

Object.values(fatherJS)
// [57, "Brendan Eich"]
Object.entries(fatherJS)
// [["age", 57], ["name", "Brendan Eich"]]

Modules

Imports

import 'helpers'
// aka: require('···')

import Express from 'express'
// aka: const Express = require('···').default || require('···')

import { indent } from 'helpers'
// aka: const indent = require('···').indent

import * as Helpers from 'helpers'
// aka: const Helpers = require('···')

import { indentSpaces as indent } from 'helpers'
// aka: const indent = require('···').indentSpaces

import is the new require().
Check: Module imports

Exports

export default function () { ··· }
// aka: module.exports.default = ···

export function mymethod () { ··· }
// aka: module.exports.mymethod = ···

export const pi = 3.14159
// aka: module.exports.pi = ···

export is the new module.exports.
Check: Module exports

Generators

function* idMaker () {
  let id = 0
  while (true) { yield id++ }
}

let gen = idMaker()
gen.next().value  // → 0
gen.next().value  // → 1
gen.next().value  // → 2

It's complicated.
Check: Generators

For..of iteration

for (let i of iterable) {
  ···
}

For iterating through generators and arrays.
Check: For..of iteration

References

MDN Web Docs
DevHints
w3schools

⚡️ Giveaway ⚡️

We are giving away any course you need on Udemy. Any price any course.
Steps to enter the giveaway
--> React to this post
--> Subscribe to our Newsletter <-- Very important
--> Follow me on Twitter <-- x2 Chances of winning

The winner will be announced on May 1, Via Twitter

Thank you very much for reading this article.

Comment any tricks & tips you know!

PLEASE LIKE, SHARE, AND COMMENT

Follow me on Dev and Twitter

5 Array Methods You Should Know 🚀

Garvit Motwani ・ Apr 27 '21

#javascript #webdev #beginners #html

400+ JavaScript Interview Questions 🎓 With Answers 🌠

Lorenzo for World In Dev ・ Apr 27 '21

#javascript #webdev #career #productivity

6 Python Tips & Tricks that no One Teaches 🚀🐍

Daniel Diaz for World In Dev ・ Apr 26 '21

#python #tutorial #beginners #programming

Subscribe to our newsletter to receive our weekly recap directly on your email!

Join us on Discord to participate in hackathons with us / participate in our giveaways!

Thanks for reading!!

5 Array Methods You Should Know 🚀

Garvit Motwani — Tue, 27 Apr 2021 14:04:51 +0000

Array methods are used in almost every JavaScript project nowadays, which also means that everybody should know the important ones. So I will give you 5 array methods that you should know.

So let's get started!!

.forEach

This is a common one and a vital one. The .forEach method executes a given function on every element from an array. So I would try to explain it through some code:

const nums = [1, 2, 3, 4, 5, 6, 7, 8];

nums.forEach(arrFunc);

function arrFunc(item, index, arr) {
  console.log(item);
}

// Output:
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8

So as you can see I created an array nums and then called the .forEach() method and then declared a callback function called arrFunc(), so this is where it all happens, you see the .forEach() needs 3 parameters, first one is item which are the elements which in our case are 1, 2, 3, 4, 5, 6, 7 and 8, then the second parameter is index which is the index of the item in the array and second is the arr which is the array itself, although you don't use this parameter often. So in the callback function, you can just type the things you want with every single element on the array. It is like a for loop on the base but not much like it.

Keep in mind that you can use the .forEach() method with arrow functions, which is always the recommended way:

const nums = [1, 2, 3, 4, 5, 6, 7, 8];

nums.forEach((item, index, arr) => {
  console.log(item);
});

.concat

The .concat method allows you to merge 2 or more arrays together without modifying the arrays but instead creating a new one.
It is a bit easy and useful and it is as simple as it sounds in code too. So let's say we have two arrays:

const x = [10, 20, 30];
const y = [40, 50, 60];

So if you want to merge them you can do that easily with this method, like this:

const z = x.concat(y)

// Now If you console.log the z array
console.log(z)
// You will receive [10, 20, 30, 40, 50, 60]

If you want to concat more than 1 arrays, you can just add it as the second parameter and if more you can add more parameters, like this:

const z = x.concat(y, q, v)

You can also use .concat method like the .push method like this:

const x = [10, 20, 30];

const z = x.concat(40);

console.log(z);
// Output: [10, 20, 30, 40]

.includes

The .includes method allows you to find if an element is included inside an array. Let's try understand it with code:

const names = ["Garvit", "Lorenzo", "Adam"];

const outputRes = names.includes("Adam");

console.log(outputRes);

// Output: true

So here as you can see we have declared an array called names and we have the names, Garvit, Lorenzo and Adam stored in them now in the next line we declared a variable called outputRes in which we typed if the array names includes "Adam" then the output will be true, prooving that the array includes that and if we wrote something like, "John" the output will be false prooving that "John" is not in that array.

.splice

The .splice method allows you to remove or replace an existing element of an array, simple right? Let's try to learn more about this in code:

const numbers = [1, 2, 3, 4, 5, 6];

numbers.splice(2, 3);

console.log(numbers);

// Output: [1, 2, 6]

So as you can see I have created an array called numbers and entered some numbers in it and then I typed numbers.splice(2, 3), so here the first parameter is the starting index from where we want to start removing elements which in our case was 2 (3) and then the second parameter that we passed was that how many elements we want to remove which in our case was 3 (3, 4, 5).

Now take a look at this:

const numbers = [1, 2, 3, 4, 5, 6];

const modifiedArr = numbers.splice(2, 3);

console.log(modifiedArr);

// Output: [3, 4, 5]

Not much of a difference, right? but still, the output has changed, that is because we have stored the splice array in a variable, so It is like putting all the deleted element in the modifiedArr.

If you want to replace the existing elements, you can just add the elements as another parameter:

const numbers = [1, 2, 3, 4, 5, 6];

numbers.splice(2, 3, 7, 8);

console.log(numbers);

// Output: [1, 2, 7, 8, 6]

.reverse

The .reverse method allows you to reverse an array, this is an easy one, lets see how that works in code:

const numbers = [1, 2, 3, 4, 5, 6];

numbers.reverse();

console.log(numbers);

// Output: [6, 5, 4, 3, 2, 1]

References:

Florin Pop's Array Methods Playlist
MDN Web Docs

⚡️ Giveaway ⚡️

The winner will be announced on May 1, Via Twitter

Thank you very much for reading this article.

PLEASE LIKE, SHARE, AND COMMENT

Follow me on Dev and Twitter

You Should also check

400+ JavaScript Interview Questions 🎓 With Answers 🌠

DevLorenzo ・ Apr 27 ・ 181 min read

#javascript #webdev #career #productivity

by my friend @devlorenzo

Subscribe to our newsletter to receive our weekly recap directly on your email!

Join us on Discord to participate in hackathons with us / participate in our giveaways!

Happy Coding.

25 Udemy Courses Worth Your Money & Time 🚀

Garvit Motwani — Thu, 22 Apr 2021 14:35:00 +0000

A big amount of people like to buy Udemy courses but don't know which one to choose so today I will give you 25 courses that you should check out!

So let's start!

⚡ Giveaway ⚡
We are giving away any course you need on Udemy. Any price any course.
Steps to enter the giveaway
--> React to this post
--> Subscribe to our Newsletter <-- Very important

Note --> We will send a list of 25 additional Udemy courses in our Newsletter exclusively.

Hey, do you want a free javascript cheat sheet? That's over 32k characters long, and with more than 250 resources (in addition of the cheat sheet). Grab that here

1. Modern HTML & CSS From The Beginning (Including Sass)

What this course provides:

Build Multiple High-Quality Website & UI Projects
HTML5 Semantic Layout & CSS Fundamentals
Flexbox & CSS Grid Projects
CSS Variables, Transitions, Dropdowns, Overlays & More
Website Hosting & Deployment With FTP & Git

Skill-level: All levels

Requirements
This course is for any developer, beginner to advanced

Duration: 21h

Course Instructors: @traversymedia

Course Link: https://www.udemy.com/share/1013eABEMcdltaQX4=/

2. Advanced CSS and Sass: Flexbox, Grid, Animations and More!

What this course provides:

Tons of modern CSS techniques to create stunning designs and effects
Advanced CSS animations with @keyframes, animation and transition
How CSS works behind the scenes: the cascade, specificity, inheritance, etc.
CSS architecture: component-based design, BEM, writing reusable code, etc.
Flexbox layouts: build a huge real-world project with flexbox
CSS Grid layouts: build a huge real-world project with CSS Grid
Using Sass in real-world projects: global variables, architecting CSS, managing media queries, etc.
Advanced responsive design: media queries, mobile-first vs desktop-first, em vs rem units, etc.
Responsive images in HTML and CSS for faster pageloads
SVG images and videos in HTML and CSS: build a background video effect
The NPM ecosystem: development workflows and building processes
Get friendly and fast support in the course Q&A
Downloadable lectures, code and design assets for all projects

Skill-level: Intermediate

Requirements

This not a beginner course — You should be confident in coding HTML and CSS before taking the course
Any computer and OS will work — Windows, macOS or Linux
There is no need for any paid software — The text editor you already have works just fine

Duration: 28h

Course Instructors: @jonasschmedtman

Course Link: https://www.udemy.com/share/101WkwBEMcdltaQX4=/

3. Bootstrap 4 From Scratch With 5 Projects

What this course provides:

Learn and create amazing high-quality Bootstrap 4 themes and UIs from scratch
Learn the Bootstrap 4 utilities, classes, components & JS widgets using a custom sandbox environment
Learn semantic HTML5 & modern CSS3 techniques
Learn to compile Sass in the easiest way possible using a GUI

Skill-level: All Levels

Requirements

You should have basic knowledge of HTML & CSS
You do NOT need to know any Bootstrap 3

Duration: 11.3h

Course Instructors: @traversymedia

Course Link: https://www.udemy.com/share/101Xd8BEMcdltaQX4=/

4. Tailwind CSS with practical examples

What this course provides:

Style Web content with TailwindCSS, fast, efficient, unique and practical

Skill-level: All levels

Requirements

Having some experience with CSS are necessary. Experience with other CSS frameworks like Bootstrap will help but are not mandatory.

Duration: 6.5h

Course Instructors: Martin Eberth

Course Link: https://www.udemy.com/share/103XTmBEMcdltaQX4=/

5. Materialize CSS From Scratch With 5 Projects

What this course provides:

Learn to correctly structure HTML 5 documents with semantic tags and attributes
Learn and create amazing high-quality Materialize themes and UIs from scratch
Learn the Materialize utilities, classes, components & JS widgets using a custom sandbox environment
Learn some custom JavaScript/JQuery to make your themes more interactive

Skill-level: All levels

Requirements

Basic HTML & CSS

Duration: 10.5h

Course Instructors: @traversymedia

Course Link: https://www.udemy.com/share/1023GEBEMcdltaQX4=/

6. User Experience Design Essentials - Adobe XD UI UX Design

What this course provides:

Become a UX designer.
You will be able to start earning money from your XD Skills.
You will be able to add UX designer to your CV
Build a UX project from beginning to end.
Become a UI designer.
Build & test a full mobile app.
Build & test a full website design.
You will have a project of your own to add to your portfolio.
93 lectures of well-structured, step-by-step content.
Learn to design websites & mobile phone apps.
Work with fonts & colors.
Prototype your designs with interactions.
Test on mobile phones.
You'll create a realistic prototype complete with micro-interactions.
Send your designs for feedback & commenting.
Export production-ready assets.
Create your first UX brief & persona.
Create quick wireframes.
How to use premade UI kits.
Learn professional workflow tricks & shortcuts.
You will get the finished files so you never fall behind
Downloadable exercise files
Forum support from me and the rest of the BYOL crew
All the techniques used by UX professionals
Build a mobile app prototype that responses to voice commands.
You will be able to talk correctly with other UX design professionals.
You'll learn how to choose colors.
You'll learn how to pick the correct fonts.
You'll be able to send your finished work to other professionals in the correct formats.

Skill-level: All levels

Requirements

You will need a copy of Adobe XD 2019 or above. A free trial can be downloaded from Adobe.
No previous design experience is needed.
No previous Adobe XD skills are needed.

Duration: 13h

Course Instructors: @danlovesadobe

Course Link: https://www.udemy.com/share/1013fcBEMcdltaQX4=/

7. The Complete JavaScript Course 2021: From Zero to Expert!

What this course provides:

Become an advanced, confident, and modern JavaScript developer from scratch
Build 6 beautiful real-world projects for your portfolio (not boring toy apps)
Become job-ready by understanding how JavaScript really works behind the scenes
How to think and work like a developer: problem-solving, researching, workflows
JavaScript fundamentals: variables, if/else, operators, boolean logic, functions, arrays, objects, loops, strings, etc.
Modern ES6+ from the beginning: arrow functions, destructuring, spread operator, optional chaining (ES2020), etc.
Modern OOP: Classes, constructors, prototypal inheritance, encapsulation, etc.
Complex concepts like the 'this' keyword, higher-order functions, closures, etc.
Asynchronous JavaScript: Event loop, promises, async/await, AJAX calls and APIs
How to architect your code using flowcharts and common patterns
Modern tools for 2020 and beyond: NPM, Parcel, Babel and ES6 modules
Practice your skills with 50+ challenges and assignments (solutions included)
Get downloadable lectures and friendly support in the Q&A area
Design your unique learning path according to your goals: course pathways

Skill-level: All levels

Requirements

No coding experience is necessary to take this course! I take you from beginner to expert!
Any computer and OS will work — Windows, macOS or Linux. We will set up your text editor the course.
A basic understanding of HTML and CSS is a plus, but not a must! The course includes an HTML and CSS crash course.

Duration: 68.5h

Course Instructors: @jonasschmedtman

Course Link: https://www.udemy.com/share/101WfeBEMcdltaQX4=/

8. The Git & Github Bootcamp

What this course provides:

Understand how Git works behind the scenes
Explain the difference Git objects: trees, blobs, commits, and annotated tags
Master the essential Git workflow: adding & committing
Work with Git branches
Perform Git merges and resolve merge conflicts
Use Git diff to reveal changes over time
Master Git stashing
Undo changes using git restore, git revert, and git reset
Work with local and remote repositories
Master collaboration workflows: pull requests, "fork & clone", etc.
Squash, clean up and rewrite history using interactive rebase
Retrieve "lost" work using git reflogs
Write custom and powerful Git aliases
Mark releases and versions using Git tags
Host static websites using Github Pages
Create markdown READMEs
Share code and snippets using Github Gists

Skill-level: Beginner

Requirements
Basic computer skills

Duration: 17h

Course Instructors: Colt Steele

Course Link: https://www.udemy.com/share/104c52BEMcdltaQX4=/

9. React - The Complete Guide (incl Hooks, React Router, Redux)

What this course provides:

Build powerful, fast, user-friendly, and reactive web apps
Provide amazing user experiences by leveraging the power of JavaScript with ease
Apply for high-paid jobs or work as a freelancer in one of the most demanded sectors you can find in web dev right now
Learn React Hooks & Class-based Components

Skill-level: All levels

Requirements

JavaScript + HTML + CSS fundamentals are absolutely required
You DON'T need to be a JavaScript expert to succeed in this course!
ES6+ JavaScript knowledge is beneficial but not a must-have
NO prior React or any other JS framework experience is required!

Duration: 40.5h

Course Instructors: @maxedapps

Course Link: https://www.udemy.com/share/101WbyBEMcdltaQX4=/

10. Angular - The Complete Guide (2021 Edition)

What this course provides:

Develop modern, complex, responsive, and scalable web applications with Angular 11
Fully understand the architecture behind an Angular application and how to use it
Use the gained, deep understanding of the Angular fundamentals to quickly establish yourself as a frontend developer
Create single-page applications with one of the most modern JavaScript frameworks out there

Skill-level: All Levels

Requirements

NO Angular 1 or Angular 2 knowledge is required!
Basic HTML and CSS knowledge helps, but isn't a must-have
Prior TypeScript knowledge also helps but isn't necessary to benefit from this course
Basic JavaScript knowledge is required

Duration: 33.5h

Course Instructors: @maxedapps

Course Link: https://www.udemy.com/share/101WgABEMcdltaQX4=/

11. Vue - The Complete Guide (w/ Router, Vuex, Composition API)

What this course provides:

Build amazing Vue.js Applications - all the Way from Small and Simple Ones up to Large Enterprise-level Ones
Understand the Theory behind Vue.js and use it in Real Projects
Leverage Vue.js in both Multi- and Single-Page-Applications (MPAs and SPAs)
Learn the latest version of Vue (Vue 3), including the brand-new Composition API

Skill-level: All levels

Requirements

Basic JavaScript Knowledge is Required
ES6 Knowledge is a Plus but not a Must
Basic HTML and CSS Knowledge is assumed throughout the Course

Duration: 48.5h

Course Instructors: @maxedapps

Course Link: https://www.udemy.com/share/101WzMBEMcdltaQX4=/

12. MERN Stack Front To Back: Full Stack React, Redux & Node.js

What this course provides:

Build a full stack social network app with React, Redux, Node, Express & MongoDB
Create an extensive backend API with Express
Use Stateless JWT authentication practices
Integrate React with an Express backend in an elegant way
React Hooks, Async/Await & modern practices
Use Redux for state management
Deploy to Heroku with a postbuild script

Skill-level: Intermediate

Requirements

A good understanding of JavaScript & ES6 Fundamentals
React & Node Basics

Duration: 12h

Course Instructors: @traversymedia

Course Link: https://www.udemy.com/share/101WIoBEMcdltaQX4=/

13. Angular & NodeJS - The MEAN Stack Guide [2021 Edition]

What this course provides:

Build real Angular + NodeJS applications
Understand how Angular works and how it interacts with Backends
Connect any Angular Frontend with a NodeJS Backend
Use MongoDB with Mongoose to interact with Data on the Backend
Use ExpressJS as a NodeJS Framework
Provide a great user experience by using Optimistic Updating on the Frontend
Improve any Angular (+ NodeJS) application by adding Error Handling

Skill-level: All levels

Requirements

Concepts behind NodeJS, Express, and MongoDB (with Mongoose) will be refreshed in this course but as this course is focused on the connection of these technologies with Angular, basic knowledge about them is strongly recommended
It is recommended to have beginner-level Angular knowledge, though this course will provide a detailed refresher and will explain the core concepts used in detail
HTML, CSS, and basic JavaScript knowledge is assumed throughout this course
NO advanced or expert knowledge about any of these topics is assumed or required

Duration: 12.5h

Course Instructors: @maxedapps

Course Link: https://www.udemy.com/share/101YaQBEMcdltaQX4=/

14. Svelte.js - The Complete Guide (incl. Sapper.js)

What this course provides:

SvelteJS from scratch, with zero knowledge, assumed
All the theory and practical applications of Svelte
Core concepts and advanced techniques to build Svelte applications

Skill-level: All levels

Requirements

Basic JavaScript knowledge is required
NO prior knowledge about SvelteJS or any other JavaScript framework or library is required

Duration: 12.5h

Course Instructors: @maxedapps

Course Link: https://www.udemy.com/share/101YaQBEMcdltaQX4=/

15. Understanding TypeScript - 2021 Edition

What this course provides:

Use TypeScript and its Features like Types, ES6 Support, Classes, Modules, Interfaces, and much more in any of their Projects
Understand what TypeScript really is about and how it works
Why TypeScript offers a real advantage over vanilla JavaScript
Learn TypeScript both in theory as well as applied to real use-cases and projects
Learn how to combine TypeScript with ReactJS or NodeJS / Express

Skill-level: All Levels

Requirements

JavaScript knowledge is required, though you don't need to be an Expert
NO prior TypeScript experience is required
ES6 Knowledge is a plus but not required

Duration: 13h

Course Instructors: @maxedapps

Course Link: https://www.udemy.com/share/1013yQBEMcdltaQX4=/

16. Next.js & React - The Complete Guide

What this course provides:

Learn all key NextJS features like pre-rendering, SSR, data fetching, file-based routing, and authentication
Learn how to build client-side and full-stack ReactJS apps with NextJS
Build real projects and apply what you learned with hands-on projects and examples
Take the full course or the "NextJS Summary" module for a quick start if you have limited time

Skill-level: All levels

Requirements

ReactJS knowledge is strongly recommended, but the course also includes a complete React refresher module
NO prior NextJS knowledge is required

Duration: 25h

Course Instructors: @maxedapps

Course Link: https://www.udemy.com/share/104coMBEMcdltaQX4=/

18. Gatsby Tutorial and Projects Course

What this course provides:
Create Blazingly Fast Websites/Projects with Gatsby

Skill-level: All levels

Requirements
Basic Knowledge of React

Duration: 22h

Course Instructors: @john_smilga

Course Link: https://www.udemy.com/share/101XUABEMcdltaQX4=/

19. React Native - The Practical Guide [2021 Edition]

What this course provides:

Build native mobile apps with JavaScript and React
Dive deeper into React Native
Develop cross-platform (iOS and Android) mobile apps without knowing Swift, Objective-C or Java/ Android

Skill-level:: All levels

Requirements

React knowledge is a must (but you absolutely DON'T have to be an expert)
JavaScript knowledge is a must, next-gen JavaScript knowledge (i.e. ES6+) is recommended
NO Android/ Java or iOS (Swift, Objective-C) development experience is required

Duration: 32.5h

Course Instructors: @maxedapps

Course Link: https://www.udemy.com/share/101WauBEMcdltaQX4=/

20. Flutter & Dart - The Complete Guide [2021 Edition]

What this course provides:

Learn Flutter and Dart from the ground up, step-by-step
Build engaging native mobile apps for both Android and iOS
Use features like Google Maps, the device camera, authentication and much more!
Learn how to upload images and how to send manual and automated push notifications
Learn all the basics without stopping after them: Dive deeply into Flutter & Dart and become an advanced developer

Skill-level: All levels

Requirements

The basic programming language will help but is not a must-have
You can use either Windows, macOS, or Linux for Android app development - iOS apps can only be built on macOS though
NO prior iOS or Android development experience is required
NO prior Flutter or Dart experience is required - this course starts at zero!

Duration: 41.5h

Course Instructors: @maxedapps

Course Link: https://www.udemy.com/share/1013o4BEMcdltaQX4=/

21. MongoDB - The Complete Developer's Guide 2021

What this course provides:

Use MongoDB to its full potential in future projects
Write efficient and well-performing queries to fetch data in the format you need it
Use all features MongoDB offers you to work with data efficiently

Skill-level: All levels

Requirements

NO prior knowledge of databases (of any kind) is required
General web development or mobile development knowledge will help you but is not a must-have
You can use any operating system - Windows, macOS, Linux, it'll all work!

Duration: 17h

Course Instructors: @maxedapps

Course Link: https://www.udemy.com/share/101WjABEMcdltaQX4=/

22. NodeJS - The Complete Guide (MVC, REST APIs, GraphQL, Deno)

What this course provides:

Work with one of the most in-demand web development programming languages
Learn the basics as well as advanced concepts of NodeJS in great detail
Build modern, fast, and scalable server-side web applications with NodeJS, databases like SQL or MongoDB, and more
Understand the NodeJS ecosystem and build server-side rendered apps, REST APIs, and GraphQL APIs
Get a thorough introduction to DenoJS

Skill-level: All levels

Requirements

General knowledge of how the web works is recommended but not a must-have
Basic JavaScript knowledge is strongly recommended but could be picked up whilst going through the course
NO NodeJS knowledge is required!

Duration: 40.5h

Course Instructors: @maxedapps

Course Link: https://www.udemy.com/share/1013hoBEMcdltaQX4=/

23. iOS & Swift - The Complete iOS App Development Bootcamp

What this course provides:

Be able to build any app you want
Start your own app-based business
Create a portfolio of apps to apply for junior developer jobs at a technology company
Become a digital nomad by working as a freelance iOS developer
Learn to work with Apple's latest UI Framework - SwiftUI
Master creating Augmented Reality apps using Apple’s new ARKit
Create apps that use Machine Learning using Apple’s new CoreML
Master app design so you'll know how to wireframe, mockup and prototype your app idea
Master app marketing so you can publish your apps and generate downloads

Skill-level: All levels

Requirements

No programming experience needed - I'll teach you everything you need to know
A Mac computer running macOS 10.15 (Catalina) or a PC running macOS.
No paid software required - all apps will be created in Xcode 11 (which is free to download)
She'll walk you through, step-by-step how to get Xcode installed and set up

Duration: 59.5h

Course Instructors: @yu_angela

Course Link: https://www.udemy.com/share/101WsWBEMcdltaQX4=/

24. Ionic - Build iOS, Android & Web Apps with Ionic & Angular

What this course provides:

Build native apps and progressive web apps from one and the same codebase
Build native apps for iOS and Android, using Angular and the powerful features Ionic offers
Dive deeper into Ionic to learn more about core and advanced features
Test iOS and Android apps on real devices and publish those apps to the app stores of the two platforms

Skill-level: All levels

Requirements

Angular fundamentals are required, though a brief refresher is also provided in the course
Basic HTML, JS, and CSS knowledge is required
NO advanced Angular knowledge is required

Duration: 20h

Course Instructors: @maxedapps

Course Link: https://www.udemy.com/share/101WUoBEMcdltaQX4=/

25. 2021 Complete Python Bootcamp From Zero to Hero in Python

What this course provides:

Learn to use Python professionally, learning both Python 2 and Python 3!
Create games with Python, like Tic Tac Toe and Blackjack!
Learn advanced Python features, like the collections module and how to work with timestamps!
Learn to use Object Oriented Programming with classes!
Understand complex topics, like decorators.
Understand how to use both the Jupyter Notebook and create .py files
Get an understanding of how to create GUIs in the Jupyter Notebook system!
Build a complete understanding of Python from the ground up!

Skill-level: All levels

Requirements
Access to a computer with an internet connection.

Duration: 22h

Course Instructors: Jose Portilla

Course Link: https://www.udemy.com/share/101W8QBEMcdltaQX4=/

PLEASE FOLLOW, LIKE, SHARE, AND COMMENT ANY COURSE YOU WOULD LIKE TO RECOMMEND

Follow me on Dev and Twitter

Thanks for reading!

You should also check:

8 JavaScript Tips & Tricks That No One Teaches 🚀

Garvit Motwani for World In Dev ・ Apr 6 '21

#javascript #webdev #html #es6

250+ JS Resources to Master Programming 💥 Cheat Sheet

Lorenzo for World In Dev ・ Apr 20 '21

#javascript #webdev #productivity #beginners

6 Python Tips & Tricks that no One Teaches 🚀🐍

Daniel Diaz for World In Dev ・ Apr 26 '21

#python #tutorial #beginners #programming

Happy Coding.

5 CSS Tricks & Tips That You Should Know 🚀 + Giveaway

Garvit Motwani — Tue, 20 Apr 2021 00:35:14 +0000

CSS plays a major part in the field of web development and can be easy and at a point, it can also be advanced and tough, throughout CSS's history, numerous tricks have been discovered by the developer community. Today I will tell you a few of them.

So let's get started!

Reset

This one is pretty simple, it basically means to reset the whole document's default styling which is given by the browser itself. Most developers make a reset when they want nothing to get in their project's way or maybe for some specific project that needs one! Every developer has their own preference for using which reset as I use:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Some developers use:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

The above reset is meyerweb.com and for more, you can just search reset CSS on google to find your own preference.

Capitalization

This is a common trick but it is sometimes not taught in the CSS tutorials or course, so many developers still don't know this trick. It basically capitalizes the first letter of every word in a particular tag. Look at this for example:

As you can see I have not capitalized any letter manually in the HTML, instead, I wrote text-transform: capitalize; and it did it dynamically.

Centering

Centering is easy but, in my case, I usually don't remember the code to center text or content. So I use some short code snippets for that which I stored in my notes 😅.

You can use text-align: center; to center the text

To vertically center text in a div, you can use margin: auto;, but to give you a proper example you should take a look at this:

and then you can also add `text-align: center to center it both, horizontally and vertically.

To center an image, you should first of all turn it into a block element and do a margin: auto.

Drop Caps

Remember that 1st big letter in every chapter of your literature book or the start of a novel or a book. You can do that by using this snippet:

Prevent Highlighting

If you don't want the user to select or highlight anything on your website to prevent copying content, or maybe for some personal or any reasons, you can just use this:

⚡️ Giveaway ⚡️

The winner will be announced on May 1, Via Twitter

Thank you very much for reading this article.

Comment any tricks & tips you know!

PLEASE LIKE, SHARE, AND COMMENT

Follow me on Dev and Twitter

6 Python Tips & Tricks that no One Teaches 🚀🐍

Daniel Diaz ・ Apr 26 ・ 5 min read

#python #tutorial #beginners #programming

8 JavaScript Tips & Tricks That No One Teaches 🚀 + Giveaway

Garvit Motwani ・ Apr 6 ・ 4 min read

#javascript #webdev #html #es6

Subscribe to our newsletter to receive our weekly recap directly on your email!

Join us on Discord to participate in hackathons with us / participate in our giveaways!

Happy Coding.

4 Non-Popular HTML Tags 💻

Garvit Motwani — Tue, 13 Apr 2021 14:03:16 +0000

Photo by XPS on Unsplash

HTML is an easy but vital markup language in the world of web development, everybody in the web dev field knows at least the basics of it, if not the whole language. So I'm going to tell you some non-popular tags that you should know about.

So let's get started!!

1. The progress Tag

The <progress> tag allows you to create progress bars using just HTML.

Check this:

<progress value="70" max="100">70%</progress>

You just need to specify value and the max value which is mostly going to be 100

Result:

2. ins and del Tags

The <ins> tag defines a text that has been inserted into a document. It underlined by the browsers automatically.

The <del> tag defines a text that has been deleted from a document. Browsers usually strike a line through it.

Check this:

<p>The price of the new shirt is <del>$50</del> <ins>$25</ins>
<p>

Result:

3. The details Tag

The <details> tag is pretty handy for large documentation, it allows us to view or hide elements after clicking on the <summary> element

Check this:

<details>
  <summary>DEV.to</summary>
  <p>DEV.to is a place where coders share, stay up-to-date and grow their careers. Cedits to dev.to for this line</p>
</details>

4. The dialog Tag

The <dialog> tag defines a dialog box or subwindow. It also makes it easy to create popup dialogs and modals on a web page. You also have to use an attribute called open to specify that the dialog element is active and that the user can interact with it.

Check this:

<dialog open>Hola World! Garvit Here</dialog>

⚡️ Giveaway ⚡️

The winner will be announced on May 1, Via Twitter

Thank you very much for reading this article.

Comment any non-popular tags you know

PLEASE LIKE, SHARE, AND COMMENT

Follow me on Dev and Twitter

Subscribe to our newsletter to receive our weekly recap directly on your email!

Join us on Discord to participate in hackathons with us / participate in our giveaways!

Thank You

VS Code Shortcut Cheat Sheet🔥 - Productivity boost 🚀

Garvit Motwani — Mon, 12 Apr 2021 18:35:25 +0000

Hey Devs, This is a cheat sheet for all the VSCode users out there, these shortcuts can increase your speed and productivity!!

So let's start.

Command palette

Key	Description
`⇧⌘P`	Show all commands
`⌘P`	Show files

Sidebars

Key	Description
`⌘B`	Toggle sidebar
----	----
`⇧⌘E`	Explorer
`⇧⌘F`	Search
`⇧⌘D`	Debug
`⇧⌘X`	Extensions
`⇧^G`	Git (SCM)

Search

Key	Description
`⌘F`	Find
`⌥⌘F`	Replace
----	----
`⇧⌘F`	Find in files
`⇧⌘H`	Replace in files

Panel

Key	Description
`⌘J`	Toggle panel
----	----
`⇧⌘M`	Problems
`⇧⌘U`	Output
`⇧⌘Y`	Debug console
^`	Terminal

View

Key	Description
`⌘k` `z`	Zen mode
----	----
`⌘k` `u`	Close unmodified
`⌘k` `w`	Close all

Debug

Key	Description
`F5`	Start
`⇧F5`	Stop
`⇧⌘F5`	Restart
----	----
`^F5`	Start without debugging
----	----
`F9`	Toggle breakpoint
----	----
`F10`	Step over
`F11`	Step into
`⇧F11`	Step out
----	----
`⇧⌘D`	Debug sidebar
`⇧⌘Y`	Debug panel

References

PLEASE FOLLOW, LIKE, SHARE, AND COMMENT ANY COMMAND YOU THINK I MISSED OUT!!

Thanks for reading!

⚡ Giveaway ⚡

We are giving away any course you need on Udemy. Any price any course.
Steps to enter the giveaway
--> React to this post
--> Subscribe to our Newsletter <-- Very important

Happy Coding.

8 JavaScript Tips & Tricks That No One Teaches 🚀

Garvit Motwani — Tue, 06 Apr 2021 15:04:02 +0000

JavaScript is no doubt one of the coolest languages in the world and is gaining more and more popularity day by day. So the developer community has found some tricks and tips after using JS for quite a while now. Today I will share 8 Tips & Tricks With You!

So let's get started

Functional Inheritance

Functional inheritance is the process of receiving features by applying an augmenting function to an object instance. The function supplies a closure scope which you can use to keep some data private. The augmenting function uses dynamic object extension to extend the object instance with new properties and methods.

They look like:

// Base function
function Drinks(data) {
  var that = {}; // Create an empty object
  that.name = data.name; // Add it a "name" property
  return that; // Return the object
};

// Fuction which inherits from the base function
function Coffee(data) {
  // Create the Drinks object
  var that = Drinks(data);
  // Extend base object
  that.giveName = function() {
    return 'This is ' + that.name;
  };
  return that;
};

// Usage
var firstCoffee = Coffee({ name: 'Cappuccino' });
console.log(firstCoffee.giveName());
// Output: "This is Cappuccino"

Credits to @loverajoel for explaining this topic in depth here - Functional Inheritance on JS Tips which I've paraphrased above

.map() Substitute

.map() also has a substitute that we can use which is .from():

let dogs = [
    { name: ‘Rio’, age: 2 },
    { name: ‘Mac’, age: 3 },
    { name: ‘Bruno’, age: 5 },
    { name: ‘Jucas’, age: 10 },
    { name: ‘Furr’, age: 8 },
    { name: ‘Blu’, age: 7 },
]


let dogsNames = Array.from(dogs, ({name}) => name);
console.log(dogsNames); // returns [“Rio”, “Mac”, “Bruno”, “Jucas”, “Furr”, “Blu”]

Number to string/string to number

Usually, to convert a string to a number, we use something like this:

let num = 4
let newNum = num.toString();

and to convert a string to a number, we use:

let num = "4"
let stringNumber = Number(num);

but what we can use to code fast is:

let num = 15;
let numString = num + ""; // number to string
let stringNum = +s; // string to number

Using length to resize and emptying an array

In javascript, we can override a built-in method called length and assign it a value of our choice.

Let's look at an example:

let array_values = [1, 2, 3, 4, 5, 6, 7, 8];  
console.log(array_values.length); 
// 8  
array_values.length = 5;  
console.log(array_values.length); 
// 5  
console.log(array_values); 
// [1, 2, 3, 4, 5]

It can also be used in emptying an array, like this:

let array_values = [1, 2, 3, 4, 5, 6, 7,8]; 
console.log(array_values.length); 
// 8  
array_values.length = 0;   
console.log(array_values.length); 
// 0 
console.log(array_values); 
// []

Swap Values with Array Destructuring.

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. We can also use that to swap values fast, like this:

let a = 1, b = 2
[a, b] = [b, a]
console.log(a) // result -> 2
console.log(b) // result -> 1

Remove duplicates from an Array

This trick is pretty simple. Let's say, I made an array that is containing numbers, strings, and booleans, but the values are repeating themselves more than once and I want to remove the duplicates. So what I can do is:

const array = [1, 3, 2, 3, 2, 1, true, false, true, 'Kio', 2, 3];
const filteredArray = [...new Set(array)];
console.log(filteredArray) // [1, 3, 2, true, false, "Kio"]

Short For Loop

You can write less code for a loop like this:

const names = ["Kio", "Rio", "Mac"];

// Long Version
for (let i = 0; i < names.length; i++) {
  const name = names[i];
  console.log(name);
}

// Short Version
for (let name of names) console.log(name);

Performance

In JS you can also get the time that the code was executed in like Google does:

It looks like this:

const firstTime = performance.now();
something();
const secondTime = performance.now();
console.log(`The something function took ${secondTime - firstTime} milliseconds.`);

⚡️ Giveaway ⚡️

The winner will be announced on May 1, Via Twitter

Thank you very much for reading this article.

Comment any tricks & tips you know!

PLEASE LIKE, SHARE, AND COMMENT

Follow me on Dev and Twitter

10 New JavaScript Features in ES2020 That You Should Know

Garvit Motwani — Tue, 30 Mar 2021 06:28:48 +0000

I am starting this new series called Tip Tuesday in which I will write an article which includes some tips & tricks every Tuesday. So please follow me to stay updated!!

Hey Devs, the new ES2020 features have been up for a while now, but not everybody knows them, so here are some cool features to try out!

It would be really helpful if you like, share and comment

Tip Tuesday - 30/3/2021

1. BigInt

BigInt, one of the most anticipated features in JavaScript, is finally here. It actually allows developers to have a much greater integer representation in their JS code for data processing for data handling.

At the moment the maximum number you can store as an integer in JavaScript is pow(2, 53) - 1. But BigInt actually allows you to go even beyond that.

However, you need to have an n appended at the very end of the number, as you can see above. This n denotes that this is a BigInt and should be treated differently by the JavaScript engine (by the v8 engine).

This improvement is not backward compatible because the traditional number system is IEEE754 (which cannot support numbers of this size).

2. Dynamic import

Dynamic imports in JavaScript give you the option to import JS files dynamically as modules in your application natively. This is just like how you do it with Webpack and Babel at the moment.

This feature will help you ship on-demand-request code, better known as code splitting, without the overhead of webpack or other module bundlers. You can also conditionally load code in an if-else block if you like. The good thing is that you actually import a module, and so it never pollutes the global namespace.

3. Nullish Coalescing

Nullish coalescing adds the ability to truly check nullish values instead of falsey values. What is the difference between nullish and falsey values, you might ask?

In JavaScript, many values are falsey, like empty strings, the number 0, undefined, null, false, NaN, and so on.

However, you might want to check an immense number of times if a variable is nullish – that is if it is either undefined or null, like when it's okay for a variable to have an empty string or even a false value.

In that case, you'll use the new nullish coalescing operator, ??

You can clearly see how the OR operator always returns a truthy value, whereas the nullish operator returns a non-nullish value.

4. Optional Chaining

Optional chaining syntax allows you to access deeply nested object properties without worrying if the property exists or not. If it exists, great! If not, undefined will be returned. This works on object properties but also on function calls and arrays. Super convenient! Like this example:

5. Promise.allSettled

The Promise.allSettled method accepts an array of Promises and only resolves when all of them are settled – either resolved or rejected.

This was not available natively before, even though some close implementations like race and all were available.

6. String#matchAll

matchAll is a new method added to the String prototype which is related to Regular Expressions. This returns an iterator that returns all matched groups one after another. Take a look at this example:

7. globalThis

If you wrote some cross-platform JS code that could run on Node, in the browser environment, and also inside web-workers, you'd have a hard time getting hold of the global object.

This is because it is window for browsers, global for Node, and self for web workers. If there are more runtimes, the global object will be different for them as well.

So you would have had to have your own implementation of detecting runtime and then using the correct global. Hence, ES2020 brought globalThis which always refers to the global object, no matter where you are executing your code:

8. Module Namespace Exports

In JavaScript modules, it was already possible to use the following syntax:

import * as utils from './utils.mjs'

However, no symmetric export syntax existed, until now:

export * as utils from './utils.mjs'

This is equivalent to the following:

import * as utils from './utils.mjs'
export { utils }

9. Well defined for-in order

The ECMA specification did not specify in which order for (x in y) should run. Even though browsers implemented a consistent order on their own before now, this has been officially standardized in ES2020.

10. import.meta

The import.meta object was created by the ECMAScript implementation, with a null prototype.

Consider a module, module.js:

<script type="module" src="module.js"></script>

You can access meta information about the module using the import.meta object:

console.log(import.meta); // { url: "file:///home/user/module.js" }

It returns an object with a url property indicating the base URL of the module. This will either be the URL from which the script was obtained (for external scripts) or the document base URL of the containing document (for inline scripts).

Thank you very much for reading this article.

Comment any features that you like of javascript and a feature that you think should be improved in the next ES

PLEASE LIKE, SHARE AND COMMENT

Follow me on Dev and Twitter

World in Dev Digest - Top Articles and Tech Events This Week - 29/3/2021

Garvit Motwani — Mon, 29 Mar 2021 06:24:51 +0000

“Knowledge is a multiplier but without action you are multiplying by zero“

Subscribe to our newsletter to receive our weekly recap directly on your email!

3 articles to read today at dev.to:

--> General article:

Best resources for learning to code

Article No Longer Available

By @hulyakarakaya

--> A Technical article:

A 2 min read but includes a lot of useful stuff about APIs

List of APIs to use for creating JavaScript/React App

Kritika Srivastava ・ Mar 21 '21

#beginners #react #api #javascript

By @kritika27

--> A video:

Precious piece information for github users

01:26

Publish your GitHub Action to Marketplace

Brian Douglas for GitHub ・ Feb 17 '21

#github #githubactions #devops

By @bdougieyo

External article:

Building an API in Node.js using AWS λ, API Gateway, MongoDB, and Serverless

This tutorial will show you how to build a secure REST API for a Notetaking react-redux application using MongoDB database as a service and following a Serverless approach using AWS Lambda, API Gateway, and the Serverless framework. AWS Lambda is an event-driven, serverless computing platform that executes a function in response to an event. It is basically a Docker container that gets spun up and runs the code. The underlying infrastructure and scaling it up or down to meet the event rate is managed, and you are only charged for the time your code is executed.

Building an API in Node.js using AWS λ, API Gateway, and Serverless | by Dawit Abera | Medium

Dawit Abera ・ Oct 28, 2021 ・
dawitabera64.Medium

Daily discussion:

Today's discussion topic is that what is the one thing that the programming language you use doesn't have and you would be jubilant to have it as a feature. Comment down below in the discussion box!!

Site of the day:

Here, you can access any information that you are looking for. It is like a documentation page and it provides a quick and short guide for whatever you are looking for.

DevDocs.io

Podcast episode of the day:

Two Blessings and Two Curses of Intuition

You need intuition to build incredible skill. But it's important to develop a healthy caution towards intuition, as it can create a brittle framework for thinking. In this episode, they discussed both sides of this.

By @developertea

Tech event of the day:

Note that this is not free content, although we will try to promote only free events if possible.

AI in Finance & Insurance Summit by RE-WORK

"Discover advances in deep learning tools and techniques from the world's leading innovators across industry, research and the financial sector."

Thanks for reading!

Subscribe to our newsletter to receive this daily dev recap directly on your email every day!

Join us on Discord to participate in hackathons with us / participate in our giveaways!

The Ultimate Go Cheatsheet 🚀 - Best Go Concepts 🔥

Garvit Motwani — Wed, 24 Mar 2021 17:01:02 +0000

Hey Devs, This is the most complete and well-structured Golang Cheatsheet you can find online!

So let's start.

Getting started

Introduction

A tour of Go (tour.golang.org)
Go repl (repl.it)
Golang wiki (github.com)

Hello world

hello.go

package main

import "fmt"

func main() {
  message := greetMe("world")
  fmt.Println(message)
}

func greetMe(name string) string {
  return "Hello, " + name + "!"
}

$ go build

Or try it out in the Go repl, or A Tour of Go.

Variables

Variable declaration

var msg string
msg = "Hello"

Shortcut of above (Infers type)

msg := "Hello"

Constants

const Phi = 1.618

Constants can be a character, string, boolean, or numeric values.

See: Constants

Basic types

Strings

str := "Hello"

str := `Multiline
string`

Strings are of type string.

Numbers

Typical types

num := 3          // int
num := 3.         // float64
num := 3 + 4i     // complex128
num := byte('a')  // byte (alias for uint8)

Other types

var u uint = 7        // uint (unsigned)
var p float32 = 22.7  // 32-bit float

Arrays

// var numbers [5]int
numbers := [...]int{0, 0, 0, 0, 0}

Arrays have a fixed size.

Slices

slice := []int{2, 3, 4}

slice := []byte("Hello")

Slices have a dynamic size, unlike arrays.

Pointers

func main () {
  b := *getPointer()
  fmt.Println("Value is", b)
}

{: data-line="2"}

func getPointer () (myPointer *int) {
  a := 234
  return &a
}

a := new(int)
*a = 234

Pointers point to a memory location of a variable. Go is fully garbage-collected.

See: Pointers

Type conversions

i := 2
f := float64(i)
u := uint(i)

See: Type conversions

Flow control

Conditional

if day == "sunday" || day == "saturday" {
  rest()
} else if day == "monday" && isTired() {
  groan()
} else {
  work()
}

See: If

Statements in if

if _, err := doThing(); err != nil {
  fmt.Println("Uh oh")
}

A condition in an if statement can be preceded with a statement before a ;. Variables declared by the statement are only in scope until the end of the if.

See: If with a short statement

Switch

switch day {
  case "sunday":
    // cases don't "fall through" by default!
    fallthrough

  case "saturday":
    rest()

  default:
    work()
}

See: Switch

For loop

for count := 0; count <= 10; count++ {
  fmt.Println("My counter is at", count)
}

See: For loops

For-Range loop

entry := []string{"Jack","John","Jones"}
for i, val := range entry {
  fmt.Printf("At position %d, the character %s is present\n", i, val)
}

See: For-Range loops

While loop

n := 0
x := 42
for n != x {
  n := guess()
}

See: Go's "while"

Functions

Lambdas

myfunc := func() bool {
  return x > 10000
}

Functions are first-class objects.

Multiple return types

a, b := getMessage()

func getMessage() (a string, b string) {
  return "Hello", "World"
}

Named return values

func split(sum int) (x, y int) {
  x = sum * 4 / 9
  y = sum - x
  return
}

By defining the return value names in the signature, a return (no args) will return variables with those names.

See: Named return values

Packages

Importing

import "fmt"
import "math/rand"

import (
  "fmt"        // gives fmt.Println
  "math/rand"  // gives rand.Intn
)

Both are the same.

See: Importing

Aliases

import r "math/rand"

r.Intn()

Exporting names

func Hello () {
  ···
}

Exported names begin with capital letters.

See: Exported names

Packages

package hello

Every package file has to start with package.

Concurrency

Goroutines

func main() {
  // A "channel"
  ch := make(chan string)

  // Start concurrent routines
  go push("Moe", ch)
  go push("Larry", ch)
  go push("Curly", ch)

  // Read 3 results
  // (Since our goroutines are concurrent,
  // the order isn't guaranteed!)
  fmt.Println(<-ch, <-ch, <-ch)
}

func push(name string, ch chan string) {
  msg := "Hey, " + name
  ch <- msg
}

Channels are concurrency-safe communication objects, used in goroutines.

See: Goroutines, Channels

Buffered channels

ch := make(chan int, 2)
ch <- 1
ch <- 2
ch <- 3
// fatal error:
// all goroutines are asleep - deadlock!

Buffered channels limit the number of messages it can keep.

See: Buffered channels

Closing channels

Closes a channel

ch <- 1
ch <- 2
ch <- 3
close(ch)

Iterates across a channel until its closed

for i := range ch {
  ···
}

Closed if `ok == false`

v, ok := <- ch

See: Range and close

WaitGroup

import "sync"

func main() {
  var wg sync.WaitGroup

  for _, item := range itemList {
    // Increment WaitGroup Counter
    wg.Add(1)
    go doOperation(item)
  }
  // Wait for goroutines to finish
  wg.Wait()

}

{: data-line="1,4,8,12"}

func doOperation(item string) {
  defer wg.Done()
  // do operation on item
  // ...
}

A WaitGroup waits for a collection of goroutines to finish. The main goroutine calls Add to set the number of goroutines to wait for. The goroutine calls wg.Done() when it finishes.
See: WaitGroup

Error control

Defer

func main() {
  defer fmt.Println("Done")
  fmt.Println("Working...")
}

Defers running a function until the surrounding function returns.
The arguments are evaluated immediately, but the function call is not ran until later.

See: Defer, panic and recover

Deferring functions

func main() {
  defer func() {
    fmt.Println("Done")
  }()
  fmt.Println("Working...")
}

Lambdas are better suited for defer blocks.

func main() {
  var d = int64(0)
  defer func(d *int64) {
    fmt.Printf("& %v Unix Sec\n", *d)
  }(&d)
  fmt.Print("Done ")
  d = time.Now().Unix()
}

The defer func uses the current value of d, unless we use a pointer to get the final value at end of the main.

Structs

Defining

type Vertex struct {
  X int
  Y int
}

func main() {
  v := Vertex{1, 2}
  v.X = 4
  fmt.Println(v.X, v.Y)
}

See: Structs

Literals

v := Vertex{X: 1, Y: 2}

// Field names can be omitted
v := Vertex{1, 2}

// Y is implicit
v := Vertex{X: 1}

You can also put field names.

Pointers to structs

v := &Vertex{1, 2}
v.X = 2

Doing v.X is the same as doing (*v).X, when v is a pointer.

Methods

Receivers

type Vertex struct {
  X, Y float64
}

func (v Vertex) Abs() float64 {
  return math.Sqrt(v.X * v.X + v.Y * v.Y)
}

v := Vertex{1, 2}
v.Abs()

There are no classes, but you can define functions with receivers.

See: Methods

Mutation

func (v *Vertex) Scale(f float64) {
  v.X = v.X * f
  v.Y = v.Y * f
}

v := Vertex{6, 12}
v.Scale(0.5)
// `v` is updated

By defining your receiver as a pointer (*Vertex), you can do mutations.

See: Pointer receivers

Interfaces

A basic interface

type Shape interface {
  Area() float64
  Perimeter() float64
}

Struct

type Rectangle struct {
  Length, Width float64
}

Struct Rectangle implicitly implements interface Shape by implementing all of its methods.

Methods

func (r Rectangle) Area() float64 {
  return r.Length * r.Width
}

func (r Rectangle) Perimeter() float64 {
  return 2 * (r.Length + r.Width)
}

The methods defined in Shape are implemented in Rectangle.

Interface example

func main() {
  var r Shape = Rectangle{Length: 3, Width: 4}
  fmt.Printf("Type of r: %T, Area: %v, Perimeter: %v.", r, r.Area(), r.Perimeter())
}

References

Official resources

A tour of Go (tour.golang.org)
Golang wiki (github.com)
Effective Go (golang.org)

Announcing World In Dev

Garvit Motwani — Mon, 22 Mar 2021 14:03:59 +0000

📢 Hello, World!!! If you are reading this, consider you lucky, you just found something that will change, or at least I hope, your future as a developer. Something that will guide you through your long, but how wonderful, programming journey. But let's not unnecessarily lengthen the intro, to the point!

Ps: I know that you are a busy dev, so our organization will also focus on that.

What's ᗯOᖇᒪᗪ Iᑎ ᗪEᐯ?

From our tagline: In a sentence: we are cool, and you need to follow us.
From our Bio: @WorldInDev is a programming community for exchanging ideas and foster innovation. We provide daily code news, weekly digest, and monthly events.
To elaborate: We are a "made by devs for devs" community, founded with the utopian objective of making code accessible for everyone. We firmly believe in free access to coding and education, at any age. We want to help all devs, from the ones who are about to start (and I add for these, good luck!) to the most experienced ones. Our core values are equality, respect, and fun!

But, as I show you now, we don't just sell smoke:

Why we will help you:

Or: What do we do? Although we have already drawn the lines of our future path, they have not yet been drawn. We plan to start as a dev.to based blogging organization, with different series running contemporaneously. Discord will allow us to be more user-focused. We don't want to be static. The main objective of going beyond a simple blog is to empower communication between developers and pair programming. Look at other famous websites in programming: Stack Overflow, GitHub, or even Dev.to. They are all based on devs helping other devs. And this is what we want to do. To do this we are building a cooperation program between developers. The ones more experimented will partner with a newcomer in programming. Then each binomial can participate in coding events that we will host, with special prizes for 🏆winners🏆. This leads to another of our big objectives. We will be 𝕒𝕔𝕥𝕚𝕧𝕖, mostly with daily articles and monthly events, and trying to improve every day.

Our publications:

Articles:

+2 special articles every month for our Patreon members

Events - only available on Discord:

--> Pair programming - Our server provides a program to stimulate creativity and teamwork, that needs to be enhanced in programming. We will create pairs with a more experienced developer and a less experienced one. They can get to know each other, exchange questions (especially for the newcomer), and train together. But above all, they can participate at...

--> Code Battles! - We have in mind lots of weird and funny things to make dev compete. As we want to encourage our binomial program, many of our challenges will be in pairs. For example, only the less experienced of the two can write the code, but he can stay on call with his partner. We will also try to do more serious events like mini hackathons.

--> 100 days of code support - We encourage the brave who want to start or are doing the #100daysofcode. So we are starting a program to help does, more on discord.

--> Blogging support - This is what I am most proud of, because I would have dreamed of having it when I started. We think that knowledge should have no limits, so every dev should blog about what they know. We provide free chat support for the entire process of creating a blog, from setup to publishing the first articles. And all the articles written with us will be featured in our daily digest! Now you understand why it's my favorite?

--> Dev talks - We will need 1k+ members for that, but one of our dreams is to invite successful developers to talk at live events, hosted on discord.

🎉Giveaways🎉:

In addition to our events, we will organize giveaways every month. We put the money for the first months, but then we hope to be able to offer more important prizes (or more prizes every month) thanks to sponsors and the great patreons members. Although there will be more members afterward, therefore less chance of winning.
For this first month (April) we will gift a free Udemy course. The earlier you enter the more chances you have to participate and win!

Our plans for the future

First, we will try to create an active community on discord, dev.to, and twitter. Our major goal is to be able to help as many developers as possible, providing a community. Our second goal is to host how many events as possible, giveaways, hackathons, code battles... Then with a solid community, in the more distant future, we will create a website and extension to help developers in their daily life. A kind of dev companion with lots of features, but let's say no more for now...

We also need your help

We can't do anything without you, you are all that matters...

To help us grow, you can:

--> Follow us at dev.to

--> Join our socials, discord, to be able to participate at the events, and Twitter, to stay updated.

--> Join our Newsletter - Leaving your email will allow you to stay updated on our upcoming events + receiving our weekly recap (with top articles, past and ongoing tech events, important product releases...) - It shouldn't take more than 5 minutes, and that's very important for us!

--> Join our patreon - exclusive content and perks for our supporters, learn more here - Also, we will need some funds to host the domain and to make giveaways and events.

--> Spread the voice:

Tell your friends, nothing difficult about that
Retweet us or make tweets mentioning us
Republish this article - Open this repo, copy the markdown, and republish this article on dev.to or in your blog!
Make a listing (for the wildest, also in the repo)

PS: We are also searching for sponsors, come forward if you want to become one / you know someone interested.

We are also recruiting

Bi-Weekly writers - All subject can be approved - You can write in private to @devlorenzo
Discord moderators
Twitter manager

📢 Thanks for reading and --> Happy coding!

PS: If you've come here and haven't even clicked on a link, you're making me feel useless ... fix that now:

Blog
Twitter
Discord
Newsletter
Patreon

Original article:

Announcing World In Dev

DevLorenzo ・ Mar 22 ・ 5 min read

#career #beginners #javascript #webdev