DEV Community: Saqib Ameen

Launching GitHub Confirm It!

Saqib Ameen — Sun, 05 Jul 2020 11:04:46 +0000

🧞‍♂️ Idea

Whenever we have to perform any action in from the Danger Zone section of GitHub repository options, such as:

Change Visibility
Transfer Ownership
Archive Repository
Delete Repository

It asks to write username/repository-name. It's tedious to write it every time you perform any of these actions or want to quickly get done with it. That's why I created this extension, which lets you quickly type that thing for you and perform the action. Just a single click away.

🎯 GitHub Confirm It

GitHub Confirm It is a Chrome extension that allows you to quickly add a repository name to confirm actions on GitHub with just a single click. It helps you stay productive by saving your time and helping you focus on what matters. Secure and Open Source.

🔆 Getting Started

Below are the quick steps to get up and running with this extension.

👨‍💻 Installation

Download it from Chrome Store. It will add a button inside your input box to quickly insert the text.

🎯 In Action

Go to the Settings of your repository, under the Danger Zone heading, click on any action. You'll notice the small insert text icon in your input. Click on it to insert the text. A quick GIF for you:

📋 Permissions

Only requires content_script permission which only runs on the settings page of your repository.

🔥 ProducHunt

It's on ProductHunt as well. Go checkout!

👋 Say Hi

Let's connect. Say Hi on Twitter @saqibameen. Don't forget to Star 🌟the repo and spread the word!

🌒 Enable Dark Mode on WhatsApp Web

Saqib Ameen — Sat, 04 Jul 2020 21:12:07 +0000

WhatsApp Web is super convenient — we can work and communicate without checking the phone repeatedly. At times, it could be annoying for the light-sensitive people, and in general, at night. So I wrote this extension, which enables dark mode on WhatsApp Web and allows you to work seamlessly.

👨‍💻 Setup

Download the extension here. When you install the extension, it automatically enables the dark mode. You can always change the mode using the toggle button from the extension menu. Your preferences are saved for the future.

🧶 Features

Enables Dark Mode on WhatsApp Web
Remember your preference
Automatically set the mode next time

📋 Permissions

It only requires permission to the WhatsApp Web page to manage the colors. No extra permissions.

🤔 What's Next?

Refactor the code and open-source it
Extension for Firefox

👋 Get in touch

Say hi @saqibameen and follow for updates.

🔥 What's Hot in Web Development? — Weekly Picks #125

Saqib Ameen — Wed, 29 Apr 2020 15:01:22 +0000

🌟 This week is filled with some great JavaScript/Node content, new products, and much more. Once again, shout out to all the great devs doing an amazing job in these hard times. 🙌

So, let's jump into the weekly picks.

1️⃣ ✨ How To Start and Finish a Side Project ✨

🚀 It's an incredible post by Harrison on successfully building side projects. He shared some of the issues we may encounter while starting off and how to overcome them. Believe me, it's all so relatable!

If you are a developer who struggles with side projects and finds it hard to complete them, I can't recommend this post enough.

Don't forget to check the comments section.

✨ How To Start and Finish a Side Project ✨

2️⃣ How to Learn to Code: 10 Tips to 10x Your Coding Skills

👨‍💻 Another great piece by Eric Elliot! In this article, he shared some great tips on actually becoming 10x engineer. They help you become really good at what you do. As a result, it significantly improves your job prospects and salary ranges.

How to Learn to Code: 10 Tips to 10x Your Coding Skills

3️⃣ React Native vs. Flutter: Which One Would Suit You Better?

📱React Native and Flutter both are excellent choices to develop cross-platform applications. Both frameworks differ significantly in terms of their functionalities and the language they rely on. Depending upon your background and preferences, you might be inclined towards one of them. Check out this article to know more.

React Native vs. Flutter: Which One Would Suit You Better?

4️⃣ Watch: Fake Elon Musk Zoom-bombs meeting using real-time Deepfake AI

🙈 A programmer developed an AI program called Avatarify to create deep-fakes in real-time. In reality, it's an ongoing research effort to animate the images. The programmer used that open source project for developing deep-fakes and tested it by pretending to be Elon Musk in a zoom meeting.

Check out this short read. It's fun!

Watch: Fake Elon Musk Zoom-bombs meeting using real-time Deepfake AI

5️⃣ Exploring Node.js Internals

This is definitely a typical Node.js internals blog post. It goes beyond the API or simple working and actually helps you understand how Node.js works. It goes into V8 & libuv and explains how they make Node.js work via an example. Definitely worth reading, if you are a Node.js developer.

Exploring Node.js Internals

6️⃣ notify.uno — Notifications for your terminal

The description of notify.uno says:

Get notified when your commands are done

Which is pretty much self-explanatory. Sometimes we execute commands in our terminal which takes time. It's counter-productive to check the status of the command again and again. While facing this problem, Simon built this app. ⏰

It works in the browser. You don't need to install anything at all. It works in the background as well. It's completely open-source. So, if you'd like to see how it works or want to contribute, it's a great project!

notify.uno — Notifications for your terminal

7️⃣ Node 14 has been released

