DEV Community: Saurabh Daware 🌻

I made a Profile Card Widget for Bluesky 🦋

Saurabh Daware 🌻 — Sun, 24 Nov 2024 15:45:56 +0000

Hey there! 👋 It’s been a while since my last post here—four years, to be exact. But I’m back, excited to share something cool I built: a Profile Card Widget for Bluesky!

Lets get to the topic! I recently joined Bluesky and I was exploring their APIs and I realised, what if we could render our bluesky's profile into our websites.

This is something that I had done in the past by creating dev.to widget for this platform.

I made DEV.to widget for websites/blogs

Saurabh Daware 🌻 ・ Oct 20 '19

#showdev #javascript #webdev

Just like dev.to widget, I want bsky-widget to work in all frameworks and setups without me having to write libraries for each and every one of them so I went with the same approach as dev.to widget, web components!!

I'll probably write a different article on web components if you all are interested. Until then, here's how you can use bsky-widget

Here's how it looks like

How to use `bsky-widget`?

In Vanilla Projects

You just need 2 lines of code to use bsky-widget

<!-- Use your bluesky profile handle -->
<bsky-widget handle="srbh.dev"></bsky-widget>

<!-- Paste before end of body -->
<script 
  src="https://unpkg.com/bsky-widget@~0.1/dist/index.js" 
  type="module"
>
</script>

In Frameworks

In frameworks, you can skip adding <script src=""> and instead follow this-

npm install --save bsky-widget@latest

// along with other imports of framework
import 'bsky-widget';


// Wherever you want to render the card
<bsky-widget handle="srbh.dev"></bsky-widget>

React Example

Customization

Checkout Override Styles Documentation to know which CSS variables and styles can be overriden

Thanks for reading! Let me know if you all are interested in an article on web components and how I used it for bsky-widget.

Do ⭐️ the repo or build your own card using the link below.

GitHub: https://github.com/saurabhdaware/bsky-widget
Card Generator: https://bsky-widget.srbh.dev/

saurabhdaware / bsky-widget

Unofficial Bluesky widget to render cute profile cards in your websites ^_^

Bluesky Widget

Unofficial Bluesky Profile Cards for Bluesky Friends 🦋

Card Generator UI: https://bsky-widget.srbh.dev/

Usage

Code	Preview
<!-- Paste in your CSS to avoid layout shift --> <style> bsky-widget { min-height: 387px; width: 350px; } </style> <!-- Paste wherever you want to render the card --> <bsky-widget handle="patak.dev"></bsky-widget> <!-- Paste before end of body --> <script src="https://unpkg.com/bsky-widget@~0.1/dist/index.js" type="module" ></script>

Code

Preview

<!-- Paste in your CSS to avoid layout shift -->
<style>
  bsky-widget {
    min-height: 387px;
    width: 350px;
  }
</style>

<!-- Paste wherever you want to render the card -->
<bsky-widget handle="patak.dev"></bsky-widget>

<!-- Paste before end of body -->
<script
  src="https://unpkg.com/bsky-widget@~0.1/dist/index.js"
  type="module"
></script>

Usage as NPM module

Install

npm install bsky-widget@latest --save

Import and Use

import "bsky-widget";

<bsky-widget handle="srbh.dev"></bsky-widget>;

Props

Prop	Description	Example value
handle	handle of your bluesky account	"srbh.dev"
show-description	hide / show your description / bio from profile	"true" (default) or "false"
show-banner	hide / show your banner (only applicable if you have a banner)	"true" (default) or "false"

…

View on GitHub

Generate your own Bluesky profile card

The Evolution of FrontEnd Development🌻: What is WebPack, Babel, and Build-steps in Frameworks.

Saurabh Daware 🌻 — Sun, 15 Nov 2020 13:28:42 +0000

There have been several advances in the web in recent years and in this post, I will talk about the tools that I feel have made a significant impact on how we build websites today.

Do note that this post is not intended to teach or help you set up these tools. This is an introduction and a top-level view of what they do and why they do. For detailed information, you can check out their respective documentations.

Lets talk about the basic web!

This is how we build small websites right? this is something that our browsers understand without any need for external tools.

<html>
<body>
  <p>Hello!</p>

  <script src="./index.js"></script>
</body>
</html>

This was working great for a long time! so what went wrong?

The websites became larger and more dynamic so the responsibility of JavaScript increased.

Problem with Maintainability

Now imagine a code like this:

<!-- index.html -->
<html>
<body>
  <input class="name-input" type="text" />
  <!-- ... -->

  <script src="./jquery.js"></script>
  <script src="./helpers.js"></script>
  <script src="./main.js"></script>
</body>
</html>

// main.js
const isInputURL = isURL($('input.name-input').val());
console.log(isInputURL);

Wai-wai-waittt where did isURL function come from? What is even $?

Imagine having multiple scripts like these and you find out one function is wrong. How do you find and debug that function?

This can eventually lead to a huge mess so we needed a more scalable solution.

Let's look into this code instead:

<!-- index.html -->
<html>
<body>
  <input class="name-input" type="text" />
  <!-- ... -->

  <script src="./main.js"></script>
</body>
</html>

// main.js
import $ from 'jquery';
import { isURL } from './helpers.js'

const isInputURL = isURL($('input.name-input').val());
console.log(isInputURL);

This code becomes a lot more readable and maintainable.

However, the browser did not understand this code so we needed a way where we can write this code, and eventually output the code that browsers understand.

This is what Webpack does!

Now we do have native modules in JavaScript. However, webpack provides additional things like bundling the scripts into a single file, importing CSS and other types of files from modules, and a lot of other things.

Check out Getting Started Guide of Webpack

Awesome! so webpack provided us with a way to write modulated code that is easier to maintain.

Next problem we had was browser compatibility.

Problem with Browser Compatibility

Different browsers use different engines for JavaScript. They all have different behaviours and old browser engines do not have the ability to understand the newly released syntax.

In 2015, a new version of JavaScript (ES6) was released which came with a number of features that were absolutely needed in language. However, these features did not work in old browsers.

From Babel's documentation-

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards-compatible version of JavaScript in current and older browsers or environments.

So this code from ES2020 version-

a = undefined ?? 1

Becomes this-

a = undefined != null ? undefined : 1

JavaScript Frameworks/Libraries

As mentioned earlier, today's web is more dynamic and thus the JavaScript has more responsibilities.

We can use jQuery by just including it with script, right?

<body>
  <h1>Hello</h1>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</body>

Then why we don't do it with React, Vue, and other frameworks?

Fun Fact! We actually can use them with CDN.
For example, we can use React with CDN using-

<html>
<body>
  <div id="root"></div>

  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

  <script type="text/babel">
  function App() {
    return(
      <div>Hello</div>
    );
  }

  ReactDOM.render(<App/>, document.querySelector('#root'));
  </script>
</body>
</html>

Okayyyy but then why we don't use it like this?

Frameworks today recommend an additional build step that lets them do the optimizations and provides better control.

Most of the JavaScript frameworks, in one way or the other, use webpack, Babel or their equivalents in development and build process.

Apart from just bundling, Frameworks provide additional functionality by making use of webpack and babel plugins.

Vue for example, uses a webpack plugin called vue-loader for Single File Components.

Babel, Apart from just converting code to backwards-compatible version, can also transpile different syntaxes. For React, babel converts JSX to React.createElement calls.

So, this-

function App() {
  return (
    <div>Hello</div>
  )
}

becomes-

function App() {
  return React.createElement('div', null, 'Hello');
}

In the earlier example of React on CDN, this step was happening on frontend whereas here, this happens on npm run build.

