DEV Community: Ajay kumbhare

Frontend Interview Resources

Ajay kumbhare — Thu, 05 May 2022 05:08:42 +0000

Preparing for front-end interviews?

I have found some good repositories to prepare for front-end interviews.

thedaviddias / Resources-Front-End-Beginner

💯 The most essential list of resources for Front-End beginners (🇺🇸 🇬🇧 🇨🇦 & 🇫🇷)

The most essential list of resources for Front-End beginners (🇺🇸 🇬🇧 & 🇫🇷)

If you want to learn how to become a Front-End developer, you are in the right place!

I will regularly update that list with new resources and links I found on the web. Don't hesitate to participate by sending a PR! Maybe your first on Github :)

I'm using some emoticons to give you more information on these links.

All links without a flag are in English 🇺🇸 🇬🇧. The flag 🇫🇷 means the resource is in French, 🌍 means the resource is multi-language.
💰 are paid tutorials, 🆓 are free tutorials. Sometimes you will have some free videos / articles and other paid on the same website.
🔝 indicate that the link is a reference
📹 is present when video content is available

Start here
Learn HTML
Learn CSS
Learn…

View on GitHub

sadanandpai / frontend-learning-kit

Frontend tech guide and curated collection of frontend materials

Frontend Learning Kit

Frontend tech guide and curated collection of frontend materials

Show your support by giving a ⭐ to this repo

2022 Frontend Dev Interview checklist & Roadmap

Frontend Role Guide to know about different frontend roles and their criterion

Frontend Interview Guide to know about different frontend interview rounds

Frontend projects for Practice & interviews (beginners to intermediates)

FAQs to clarify common doubts

Frontend resources/materials

HTML

📗 MDN HTML
📗 W3 Schools

CSS

Advanced CSS

📘 Debugging CSS
🎥 CSS Demystified

JavaScript

Advanced JavaScript

📗 You don't know JS
📗 Secrets of the JavaScript Ninja
📘 Deep JavaScript
📘 Professional JavaScript for Web developers
🎥 Deep JavaScript…

View on GitHub

thedaviddias / Front-End-Design-Checklist

💎 The Design Checklist for Creative Web Designers and Patient Front-End Developers

Front-End Design Checklist

The Design Checklist for Front-End Developers is an exhaustive list of elements which can help developers to analyse and understand web designs and ensure the quality of their Front-End development.

The Design Checklist for Front-End Developers is an exhaustive list of elements which Web Designers and Front-End Developers need to take into consideration to facilitate their collaboration. The following elements are a mix between known practices and new elements based on a long experience analysing web designs.

In case you are looking for a list of all elements…

View on GitHub

thedaviddias / Front-End-Checklist

🗂 The perfect Front-End Checklist for modern websites and meticulous developers

Front-End Checklist

🚨 Currently working on a V2 of frontendchecklist.io,
feel free to discuss any feature you would like to see in the next version

The Front-End Checklist is an exhaustive list of all elements you need to have / to test before launching your website / HTML page to production.

How To Use • Contributing • Website • Product Hunt

Other Checklists:
🎮 Front-End Performance Checklist • 💎 Front-End Design Checklist

It is based on Front-End developers' years of experience, with the additions coming from some other open-source checklists.

How to use?

All items in the Front-End Checklist are required for the majority of the projects, but some elements can be omitted or are not essential (in the case of an administration web app, you may not need RSS feed for example). We choose to use 3 levels of flexibility:

means that the item is recommended but can be…

View on GitHub

thedaviddias / Front-End-Performance-Checklist

🎮 The only Front-End Performance Checklist that runs faster than the others

Front-End Performance Checklist

🎮 The only Front-End Performance Checklist that runs faster than the others.

One simple rule: "Design and code with performance in mind"

How To Use • Contributing • Product Hunt

🇨🇳 🇫🇷 🇰🇷 🇵🇹 🇷🇺 🇯🇵 🇮🇷