🌳 A major release of Node i.e v14 is out with some exciting new updates. Some new experimental features, improvements, some stable features, and more. If you are a Node.js developer, definitely check it out!

Node 14 has been released

8️⃣ 10+ Best of Javascript Game

This post contains a collection of some games developed in JavaScript. It also contains the pens (CodePen) embedded in the post. So you can actually play them. I must say, they are very well designed and executed. 🎮

10+ Best of Javascript Games

9️⃣ GraphCMS — The original GraphQL CMS. Evolved.

GraphCMS was #5 product hunted on ProductHunt by one of its developers. GraphCMS is a headless CMS based on GraphQL. It comes with powerful drag and drop APIs and works perfectly with almost all the popular technologies. 🎯

They have recently revamped their entire product including their whole branding and the website. Definitely worth checking out!

GraphCMS — The original GraphQL CMS. Evolved.

🔟 Highlight.js 10, Node 14, and modern React in 20 minutes

It's another amazing JavaScript weekly issue with some great stuff. News, jobs, readings, tutorials, and whatnot. If you are a JavaScript dev, don't miss out!

Highlight.js 10, Node 14, and modern React in 20 minutes

🙌 Wrap Up!

That was all for this week. We will come back with another list of interesting development posts next week. Stay safe. Peace! ✌️

👋 Follow us on Twitter to stay up-to-date!

Thanks to Daily, developers can focus on code instead of searching for news. Get immediate access to all these posts and much more just by opening a new tab.

🔥 What's Popular Among Developers? — Weekly Picks #124

Saqib Ameen — Wed, 22 Apr 2020 14:46:37 +0000

🌟 This week is full of amazing JavaScript content, new products, updates, a few tutorials, and more. Again, shout out to all the great devs doing producing amazing content in these hard times. Y'all are doing a fantastic job! 🙌

So, let's jump into the weekly picks.

1️⃣ ⭐️🎀 JavaScript Visualized: Promises & Async/Await

🚀 It's probably one of the best visualizations of JavaScript concepts that you can ever ask for. If you struggle with Promises & Async/Await do check out this amazing tutorial to clear your concepts. Worth reading!

⭐️🎀 JavaScript Visualized: Promises & Async/Await

2️⃣ Getting started with Alpine.js

👨‍💻 It's a detailed guide on getting started with Alpine.js from LogRocket. Alpine.js is a minimal frontend framework to add JavaScript functionality to HTML. It utilizes the declarative nature of the frontend frameworks using directive but at a much lower cost. If you love exploring the new JavaScript framework, do check it out.

Getting started with Alpine.js

3️⃣ Programmers Hate Writing Documentation - These 4 Tools Can Help

📚 Documentation is a crucial part of a product. It shows how much the product developers care about the user. This article at DZone, lists a few amazing documentation tools that you can use for this purpose.

Programmers Hate Writing Documentation - These 4 Tools Can Help

4️⃣ Pragli — Virtual office for remote teams with click to talk & avatars

🙈 Pragli is your virtual office which aims to remove the communication friction between the remote teams. It lets you seamlessly connect with your peers and work more effectively. It's currently in beta and free. Worth checking out.

Pragli — Virtual office for remote teams with click to talk & avatars

5️⃣ Explain Async/Await Like I'm Five

It's basically a discussion thread on DEV.to. Some great responses in there. I'll definitely recommend the article on #1 for Async/Await. Drop in to share your thoughts.

Explain Async/Await Like I'm Five

6️⃣ Google Chrome's new update finally allows you to organize and group tabs!

🎯 Chrome has recently introduced this new feature to group tabs. It lets you assign colors, change them, and organize tabs in a better way. Based on your current version of Chrome, you might need to update to use this feature.

Google Chrome's new update finally allows you to organize and group tabs!

7️⃣ Vue 3 is now in Beta 🖖

🦊 Vue 3 is almost here and coming with exciting new features. Apparently, they also did their version of React Hooks as well. So, all the Vue devs out there, watch out!

Vue 3 is now in Beta 🖖

8️⃣ GitHub is now free for all teams

Another great step by GitHub after joining hands with Microsoft! I remember the time when they started free private repos for all with a limited collaborator. It was a big deal! Now, you can enjoy unlimited collaborators, private repos, and much more for free. 🔥

GitHub is now free for all teams

9️⃣ Flutter Vs React Native: Everything You Ever Wanted to Know [INFOGRAPHIC]

Flutter, released in May 2017, is picking up very quickly and competing with React Native. This post is all about how React Native and Flutter are doing in their own spaces. There's a great small comparison infographic in the end for a quick look! 🤞

Flutter Vs React Native: Everything You Ever Wanted to Know [INFOGRAPHIC]

🔟 Fun and games with JavaScript

It's another amazing JavaScript weekly issue with tons of amazing stuff. News, jobs, readings, tutorials, and whatnot. If you are a JavaScript dev, don't miss out!

Fun and games with JavaScript

🙌 Wrap Up!

That was all for this week. We will come back with another list of interesting development posts next week. Stay safe. Peace! ✌️

👋 Follow us on Twitter to stay up-to-date!

Thanks to Daily, developers can focus on code instead of searching for news. Get immediate access to all these posts and much more just by opening a new tab.