Check out List of Babel Plugins.

Thank you for reading the article 🌻

Also, In the article, I only mentioned webpack since it is popular but there are also other alternatives like Parcel, Rollup, and many more tools which perform similar operations.

Finally, Our needs are changing and so does the tools and the language and it's super exciting to be in this time and experience these tools and libraries making our lives easier.

Big thanks to all the people maintaining and contributing to these amazing projects <3

Do you know any other tool that you think has changed the web? drop them in the comments 👇

A Guide for Contributing to Any Open Source JavaScript Project Ever 💛

Saurabh Daware 🌻 — Sat, 04 Jul 2020 17:01:53 +0000

Lately, I had people asking how can they contribute to open-source projects when the codebase is large, or issues are taken, or good first issues seem difficult.

Initially, I've faced these questions as well and In this article, I will talk about how we can explore repositories, find the right issues to work on, and I will also try to answer some of the questions I just mentioned. 🐨🌻

Let's goooo 🎉

Table of Content

Finding the Right Repository
Finding the Right Issue
- Q. Every issue is taken, how do we find one?
- Q. Did find an issue but it seems difficult
Exploring Code
- Q. CODEBASES ARE HUGEE! How can we understand the whole codebase?
- Finding the right files in the code
- Projects that require additional knowledge
Some Useful Links

1. Finding the Right Repository 🕵

Contribute to something you use or find something that excites you and play around it before trying to contribute.

I will highly suggest using the tool/library/website, before contributing to it. This will give you a nice overview of what it does and how it works.

If you're uncomfortable with the process of making PR, you can first contribute to First Contributions Repository. You have to add your name to the list and send a PR! They have a nice guide to explain the process.

2. Finding the Right Issue 📚

In the issues section, you will find issues that have good first issue tag. Though it is not necessary, it is usually a sign from maintainers that 'hey these issues are relatively easy to tackle'. If you find any other issue that excites you more, go for it!

I will suggest trying to find issues related to documentation since they will be easier to get started but if you couldn't find such issues, that's ok as well you can pick whichever you like. As you get comfortable with the repository, you can go on picking more challenging issues.

And before we move forward, I know you might've heard this a lot and I am probably the 1000th person saying this but

🎉 EVERY. CONTRIBUTION. MATTERS 🎉

Even a spelling fix in documentation is a huge help to maintainers and you should totally be proud of such contributions!

Here's something I am proud of:

There was an extra bracket in the editor guide of DEV.to and I removed it :D

PR: https://github.com/thepracticaldev/dev.to/pull/4500

Q. Every issue is taken, how do we find one?

A lot of times in popular open-source projects, you will find that most of the good first issues are taken and someone is already working on them. In this case, you can join their chat channels. Projects use Slack, Discord, Spectrum, GitHub Discussions, or other chat channels where you can ask for help. In those chat channels, you can drop a message asking for help in finding issues. Maintainers will then help you in finding an issue for you.

Q. Did find an issue but it seems difficult...

This is very normal and even if you are experienced in contributing, you will likely find issues difficult in the first look when you're trying to contribute to a new organization.

You can always ask for help in comments of issues. Maintainers will then help you debug the problem and can point you to the right files that need changes but try exploring it yourself before asking for help.

3. Exploring Code 🤠

