teleren/devto huggingface dataset:
#Javascriptmas  2020
Tags: javascript, html, css
Published: 2020-12-29 18:15:55

I spent my Christmas this year with [Scrimba's](https://scrimba.com/) [#JavaScriptmas](https://scrimba.com/learn/adventcalendar) and I have to say for me it was a ton of fun, and i am glad [Scrimba](https://scrimba.com/) did this for us.It was a bit challenging but helped me put together my theoretical knowledge to practical use and also i got to know few things i didn't know about before and in doing so built my confidence.

So here are my solutions to these challenges.
'And yes this is my first blog'
Day 1 - [Candies]( https://scrimba.com/scrim/co6684e528a52ff09d266a328 )
Day 2 - [Deposit Profit](https://scrimba.com/scrim/cof0d4687a951080a27308c32)
Day 3 - [Chunky Monkey](https://scrimba.com/scrim/co5ba4f1eb9d9f6616f3187a4)
Day 4 - [Century From Year](https://scrimba.com/scrim/co2b74dec892893293283e1ce)
Day 5 - [Reverse a String](https://scrimba.com/scrim/coe02414cab1bd571620809b8)
Day 6 - [Sort by Length](https://scrimba.com/scrim/co2db41c1bde1cb7f1a7578ce)
Day 7 - [Count Vowel Consonant](https://scrimba.com/scrim/co3f240c2ba144192958c253a)
⭐️ Day 8 - [The Rolling Dice](https://scrimba.com/scrim/co3f0401ea27a841e79a7ca9e)
Day 9 - [Sum Odd Fibonacci Numbers](https://scrimba.com/scrim/co9ca4c949edf3810421186e8)
Day 10 - [Adjacent Elements Product](https://scrimba.com/scrim/coabd496b87a1885e83303b84)
Day 11 - [Avoid Obstacles](https://scrimba.com/scrim/co3644e5181a3343b7a9fa861)
Day 12 - [Valid Time](https://scrimba.com/scrim/co6d946bdb212ebd13b30f8ab)
Day 13 - [Extract Each Kth](https://scrimba.com/scrim/co2ed41ee9a2d141a13fa28a6)
Day 14 - [Maximal Adjacent Difference](https://scrimba.com/scrim/co3284cdaa083d4dd1e138ee5)
⭐️ Day 15 - [Carousel](https://scrimba.com/scrim/coc584b48a7d6cbf4d5947fd8)
⭐️Day 16 - [Insert Dashes](https://scrimba.com/scrim/co0874be1bc992584fac16172)
Day 17 - [Different Symbols Naive](https://scrimba.com/scrim/coc3642a286027d6e2328e1ce)
⭐️ Day 18 - [Array Previous Less](https://scrimba.com/scrim/co2be4129adc3c61a3f4849e9)
⭐️Day 19 - [Alphabet Subsequence](https://scrimba.com/scrim/co9254dc2b4ddc1d40c875c19)
Day 20 - [Domain Type](https://scrimba.com/scrim/coe1240789c96cbfc1decde5e)
Day 21 - [Sum of Two](https://scrimba.com/scrim/co5814557b31b14336ec12a05)
Day 22 - [Extract Matrix Column](https://scrimba.com/scrim/co41c4b6c87699437905a0ba0)
⭐️ Day 23 - [Social Media Input](https://scrimba.com/scrim/cobbf4571871e4bc8e76dacfc)
⭐️ Day 24 - [Test Your Agility](https://scrimba.com/scrim/co5dc4fdab10d942292ccf5d2)

⭐️ Interesting ones.⭐️
Thanks for Reading.
Happy new year 2021(In advance).
Music for Coding
Tags: javascript, discuss, python, cpp
Published: 2020-12-29 18:01:02

Okay, so before I start, I would confess that I don't listen to music for greater concentration, in fact listening music distracts me a lot more, but listening music keep me away from other noises which include sound from Television, someone talking on the phone etc.

So, I just thought of sharing with you my playlist. Not to mention, these are my preference so feel free to share your playlist in the comments.

1. [Interstellar Instrumental](https://www.youtube.com/watch?v=r49QJgp-Azc)
    Ever since I came across this 1-hour long art-piece of [Hans Zimmer](https://en.wikipedia.org/wiki/Hans_Zimmer), it's my go-to music for any important task.

2. [Inception Instrumental](https://www.youtube.com/watch?v=U5IailIzqdc)
    Talking about Interstellar, how can we forget to mention Inception. Another art piece by Hans Zimmer. I literally listen to the two in the loop.

3. [Batman Trilogy Soundtrack](https://www.youtube.com/watch?v=iXv92OgO4yY)
    "Why do we fall, Bruce?"

4. [The Score](https://www.youtube.com/user/thescorenyc)
    Looking for some adrenaline booster and out of stock for Red Bull? Checkout [The Score's youtube playlist](https://www.youtube.com/results?search_query=the+score) and you would realise they really need some serious attention.
   Some of my recomendation:
    a) [Stonger](https://www.youtube.com/watch?v=cNld-AHw-Wg)
    b) [Unstoppable](https://www.youtube.com/watch?v=_PBlykN4KIY)
    c) [Born for this](https://www.youtube.com/watch?v=aJ5IzGBnWAc)

These were mine preference. What are yours? Tell us in the comments.

*Feel free to connect with me over [LinkedIn](https://www.linkedin.com/in/ashutoshdash1999/) and checkout my profile on [GitHub](https://github.com/AshutoshDash1999)*.
Learning HTML and CSS...
Tags: 100daysofcode, codenewbie, html, css
Published: 2020-12-29 17:47:55

I began my journey of learning HTML thereafter CSS about a week ago. Today, I am glad to say that I have finished learning the basics of HTML and CSS. Now I'm learning to build a simple basic webpage and form with only HTML & CSS to get my hands dirty. The profile card image that you see on the cover page of this post is built by me. Pretty basic. 
Yes, there's a lot to learn more and practice consistently to get really good at it. I'm excited to take up further steps to learn and develop more skills.

But wait, I am confused about whether I should learn Javascript next or should I learn Sass and bootstrap next? 

Please, suggest to me what should I learn next.
Thank You.
HTML Tutorial for Beginners
Published: 2020-12-29 17:44:00

HTML stands for hypertext pre-processor which is used to create a static web page. Some tags will be used in the HTML, it can contain three main tag Opening tag, Content tag, and Closing tag. In HTML Tutorial for Beginners, every topic is given step by step so that you can easily learn it in an easy way. To know more information visit here. https://www.phptpoint.com/html-tutorial/
Array.flat()
Tags: javascript, codenewbie, webdev, beginners
Published: 2020-12-29 17:40:31

```js
const array = [1, [2, [3, 4, [5, 6]]], 7];

console.log(array.flat(1)); // [ 1, 2, [ 3, 4, [ 5, 6 ] ], 7 ]
console.log(array.flat(2)); // [ 1, 2, 3, 4, [ 5, 6 ], 7 ]
console.log(array.flat(3)); // [ 1, 2, 3, 4, 5, 6, 7 ]
```

`.flat()` (ES2019) will flatten an array up to the given depth level.


---

**Thanks for reading 💙**  
Follow **@codedrops.tech** for daily posts.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Twitter](https://twitter.com/codedrops_tech) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack ● Javascript  
**[codedrops.tech](https://www.codedrops.tech/)**
Firebase - Remove Obsolete FCM Tokens in Node JS. 
Tags: node, javascript, firebase, fcm
Published: 2020-12-29 17:23:18

---
title: Firebase - Remove Obsolete FCM Tokens in Node JS. 
published: true
description: A guide to remove obsolete FCM tokens from database.
tags: #node,#javascript,#firebase,#fcm
cover_image: https://images.unsplash.com/photo-1514464750060-00e6e34c8b8c?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjYzOTIxfQ&w=3600
---

## What is FCM ?

Firebase Cloud Messaging (FCM) is a cross-platform messaging solution that lets you reliably send messages at no cost.

## How FCM is used with Node JS .

- Usually an mobile application  or browser registers itself to with FCM and  FCM gives that device an unique token.
- The Device then sends this token ton Node JS server.
- Node JS server stores that FCM token in database.
- Now whenever user needs to be notified . Server using package [Firebase](https://www.npmjs.com/package/firebase), Sends push notification to the user.

## The Problem

The problem starts to arise when the FCM tokens expire. It can happen in below cases.

- User deletes the app without logging out.
- User dont use the app for long time.

So this Obsolete tokens stays in the database and it takes up the space. In  cases where user can log in into multiple devices. In backend if user needs to be notified some action to all the devices , In most of the  push notification are triggered to Obsolete tokens.

## The Solution

The  Solution here is to run a cron job , may be once a week . Send a Dry push notification  and check  if the tokens throws any error .If there is any error it means the Token is obsolete and we can safety delete the token from database.

## The Code

```jsx
const admin = require("firebase-admin");

const serviceAccount = require(`./google-services.json`);

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  // databaseURL: 'https://marioplan-17d32.firebaseio.com'
});

const verifyToken = async (token) => {
  const message = {
    data: {
      score: "850",
      time: "2:45",
    },
    token,
  };
  return admin.messaging().send(message, true);
};

const allTokens = await allTokensFromDB();

for (let index = 0; index < allTokens.length; index++) {
  const element = allTokens[index];
  const { id, token } = element;
  try {
    await verifyToken(token);
  } catch (error) {
    if (
      error.code === "messaging/registration-token-not-registered" ||
      error.code === "messaging/invalid-argument"
    ) {
      await deleteTokenFromDB(id);
    }
  }
}
```

> Run Above code Snippet as CRON job.

![https://media.giphy.com/media/5bivKwxhVzshNk2Rjw/giphy.gif](https://media.giphy.com/media/5bivKwxhVzshNk2Rjw/giphy.gif)
Inline Editing With turbo_frame_tag (hotwire-rails)
Tags: rails
Published: 2020-12-29 17:22:24

{% youtube e2GOdfUsc9U %}

One of my favourite Single Page Application (SPA) tricks is allowing the user to edit something (like a comment) without having to leave the page they're on, a little bit like on Reddit.

Using the [`turbo_frame_tag`](https://github.com/hotwired/turbo-rails/blob/main/app/helpers/turbo/frames_helper.rb#L23) helper from the [hotwire-rails](https://rubygems.org/gems/hotwire-rails) gem, I was able to achieve this in about 4 lines of code! I also didn't have to touch any JavaScript or change my existing controller code.

## The code

```erb
<!-- app/views/comments/_comment.html.erb -->
<%= turbo_frame_tag dom_id(comment) do %>
  <blockquote>
    <%= comment.body %>

    <footer>
      <%= link_to 'Edit', [:edit, comment.post, comment] %> | <%= l comment.updated_at, format: :long %>
    </footer>
  </blockquote>
<% end %>
```

```erb
<!-- app/views/comments/edit.html.erb -->
<h1>Editing Comment</h1>

<%= turbo_frame_tag dom_id(@comment) do %>
  <%= render 'form', comment: @comment %>
<% end %>

<%= link_to 'Show', url_for([@comment.post, @comment]) %> |
<%= link_to 'Back', url_for([@comment.post]) %>
```

## How does the tag work?

The `turbo_frame_tag` helper method will wrap your block of code in a `<turbo-frame id="comment_1">` tag (which is like a div, but magic!).

When a link within that tag is clicked, Turbo will perform an AJAX type request to the requested page looking for a `<turbo-frame>` tag with a matching ID, if it finds one, it'll replace the content with the new content.
Reflections on blogging
Tags: javascript, webdev
Published: 2020-12-29 17:05:05

At the midway point of this year, I decided to pick up blogging as a new quarantine hobby. I stuck with it, writing a post every week since the beginning of July on a random JavaScript topic for my blog <a href="http://jsbits-yo.com/" target="_blank">JS Bits</a>. 🎉

Here are some of things I learned along the way:
- Blogging is an awesome way to learn. When you actually write for other people, it really forces you to know your stuff. This extra consideration is great motivation.
- dev.to has an awesome <a href="https://docs.dev.to/api/" target="_blank">API</a>. At first, I was copying and pasting articles between dev.to and my website. But with this API you can simply just fetch the article from your site and load it dynamically.
- It's super interesting which kind of articles get the most engagement. Here are my top 5 posts this year: 
  - 1,461 views: <a href="https://dev.to/js_bits_bill/how-svgs-can-be-dangerous-js-bits-mjh" target="_blank">How SVGs can be dangerous</a>
  - 1,374 views: <a href="https://dev.to/js_bits_bill/addeventlistener-once-js-bits-565d" target="_blank">addEventListener "once"</a>
  - 940 views: <a href="https://dev.to/js_bits_bill/symbols-are-your-friend-a-gentle-introduction-js-bits-23af" target="_blank">Symbols Are Your Friend Part I: A Gentle Introduction</a>
  - 312 views: <a href="https://dev.to/js_bits_bill/cleartimeout-and-clearinterval-are-interchangeable-30bg" target="_blank">clearTimeout and clearInterval Are Interchangeable!</a>
  - 230 views: <a href="https://dev.to/js_bits_bill/symbols-are-your-friend-part-iii-symbol-iterator-js-bits-18c4" target="_blank">Symbols Are Your Friend Part III: Symbol.iterator</a>
- Just writing once a week can feel like a chore after a while. I'm in awe of those who can keep it up regularly. 
- Despite this, I never felt there was a lack of topics, even excluding JS frameworks and libraries. There's so much to learn about even just the base language and I truly believe this is the best way to grow stronger as a dev.

So what's the plan for the future? Well, I think I'll continue blogging at my own pace - whenever an interesting topic crosses my mind. 🙂 I also plan on learning more about the latest VueJS updates as well as finding opportunities for mentoring. 

Thanks everyone for reading and Happy New Year! 🍾

----------
Check out more #JSBits at my blog, [jsbits-yo.com](http://jsbits-yo.com/). Or follow me on [Twitter](https://twitter.com/JS_Bits_Bill)!
Got bored and made iPhone 12 with Tailwindcss
Tags: webdev, css
Published: 2020-12-29 16:52:49

I coded the iPhone 12. Just because.

The code can be found [here](https://play.tailwindcss.com/s5N1OQrvBq?layout=preview)

It's mostly, layers of divs and some grid utilities. I have used a custom class for the frosted glass effect and some minor configuration changes to support the positioning of buttons.
It's all HTML except the icons.

Here's how it looked at the end.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2ru8n1t8ed9769e5vkal.png)
Creating a Re-usable Vue 3 Store Plugin with Typescript
Tags: vue3, typescript, composition, statemanagement
Published: 2020-12-29 16:47:30

---
title: Creating a Re-usable Vue 3 Store Plugin with Typescript
published: true
description: I created a Typescript Library for quickly providing and injecting stores into your Vue projects, and accessing these stores with accessors for state mutations and "getters." We'll also create a plugin to easily provide access to your stores from your application's root!
tags: vue3, typescript, composition, statemanagement
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/tn5eqadki4o0zux7p16a.png
---

In a [previous article](https://dev.to/jacobsngoodwin/vue-dfs-store-a-simple-store-wrapping-vue-s-built-in-reactivity-42pn), I described how to use a library I created called [vue-dfs-store](https://dev.to/jacobsngoodwin/vue-dfs-store-a-simple-store-wrapping-vue-s-built-in-reactivity-42pn) for creating and accessing re-usable global data stores in Vue 3 applications. 

To expound on the topic, I have created a video tutorial demo on how to create a store to maintain a list of favorite restaurants. The demo will work with an asynchronous API to fetch, create, update, and delete a list of favorite restaurants which will be maintained in (vue-dfs) store. You'll learn how to make your state read-only and how to update the state via "trackable" mutations. 

{% youtube -VE32khlTgQ %}

A few tutorials already touch on the topic of providing a reactive object and functions to update this state down the application tree. However, the ones I have seen don't use Typescript, which is one of the benefits of Vue 3 and the composition API. They also don't show how you might create your own "API" for accessing and modifying the state. 

What's more? I'll be showing you how to create Vue plugins and an example of a [Vite](https://github.com/vitejs/vite) development environment with Typescript and TailwindCSS setup!

I hope these additions will be helpful to intermediate and advanced Vue developers who are interested in using the latest and greatest!

### Two Good Introductions to Creating Stores with Vue's "Reactive" Objects
* [You Might Not Need Vuex with Vue 3](https://dev.to/blacksonic/you-might-not-need-vuex-with-vue-3-52e4)
* [Programming with Erik related video](https://www.youtube.com/watch?v=IatqphZuN64&t=2s)

## Some Related Content

Here's some related, and maybe prerequisite, content that you might find useful while checking out my video!

* [Vue Composition API](https://v3.vuejs.org/guide/composition-api-introduction.html)
* [Vue Provide and Inject](https://v3.vuejs.org/guide/component-provide-inject.html#provide-inject)
* [Vue Plugins](https://v3.vuejs.org/guide/plugins.html#plugins)
* [Purify-TS](https://gigobyte.github.io/purify) - A functional programming library for Typescript
* [Vite](https://github.com/vitejs/vite) - Native ES Module development tool
* [TailwindCSS](https://tailwindcss.com)
Course notes: Time Management for Technical Leaders
Tags: productivity, course
Published: 2020-12-29 16:46:56

---
title: Course notes: Time Management for Technical Leaders
published: true
tags: productivity, course
cover_image: https://danlebrero.com/images/blog/time-management-for-technical-leaders/time-management-for-technical-leaders.jpg
series: Book notes
canonical_url: https://danlebrero.com/2020/11/25/time-management-for-technical-leaders-summary/
---

These are my notes on [Patrick Kua](https://www.patkua.com/)'s [Time Management for Technical Leaders](https://techlead.academy/p/time-management). 

Main insight: plan, split scary tasks, time box and rest. Aim for a WIP of 1.

## Notes

* Focus on how you can have the biggest impact with the time you have.
* [Eisenhower Matrix](https://www.eisenhower.me/eisenhower-matrix/):<br/>
![organization before](https://danlebrero.com/images/blog/time-management-for-technical-leaders/eisenhower-matrix.jpg)  
    * Do: emergencies, major outages, crisis, someone quitting.
    * Decide: 
        * Manage technical debt.
        * Building relationships.
        * Schedule time.
        * Research.
    * Delegate: See Camille Fournier's [delegation matrix](https://danlebrero.com/2020/07/22/the-managers-path-book-summary/#ch-6). 
* Biorhythm: Keep track for a week on how is your energy level on each task.
* Defrag your calendar: group together similar nature tasks.
* 2 minutes rule: Do now anything that takes less than two minutes.
* Parkinson's Law:
    * "Work expands to fill the time available for its completion".
    * Time box.
    * Spit into smaller tasks. 
* Pareto's Law.
* Carlson's Law: Multitasking is bad.
* Law of Diminishing Returns (Illich's Law): You need to rest.
* Hofstadter's Law: 
    * "It always takes longer than you expect, even when you take into account Hofstadter's Law".
    * Prepare plan B.
    * Early feedback.
    * On planning, think about all possible bad scenarios.
* Law of The Least Effort (Laborit's Law):
    * "Human behaviour drives us to do what makes us happy first".
    * It is human nature to avoid stress.
    * Eat the frog first.
    * Give yourself a reward.
    * Get started by baby steps.
* How to kill dead time:
    * Meditation.
    * Make notes.
    * Call someone.
    * Do nothing.
* [Slack](https://www.amazon.com/Slack-Getting-Burnout-Busywork-Efficiency/dp/0767907698). Great book.
* Productivity Systems:
    1. [Get Things Done](https://www.goodreads.com/book/show/1633.Getting_Things_Done):
        * Open Loops:
            * When you worry about when and if something is going to get done.
            * Source of stress.
        * Three steps:
            * What is the outcome.
            * What is the next step.
            * Reminder.
        * Bucked things per timeframe.
    1. [Pomodoro Technique](https://en.wikipedia.org/wiki/Pomodoro_Technique).
    1. Personal Kanban:
        * Visualize your work.
        * Limit WIP to 1.
Clean Off Your Dirt
Tags: motivation, writing
Published: 2020-12-29 16:16:53

Here's a short true story.

In the temple of [Wat Traimit](https://en.wikipedia.org/wiki/Golden_Buddha_(statue)), Bangkok, Thailand there's a statue of Buddha, solid gold, 10.5 ft high, weighs around 5.5 tons. They used to think it was made of clay. The monastery used to be somewhere else and in 1957 they had to relocate it because of a highway development through Bangkok.

When the crane came to lift it, the idol was so heavy that it began to crack so they put it back down, covered it in a tarpaulin so it wouldn't get wet, and decided to try again the next day.

During the night the abbot came out to look at it, check it wasn't getting wet or damaged. He noticed something gleaming behind the crack and decided to take a closer look. They started to chip the clay away and ended up with a 10.5 ft high solid gold Buddha.

Turns out that hundreds of years before Thailand (Siam as was) was invaded by Burma and the monks of that time covered the Buddha in clay so it wasn't looted. They were all killed by the Burmese along with many others. No-one who knew the secret was left so the golden reality remained intact but hidden. It was finally rediscovered hundreds of years later.

**Why tell this story here, now?**

Because hidden inside, smothered by the accumulated mental dirt caused by years of disappointments, failures, rejections, regrets is a precious, valuable better you. The **you** who has creativity, concentration, patience, resolve, purpose, and a million other virtues. All you have to do is clean off the dirt.
Git Stash, Retrieving Items That Are Not the Most Recent
Tags: git
Published: 2020-12-29 12:47:12

Some Git commands like stash show are used regularly but not enough to keep top of mind. These are some commands I often find myself Googling for. If you are new to Git, checkout this post, [Git 101](https://rainey.dev/git-101/) for the basics.

## What is Stash?

Stashing work is a great way to set things aside for a moment. For example, I am working on a feature but a customer support request comes in that I want to see locally. No problem.

`git stash`

Now I can safely switch to master and see what is going on. When I am ready to jump back to my work:

`git stash apply`

OR

`git stash pop`

I typically use the first one since the last not only gives me the last stash item, but also removes it from the stash history.

## What if I want an older stash, not the most recent one?

This comes up for me occasionally and is one I find myself Googling for specific options. In this case:

`git stash list`

This brings up a nice list of your previous stashes if you haven't been popping them. They will look something like this:

*   stash@{0}: WIP on branch-name: (last commit hash and message here)
*   stash@{1}: WIP on branch-name: (last commit hash and message here)
*   etc.

This is fairly helpful but it doesn't really show what files I was working on...

[Read On](https://rainey.dev/git-stash-retrieving-items-that-are-not-the-most-recent/)
Colorful Neon Effect on Hover using HTML & CSS 
Tags: css, html, webdev
Published: 2020-12-29 16:14:12

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uw870weammae8pgcwed7.jpg)
The following video will help you to know how neon lite animation distribution is made using only plain HTML and CSS programming code. This is a great design that css programming has the most role to play. In the video below I have made two distributions. Under normal conditions, the buttons are transparent. When someone clicks on it or moves the mouse, the colors will shine brighter. In this case hover effect has been added.

<a href="https://www.foolishdeveloper.com/2020/12/neon-animation-light-button.html"><button>Demo: Click Here</button></a>
<br>
<a href="https://www.foolishdeveloper.com/2020/12/neon-animation-light-button.html"><button>Download: Click Here</button></a>

{% youtube m-W02oWNy54 %}