⚠️ Permission Changes in Recent Daily Update

Saqib Ameen — Mon, 20 Apr 2020 18:10:14 +0000

We have recently pushed two updates on Daily — v2.14.5 and v2.14.6. One of them is a critical update and related to the cookies' permission change in Daily. It asks you to allow Daily to read cookies from https://daily.dev and https://dailynow.co.

There are two scenarios to this update:

Auto Update of extensions is

Enabled
Disabled

In the first case, your browser will update the extension to the latest version automatically and disable it temporarily. It will ask you for the latest permissions. A notification icon (⚠️) icon will appear on the menu (in case of Chrome — similarly it asks for permissions on update in Firefox).

When you click on the icon, it shows the permissions required. Click on the Accept Permissions button to give the permissions. Check out the GIF.

In case if your extension is not automatically updated or you are having issues with the update, please take a look at this guide. After that give permissions to enable the extension.

If you still face any issues, feel free to reach out to us! ✌️

👋 Follow us on Twitter to stay up-to-date!

Thanks to Daily, developers can focus on code instead of searching for news. Get immediate access to all these posts and much more just by opening a new tab.

🔥 What Developers Are Looking For? — Weekly Picks #122

Saqib Ameen — Wed, 08 Apr 2020 14:31:36 +0000

🌟 Like last week, developers worked on some amazing new COVID-19 projects, followed by JavaScript related stuff, and some exciting new updates. It's great to see how devs are holding up in this scenario and doing great things!

So, let's jump into the weekly picks.

1️⃣ How I Got My Website to Load in 1 Second

🚀 In this post, Jeremy improved his site load speed form 3s to 1s. He wrote extensively about his stack selection, hosting choices, and how he ended up with this speed. If you are looking to host a static site (personal blog maybe?), do check it out!

How I Got My Website to Load in 1 Second

2️⃣ All Pluralsight Content is Free in April

👨‍💻 Considering the current COVID-19 situation, Pluralsight has announced a free month of learning! Pluralsight offers a great set of courses and complete paths that you can take. If you got some time while working from home, maybe learn some new skills?

All Pluralsight Content is Free in April

3️⃣ 🌏 I've open-sourced an interactive 3D visualization of COVID-19

🔥 It's an interesting and beautiful project by Robert regarding COVID-19. It shows an interactive 3D globe. You can move around and check the status of COVID in any specific country. It's completely open-source, so feel free to contribute, or open an issue.

🌏 I've open-sourced an interactive 3D visualization of COVID-19

4️⃣ I built an entire monitoring service while being in Covid-19 quarantine 📈🚀

🙈 I can't recommend enough this post! In this post, Timo shares how he built an entire extensible monitoring service from scratch in two weeks. It's amazing to see what can be accomplished in such a short time. It's very well built, looks amazing, polished, and completely open-source. A lot to learn!

I built an entire monitoring service while being in Covid-19 quarantine 📈🚀

5️⃣ The Maybe data type in JavaScript

🤯 This is another interesting post from last week. In this reading, Amin shares the concept of Maybe data type in JavaScript. It is usually used in other web dev languages like Elm and PureScript. He shows how it can be borrowed and used in JavaScript as well.

The Maybe data type in JavaScript

6️⃣ Eclipse Theia Offers a ‘True Open Source Alternative to Visual Studio Code’

🎯 Eclipse has launched Theia which they are calling a true open-source alternative to Visual Studio Code. It allows you to build Cloud-based and Desktop IDEs. It is heavily inspired by VSCode and inherits many design decisions from it. Worth checking out!

Eclipse Theia Offers a ‘True Open Source Alternative to Visual Studio Code’

7️⃣ 10 very creative javascript projects on Github

🌩 This post contains a list of some awesome open source projects available on GitHub. It contains a short description of every project with a link to their GitHub repo. A great list of ideas to get some inspiration.

10 very creative javascript projects on github

8️⃣ My favorite front-end debugging hack

In this post, Lucas shares a great frontend debugging hack:

setTimeout(() => { debugger; }, 3000);

He explains it as below:

The best use case for our hack is whenever we need to change or check styles in DevTools and the element gets closed if we move the cursor or press any key.

My favorite front-end debugging hack

9️⃣ SnipperApp 2 — Native macOS code snippets manager with syntax highlighting

🔥 SnipperApp is an amazing MacOS app for day to day snippets and notes management. It provides integration with iCloud & GitHub and rocks a minimal design. It was ranked as #1 product on ProductHunt on April 05.

SnipperApp 2 — Native macOS code snippets manager with syntax highlighting

🔟 Passwords are Obsolete — How to Secure Your App and Protect Your Users

🔑 An extensive post on authentication by Eric Elliot where he discusses the flaws in current authentication and how we can resolve them. He also introduces passwordless authentication and a complete guide on implementing it in our apps. A great read! 💯

Passwords are Obsolete — How to Secure Your App and Protect Your Users

🙌 Wrap Up!

That was all for this week. We will come back with another list of interesting development posts next week. Stay safe. Peace! ✌️

👋 Follow us on Twitter to stay up-to-date!