Before you start exploring the code, always read CONTRIBUTING.md file in the repository (If a repository does not have CONTRIBUTING.md, whoop whoop 🎉 That's your chance to send a Pull Request that adds CONTRIBUTING.md). It usually has a local setup guide and other information that you may need for contributing. You can either set it up locally and then explore, or explore on the GitHub itself and then do a local setup to make changes.

I prefer exploring locally since you get to play around and execute the code.

Awesome so now you've,
🗸 Decided the issue that you want to work on
🗸 Read the CONTRIBUTING.md

Now we exploreeeee yayyyyy!!! oh.. but wait..

Q. CODEBASES ARE HUGEE! How can we understand the whole codebase?

Fun fact, You don't have to understand the whole code 🎉

You will only have to care about the code that is related to the issue you've chosen.

3a. Finding the right files in the code.

Tip: In VSCode, you can CTRL + SHIFT + F to find something in a complete project or On GitHub, you can use the search bar to find the related code.

In websites/frontend repositories

If the project you're contributing to is a website, you can search for the words you see on the interface. E.g. If you want to contribute to the navigation bar of DEV, you can search for "Write a Post" button.

If it is not a website you can start finding the related functions by following the imports starting with an entry file.

In libraries, NPM Packages, and CLIs

In NPM packages, you would find package.json that has main attribute, the value of the main is the file that gets imported when you import/require that NPM package.

If you're contributing to a CLI, you would find bin in package.json that points to the file which is executed when you run a CLI command.

Mono-repos

Some projects like React, Gatsby, Next follow a mono repo. They have all the related projects in the same repository. In such projects, you would most probably find a folder called packages on root level and inside the packages you would find a folder with the name of the npm library (e.g packages/react, packages/next, packages/gatsby).

If you see the package.json file inside these packages, you would find the main key that points to the file which exports the functions that we usually import from these libraries.

Example

If you've used React, we usually import useEffect and other hooks like this, right?

import { useEffect } from 'react';

Which means the package react must be exporting the useEffect function 🤔

Let's find out!

As I've mentioned earlier, the mono-repos usually have a packages folder and inside that there is a package with the name of the NPM library ('react' in this case). So let's go inside packages/react/ 🚀

Now we want to find the entry file so we will look into package.json file.

Package.json of React has {'main': 'index.js'} which means everything that we import from react package, has to be exported from index.js. Let's see if it has useEffect function!

Whoop whoop 🎉 Yes it does!

Now you can follow the imports to that function to find a file that handles useEffect logic.

3b. Projects that require additional knowledge

If you've been building websites and webapps and then see the source code of React, the code will look different. Some repositories require knowledge of few additional topics which you may not come across otherwise.

Some projects are built on top of Abstract Syntax Trees whereas some repositories use a different language/libraries.

It is likely that you will find this code difficult in first look but more than difficult, it is different. It is different from what we JavaScript developers usually come across.

You can spend some time playing around the codebase and if you get stuck, you can always ask questions to the maintainers.

Some Useful Links

GitHub Repositories for Initial Contributions

First Contributions GitHub Repository - This is great to actually practice sending Pull Request (Fun Fact: I too started here :D)
Knaxus GitHub Organization - The aim is similar to first contributions but they will let you contribute to actual coding projects.

Resources to learn git and GitHub

YouTube Video, "Contributing to Open Source on GitHub for Beginners" by Kent C. Dodds https://youtu.be/k6KcaMffxac
YouTube Video, "git_basics - The basics that you need for Git & GitHub!" by Harsh Kapadia https://youtu.be/HF12-91iazM
Resources to learn git by GitHub https://try.github.io/

Thank you for reading this 🎉 If you have any questions about git, GitHub, or contributing, you can ask them in comments or reach out to me on my Twitter DMs @saurabhcodes.

🌻🌻🌻🌻

Hey you, talk about your side-projects!

Saurabh Daware 🌻 — Fri, 29 May 2020 08:19:01 +0000

Around 3 years ago, I started using GitHub. Though I've been working on some super cool projects, for 2 years all of these projects went unnoticed. The highest stars on my GitHub repository were 9 (8 classmates + me).

Why? Apart from sharing it with a few other classmates, I never really talked about these projects anywhere.

In this article, I am going to talk about how you can share your project so that it will reach a larger audience. Before that, here are some stats to convince you how it has helped me✨

Last year in August, I joined DEV and shared my side-project "PWAinit" here, and guess what? I got 10+ stars in a week!! Since then, I started talking about every project I build through articles, tweets, videos and it gave a huge boost to my GitHub babies.

My recent project text-to-handwriting got 100+ stars when I shared it on Twitter! After writing an article here, the number just kept growing and it has 600+ stars today 🥺🌻

(The Graph is from https://github.com/timqian/star-history)

The chances of your project being discovered from Google Search are very less unless the project is famous already. You have to talk about your project if you want people to use your project.

Do you know what the coolest part is? Even if it doesn't work, you lose nothing! The best-case scenario is, people will start using your project and it will be everywhere on the internet, and The worst-case scenario is, not many people will use it but even in this case, your project will definitely be more popular than it was when you did not talk about it. win-win 🎉

Awesome! so let's see what all options we have,

Share it with Friends, Parents, or Anyone you know. 🤗

Talking about GitHub, to get stars on your repository, you need stars on your repository... People trust projects that are being used and already have at least some amount of stars. You can get these initial stars by sharing your project with classmates, friends, and parents.

Tweet it out 🐦

Twitter is a great platform to share your projects! There are a lot of people on Twitter who would love to see what you're working on and would appreciate it.

If you have a cool project, then even having a few hundred or fewer followers can do wonders✨. A few months back, one of my projects got 80 retweets and 300 likes, and back then I only had around 150 followers on Twitter! Thanks to all the amazing people on Twitter🥺🌻

Write an Article 📖

DEV.to is super cool to quickly start writing. DEV.to helps your project reach the relevant people. You can use appropriate tags depending on the project (#python, #javascript, #machinelearning) and your project will reach the correct people.

After writing an article on DEV.to, make sure you go to the "manage" option on the right side of "edit" and Suggest a Tweet. This will help the DEV team discover your article and they may later post it on the Official Twitter handle @ThePracticalDev and other social media accounts.

Talk about your project in Meetups/Conferences 🎤

There are developer meetups that happen around the world where all the developers come together and talk about what they are working on and what they do. Some developers present what they've learned or built, in these meetups. You can apply to speak in one of these meetups and give a talk about your side project!

If you want to find a list of meetups that are happening in your city, you can check out Meetup.com.

Currently, due to pandemic, most of these meetups are happening online which is even better since you can talk at a meetup happening across the globe!

Other ways to talk about your project

Apart from the ones mentioned above, other ways to share your projects would be,

Creating 'How to' videos about your project on YouTube
Reddit
ProductHunt
Sharing it on Facebook, LinkedIn.

If you know any other ways to share a project, let me know in the comments!

Although it's not necessary to do everything mentioned in the article, definitely do the ones that you're fine doing.

Thank you and if you have any questions, you can drop me a DM on my Twitter @saurabhcodes 🐨🎉

Stay safe! and let me know your thoughts in comments 🌻

I made a Text-to-handwriting tool to write my college assignments for me 🤓

Saurabh Daware 🌻 — Sun, 19 Apr 2020 18:50:29 +0000

Hi everyone, I hope you all are safe and doing fine!

I prefer typing over writing and college told us to write some assignments and I was bored.

So instead of spending 1 hour to write assignments, I spent 3 hours to build a tool that writes assignments for me 🎉. It is called Text-to-handwriting (see... I'm really good at naming my projects)

Text to Handwriting converts text content to an image that looks like handwriting. So this is what the output looks like:

Output

Features

Draw diagrams
Change font-size, ink color, spacing, etc.
Upload font button for custom handwritings (so you can create a font of your handwriting from other online tools and upload the font file)

URLs

Tool

https://saurabhdaware.github.io/text-to-handwriting

GitHub

Do ⭐ the repository

saurabhdaware / text-to-handwriting

So your teacher asked you to upload written assignments? Hate writing assigments? This tool will help you convert your text to handwriting xD

https://saurabhdaware.github.io/text-to-handwriting/

I hate writing assignments so I made this tool that converts text to an image that looks like handwriting😛

Note: This project is now archived. Read the announcement at #138

🌠 Output

🤗 Contributing

Checkout Contribution Guide for local setup and contribution guide.

📚 Libraries used

html2canvas - Turns DOM into Canvas.
jsPDF - To generate PDF from images.
cypress - Testing Library
serve - Start local server

Bye! Have fun 🦄

View on GitHub

Twitter

Do share it with your twitter fam 🕺🏻
// Detect dark theme var iframe = document.getElementById('tweet-1242426542510067712-385'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1242426542510067712&theme=dark" }

Thank you for reading 🐨🎉 Let me know your thoughts comments.

You can follow me on Twitter @saurabhcodes and on GitHub @saurabhdaware

Bye! stay safe and remember we are going get through this 🌻

Overcoming the anxiety of creating your first open-source contribution 🦄

Saurabh Daware 🌻 — Sat, 21 Mar 2020 09:23:06 +0000

Note: This article is for the people who already know how to create Pull Requests but are too scared to create one or don't know how to exactly find an issue or a repository to work on. If you need help with the process of creating PR, you can check out Git and GitHub Guide on Atlassian or Harsh's Git Basic Guide

Open-source can be overwhelming and contributing to someone else's project can seem difficult at first.

"What if I mess everything up?", "What if I do something dumb with the code?", "I am ready... but these codebases are so huge... how do I find and fix bugs in this", "I can't understand the codebase... it's so huge".

... these are some of the questions I had after learning git and GitHub. Even though I knew how to create a Pull Request, it was either too scary to actually send a Pull Request to someone or I simply didn't understand their codebase.

This article will hopefully help you through this phase and will help you create your first Pull Request.

Let's see how you can find the right repository and an issue.

Exploring and finding the right repository and issue

For the initial pull request, the first-contributions repository is quite cool to get started. You have to add your name to CONTRIBUTORS.md and send a Pull Request.

firstcontributions / first-contributions

🚀✨ Help beginners to contribute to open source projects

First Contributions

It's hard. It's always hard the first time you do something. Especially when you are collaborating, making mistakes isn't a comfortable thing. We wanted to simplify the way new open-source contributors learn & contribute for the first time.

Reading articles & watching tutorials can help, but what's better than actually doing the stuff in a practice environment? This project aims at providing guidance & simplifying the way beginners make their first contribution. If you are looking to make your first contribution, follow the steps below.

If you're not comfortable with command line, here are tutorials using GUI tools.

Read this in other languages.

🇧🇩 🇧🇬 🇧🇷 🇨🇳 🇨🇿 🇩🇪 🇩🇰 🇪🇬 🇪🇸 🇫🇷 🏴 🇬🇷 🇬🇪 🇭🇺 🇮🇩 🇮🇱 🇮🇳 🇮🇷 🇮🇷 🇮🇹 🇯🇵 🇰🇪 🇰🇷 🇰🇵 🇱🇹 🇲🇩 🇷🇴 🇲🇲 🇲🇰 🇲🇽 🇲🇾 🇳🇱 🇳🇬 🇳🇴 🇳🇵 🇵🇭 🇵🇰 🇵🇱 🇵🇹 🇷🇺 🇸🇦 🇸🇪 🇸🇰 🇸🇮…

View on GitHub

This is super helpful as an initial practice.

or you can contribute to any of your friend's repository.

Even after contributing to the first-contributions repository, sending a pull request to an actual project and finding an issue in the repository can still seem a difficult thing to do.

You can start by

Contributing to something you use or
Contributing to something that looks cool

- Contributing to something you use.

One option you have is to contribute to a project that you currently use. You can make a list of the projects that you are using. NPM packages or Python packages, VSCode Extensions, Frameworks, Libraries, list everything you use!

While using these projects you might have discovered this one particular feature that you feel is missing or documentation for particular function needs to be better or maybe a bug that you found while using it or even a spelling mistake!

Search for the GitHub repository of that project and create an issue mentioning the changes you want to make. If your change is fixing a typo or obvious bug that does not require you to waste too much of your time and effort, then you can create a pull request directly. For feature requests, always create an issue before you start working on it.

Example?

Recently I was reading DEV.to's editor guide and found that there's an extra % in the guide so I quickly made a PR that removed the extra %.

Here's my PR

removed extra bracket from liquid tags in editor guide #4500

saurabhdaware posted on Oct 19, 2019

What type of PR is this? (check all applicable)

[ ] Refactor
[ ] Feature
[x] Bug Fix
[ ] Documentation Update

Description

Found that there was an extra curly bracket in liquid tag guide so I just removed it

Added to documentation?

[ ] docs.dev.to
[ ] readme
[x] no documentation needed

[optional] What gif best describes this PR or how it makes you feel?

View on GitHub

P.S. I am super proud of this Pull Request 🐨🎉

- Contributing to something that looks cool.

Contributing to something you use is not always an option. It can be difficult to find issues after one point so you can simply go to repositories that you find interesting and check out issues in that repository.

Some repositories have issues with labels like "Good First Issue", "Difficulty: Easy" or something equivalent. You can find these issues and comment with something like "Hey this seems cool! can I work on this?". If you need any help or extra information you can comment on this issue and ask for help.

Also, it's not necessary to only go through "Good First Issues" sometimes other issues can seem easier to you. So do go through other issues as well and choose the one that looks interesting!

Example?

During Hacktoberfest I was randomly searching for issues to work on and came across this issue on DEV.to about bad coloring in the profile theme. Do check out the conversation here:

Bad coloring on follow button #4106

sierisimo posted on Sep 25, 2019

Describe the bug

When reading an article, sometimes the button is not clear on what it says given the colors.

To Reproduce

I found it on this article: https://dev.to/jmfayard/how-kotlin-makes-editing-your-gradle-build-less-frustrating-232l

Just going there, without dark mode or anything, I'm not sure if I'm following or not this particular user.

Expected behavior

Text with the follow status for this user should be visible or selectable

Screenshots

Desktop (please complete the following information):

OS: MacOS
Browser: Firefox
Version: 69.0.1

View on GitHub

Awesome🎉 Now you have an issue to work on! Let's code!!

Writing code and sending a Pull Request

Here's a thing about large codebases, NOBODY KNOWS HOW THE WHOLE CODEBASE WORKS NOT EVEN THE MAINTAINER! so you don't really have to go through every single file trying to understand how every single function works.

You only have to search for the file where you want to make changes.

- Searching for the right file

I usually search using the text that is visible on the screen so If I want to make a change in DEV's navigation bar, I would search for "WRITE A POST" (visible in the desktop navigation bar)

Here are the search results:

- Local setup

Repositories have a local setup guide in README or CONTRIBUTINGmd. Usually, this includes cloning a repository and installing the required dependencies.

- Writing the code

Do go through the contribution guidelines of the repository to see if there are any instructions about writing the code. Even if you miss something that is fine maintainer will let you know after you make the PR. Going through contribution guidelines will just save your time of making changes later.

- Sending Pull Request

HIT THAT "CREATE PULL REQUEST" BUTTON!!!
and it's totally ok if you miss something or change the wrong function or a wrong file (trust me I've done that a lot). Maintainers will later request you changes if required. You can always commit to the branch and changes will reflect in the PR.

Finally, even small contributions play a major role in an open-source project so don't feel awkward while sending PR for fixing a typo. It is a fair contribution and as a maintainer, these contributions are super useful for me.

EVERY. CONTRIBUTION. IS. IMPORATNT.

Thank you for reading the article. If you have any questions or any help regarding open-source and GitHub, you can drop them in the comments or DM me on my Twitter @saurabhcodes.

You can also follow me on GitHub @saurabhdaware

Stay Home, Stay Safe. 🌻

DEV.to Widget v1.2.0🎉: GUI to create widget, new theme, data-sortby attribute and more!

Saurabh Daware 🌻 — Sun, 23 Feb 2020 18:56:18 +0000

Hello people! I just published the new version of DEV.to widget(v1.2.0).

Now you can create your widget from GUI🎉!!

Visit dev-widget.netlify.com/create and change the values!

Changelog

GUI!! dev-widget.netlify.com/create
data-sortby attribute with "reactions" and "date" values.
data-contentheight="200px" to change the height of the articles container.
Bug fixes (Shoutout to @Pika1998 for finding and fixing a bug!)
andd a new theme!! data-theme="cobalt2" (by @b3u, Thank you🌻)

Checkout dev-widget on GitHub

saurabhdaware / DEV-widget

Unofficial Widget/profile card for https://dev.to/

Thank you for reading!

Byeee 🐨🎉

HTML parsing and rendering🌻: Here's what happens when you type URL and press enter...

Saurabh Daware 🌻 — Wed, 19 Feb 2020 13:54:46 +0000

Hi there! I am writing a series of articles called "Web Performance Hacks" and this will be the first article from the series.

This article aims to show how browsers parse and render HTML and CSS which will eventually help us in understanding how we can trick the browser's parser to improve web performance.

TLDR;

Parsing and Rendering turn the HTML content into a web page with colors and backgrounds and pictures.
HTML Parsing: HTML Text -> Tokenization -> DOM Tree
CSS Parsing: CSS Text -> Tokenization -> CSSOM Tree
DOM and CSSOM are merged to form a Render Tree
Render Tree has all the information required to mark and paint the screen.
Render Tree -> Layout -> Paint
The layout does the maths for placing the elements
Paint paints the elements with colors, backgrounds, shadows, etc.

SO LETS GOOO!!!!

First, let's see what happens when you type a URL and hit enter

How browsers work

We type a URL and press the enter and the server responds with index.html. However, an HTML content is not what we see when we visit a website... we see a web page with colors and backgrounds and animations and pictures. So there's a process that turns the HTML content to a pretty webpage, and that is parsing and rendering!

Note: This is a zoomed-out view and there are other things like DNS resolving and other networking side of things that I've ignored to simplify the article

HTML Parsing

So we have HTML content at the beginning which goes through a process called tokenization, tokenization is a common process in almost every programming language where code is split into several tokens which are easier to understand while parsing. This is where the HTML's parser understands which is the start and which is the end of the tag, which tag it is and what is inside the tag.

Now we know, html tag starts at the top and then the head tag starts before the html ends so we can figure out that the head is inside html and create a tree out of it. Thus we then get something called a parse tree which eventually becomes a DOM tree as shown in the image below:

DOM tree is what we access when we do document.getElementById or document.querySelector in JavaScript.

Just like HTML, CSS goes through a similar process where we have the CSS text and then the tokenization of CSS to eventually create something called a CSSOM or CSS Object Model.

This is what a CSS Object Model looks like:

Awesome! now we have DOM and CSSOM so we got every information that is required to get our screens painted!

Rendering of Web Page

For rendering, a DOM and CSSOM are merged to form something called a Render Tree. Render Tree has the information required to mark and paint elements on the screen.

Also while forming a Render Tree, elements like <head>, <link>, <script>, and elements with 'display: none' in CSS are ignored since they are not rendered on the screen.

Note that the elements with 'opacity:0' or 'visibility: none' are included in the render tree, even though they are not painted on the screen they do take their positions and render as an empty space and thus are required for calculations.

Huushh! you've come a long way! drink a glass of water maybe?

So now we have a render tree with all the information that is needed to create a visual page. Now, the renderer will use this information to create a Layout and then a Paint, we will talk about Layout and Paint in next point before that here's what the overall process looks like:

Layout

The layout is where the elements are marked on the screen. The layout includes all the calculations and mathematics behind an element's position so it takes all the properties related to the position (height, width, position, top left right bottom, etc) from The Render Tree and places the elements on the screen.

Paint

After Layout, a Paint happens. Paint takes properties like color, background-color, border-color, box-shadow, etc. to paint the screen with colors.

After the paint, we see the content on the screen and the first time we see something other than a white screen is called 'First Paint'. The term First Paint is used in performance reports to show how long your website took to show something on the screen.

Gotchas!

Now, there are few important points to note in the whole process of parsing and rendering such as,

- Parsing halts when it comes across `<link>`, `<script>`, and `<style>` tag.

So if I have <script src="path/to/script"></script> in the middle of the HTML, The parser will halt there, will fetch the script, wait for the response, execute it and then it will continue the parsing. This is why we put <scipt> at the end of the body so that we can complete the parsing first.

A similar thing happens when we put <link rel="stylesheet" href="path/to/css" />. The parser fetches the CSS and makes sure that the CSSOM is ready before putting content on the screen. This is why we don't see a flash of CSSless content before the page load instead we see the content with its CSS loaded and applied.

Even though I said that the parsing halts when it comes across <link> and <script>, there are ways to avoid that using async and defer on the <script> tag and rel="preload" on <link> We'll see that in details in the next part of this series.

Anddd... we're done! Thank you for reading the article!!

Make websites work offline - Offline Storage. Making IndexedDB the Hero!

Saurabh Daware 🌻 — Wed, 12 Feb 2020 09:33:35 +0000

Note: This article does not expect you to know anything from Part 1.

Traditionally cookies were used for storing local data. But with HTML5 APIs, we got new options like localStorage, sessionStorage, WebSQL, and IndexedDB. In this article, we will specifically talk about IndexedDB.

Let's say you got Service Workers setup done and now your website loads offline. But... what if you want to store and retrieve a particular data? you cannot just fetch() from your API since the user is offline.

In this case, you can store data in IndexedDB!

The Indexed Database API is a JavaScript application programming interface provided by web browsers for managing a NoSQL database of JSON objects. It is a standard maintained by the World Wide Web Consortium.

~ Wikipedia

IndexedDB is provided by the browser and thus does not need internet for performing CRUD (Create Read Update Delete) operations. It is something like SQLite in Android (minus the SQL).

Implementation

If you prefer learning yourself from codesandbox, you can checkout IndexedDB Example.

For the browsers that use prefix, we can start with something like

window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction || {READ_WRITE: "readwrite"};
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;

if (!window.indexedDB) {
    console.log("Your browser doesn't support a stable version of IndexedDB. Such and such feature will not be available.");
}

Before we go to the next code, let me warn you about something: IndexedDB is not promisified and thus is largely dependent on onsuccess and onerror callbacks. There are libraries like idb that provide promisified version of IndexedDB but for this article I will stick to the vanilla IndexedDB code.

Open/Create Database

Opening a database automatically creates new database if it doesn't exist

let db;
const request = indexedDB.open("MyTestDatabase");
request.onsuccess = function(event) {
    db = event.target.result;
};

> Defining schema/values

When you create a new database, the onupgradeneeded event will be triggered. We can create objectStores here,

request.onupgradeneeded = function() {
    const db = event.target.result;
    const userObjectStore = db.createObjectStore("users", {keyPath: "userid"});
    userObjectStore.createIndex("name", "name", { unique: false });
    userObjectStore.createIndex("email", "email", { unique: true });
}

Thus, the complete code to create/open a database would look something like:

async function openDatabase() {
    return new Promise((resolve, reject) => {
        const request = indexedDB.open("MyTestDatabase");
        request.onsuccess = function(event) {
            resolve(event.target.result);
        }

        request.onupgradeneeded = function() {
            const db = event.target.result;
            const userObjectStore = db.createObjectStore("users", {keyPath: "userid"});
            userObjectStore.createIndex("name", "name", { unique: false });
            userObjectStore.createIndex("email", "email", { unique: true });
        }       
    }) 
}

openDatabase()
    .then(db => {
        // db instance accessible here

    })

Add data

Now we have db object accessible in openDatabase() promise. We can use this object to add/read/delete the data from IndexedDB.

(async function() {
    const db = await openDatabase();

    // Add
    const userReadWriteTransaction = db.transaction("users", "readwrite");
    const newObjectStore = userReadWriteTransaction.objectStore("users");

    newObjectStore.add({
        userid: "4",
        name: "John Doe",
        email: "josn@gmail.com"
    });

    userReadWriteTransaction.onsuccess = function(e) {
        console.log("Data Added");
    }

})();

Remove data

const request = db.transaction("users", "readwrite")
    .objectStore("users")
    .delete("4");

request.onsuccess = function(event) {
    console.log("Deleted!");
};

Read and Update Data

const readTransaction = db.transaction(["users"]);
const objectStore = transaction.objectStore("customers");
const request = objectStore.get("4");

request.onsuccess = function(event) {
    console.log("User is " + request.result.name);
    const data = event.target.result;
    data.name = "John Doe";

    const updateRequest = objectStore.put(data);
    updateRequest.onsuccess = function(event) {
        console.log("Data Updated!");
    }
};

Example

Usecase?

If you have an API that always (or most of the times) returns same values, you can call API, store the response in IndexedDB and when next time user calls the API, you can return it from IndexedDB right there and maybe later call API and store the updated value.
I use IndexedDB in my application PocketBook which is a Google Keep alternative where you can store your todos, goals, etc. PocketBook uses IndexedDB by default to store notebook's information. Thus you can use pocketbook even when you are offline!

MDN Docs: https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB
codesandbox example: https://codesandbox.io/s/indexeddb-example-trv2f
PocketBook: https://pocketbook.cc

Thank you for reading! If you have any interesting project where you're using IndexedDB, do drop the link below!

Make websites work offline - What are Service Workers and How to get a custom App Install button on the website.

Saurabh Daware 🌻 — Tue, 07 Jan 2020 14:03:58 +0000

Hey everyone,

This is a little different from my usual posts (finally a post without #showdev tag 😂). In this post, I will be explaining what are Service Workers, How to implement them with Vanilla JavaScript, and finally How to get the custom "Add to Homescreen" banner on the website.

Table of Content

Why do we need Service Worker?
How Service Worker works?
- Service Worker Lifecycle
How to implement Service Worker
- 1. Service Worker Registration
- 2. Handling Requests with Service Worker
  - 2a. Storing URLs to Cache
  - 2b. Loading file from the Cache
  - 2c. Handling new Cache version
- 3. Complete example for implementing Service Worker (If your deadline to implement service worker is tomorrow, just jump here.)
  - 3a. Code for loading index.html and index.js offline
  - 3b. Code for loading offline.html when you are offline
Custom "Add to Homescreen" banner (If you are only here for how to get custom App Install button on website, you can jump here)
Helpful Links

Why do we need Service Worker?

Do you use Instagram (The Native App)? on the Home Screen, it shows pictures right? what if you turn off the internet? Does it crashes or show dinosaur game like chrome? well nope...

Instead, Instagram shows older posts that were already loaded. Though you cannot refresh the feed or like a picture it is still pretty cool to be able to see the older posts right?

Service Workers let you implement something similar on the web. You can avoid the chrome's dinosaur and show a custom offline page instead! or you can show a part of your website (or a whole website considering it is small) while the user is browsing offline.

Here's what twitter shows when you go offline:

In fact, DEV.to has one of the coolest offline pages ever! They have a coloring canvas as an offline page! super cool right? Here's how it looks:

And here's a humblebrag:
Last year I made a game called Edge of The Matrix that works offline! since the game is not that large I was able to cache most of the parts of the website and make the entire game work offline.

As you can see the Left image is when you are online and right when you are offline. When you are offline the game looks the same (minus the font).

How do they work? hah.. saurabh.. obviously magic.

Well, They use Service Workers🎉 With the three examples above I wanted to give an idea of how websites can use Service Workers in various ways.

So are you all excited to learn how they work and how to implement them!!? Lezgooo!!!

How Service Worker works?

Note: This is a very surface-level explanation of how service worker works, After reading the article if you are interested in knowing more about them, I have linked some references at the end of the article

Service Worker has access to cache, requests coming out from your applications, and the Internet.

Since you have access to these three things, you can write code and handle the requests the way you want.

Service Worker can listen to the requests from the user,

Here's how we usually prefer our requests to load with the service worker registered:

User hits your website's URL (and thus requests for your /index.html)
Service Workers have a fetch event listener that listens to this event.
Now since the service worker has access to caches object which controls the cache. It can check if the /index.html exists in the cache.
If index.html exists in cache: respond with the index.html file from the cache. Else: pass on the request to the internet and return the response from the internet.

Service Worker Lifecycle.

When you first register the service worker, It goes to install state and after installing the service worker it goes to active.

Now, let's say you updated the service worker, In this case, the new service worker goes to install and then waiting state while the old service worker still is in control and is active.

After closing the tab and opening the fresh instance of the website, the service worker from the waiting state takes control and goes active.

Google Developers site has a nice detailed explanation of Service Worker Lifecycle, I will suggest checking it out: https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle

How to implement Service Worker

Before we go into code here are a few things that you should know:

First, you need to tell your website where your service worker file is. (i.e. Register Service Worker).
Service Worker file does not get access to DOM. If you've worked with Web Workers before, the Service Worker is also a kind of a JavaScript Worker.
You can postMessage back and forth from the Service Worker file which allows you to talk to the Service Worker.

1. Service Worker Registration.

In your index.html (or any of the .js file which is sourced to .html)

<html>
<body>
<!-- Your HTML -->

<script>
// ServiceWorker Registration
if('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
        navigator.serviceWorker.register('serviceworker.js')
            .then(registration => {
                // Registration was successful
                console.log('ServiceWorker registration successful with scope: ', registration.scope);
            })
            .catch(err => {
                // registration failed :(
                console.log('ServiceWorker registration failed: ', err);
            });
    });
}
</script>
</body>
</html>

This will register the file /serviceworker.js as a service worker. Now all your service worker handling code will go into the /serviceworker.js file.

2. Handling Requests with Service Worker

2a. Storing URLs to Cache.

Yay🎉, we have Service Worker registered! Now we want to add our necessary files into the cache so that we can later load them without the internet connection.

In serviceworker.js,

const CACHE_NAME = "version-1";
const urlsToCache = [
    'index.html',
    'assets/logo-192.png',
    'assets/coverblur.jpg',
    'index.js'
];

// Install the service worker and open the cache and add files mentioned in array to cache
self.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(function(cache) {
                console.log('Opened cache');
                return cache.addAll(urlsToCache);
            })
    );
});