Other Checklists:
🗂 Front-End Checklist • 💎 Front-End Design Checklist

Introduction

Performance is a huge subject, but it's not always a "back-end" or an "admin" subject: it's a Front-End responsibility too. The Front-End Performance Checklist is an exhaustive list of elements you should check or at least be aware of, as a Front-End developer and apply to your project (personal and professional).

How to use?

For each rule, you will have a paragraph explaining why this rule is important and how you can fix it. For more deep information, you should find links that will point to 🛠 tools, 📖 articles or 📹 medias that can complete the checklist.

All…

View on GitHub

yangshun / front-end-interview-handbook

⚡️ Front End interview preparation materials for busy engineers

Front End Interview Handbook

Read on the website

What is this?

Unlike typical software engineer job interviews, front end job interviews have less emphasis on algorithms and have more questions on intricate knowledge and expertise about the domain — HTML, CSS, JavaScript, just to name a few areas.

While there are some existing resources to help front end developers in preparing for interviews, they aren't as abundant as materials for a software engineer interview. Among the existing resources, probably the most helpful question bank would be Front-end Developer Interview Questions. Unfortunately, I couldn't find many complete and satisfactory answers to these questions online, hence here is my attempt at answering them. Being an open source repository, the project can live on with the support of the community as the state of web evolves.

Why do I want this?

🔍 Front End

…

View on GitHub

andrew--r / frontend-case-studies

💼 A curated list of technical talks and articles about real world enterprise frontend development

Articles like “Building a simple todo list with [framework or technology name]” won’t teach you how that framework or technology solves real-world problems and works at a large scale. This document is a curated list of technical talks and articles about real-world enterprise frontend development.

English
- AdRoll
- Aha!
- Airbnb
- ALDO
- Algolia
- Allegro
- Artsy
- Atlassian
- Australian Broadcasting Corporation
- Badoo
- BBC
- Betty Crocker
- Bitmovin
- blogfoster
- Bloomberg
- BuzzFeed
- Campaign Monitor
- Carbon Five
- Carousell
- cars.com
- Checkbot
- Clearleft
- Cloudflare
- Cloud Four
- CodeSandbox
- Condé Nast
- Conductor
- DAZN
- De Voorhoede
- DEV
- Discord
- <div>RIOTS
- Dropbox
- eBay
- Electronic Arts
- Ele.me
- Etsy
- Evil Martians
- Expedia Group
- ezCater
- Facebook
- fastq.bio
- Figma
- Financial Times
- Flickr
- Flipboard
- Flipkart
- Flocktory
- Futurice
- Garbarino
- GitHub
- GitLab
- Goibibo
- Google
- GOV.UK
- grammarly
- Gusto
- HealthCare.gov
- Heap
- in der Apotheke
- Infinite Red
- Insider Inc.
- Instagram
- Internet Archive
- Intuit
- InVision
- Khan Academy
- Kickstarter
- Klarna
- Line
- LinkedIn
- Lucidchart
- Lyft
- Mail.ru
- Mailchimp
- MDN
- Medium
- MemSQL
- Mercado Libre
- Microsoft To-Do
- Mixmax
- …

View on GitHub

If you have any good resources feel free to share I will add them.

P.S. - Read daily/weekly one case study you will learn a lot.
I have created a notion page for resources feel free to bookmark it. I will add more resources and good blogs.

Thanks for reading. Let's connect on Twitter and LinkedIn

2. First-Class Objects

Ajay kumbhare — Thu, 23 Sep 2021 18:27:18 +0000

Functions in JavaScript are first-class objects which means they can be stored in variables, objects, or in the array.

We can work with functions in JavaScript in many different ways

We can store functions in variables

const professor = function () {
  console.log("Let's do heist again...");
};

We can pass as an argument to a function

const filter = (array, callback) => {
  return array.filter(callback);
};