Thanks to Daily, developers can focus on code instead of searching for news. Get immediate access to all these posts and much more just by opening a new tab.

🤕 Git Visualized: Forked a Repo, Now The Original Has More Commits

Saqib Ameen — Tue, 07 Apr 2020 16:35:03 +0000

Let's consider a scenario where you are contributing to an open-source project.

You forked a project.
You cloned the repository.
You made some changes.
You pushed the changes.
Time to create a pull request — but the original master branch has more commits now. 🤕

What to do now? You might have struggled with this scenario at some time in your career. Most of the beginners still do.

To all those struggling, this guide will help you handle such a situation and help you understand the underlying concepts of git as well. So let's get started!

👨‍💻 Current State of Git Branches

Below is the visualization of the current scenario.

For those who are not familiar with the concepts of upstream, it's not the local or the forked one, it points to the original repository on GitHub. It is not set by default. You need to manually link your cloned repo with upstream.

🎯 Pointing to The Upstream

For the sake of convenience let's assume two repos:

Original — https://github.com/dailydotdev/daily
Fork — https://github.com/saqibameen/daily

Below is the git command to do it.

# Add Upstream Remote.
git remote add upstream https://github.com/dailydotdev/daily.git

# Fetch latest updates from it.
git fetch upstream

Remember that, those updates will be in upstream/[BRANCH_NAME]. With that done, now your remote pointers in local repo look like below:

At this stage, we have upstream/master available locally and we need to bring the new commits (namely, E and F in our diagram) to our feature branch. We have two options here:

Merge
Rebase

Both can be used to obtain the end result — get the latest updates from upstream/master and keep our commits as well.

🔗 Using `git merge`

Make sure you are on the feature branch. Use the following command to do the merge:

# Merge upstream/master to feature branch. 
git merge upstream/master

If there are any conflicts in the merge, resolve them. Otherwise, just write the merge-commit message and you are all set. Behind the scene, your feature branch looks like this. The last commit is the merge commit that you do whenever you perform a merge.

Just a little convoluted history, which you might not want. All you want is your changes on top of the upstream/master followed by a push origin and a pull request.

🏗 Using `git rebase`

git rebase is something I find a perfect fit for such a scenario. With it, you get a clean git history and nothing more. So, instead of the git merge, you can do the following:

# Rebase feature branch on top of upstream/master
git rebase upstream/master

Now, take a look at how the feature branch looks like:

Did you notice the stars(*) on top of commit C and D? If you are not familiar with git rebase, I used them to indicate that these commits are a copy of the original commits C & D.

🤔 Take a look at the feature branch — probably exactly what we need for PR; not anything more. Perfect!

UPDATE:
You can also use the following command to achieve this all in one command.

git pull upstream master --rebase

🚀 Push the changes

Let's see in both cases how git push works. After that, we only need to create a PR.

# Push changes to the origin. 

#In case of merge
git push origin feature

# In case of rebasing
git push --force origin feature

Did you notice the --force flag in case of rebasing? It is because we are re-writing history. 🙈

The feature branch initially had the following commits:

A — B — C — D

With rebase, we changed it to:

A — B — E — F — C* — D*

So, not only we created copies of C, and D commits, we also put E, and F at their original positions: git history is changed. That's why we need --force flag. Otherwise, you might get an error.

Because of the fact that git rebase copies commits and changes history, don't use it when you shared those commits with the team. Be careful while using it. A perfect scenario is when you haven't shared your work with anyone.

🙌 Wrap Up!

Learning through use-cases is the best way to master anything. You don't only solve that problem but also get to understand the usage of tech involved in the process.

I hope this post will help you not only get through this situation but also understand how git merge and git rebase differ and where to use them. If you have any questions, feel free to drop them in the comments section below.

👋 Follow us on Twitter to stay up-to-date!

Thanks to Daily, developers can focus on code instead of searching for news. Get immediate access to all these posts and much more just by opening a new tab.

🎯 Using Regular Expressions in JavaScript

Saqib Ameen — Thu, 02 Apr 2020 13:47:27 +0000

Regex is hard; we all agree. But it's usage is inevitable at the same time. The core purpose of the regex is matching patterns. We don't need the same info every time we match the patterns.

🤔 For example, sometimes we only need to know if it exists or not — a true or false, sometimes we need the index, and so on. That's why there exist different methods in JavaScript to use with regex and obtain that particular info.

This article is all about those use cases and the right method to use.

It could be confusing for first-timers. Try to digest what you can, you can always come back to this post when you need it. It's hard to cover all concepts in a single post. Please don't be afraid to ask questions/discuss in the comments section below.

1️⃣ Get Only The Index of First Occurrence

String.prototype.search() is the right way to go in that case.

🚨 Remember

It returns -1 if not found.
-1 is not the same as false. Do not use it in if block.
Irrespective of the global flag g on regex, it will give the same result.

2️⃣ Get A `True/False` — Exists or Not

RegExp.prototype.test() returns true/false based on if a pattern is found or not.

🚨 Remember

The return type is bool.
The result can be directly used inside if block.
When the global flag g is used, it can be executed multiple times for the next occurrences. i.e., it will keep returning true as long as it keeps finding the next occurrence of the pattern.