caches.open(CACHE_NAME) open the caches that match the name passed to it ("version-1" in our case).
cache.addAll(urlToCache) adds all the URLs to the cache.

Now we have all the files that we need to load offline in our cache.

2b. Loading file from the Cache.

In serviceworker.js,

// Listens to request from application.
self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request)
            .then(function(response) {
                if (response) {
                    // The requested file exists in the cache so we return it from the cache.
                    return response;
                }

                // The requested file is not present in cache so we send it forward to the internet
                return fetch(event.request);
            }
        )
    );
});

caches.match(event.request) checks if the match for event.request is found in the CacheStorage and if it does it responds it in promise.

If the file is not present in the cache, it returns a falsy value and thus you can send the request further to fetch data through the internet.

(If you want to load an offline page, you can check if the fetch is throwing error. If the fetch call fails, in the .catch() block you can respond with offline.html. I have mentioned an example to load offline page below.)

2c. Handling new Cache versions (OPTIONAL - You can avoid this if you hate your life).

So Woah! You've come a long way. Maybe drink water here.

"But wait, Saurabh, I already know how to add to cache and respond from the cache and my code is perfectly working so isn't this article suppose to end here?"

Well yes but actually no.

Here's a problem,
Now you make changes in your code or let's say you added a new JavaScript file. You want those changes to reflect in your app but.. your app still showing older file.. why? because that is what the service worker has in the cache. Now you want to delete the old cache and add your new cache instead.