const isEven = (num) => num % 2 === 0;

filter([1, 2, 3, 4, 5], isEven);

We can return a function from another function

const doSum = (a) => (b) => a + b;

The above code is an example of the curry function that will discuss in the next blog. but if you see it returns a function so when you call doSum(10) it will return (b) => a + b function and it will expect one more argument.

We can store function inside an objects

const bank = {
  balance: () => 100000
};

I am learning FP. If you feel I am wrong then please feel free to write a comment in the comment box so I will update the document.

2. Implement custom Omit Type in TypeScript

Ajay kumbhare — Tue, 17 Aug 2021 12:14:09 +0000

Implement Omit<Type, Keys>

Constructs a type by picking all properties from Type and then removing Keys.

interface Todo {
    title: string;
    description: string;
    completed: boolean;
}

If you see the above interface it has 3 properties title, description, and completed. If you want to remove title key from that interface then you can use the Omit utility type. But here I am going to create a custom Omit type that will do the same thing as the Omit utility type.

type CustomOmit<T,K extends keyof T> = {
   [Key in keyof T as Key extends K ? never : Key] : T[Key]
}

If you see the above code snippet which expects Type and Keys. Omit will only remove keys from the Type or Interface which we are passing that's why I have return K extends keyof T. and later we just need to check key is available in K if it's available we will return never else will return keyValue pair.

type TodoPreview = Omit<Todo, "title">;
type TodoPreviewCustomOmit = CustomOmit<Todo, "title">;

Above both snippets will work the same and it will pick all key/value except title key from Todo type.

For Ex.

const todo: TodoPreviewCustomOmit = {
    description: string,
    completed: boolean,
}

For more details please refer official doc

1. Implement custom Pick Type in TypeScript

Ajay kumbhare — Mon, 09 Aug 2021 09:50:07 +0000

I am starting the TypeScript hacks series. In this series, I will add more posts where you can practice and learn TypeScript.

This is my first post on the TypeScript hacks series. so let's get started.

Implement Pick<Type, Keys>

Constructs a type by picking the set of properties Keys from Type.

interface Todo {
    title: string;
    description: string;
    completed: boolean;
}

If you see the above interface it has 3 properties title, description, and completed. If you want to pick some (title and completed) keys from that interface then you can use the Pick utility type. But here I am going to create a custom Pick type that will do the same thing as the Pick utility type.

type CustomPick<T, K extends keyof T> = {
    [Key in K]: T[Key]
}

If you see the above code snippet which expects Type and Keys. Pick will only select keys from the Type or Interface which we are passing that's why I have return K extends keyof T. and later we just need to check key is available in K if it's available we will return that.

type TodoPreview = Pick<Todo, "title" | "completed">;
type TodoPreviewCustomPick = CustomPick<Todo, "title" | "completed">;

Above both snippets will work the same and it will expect title and completed keys should be available when you are using that type.

For Ex.

const todo: TodoPreviewCustomPick = {
    title: "Clean room",
    completed: false,
};

For more details please refer official doc

1. Higher-Order Functions (HOF)

Ajay kumbhare — Thu, 11 Mar 2021 08:30:15 +0000

There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. - C.A.R. Hoare, 1980 ACM Turing Award Lecture

A higher-order function is a function that takes a function as an argument or returns a function.

When we were in school we learned algebra formulas like

f.g = f(g(x))

can be translated into JavaScript

const compose = (f, g) => x => f(g(x));

How to write HOF?

const filter = (predicate, xs) => xs.filter(predicate);

const isEven = (type) => (x) => Object(x) instanceof type && x % 2 === 0;

filter(isEven(Number), [2, "1", 4, null, undefined, 100, "6"]);
// [2, 4, 100]

If you see the above code I have created 2 functions filter and isEven. filter function accepts two arguments function and array so we can say that filter function is higher-order function.

So, the predicate is -> isEven(Number) so both are functions (isEven and Number)