🚩 Global Flag Explanation

Did you note the regex /foo/g? It means:

Match literally for foo.
'g' means don't return after the first match. Find all occurrences.

In the code, it returns true twice. The first time, it finds foo in football and the second time in foosball. The third time it returns false and it will keep returning false.

RegExp.prototype.test() achieves this by maintaining a property named lastIndex.
It is updated every time you run it.
When all occurrences are returned, it is set to 0.
lastIndex is usually the last index of occurrence + 1.

Let's revisit the above code with lastIndex as well.

2️⃣ Get All The Matching Patterns Only

String.prototype.match() gives you the array of all the matches/occurrences of the pattern specified by the regex.

🚨 Remember

You only get an array in the response when the global flag g is specified.
When the global flag g is not specified in the regex, the results are different. We will be covering later in this article.

3️⃣ Get The Only First Matching Pattern & Starting Index

String.prototype.match() can also give you the only first matching patterns and starting index of its occurrence.

🚨 Remember

You only get those details when the global flag g is not specified in the regex.
An object is returned containing information like the matched pattern, index, and the input string.
It can be super helpful in tokenization.

Note that you can also use RegExp.prototype.exec() for this purpose as well. It is explained in the following heading.

4️⃣ Get All The Matching Patterns & Their Starting Indices

There are two options for you in this case:

RegExp.prototype.exec()
String.prototype.matchAll()

Both are explained below:

`RegExp.prototype.exec()`

Don't forget to set the global flag g if you intend to use it this way. If omitted, it will behave just like String.prototype.match(), and give the same result and lastIndex (0) every time.

🚨 Remember

You have to execute it every time in order to obtain details of the next occurrence.
Similar to RegExp.prototype.test(), it is also stateful.
It updates lastIndex every time you run it.
When it's done, lastIndex is set to 0 and the result is null.

If you are using a while loop like this example, don't forget the g flag.

`String.prototype.matchAll()`

The results we achieved using RegExp.prototype.exec() are also achievable using String.prototype.matchAll(), but in a more convenient manner using for-of loop.

🚨 Remember

It doesn't work without a global flag g on your regex.
You get an Iterable when you execute this command.
The idea is, you write a simple for-of loop and it takes care of the rest.

If you are familiar with Generators and Iterators in JavaScript, you can also get the iterator and use .next() according to your use case.

.next() returns an object with value and done property. done property returns false until the complete list has been traversed.

🙌 Wrap Up

That's all I have in my mind when I deal with regex in JavaScript — a few use cases and what method to use. It might be helpful next time you do regex in JavaScript.

However, I'd more than interested to know how do you deal with regex in JavaScript? Feel free to share your use cases/approaches in the comments section below.

👋 Follow us on Twitter to stay up-to-date!

Thanks to Daily, developers can focus on code instead of searching for news. Get immediate access to all these posts and much more just by opening a new tab.

🔥 What's Hot in Web Development — Weekly Picks #121

Saqib Ameen — Wed, 01 Apr 2020 15:52:10 +0000

🌟 In the current situation, almost all teams are working remotely. From meetings, classrooms, events, and conferences, everything is happening online. It is reflected in this weeks' weekly picks as well.

Let's see what developers have been looking for this week on Daily.

1️⃣ Covid-19 Live Insights - Hard rework

🦠 This COVID-19 dashboard is a great piece of work David. It contains almost everything that you might need to know. It gives you live data updates, 20 languages support, location-based content, and a prediction of the next 7 days.

Covid-19 Live Insights - Hard rework

2️⃣ 42 Projects to Practice Programming Skills

👨‍💻 42skills.com is an interesting website. If you are aiming to become a hardcore programmer, you should definitely check out this one. It lists 42 different types of projects that you can do to level up your coding game.

I won't suggest doing all of those, it's going to take a lot of time. But maybe pick a few and do those.

42 Projects to Practice Programming Skills

3️⃣ 9 Top JS Gaming Engines and Libraries for 2020

🔥 Last week, a post about the use of JavaScript in online games made it to the top 3. This week, again we have this post on JS libraries and engines for developing games. If you are game dev, planning to tap into JavaScript, or maybe vice versa, do check it out.

9 Top JS Gaming Engines and Libraries for 2020

4️⃣ Facebook Introduces Rome Experimental JavaScript Toolchain

🀄️ Rome is an interesting open-source and comprehensive JavaSCript ToolChain in development. It covers everything related to JavaScript code processing including compiling, linting, formatting, bundling, and testing. It doesn't just pack the existing tools into a single pack, rather it is introducing all from scratch. On top of this all, its components can also be used as a plugin in the existing tools.

Facebook Introduces Rome Experimental JavaScript Toolchain

5️⃣ Frontend Mentor — Improve your coding skills by building real projects

🎨Frontend Mentor is an interesting project that can help you improve your frontend skills. It contains a list of challenges, you can pick any, code, and post the solution asking for feedback. Definitely worth the shot!

Frontend Mentor — Improve your coding skills by building real projects

6️⃣ Three new online JavaScript events on the way