Now, what we need to do is, we need to tell the service worker to delete all the caches except the new one that has just been added.

We've given caches a key/name right? "version-1". Now if we want to load new cache we will change this name to "version-2" and we would want to delete the cache of name "version-1"

This is how you would do that.

In serviceworker.js,


self.addEventListener('activate', function(event) {
    var cacheWhitelist = []; // add cache names which you do not want to delete
    cacheWhitelist.push(CACHE_NAME);
    event.waitUntil(
        caches.keys().then(function(cacheNames) {
            return Promise.all(
                cacheNames.map(function(cacheName) {
                    if (!cacheWhitelist.includes(cacheName)) {
                        return caches.delete(cacheName);
                    }
                })
            );
        })
    );
});

So since we updated the CACHE_NAME to "version-2". We will delete every cache that is not under "version-2".

When we have a new Service Worker activated we delete the unnecessary old cache.

3. Complete Example for Implementing Service Worker

3a. Code for loading `index.html` and `index.js` offline

`index.html`

<html>
<body>
<!-- Your HTML -->
<script>
// ServiceWorker Registration
if('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
        navigator.serviceWorker.register('serviceworker.js')
            .then((registration) => {
                // Registration was successful
                console.log('ServiceWorker registration successful with scope: ', registration.scope);
            })
            .catch(err => {
                // registration failed :(
                console.log('ServiceWorker registration failed: ', err);
            });
    });
}
</script>
</body>
</html>