xs.filter(predicate)

Equivalent to

xs.filter(isEven(Number))

If you see the definition of isEven function its curry function so you can call curry function like

function_name(argument_1)(argument_2)

So, when xs.filter(predicate) executes its passing array values too in a predicate function like

xs.filter(val=>predicate(val))
// or
xs.filter(val=>isEven(Number)(val))

So, when you pass function and array in the filter function it will filter values based on your predicate function and array values.

I am learning FP. If you feel I am wrong then please feel free to write a comment in the comment box so I will update the document.

Build a Telegram Bot using Node.js

Ajay kumbhare — Fri, 11 Sep 2020 16:41:38 +0000

A bot is a software program that operates on the Internet and performs repetitive tasks.

In this tutorial, we will create a Telegram bot which helps to download images from Pexels.

Getting started

There is a bot called BotFather which helps you to create your bot.

BotFather is the one bot to rule them all. Use it to create new bot accounts and manage your existing bots.

BotFather provides you some commands as following.

so to create a Bot click on the /newBot command. after you create a bot BotFather will provide you token.

There are many good frameworks available for NodeJS, in this tutorial we're going to use Telegraf.

Let's start coding

Initialize the project and install Telegraf

$ npm init
$ npm install telegraf

Now create a file and let's add it script and make a simple bot.

const { Telegraf } = require('telegraf')
const bot = new Telegraf(process.env.BOT_TOKEN)
bot.hears('hi', (ctx) => ctx.reply('Hey there'))
bot.launch()

Preview

PexelsPlashBot

We're going to send the top 10 photos from the Pexels that a user asks for. Install axios library to simplify sending GET requests and grabbing data from Pexels.

npm install axios --save

const { Telegraf } = require('telegraf')
const app = new Telegraf(process.env.BOT_TOKEN);
const axios = require("axios");
const pexelKey = process.env.PEXEL_KEY;

You can get an API key from PexelsApi

const fetchImages = async (text) => {
  try {
    const { data: { photos } } = await axios.get(`https://api.pexels.com/v1/search?query=${encodeURI(text)}&per_page=10`, {
      headers: { Authorization: pexelKey }
    }).catch((e) => console.log(e));
    // {photos} contains photos object recieved from Pexels

    if (photos.length > 0) {
      return photos.map(({ src }) => ({ media: { url: src?.original }, caption: "Pexel", type: "photo" }));
      // mapping response from photos object
    }
  } catch (e) {
    throw e;
  }
}


// when user sends a text message app.on("text") will call
app.on("text", async (ctx) => {
  // A Telegraf Context encapsulates telegram update
  //  So you can use everything you see there
  try {
    ctx.reply("⌛️ Please Wait It will take few seconds to grab Images"); // bot will send a reply to users. 
    // GET the data from Pexels API
    const photos = await fetchImages(ctx.message.text);
    // fetchImages will return image objects from pexels.
    photos.length > 0 ? ctx.replyMediaGroup(photos) : ctx.reply("Sorry Image not found :(");
    // if photos available then we are sending photos otherwise we are sending a reply as `Sorry Image not found :(`
    // we are sending 10 images here so replyMediaGroup accepts an array with objects of media, caption, and type
  } catch (e) {
    console.log(e);
    ctx.reply("Please try after sometime PexelsPlash is down :(")
  }
});

I'm alive @PexelsPlashBot

Wrapping up

As you can see, we've created a simple Telegram bot in minutes. but you can do more cool stuffs using telegram bot API's.

You can find the source code of this bot on GitHub.

What's new in Electron 10.0.0?

Ajay kumbhare — Sun, 30 Aug 2020 11:37:56 +0000

Electron 10.0.0 Released 🎉

Electron 10.0.0 has been released! It includes upgrades to Chromium 85, V8 8.5, and Node.js 12.16 and added several new API integrations and improvements.

You can install it with npm via npm install electron@latest