🎙 In the current situation, many in-person events have been postponed/canceled or shifted online. This post list three JS events, JavaScript Remote Conf 2020, ESNEXT CONF 2020, and ForwardJS that are going to happen in May. A few of them are also accepting talks. So, go check out!

Three new online JavaScript events on the way

7️⃣ Tiiny Host — Super simple static web hosting

🌩 Tiiny.host aims to simplify static web hosting. All you need to do is to upload the .zip file and it's up and running. Unlimited subdomains, disappears after 7 days, and no signup — best for prototyping.

Tiiny Host — Super simple static web hosting. No sign up required.

8️⃣ A Norwegian school quit using video calls after a naked man ‘guessed’ the meeting link

With the current COVID-19 situation, almost every team has gone remote and using online tools to communicate and collaborate. This is rather a strange story from Norway where a naked man joined the chat in a school class. The reps say probably the school was using the unpaid/unsecure version. Rumors are, the person might have guessed the link.

A Norwegian school quit using video calls after a naked man ‘guessed’ the meeting link

9️⃣ Why you need to start using Svelte Js for web development projects if you still don't

It's an extensive post on Svelte.js. It covers its architecture, how to get started, and why you should try it. It also contains demo videos to help you get started.

Why you need to start using Svelte Js for web development projects if you still don't

🔟 Retrium — Fun and effective agile retrospectives for distributed teams

🔥 It is a developer focussed product, recently launched on Product Hunt, which aims to solve the problem of running a good retro with distributed teams. It comes with an interesting set of features that make conducting retrospectives fun and fruitful. A must check for the distributed teams.

Retrium — Fun and effective agile retrospectives for distributed teams

🙌 Wrap Up!

That was all for this week. We will come back with another list of interesting development posts next week. Stay safe. Peace! ✌️

👋 Follow us on Twitter to stay up-to-date!

Thanks to Daily, developers can focus on code instead of searching for news. Get immediate access to all these posts and much more just by opening a new tab.

🔥State of Software Development 2020 — Weekly Picks #120

Saqib Ameen — Wed, 25 Mar 2020 15:02:43 +0000

It has been another tough week around the globe. We hope you all are doing great and taking care of yourselves. It's a tough time and we will make through it together.

We are back again with the weekly picks for one more time. So, let's jump in!

1️⃣ New TypeScript Features that Improve the Developer Experience

This post talks about some of the recently introduced features in TypeScript and how they will make your development experience better. It's good to see how TypeScript is readily supporting the new ECMAScript features. TypeScripts devs, it worth reading. 💯

New TypeScript Features that Improve the Developer Experience

2️⃣ Use of JavaScript In Online Games

In the past few years, the JavaScript community has evolved so much that you can almost do everything in it, including Game development. This reading contains a few examples of the games done in JavaScript, along with a few libraries which can help you develop games in JavaScript. Definitely an interesting read just to know what you can do with JavaScript. ⚡️

Use of JavaScript In Online Games

3️⃣ 20 Top Tools for Distributed Development Teams

Amid the current COVID-19 chaos almost all the software teams have gone remote. For those, who haven't worked remotely before, this is an amazing list of all the useful tools that you can use to effectively work from your home. 🔥

20 Top Tools for Distributed Development Teams

4️⃣ 📈 I've open-sourced a simple Coronavirus (COVID-19) dashboard (React + Chart.js + BootstrapTable)

This project is basically an extension of the dashboard design by John Hopkins to provide additional functionality. It's clean, compares the results from different countries, and provides a share-able URL with all filters. Personally, I liked the simplicity of this dashboard.

📈 I've open-sourced a simple Coronavirus (COVID-19) dashboard (React + Chart.js + BootstrapTable)

5️⃣ Chrome 81 Release Features New AR and NFC Features, and Redesigned HTML Form Controls

🕶 Chrome has recently released launched a new version with exciting new features including the new HTML form controls and NFC & AR support. To know more about use cases of NFC & AR features in Chrome, check out this post.

Chrome 81 Release Features New AR and NFC Features, and Redesigned HTML Form Controls

6️⃣ Top 6 New Programming Languages Born in the Last Decade

🤔 Do you like checking out the new programming languages? Just to learn what they have to offer or how languages are evolving? This is a super helpful post in learning about the promising programming languages which were introduced in the last decade.

Top 6 New Programming Languages Born in the Last Decade

7️⃣ Donate Your Unused CPU Cycles to Fight the Coronavirus

Want to contribute to the solution of the COVID-19 diseases? You can start by donating a few CPU Cycles to the universities designing simulations to devise a solution for the disease. It's a complete guide on how you can go about donating your unused CPU cycles for this cause. ✨

Donate Your Unused CPU Cycles to Fight the Coronavirus

8️⃣ Quick Front-End Integrations Through Components

🎨 It's another interesting post related to remote work. It primarily focusses on the frontend developers and explains how they can use bit to effectively manage and share frontend components. It's a detailed post that explains it all with examples. Worth checking!

Quick Front-End Integrations Through Components

9️⃣ Should I use Redux?

That's an interesting #discussion post on whether or not you should use Redux. Definitely worth going through the comments if it confuses you or if you are React/Redux dev. ⚛️

Should I use Redux?