`serviceworker.js`

const CACHE_NAME = "version-1";
const urlsToCache = [
    'index.html',
    'index.js'
];

// Install the service worker and open the cache and add files mentioned in array to cache
self.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(function(cache) {
                console.log('Opened cache');
                return cache.addAll(urlsToCache);
            })
    );
});

// Listens to request from application.
self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request)
            .then(function(response) {

                if (response) {
                    console.log(response);
                    // The requested file exists in cache so we return it from cache.
                    return response;
                }

                // The requested file is not present in cache so we send it forward to the internet
                return fetch(event.request);
            }
        )
    );
});


self.addEventListener('activate', function(event) {
    var cacheWhitelist = []; // add cache names which you do not want to delete
    cacheWhitelist.push(CACHE_NAME);
    event.waitUntil(
        caches.keys().then(function(cacheNames) {
            return Promise.all(
                cacheNames.map(function(cacheName) {
                    if (!cacheWhitelist.includes(cacheName)) {
                        return caches.delete(cacheName);
                    }
                })
            );
        })
    );
});

3b. Code for loading `offline.html` when you are offline

To load offline.html instead of the actual site, we would add offline.html to urlsToCache[] array. This would cache the offline.html to your CacheStorage.

const urlsToCache = ['offline.html'];

If you are offline, the fetch operation would fail. So from the catch block, we can return our cached offline.html.