New in this release:

⚡️ Upgraded to Chrome 85
🌌 Improved window event handling
🎟️ Session persistence API enhancements

What's new features added?

Added contents.getBackgroundThrottling() method and contents.backgroundThrottling property.
Added a sameSite property to the Cookie structure allowing you to get and set the same site policy for cookies.
Added new render-process-gone event on app to replace the renderer-process-crashed event.
Added new useSessionCookies flag to net requests to allow them to use the session cookie store.
Added support for MessagePort in the main process.
Added the ability to get the "Recent" folder on Windows with app.getPath('recent').
BrowserWindow darkTheme option now defaults to nativeTheme.shouldUseDarkColors.
Can now check if a given session is persistent by calling the ses.isPersistent() API.
Added fullScreen property support for BrowserWindow.
Restored support for pdfium-based PDF viewer.

Load chrome extensions in puppeteer

Ajay kumbhare — Wed, 12 Aug 2020 17:40:44 +0000

What is puppeteer?

Puppeteer is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. You can do all things automatically which you are doing on the browser manually.

Generate screenshots and PDFs of pages
Crawl a website
Create an up-to-date, automated testing environment. Run your tests directly in the latest version of Chrome using the latest JavaScript and browser features
Test Chrome Extensions

Load chrome extensions



const puppeteer = require('puppeteer');

(async () => {
  const customArgs = [
    `--start-maximized`,
    `--load-extension=${process.env.extdarkreader}`
  ];
  const browser = await puppeteer.launch({
    defaultViewport: null,
    executablePath:process.env.chrome,
    headless: false,
    ignoreDefaultArgs: ["--disable-extensions","--enable-automation"],
    args: customArgs,
  });
  const page = await browser.newPage();
  await page.goto(`https://dev.to/`);
  await page.waitForNavigation();
  await page.close();
  await browser.close();
})();

By default, some functionalities are disabled in puppeteer so you can enable by assigning few arguments in ignoreDefaultArgs.



 ignoreDefaultArgs: ["--disable-extensions"]

ignoreDefaultArgs : > If true, then do not use puppeteer.defaultArgs(). If an array is given, then filter out the given default arguments. Dangerous option; use with care. Defaults to false.

After running above code got a dark theme of website https://dev.to

Followings are default arguments are used in puppeteer.



const DEFAULT_ARGS = [
  '--disable-background-networking',
  '--enable-features=NetworkService,NetworkServiceInProcess',
  '--disable-background-timer-throttling',
  '--disable-backgrounding-occluded-windows',
  '--disable-breakpad',
  '--disable-client-side-phishing-detection',
  '--disable-component-extensions-with-background-pages',
  '--disable-default-apps',
  '--disable-dev-shm-usage',
  '--disable-extensions',
  // BlinkGenPropertyTrees disabled due to crbug.com/937609
  '--disable-features=TranslateUI,BlinkGenPropertyTrees',
  '--disable-hang-monitor',
  '--disable-ipc-flooding-protection',
  '--disable-popup-blocking',
  '--disable-prompt-on-repost',
  '--disable-renderer-backgrounding',
  '--disable-sync',
  '--force-color-profile=srgb',
  '--metrics-recording-only',
  '--no-first-run',
  '--enable-automation',
  '--password-store=basic',
  '--use-mock-keychain',
];

If you have any questions or if you want more posts on puppeteer please comment out on comment box.

Implement Dark mode on your website

Ajay kumbhare — Tue, 11 Aug 2020 20:49:38 +0000

How to implement dark mode on your website?

I will use darkreader npm library which has more than 7.5K stars.

You can use Dark Reader to enable dark mode on your website.

Install the package from NPM

npm install darkreader

you can import es modules in your main file from darkreader.

import { enable, disable } from 'darkreader';

enable - Enables dark mode for current web page
disable - Disables dark mode for current web page