🔟 State of Software Development 2020 — Latest Software Development Trends

It's a very interesting survey to go through. It's probably the 4th survey done by the Coding Sans team with the help of 9 amazing companies and over 700 developers. Check out to see how other developers are doing things! 🔥

State of Software Development 2020 — Latest Software Development Trends

🙌 Wrap Up!

That was all for this week. We will come back with another list of interesting development posts next week. Stay safe. Peace! ✌️

👋 Follow us on Twitter to stay up-to-date!

Thanks to Daily, developers can focus on code instead of searching for news. Get immediate access to all these posts and much more just by opening a new tab.

🌟 View Google Chrome's Bookmarks Toolbar in Daily

Saqib Ameen — Mon, 23 Mar 2020 17:38:14 +0000

Having bookmarks in browsers is a common thing. We usually have different preferences to hide/show bookmarks toolbar display in browsers. However, by default Google Chrome shows your bookmarks toolbar when you open a new tab.

When you install Daily, however, your new tab is replaced by the extension. In that case, your bookmarks toolbar is not shown whenever you open a new tab. Let me explain with the help of a GIF.

🌟 Show Google Chrome's Bookmarks Toolbar in Daily

A couple of times we were asked by our users that how could they keep the bookmarks toolbar in Daily as well. So, we decided to write about it. The answer is pretty simple. You need to enable the option of Show Bookmarks Bar in your browser.

There are two ways mentioned below to toggle the bookmarks bar in Google Chrome.

⌨️ Using Shortcut Keys

Below are the shortcut keys that you can use to toggle bookmark toolbar:

For Mac: CMD⌘ SHIFT⇧ B
For Windows: CTRL SHIFT B

That's what I do. It allows me to quickly toggle the bookmarks bar. This way, I can easily hide it when I am not using Daily.

👨‍💻 Using Settings Menu

Click on the three dots (⠇) on the top right corner of Chrome. Go to Bookmarks > Show Bookmarks Bar. That's all!

🙌 Wrap Up!

That's all. You should be able to see the bookmarks bar in Daily as well. If you have any questions, feel free to reach out to us.

Stay Safe! ✌️

👋 Follow us on Twitter to stay up-to-date!

Thanks to Daily, developers can focus on code instead of searching for news. Get immediate access to all these posts and much more just by opening a new tab.

🔥 Software Design, Remote Work, Authentication Solutions, and More — Weekly Picks #119

Saqib Ameen — Wed, 18 Mar 2020 18:27:45 +0000

It has been a tough week around the globe due to the widespread COVID-19. We hope you all are doing great and taking care of yourselves. It's a tough time. Everyone, stay safe. ❤️

We are back again with the weekly picks of the last week. Let's see what developers had been looking at this week.

1️⃣ 10 Git Techniques You Need to Know Before You Join a Team

Git is one of the basic skills to have in developers nowadays. This post lists 10 basic Git techniques that you should now as a developer at least. They'll help you quickly get started with versioning. 💯

10 Git Techniques You Need to Know Before You Join a Team

2️⃣ 11 Chrome APIs that Give Your Web App a Native Feel

Web apps are a great way to deliver applications on cross-platform without writing separate code for each. Still, people prefer native applications because web apps fail to fully utilize the power of the device. And that's true as well.

This post contains 11 Chrome APIs that will help you give your web app a more native-like feel. It's a great list and contains some APIs that I didn't even know exist. Worth checking out. ⚡️

11 Chrome APIs that Give Your Web App a Native Feel

3️⃣ 5 Ways to Share Code in 2020

Application design is a serious issue. It's hard to follow all the design principles, avoid duplication, coupling, and whatnot. This reading discusses 5 ways to effectively share code and improve your application design. 🔥

5 Ways to Share Code in 2020

4️⃣ All the startups threatened by iOS 14’s new features

New updates of iOS and Android means better performance, security, and new features. Sometimes those features are already provided by third-party applications. Having those functionalities as built-in features hurt those the life of those apps, hence the startups. This post is all about a few such features introduced by iOS 14. 🧐

All the startups threatened by iOS 14’s new features

5️⃣ WeHatePasswords — Replace passwords on your site with cute pixel art

🎯 Remembering passwords is hard. That's why we have tons of applications to remember our passwords and manage them from one place. This product hunted at ProductHunt aims to provide an alternative to passwords, i.e pixel arts. Draw a pixel art instead of writing a password every time to log in.

WeHatePasswords — Replace passwords on your site with cute pixel art

6️⃣ Why Development Teams are Slow

🤔 We all know software development and design decisions are difficult. Despite all planning, we often find ourselves in unimagined problems that hinder our progress. In this post, Eric discusses a few points in detail which lead to slow progress of teams.

Why Development Teams are Slow

7️⃣ Gear Up for Remote Work

Considering the current COVID-19 situation almost every tech company is shifting to Work From Home (WFH) model. It is necessary to have an optimal setup to operate properly from home. In this post, Eric discusses how you can prepare for an effective home office to work from home. ✨

Gear Up for Remote Work

8️⃣ Online courses recommendation

That's one of the discussion posts which got a lot of attraction at Dev.to. The comments section of this post is super useful and contains a number of links to useful resources. Worth checking out. 💯