Now replace this block with the fetch listener block in the example above.

// Listens to request from application.
self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request)
            .then(function(response) {

                // You can remove this line if you don't want to load other files from cache anymore.
                if (response) return response;

                // If fetch fails, we return offline.html from cache.
                return fetch(event.request)
                    .catch(err => {
                        return caches.match('offline.html');
                    })
            }
        )
    );
});

Custom "Add to Homescreen" banner.

This is how a default Add to Homescreen banner looks like in Chrome:

To get this banner (According to Chrome - https://developers.google.com/web/fundamentals/app-install-banners/)

The web app is not already installed and prefer_related_applications is not true.

Includes a web app manifest that includes:

short_name or name

icons must include a 192px and a 512px sized icons

start_url

display must be one of: fullscreen, standalone, or minimal-ui

Served over HTTPS (required for service workers)

Has registered a service worker with a fetch event handler

If your app passes these criteria, Users on your website will get the Add to Homescreen banner like the one shown in the image above.

But instead of using the default banner we can even make a "Download App" button with our own UI.

This is how I show "Download App" button in my web app PocketBook.cc:

When a WebApp is downloadable (that is it passes the criteria set by the browser), it fires an event called beforeinstallprompt.

we can listen to this event with window.addEventListener('beforeinstallprompt', callback)

We store this event in variable so we can call the .prompt() method later.
.prompt() method opens the Add to Homescreen dialog bar. So we can call this method when our Download App button is clicked.

In index.html, you can add

<button class="download-button">Download App</button> <!-- Keep its display:none in css by default. -->

and in JavaScript,

let deferredPrompt;
const downloadButton = document.querySelector('.download-button');

window.addEventListener('beforeinstallprompt', (e) => {
    // Stash the event so it can be triggered later.
    deferredPrompt = e;

    // Make the Download App button visible.
    downloadButton.style.display = 'inline-block'; 
});

downloadButton.addEventListener('click', (e) => {
    deferredPrompt.prompt(); // This will display the Add to Homescreen dialog.
    deferredPrompt.userChoice
        .then(choiceResult => {
            if (choiceResult.outcome === 'accepted') {
                console.log('User accepted the A2HS prompt');
            } else {
                console.log('User dismissed the A2HS prompt');
            }
            deferredPrompt = null;
        });
})

Helpful Links:

I hope this article was helpful. This article was part 1 of my series Make Websites work offline and the next part would be about IndexedDB.

Thank You for reading this🦄 Do comment on what you think and if you are using a service worker for something different and interesting, do let me know in the comment section!

byeeeee 🌻.

My year in review - 2019🌻 || Started Writing Articles, Travelled the country, and Contributing to open-source🎉

Saurabh Daware 🌻 — Tue, 31 Dec 2019 20:52:50 +0000

I'm just writing my heart out in this article, sorry if this gets boring or lengthy but it is for me to remind myself the things I did this year :)

Hi, I am Saurabh (pronounced as SAW-rub). 2019 was the worst and best year at the same time and I don't know how to express but you get it right? Professionally and Emotionally I had hit my lowest and highest. 2019 was a roller coaster!

Moving further in this article I will headline the important events, some of them went well some of them didn't work out but they are part of my 2019 and they did end up teaching me something.

January - March

Google Summer of Code

So I started 2019 by preparing for the GSoC,

The Google Summer of Code, often abbreviated to GSoC, is an international annual program, first held from May to August 2005,[1] in which Google awards stipends, which depends on the purchasing power parity of the country the student's university belongs to,[2] to all students who successfully complete a requested free and open-source software coding project during the summer. The program is open to university students aged 18 or over.

-- Wikipedia

I've always been more into the maintaining and creating side of the open-source and less into contributing and I was scared of pushing a wrong code or doing something dumb to the repository but I finally decided to break this anxiety by participating in Google Summer of Code.

I started contributing to an organization that I liked and made a small PR (3 lines of code to check the validation of a form field) and IT WAS MERGED! I was extremely happy as it was my first PR into someone else's repository.

the results were announced in April and I couldn't make it through and I was sad but I think it's ok to be sad and the whole experience of writing the application was extremely helpful for me to get started with the open-source.

Built website for the College Technical Fest!

Every year our college arranges a technical festival called Avalon. I was part of the web team in Avalon 2018 as well and in 2019 I was the head of Creativity Team (WEB) and building a website was all up to me.

I always loved developing portfolio sort of websites. They let you go out of the box and there isn't any "standard" way for these websites.

For Avalon 2019, our theme was about Mars Exploration so I decided to build something totally out of the world (hehe).

Here's how that website looked like:

I used ThreeJS to build mars, its moons, and the sun! and you could move it with your mouse/touch.

The code behind the rocket is the piece of code that I am most proud of. I change the bottom and right values on the scroll event and there's some trigonometry to make it move that way.

Travelling to Bangalore for Hackathon

We are a team of 4 people and we usually apply to a lot of hackathons and so we applied to a hackathon in Bangalore and we were shortlisted for the offline round! we traveled from Mumbai to Bangalore and it was the first time for me to travel to a different state for a hackathon and also the first time in Bangalore.

Fun Fact: Bangalore is sometimes referred to as a "Silicon Valley of India"

It was an RPA hackathon and we were told to build a bot that performs some actions like, reading price of the products and applying some filters on an E-commerce website. We didn't win this either but it was a fun experience to go out with friends.

March - August

These 6 months, was the most difficult time I ever faced in my life. I couldn't do much during this and was not very stable emotionally. I usually try to avoid coding when I am not feeling my best.

After June I started coding actively but it was only because I had to. After June things got worse, to be honest.

A Blockchain hackathon in Hyderabad.

In June, we were selected in another hackathon which was in Hyderabad. Even though I was not at my best (probably I was at my worst) I went for the hackathon and liked those few days.

We built a Smart Contract application to sell properties without paperwork (sort of like an Amazon for buying a house)

August - December

August was all about recovery🌻 I went on solo dates, started reading a book (The Grand Design by Stephen Hawking and Leonard Mlodinow), and started appreciating people I have around.

Appreciating people helped me a lot to get back that positivity I had lost in the last few months. (I can literally write a whole separate article on how appreciating other people help me.)

I went to college and the college was closed so I just started roaming around my college and found this place.

Started writing on DEV

AANDDD FINALLY I did the best possible thing!! wrote an article!!! on DEV!!!! yaaaay!! it was one of the best decisions of my life!!

Turn existing website to PWA in 1 minute using PWAinit

Saurabh Daware 🌻 ・ Aug 27 '19

#npm #node #javascript #pwa

I was not really sure if I was ready but I simply wrote about the thing that I made and had zero expectations from the article and surprisingly it got 65 REACTIONS! this was (and still is) a huge number for me.

The best part about DEV is the people. The community is soo positive and has always been super supportive with whatever I wrote.

Hackathon in Pune

This time we finally won! not the first prize though we were runner ups still it was very special. We finally had a trophy in our hands. We built an automated plagiarism checker to check the plagiarized content from technical papers and reply to the user accordingly.

Trip with family to Gujarat

We trekked to the highest mountain in Gujarat, Girnar hill which is 1031m tall. It was one of the best experiences of my life!

Hacktoberfest

AND THEN ANOTHER BIG MONTH! OCTOBER! finally time for Hacktberfest! I was extremely excited about the Hacktoberfest. I was now comfortable with the contributions part still I never had any major contributions on GitHub.

I decided to break this and make some meaningful contributions and finally ended up contributing to DEV.to, React, Prompts, Tomorrow App.

Writing a color preview feature for DEV was my favorite contribution.

This is how I prototyped the idea to Jess 😂😭😭

Comment for #4106

saurabhdaware commented on Sep 30, 2019

How about having a DEV logo in edit profile that changes color as you change background color and color? This can help you tell if background color and color match properly. something like: (Sorry for my drawing skills I edited in instagram stories 😭 🤣 )

View on GitHub

Here's the pull request:

Fix #4106: Showing color preview in Edit Profile #4212

saurabhdaware posted on Oct 03, 2019

What type of PR is this? (check all applicable)

[ ] Refactor
[x] Feature
[ ] Bug Fix
[ ] Documentation Update

Description

Fixes #4106.

The current color-picker does not show a preview so it is hard to guess the color contrast. I added a preview (screenshot added below) which shows your selected colors.

Also, Added a <input type="color"> which makes it is easy to select the color.

Since there are other pages that depend on 'color-picker' class I did not change anything in colorPicker.js or any of the styles of current color-picker. I created a new file colorPreview.js and some new classes in html.

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

Mobile

Desktop

Recording

Added to documentation?

[ ] docs.dev.to
[ ] readme
[x] no documentation needed

[optional] What gif best describes this PR or how it makes you feel?

My first PR To DEV! I was not very sure if I could do this or not since DEV's codebase is probably the largest codebase I've ever worked on but now I'm super proud of myself to complete this 🌻

Me showing this code to everyone :

View on GitHub

So I finished my Hackatoberfest successfully🎉

Also, received my tee and stickers of Hacktoberfest!
P.S. I ordered the wrong size t-shirt so now my whole body fits into that t-shirt😂😭 I still love it!

Job Interview

I usually apply to a lot of companies and very few replies and one of the companies that I always wanted join replied and asked me to send a resume. I did and they selected my resume and I cleared the next few rounds as well then there was an interview with the head developer and it was the BEST INTERVIEW OF MY WHOLE LIFE! She gave a very fair chance to prove myself and we had a discussion about building a snake game. It was a super cool conversation and I did not feel scared or uncomfortable even for a bit. However, I was rejected later in the algorithms round. Still, this will always be the best interview I ever had.

Sometimes it's not really about getting selected but it's that experience.

And if you feel sad, just remember that it's ok to be sad, It's ok if you want to cry, that's what humans do! Crying just makes you realize how important that particular thing was.

When I started my year my plan was to complete the Google Summer of Code, Get good marks and get a good job and my 2019 was literally everything but that 😂😭😭

While we want our lives to be just like we planned. Sometimes we have to appreciate this non-perfectness in life. At the start of my year, I had no idea that something like DEV existed. Writing articles was never in a plan, I built PWAinit, ProjectMan, PocketBook and a lot of other things this year which were not in a plan as well.

Now when I look back to 2019, It wasn't exactly the way I wanted but it still was pretty cool and it is something to appreciate. I am super proud of myself for getting through this year. Also, want to thank the people that I have in my life who are always there for emotional support.

Thank you and wish you all a very Happy New Year🎉🌻

I made PocketBook.cc 🌻 a Google Keep alternative that lets you create notebooks and manage important notes📝🦄

Saurabh Daware 🌻 — Sat, 14 Dec 2019 19:40:59 +0000

Note: I've moved the domain from .ml to .cc

A lot of times I have to note down something important. Sometimes it could be an important point of tech or I might have to write down my feelings and Notebook, Pen are not always accessible.

With PocketBook.cc, I wanted to create a place where you can write down anything you want! It could be your secret or an important point or your todo list.

PocketBook stores data in browser storage(IndexedDB) by default so that you can write down your deepest secrets without letting any company read your data.

Demo

[A 37-second youtube video of pocketbook.cc demo]

Key Features

Stores data in browser storage by default thus keeping your data private.
Works offline.
You can use it without a login/registration.
Downloadable (Go to more options on the main page and click download button(I've only tested in Chrome yet))
You can choose to make your notebook remotely accessible which puts notebook content in cloud storage and thus you can edit its content from other devices as well.

So what do you guys think about this project? Do let me know in the comments below!

Thank you so much for reading this🌻

For more information on how I store the data, check out https://pocketbook.cc/info

PocketBook Link: https://pocketbook.cc

Edit2: I've moved the website from pocketbook.ml to pocketbook.cc (Some countries and browser were not supporting the domain), Since the indexeddb data is domain-specific, the notebooks you made on pocketbook.ml will not be accessible from .cc. For the users who have data on .ml domain will get an option to move data on the main page of .ml website

DEV Community: Saurabh Daware 🌻

I made a Profile Card Widget for Bluesky 🦋

I made DEV.to widget for websites/blogs

Saurabh Daware 🌻 ・ Oct 20 '19

Here's how it looks like

How to use bsky-widget?

In Vanilla Projects

In Frameworks

React Example

Customization

saurabhdaware / bsky-widget

Unofficial Bluesky widget to render cute profile cards in your websites ^_^

Bluesky Widget

Usage

Usage as NPM module

Install

Import and Use

Props

The Evolution of FrontEnd Development🌻: What is WebPack, Babel, and Build-steps in Frameworks.

Lets talk about the basic web!

Problem with Maintainability

Problem with Browser Compatibility

JavaScript Frameworks/Libraries

A Guide for Contributing to Any Open Source JavaScript Project Ever 💛

1. Finding the Right Repository 🕵

2. Finding the Right Issue 📚

Q. Every issue is taken, how do we find one?

Q. Did find an issue but it seems difficult...

3. Exploring Code 🤠

Q. CODEBASES ARE HUGEE! How can we understand the whole codebase?

3a. Finding the right files in the code.

In websites/frontend repositories

In libraries, NPM Packages, and CLIs

Mono-repos

Example

3b. Projects that require additional knowledge

Some Useful Links

GitHub Repositories for Initial Contributions

Resources to learn git and GitHub

Hey you, talk about your side-projects!

Share it with Friends, Parents, or Anyone you know. 🤗

Tweet it out 🐦

Write an Article 📖

Talk about your project in Meetups/Conferences 🎤

Other ways to talk about your project

I made a Text-to-handwriting tool to write my college assignments for me 🤓

Output

Features

URLs

Tool

GitHub

saurabhdaware / text-to-handwriting

So your teacher asked you to upload written assignments? Hate writing assigments? This tool will help you convert your text to handwriting xD

🌠 Output

🤗 Contributing

📚 Libraries used

Twitter

Overcoming the anxiety of creating your first open-source contribution 🦄

Exploring and finding the right repository and issue

firstcontributions / first-contributions

🚀✨ Help beginners to contribute to open source projects

First Contributions

If you're not comfortable with command line, here are tutorials using GUI tools.

Read this in other languages.

- Contributing to something you use.

Example?

removed extra bracket from liquid tags in editor guide #4500

What type of PR is this? (check all applicable)

Description

Added to documentation?

[optional] What gif best describes this PR or how it makes you feel?

- Contributing to something that looks cool.

Example?

Bad coloring on follow button #4106

Writing code and sending a Pull Request

- Searching for the right file

- Local setup

- Writing the code

- Sending Pull Request

DEV.to Widget v1.2.0🎉: GUI to create widget, new theme, data-sortby attribute and more!

How to use `bsky-widget`?

- Parsing halts when it comes across `<link>`, `<script>`, and `<style>` tag.

3a. Code for loading `index.html` and `index.js` offline

`index.html`

`serviceworker.js`

3b. Code for loading `offline.html` when you are offline