to enable dark mode on your website add just call enable() function in your file.

also, you can customize some filters by passing parameters in the enable method.

for example,

enable({
    brightness: 100,
    contrast: 90,
    sepia: 10,
});

It supports the following parameters which you can use it.

mode: 0 | 1
- 1 - dark mode, 0 - dimmed mode
[ brightness | grayscale | contrast | sepia ] : number
- value (0 - 100+)
- Default [ 100 | 0 | 100 | 0 ]
useFont: boolean
- Specifies if custom font should be used
- Default false
fontFamily: string
- Font family to use
textStroke: number
- Makes text look bolder (0 - 1px)
- Default 0
darkSchemeBackgroundColor: string
- Background color to use for dark mode
- Default #181a1b
darkSchemeTextColor: string
- Text color to use for dark mode
- Default #e8e6e3
lightSchemeBackgroundColor: string
- Background color to use for light mode
- Default #dcdad7
lightSchemeTextColor: string
- Text color to use for light mode
- Default #181a1b
scrollbarColor: string
- Scrollbar color
- Default auto
selectionColor: string
- Selection color
- Default auto

Resources

https://github.com/darkreader/darkreader

DEV Community: Ajay kumbhare

Frontend Interview Resources

Preparing for front-end interviews?

thedaviddias / Resources-Front-End-Beginner

💯 The most essential list of resources for Front-End beginners (🇺🇸 🇬🇧 🇨🇦 & 🇫🇷)

The most essential list of resources for Front-End beginners (🇺🇸 🇬🇧 & 🇫🇷)

Table of Contents

sadanandpai / frontend-learning-kit

Frontend tech guide and curated collection of frontend materials

Frontend Learning Kit

Frontend tech guide and curated collection of frontend materials

2022 Frontend Dev Interview checklist & Roadmap

Frontend Role Guide to know about different frontend roles and their criterion

Frontend Interview Guide to know about different frontend interview rounds

Frontend projects for Practice & interviews (beginners to intermediates)

FAQs to clarify common doubts

Frontend resources/materials

thedaviddias / Front-End-Design-Checklist

💎 The Design Checklist for Creative Web Designers and Patient Front-End Developers

Front-End Design Checklist

Table of Contents

thedaviddias / Front-End-Checklist

🗂 The perfect Front-End Checklist for modern websites and meticulous developers

Front-End Checklist

🚨 Currently working on a V2 of frontendchecklist.io,feel free to discuss any feature you would like to see in the next version

The Front-End Checklist is an exhaustive list of all elements you need to have / to test before launching your website / HTML page to production.

How to use?

thedaviddias / Front-End-Performance-Checklist

🎮 The only Front-End Performance Checklist that runs faster than the others

Front-End Performance Checklist

🎮 The only Front-End Performance Checklist that runs faster than the others.

Introduction

How to use?

yangshun / front-end-interview-handbook

⚡️ Front End interview preparation materials for busy engineers

Front End Interview Handbook

Read on the website

What is this?

Why do I want this?

🔍 Front End

andrew--r / frontend-case-studies

💼 A curated list of technical talks and articles about real world enterprise frontend development

Table of contents

2. First-Class Objects

2. Implement custom Omit Type in TypeScript

Implement Omit<Type, Keys>

1. Implement custom Pick Type in TypeScript

Implement Pick<Type, Keys>

1. Higher-Order Functions (HOF)

How to write HOF?

Build a Telegram Bot using Node.js

Getting started

Let's start coding

Preview

PexelsPlashBot

Wrapping up

What's new in Electron 10.0.0?

Electron 10.0.0 Released 🎉

New in this release:

What's new features added?

Load chrome extensions in puppeteer

What is puppeteer?

Load chrome extensions

Implement Dark mode on your website

How to implement dark mode on your website?

Resources

🚨 Currently working on a V2 of frontendchecklist.io,
feel free to discuss any feature you would like to see in the next version