Online courses recommendation

9️⃣ DID — The simplest way to add passwordless auth to websites & apps

It's another authentication product that I saw on ProductHunt this week. It provides authentication by storing a key-pair on the user's device. It is also compatible with Oauth and Open ID Connect. I would recommend checking it out.

DID — The simplest way to add passwordless auth to websites & apps

🔟 Paradox of scale: why Netflix couldn't build Netflix

🚀 This post contains notes of another post published on Medium originally. If you want to quickly sift through that post, these notes are for you. It talks about the paradox of building large/complex applications. There's a lot to learn and take notes of.

Paradox of scale: why Netflix couldn't build Netflix

🙌 Wrap Up!

That was all for this week. We will come back with another list of interesting development posts next week. Stay safe. Peace! ✌️

👋 Follow us on Twitter to stay up-to-date!

Thanks to Daily, developers can focus on code instead of searching for news. Get immediate access to all these posts and much more just by opening a new tab.

DEV Community: Saqib Ameen

Launching GitHub Confirm It!

🧞‍♂️ Idea

🎯 GitHub Confirm It

🔆 Getting Started

👨‍💻 Installation

🎯 In Action

📋 Permissions

🔥 ProducHunt

👋 Say Hi

🌒 Enable Dark Mode on WhatsApp Web

👨‍💻 Setup

🧶 Features

📋 Permissions

🤔 What's Next?

👋 Get in touch

🔥 What's Hot in Web Development? — Weekly Picks #125

1️⃣ ✨ How To Start and Finish a Side Project ✨

2️⃣ How to Learn to Code: 10 Tips to 10x Your Coding Skills

3️⃣ React Native vs. Flutter: Which One Would Suit You Better?

4️⃣ Watch: Fake Elon Musk Zoom-bombs meeting using real-time Deepfake AI

5️⃣ Exploring Node.js Internals

6️⃣ notify.uno — Notifications for your terminal

7️⃣ Node 14 has been released

8️⃣ 10+ Best of Javascript Game

9️⃣ GraphCMS — The original GraphQL CMS. Evolved.

🔟 Highlight.js 10, Node 14, and modern React in 20 minutes

🙌 Wrap Up!

🔥 What's Popular Among Developers? — Weekly Picks #124

1️⃣ ⭐️🎀 JavaScript Visualized: Promises & Async/Await

2️⃣ Getting started with Alpine.js

3️⃣ Programmers Hate Writing Documentation - These 4 Tools Can Help

4️⃣ Pragli — Virtual office for remote teams with click to talk & avatars

5️⃣ Explain Async/Await Like I'm Five

6️⃣ Google Chrome's new update finally allows you to organize and group tabs!

7️⃣ Vue 3 is now in Beta 🖖

8️⃣ GitHub is now free for all teams

9️⃣ Flutter Vs React Native: Everything You Ever Wanted to Know [INFOGRAPHIC]

🔟 Fun and games with JavaScript

🙌 Wrap Up!

⚠️ Permission Changes in Recent Daily Update

🔥 What Developers Are Looking For? — Weekly Picks #122

1️⃣ How I Got My Website to Load in 1 Second

2️⃣ All Pluralsight Content is Free in April

3️⃣ 🌏 I've open-sourced an interactive 3D visualization of COVID-19

4️⃣ I built an entire monitoring service while being in Covid-19 quarantine 📈🚀

5️⃣ The Maybe data type in JavaScript

6️⃣ Eclipse Theia Offers a ‘True Open Source Alternative to Visual Studio Code’

7️⃣ 10 very creative javascript projects on Github

8️⃣ My favorite front-end debugging hack

9️⃣ SnipperApp 2 — Native macOS code snippets manager with syntax highlighting

🔟 Passwords are Obsolete — How to Secure Your App and Protect Your Users

🙌 Wrap Up!

🤕 Git Visualized: Forked a Repo, Now The Original Has More Commits

👨‍💻 Current State of Git Branches

🎯 Pointing to The Upstream

🔗 Using git merge

🏗 Using git rebase

🚀 Push the changes

🙌 Wrap Up!

🎯 Using Regular Expressions in JavaScript

1️⃣ Get Only The Index of First Occurrence

🚨 Remember

2️⃣ Get A True/False — Exists or Not

🚨 Remember

🚩 Global Flag Explanation

2️⃣ Get All The Matching Patterns Only

🚨 Remember

3️⃣ Get The Only First Matching Pattern & Starting Index

🚨 Remember

4️⃣ Get All The Matching Patterns & Their Starting Indices

RegExp.prototype.exec()

🚨 Remember

String.prototype.matchAll()

🚨 Remember

🙌 Wrap Up

🔥 What's Hot in Web Development — Weekly Picks #121

1️⃣ Covid-19 Live Insights - Hard rework

2️⃣ 42 Projects to Practice Programming Skills

3️⃣ 9 Top JS Gaming Engines and Libraries for 2020

🔗 Using `git merge`

🏗 Using `git rebase`

2️⃣ Get A `True/False` — Exists or Not

`RegExp.prototype.exec()`

`String.prototype.matchAll()`