teleren/devto huggingface dataset:
Spring cleaning: how to safely remove dead code (unused exports) in JS codebase
Tags: javascript
Published: 2020-06-21 19:29:19

There is no visible harm in having code in the code base, that is never used. Previously this at least would affect bundle size by increasing it without reason. However, introducing <a href="https://webpack.js.org/guides/tree-shaking/">tree shaking</a> in Webpack mostly removed even this reason. So, why to bother?

I would name just a few reasons, that I still see in keeping codebase crystal clear:
<ul>
 	<li>do not confuse newcomers. If something exists, but it is not used - why would it be present? Should it be used?  etc.</li>
 	<li>decrease scopes of potential refactoring. For example, you decide to move from JS to TS, this will mean, that even when code is not actively used it will still contribute to the amount of work, that needs to be done.</li>
</ul>

Most of the unused code can be quite easily be caught with proper eslint rule, for example, <a href="https://eslint.org/docs/rules/no-unused-vars">no-unused-vars</a>. However, when something is `export`-ed it is no longer so easy to detect that it is no longer used. <a href="https://github.com/benmosher/eslint-plugin-import">eslint-plugin-import</a> has <a href="https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-unused-modules.md">no-unused-modules</a> rule, but it never worked for me on the codebase where I wanted to use it.

Last month, I found this nice repo <a href="https://github.com/devbridge/js-unused-exports">js-unused-exports</a>, that did exactly what I wanted it to do - detect all exports, that never been used in the readable format.

Usage is quite easy:
<ol>
 	<li>You'll need to install it globally with
<pre>
<code>
npm install -g js-unused-exports
</code>
</pre>
</li>
 	<li>Use it with command
<pre>
<code>js-unused-exports --config "unused-exports-config.json"</code>
</pre>
</li>
</ol>
Examples of the config can be found in the repo.

My experience with this tool:
<ol>
 	<li>The most suitable way for the output is in the cli. Library provides the ability to write output in the file, though data there is written in the format of the AST data, and is less easy to work with unless you are planning to source it to some other tool.</li>
 	<li>Detection is quite reliable, but still, keep your eyes open, and do not delete everything that was detected unconsciously. For example, some of the files might be configured in a way, when their exports are automatically used by some tool (in my case all stories files, that were used for creating <a href="https://storybook.js.org/docs/guides/guide-react/">Storybook</a> were such. Other case is that it just didn't cover some of the cases. For example, at the moment of writing, it was not detecting <a href="https://v8.dev/features/dynamic-import">dynamic imports</a> properly.</li>
</ol>
With all that I would say this great reliable little helper. I would love to have something like this to work on CI directly, so instead of cleaning codebase, we would be able to detect when engineers are leaving unused code in the codebase, and encourage them to delete it.
Caesar cipher
Published: 2020-06-21 19:23:01

# Caesar cipher 🔒

In cryptography, a Caesar cipher, also known as Caesar's cipher, the shift cipher, Caesar's code or Caesar shift, is one of the simplest and most widely known encryption techniques. It is a type of substitution cipher in which each letter in the plaintext is replaced by a letter some fixed number of positions down the alphabet. For example, with a left shift of 3, D would be replaced by A, E would become B, and so on.

![](https://upload.wikimedia.org/wikipedia/commons/4/4a/Caesar_cipher_left_shift_of_3.svg)

## Two alphabets 🆎

The transformation can be represented by aligning two alphabets; the cipher alphabet is the plain alphabet rotated left or right by some number of positions. For instance, here is a Caesar cipher using a left rotation of three places, equivalent to a right shift of 23 (the shift parameter is used as the key):

- Plain:    __ABCDEFGHIJKLMNOPQRSTUVWXYZ__
- Cipher:   __XYZABCDEFGHIJKLMNOPQRSTUVW__

When encrypting, a person looks up each letter of the message in the "plain" line and writes down the corresponding letter in the "cipher" line.

- Key: 3 🔑
- Plaintext:  __HELLO__
- Ciphertext: __EBIIL__

Repo: [GitHub Caesar-cipher](https://github.com/c4rlosc7/wiki/tree/master/CaesarCipher) 🔗

source: [Caesar-cipher Wikipedia](https://en.wikipedia.org/wiki/Caesar_cipher) 🔗

> thank you for reading
Go Crash Course Video
Tags: go, tutorial, video
Published: 2020-06-21 19:21:01

{% youtube 79NeEFURq_U %}

I made my first "comprehensive" video tutorial relating to programming.

In this one I explain how to utilize the basic language features of go, as fast as I can, without making tons of mistakes.

I want to make more and better video tutorials like this one and would greatly appreciate any feedback about it.

If you liked it and want to know when I post more, be sure to [subscribe] (https://www.youtube.com/channel/UCTHij3Ac5GizLsn5yB4IX_Q?sub_confirmation=1) and thank ya'll for taking the time to look over it!
ember dependencies
Tags: ember
Published: 2020-06-21 18:15:55

hey developers. good morning!
i have a small question. when i install dependencies using 'npm install' it works but then when i do 'ember serve' it gives an error asking me to 'Run `yarn` to install missing dependencies.' so my question is what am i doing wrong here. if i make sure that i only have npm or yarn on my system then will it work or ember requires both npm and yarn to install its dependencies?
Temp Mail — Disposable Temporary Email
Tags: tempmail, temporaryemail, fakeemail
Published: 2020-06-21 18:15:35

---
title: Temp Mail — Disposable Temporary Email
published: true
description: What is Disposable Temporary E-mail?
tags: tempmail, temporaryemail, fakeemail
//cover_image: https://direct_url_to_image.jpg
---

**What is Disposable Temporary E-mail?**
Disposable email — is a service that allows to receive email at a temporary address that self-destructed after a certain time elapses. It is also known by names like : tempmail, 10minutemail, throwaway email, fake-mail or trash-mail. Many forums, Wi-Fi owners, websites and blogs ask visitors to register before they can view content, post comments or download something. Temp-Mail — is the most advanced throwaway email service that helps you avoid spam and stay safe.

https://tempmail.altmails.com/

Forget about spam, advertising mailings, hacking, and attacking robots. Keep your real mailbox clean and secure. Temp Mail provides a temporary, secure, anonymous, free, disposable email address.
Shallow & deep copying in python
Tags: todayilearned, python
Published: 2020-06-21 17:59:39

What happens when a variable is assigned to another variable in python? For example:

```py
>>> x = 5
>>> y = x
```

Both `x` and `y` will have the value `5`. But, when `x` was assigned to `y`, `y` was not created as a completely new/separate object. Instead, an **alias** for `x` was created. That is, `y` points to the memory location of `x`. It does not have it's own memory location - yet.

```py
>>> id(x)
140428600776960
>>> id(y)
140428600776960
>>> x is y
True
```

You may never have any problems with this when working with [immutable types](https://stackoverflow.com/a/23715872) because the alias is broken as soon as either of the two variables change. 

```py
>>> x += 2
>>> x
7
>>> y
5
>>> id(x)
140539682924864
>>> id(y)
140428600776960
>>> x is y
False
```

But when working with mutable types, the alias is not broken when the original is updated. This means changes in `x` would reflect in `y`.

```py
>>> x = [1,2,3]
>>> y = x
>>> x
[1, 2, 3]
>>> y
[1, 2, 3]
>>> x is y
True
>>> 
>>> x.append(4)
>>> x.append(5)
>>> x
[1, 2, 3, 4, 5]
>>> y
[1, 2, 3, 4, 5]
>>> x is y
True
```

`y` was updated externally. This might be a cause of bugs if for example a value is updated by an external library and other variables are affected.

This can be prevented by creating shallow/deep copies of objects instead of using assignment.

## Shallow copy

A shallow copy creates a new object, then populates it with references of the _objects_ in the original object. Continuing with the previous example, a shallow copy can be created using either the `list()` or `copy()` command.

```py
>>> z = list(x)
>>> z
[1, 2, 3, 4, 5]
```

Now if some more values are appended to `x`, `y` will still be affected by `z` will not.

```py
>>> x.append(6)
>>> x.append(7)
>>> x
[1, 2, 3, 4, 5, 6, 7]
>>> y
[1, 2, 3, 4, 5, 6, 7]
>>> z
[1, 2, 3, 4, 5]
```

However, a shallow copy doesn't fully solve the problem because even though a new list was created, the objects in the list are still references to the objects in `x`. 

As it is currently, updating `x[0]` would not affect `z[0]` because - immutable objects - the alias would be broken. But, if we were dealing with a list of lists, an update in `x[0]` would affect `z[0]`. 

```py
>>> x = [[1,2], [3,4]]
>>> y = x
>>> z = list(x)
>>> x
[[1, 2], [3, 4]]
>>> y
[[1, 2], [3, 4]]
>>> z
[[1, 2], [3, 4]]
>>> x.append([5,6])
>>> x
[[1, 2], [3, 4], [5, 6]]
>>> y
[[1, 2], [3, 4], [5, 6]]
>>> z
[[1, 2], [3, 4]]
>>>
>>> x[0][1] = 'edited'
>>> x
[[1, 'edited'], [3, 4], [5, 6]]
>>> y
[[1, 'edited'], [3, 4], [5, 6]]
>>> z
[[1, 'edited'], [3, 4]]
```

## Deep copy

A deep copy creates a new object, and completely new instances of the objects in it. That is, a deep copied object is completely independent of the original. Updating objects in the original would not affect the deep copied object since there's no longer any connection.

```py
>>> import copy
>>> x = [[1,2], [3,4]]
>>> z = copy.deepcopy(x)
>>> x
[[1, 2], [3, 4]]
>>> z
[[1, 2], [3, 4]]
>>> x is z
False
>>> x[0][1] = 'edited'
>>> x
[[1, 'edited'], [3, 4]]
>>> z
[[1, 2], [3, 4]]
```
Feature toggle (change system behaviour during runtime)
Tags: featuretoggle, coding, systemcontrol, automation
Published: 2020-06-21 17:57:35

Have you ever thought how the apps locks and unlocks the premium features and how and why only some users get the latest version of the apps? So, today we will see one of the technique called __Feature toggle__ which enable programmers to achieve all these automated system behaviour without changing anything in code once deployed.
  
Let's started with term toggle, it is basically a condition which has the capability to enable or disable the logic which is inside that condition. And __feature toggling__ is the technique of creating such toggles which helps in changing the behaviour of application dynamically.

It can be categorized into four different parts : __Release, Experiment, Ops and Premission.__
There are two important factors which determines the behaviour of toggles and they are __dynamism and longevity__. Dynamism is how frequently that toggle will comes into execution part of the code, and later is the lifetime of that toggle. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xn37ecopq79267wby3wg.png)

Now we will try to understand the use-case of four toggles mentioned above.

__1. Release toggle :__ This toggle generally used when you have incomplete code or untested code which is a part of the release cycle. The lifetime of this toggle is short because the fix or change(if any) will be a part of next release cycle which is due soon.

__2. Experiment toggle :__ This toggle is used to test the new feature on any application. You have heard multiple times that some feature is available for specific users only. This is done just for realtime validation of the feature and can be achieved using experiment toggle.

__3. Ops toggle :__ This comes into play when you have to disable any specific functionalties of the platform. They are very much similar to __circuit beakers__.

__4. Permission toggle :__ You have seen the use-case of this toggle in every paid applications. This enables application to hide the premium feature for non-premium and make available for premium users.

To read more about feature toggle refer [this.](https://martinfowler.com/articles/feature-toggles.html#ATogglingTale)
Eleventy Starter Boilerplate, project template for 11ty
Tags: eleventy, 11ty, tailwindcss, jamstack
Published: 2020-06-21 17:39:53

---
title: Eleventy Starter Boilerplate, project template for 11ty
published: true
description: 🚀 Eleventy Starter Boilerplate is production-ready with SEO-friendly for quickly starting a blog. ⚡ Built with Eleventy, ESLint, Prettier, Webpack, PostCSS, Tailwind CSS.
tags: Eleventy, 11ty, tailwind, jamstack
---

[Eleventy Starter Boilerplate by creativedesignsguru](https://creativedesignsguru.com/demo/Eleventy-Starter-Boilerplate/eleventy-starter-boilerplate-presentation/)

Recently, I have migrated my blog to Eleventy generator. So, I built a starter kit for this purpose. Now, I hope it could be also useful for someone else.

Please check the GitHub repository to see all included features:

{% github ixartz/Eleventy-Starter-Boilerplate %}
Tech Writing Cheat Sheet
Tags: writing, documentation, cheatsheet
Published: 2020-06-21 17:23:22

This is a curated list of summaries from Google's [Tech Writing courses](https://developers.google.com/tech-writing) that I constantly consult when reviewing documents ~~since I sometimes forget things~~. 

## General/Introduction
- Determine your **audience** and **what they will learn.**
- Fit documentation to your audience.
- Introduce a document's scope and any **prerequisites.**
- Outline a document. Alternatively, write free form and then organize.
- Make a practice of **continuous revision.**
- Establish your document's **key points** at the start of the document.
- Read documents out loud (to yourself) when reviewing.
- Find a good **peer editor.**
- Return to documents well after you've written the draft.
- Compare and contrast with something that readers are already familiar with.

## Content
- Prefer task-based headings.
- Use terms **consistently.**
    - If you change the name of a variable midway through a method, your code won’t compile. Similarly, if you rename a term in the middle of a document, your ideas won’t compile (in your users’ heads).
- Avoid ambiguous pronouns.
- Prefer active voice to passive voice.
    - "Python interprets code" instead of "Code is interpreted by Python". 
- Pick specific verbs over vague ones.
- Focus each sentence on a **single idea.**
- Convert some long sentences to lists.
- Eliminate unneeded words.
    - Like `simply` or `just`.
- Use a numbered list when ordering is important and a bulleted list when ordering is irrelevant.
- Keep list items *parallel.*
    - All items in a parallel list look like they "belong" together. 
- Start numbered list items with imperative words.
    - "Install that".
- **Introduce** lists and tables appropriately.
- Create great opening sentences that establish a paragraph's central point.
- Focus each paragraph on a **single topic.**

### Code Examples
- In tutorials, reinforce concepts with examples.
- Create concise sample code that is **easy to understand.**
- Avoid writing comments about obvious code.
- Keep code comments short, but prefer clarity over brevity.
- Provide not only examples but also anti-examples.
- Provide code samples that demonstrate a **range of complexity.**
    - Simple and complex examples.

### Drawings
- Consider writing the caption before creating the illustration.
- Focus the reader's attention on the **relevant part** of a picture or diagram by describing the takeaway in the caption or by adding a visual cue to the picture.


If you would like to learn more about these points, check out [the courses](https://developers.google.com/tech-writing). There are two and they're very good!
Draggable table row with VueJS, Vuetify and SortableJS
Tags: vue, typescript, vuetify, table
Published: 2020-06-21 17:16:56

__*TLDR*__ At the bottom of the article you will find a link to the GitHub repo.

**Prologue**

Recently I have had to implement draggable rows for a vuetify table and right off the bat started searching in the docs and the webs for a solution. And came across this [article](https://medium.com/vuetify/drag-n-drop-in-vuetify-part-ii-2b07b4b27684) written by Abhay Wawale and some other answers on StackOverflow & CodePen.

The article is great, but I was concerned about manipulating the DOM directly. As for me it is a bit hacky.

**My Solution**

Instead of accessing the `item` slot in `v-data-table` I decided to mess around with the `body` slot. Basically `body` slot is your `<tbody>` html tag and it is very nice since we need a `tag` prop for [vuedraggable component](https://github.com/SortableJS/Vue.Draggable) which is a wrapper for [SortableJS](https://github.com/SortableJS/Sortable).

```html
    <v-data-table>
      <template v-slot:body="props">
        <draggable
          :list="props.items"
          tag="tbody"
        >
          <!-- the row will go here -->
        </draggable>
      </template>
    </v-data-table>
```

Now to the rows, you just have to loop through the array of items that you pass into your `v-data-table` `items` prop. Those items will be exposed in the `body` slot and can be accessed as follows:

```html
          <tr
            v-for="(item, index) in props.items"
            :key="index"
          >
            <td> {{ item.your-property-here }} </td>
          </tr>
```

Let's add some actual data and make our table more fancy:

```html
    <v-data-table
      :headers="tableHeaders"
      :items="tableItems"
      :loading="loading"
      item-key="id"
      :show-select="false"
      :disable-pagination="true"
      :hide-default-footer="true"
      class="page__table"
    >
      <template v-slot:body="props">
        <draggable
          :list="props.items"
          tag="tbody"
        >
          <tr
            v-for="(user, index) in props.items"
            :key="index"
          >
            <td>
              <v-icon
                small
                class="page__grab-icon"
              >
                mdi-arrow-all
              </v-icon>
            </td>
            <td> {{ index + 1 }} </td>
            <td> {{ user.id }} </td>
            <td> {{ user.name }} </td>
            <td> {{ user.username }} </td>
            <td> {{ user.email }} </td>
            <td> {{ user.website }} </td>
            <td>
              <v-icon
                small
                @click="editUser(user.id)"
              >
                mdi-pencil
              </v-icon>
            </td>
          </tr>
        </draggable>
      </template>
    </v-data-table>
```

Our table will look like this and draggable rows are working!

![Our table!](https://dev-to-uploads.s3.amazonaws.com/i/7tktm3z7lchx1djpmfop.gif)



Thanks for reading!

Code can be found [here](https://github.com/andynoir/vuetify-table-drag) and live preview [here](https://andynoir.github.io/vuetify-table-drag/#/)
Install Apache Spark (and Apache Hadoop) smoothly 
Tags: opensource, bash, spark, scala
Published: 2020-06-21 17:02:03

Installing *Apache Spark* locally in order to be able to easily spark-submit apps can be a little tricky and painful the first time (missing environment variables, bad configuration paths, etc.)
I just made a *bash* script that do the job with the smallest amount of configuration.
It will install for you *Apache Hadoop* & *Apache Spark*, where you want.
Give it a try 😉

{% gist https://gist.github.com/kevinlacire/18bbacf1624109f9152019b0f7746b31 %}
What can developers do to speed up time to market 🚀
Tags: discuss, webdev, productivity
Published: 2020-06-21 16:56:17

Hello developers, let's have a chill discussion about: 
- main things we can do to speed up time to market or
- help an app reach MVP level

I've been thinking a lot about this lately 🤔, also tweeting about it: 
{% twitter 1273306680563044353 %}


### 👇 Comment below 👇
Frontend developer? Pull  nodejs code into your plate!
Tags: javascript, node, webdev, codequality
Published: 2020-06-21 16:44:14

It is very common that nowadays a huge lot of products have a middleware written in node. Writing this node code second time in my career, I would like to say, "why it should belong to a front end developer!"

###A simple reason...

>_In every interview (if none is scheduled, it may even after 5 years), a backend engineer who has written node is going to ask questions on javascript._

###So what?, one may say. 

We might have coded in UI for say 5 years, 10 year or even 15-20 years. In UI, we follow almost an exact same pattern of javascript code that interacts with 2 more languages html & css. Yes, we covered object oriented concepts, es6 and more.

###But what did we not cover? 

Front end developers, mostly have not handled the asynchronous behavior(apart from browser engine puts a wait OR for a server call).

Also, we never thought of "how javascript can handle multiple requests at a time without being a multithread". *__We never had to know about event loop until recent years.__*

What would a backend developer who has coded node think?

> This guy/girl has done javascript for years but yet doesn't know certain concepts which I(backend developer) could learn in a span of say 2-6 months. Something must be missing.

###Well, not just that.. 

Learning node or coding in node, gives us a lot better understanding of javascript through which we can think in terms of patterns better. We can choose a front end framework wisely. Or even code without a framework but by choosing open source tools for template-ing, fast-dom, MVC skeleton and more..

It is also profitable to the company as they are enhancing the knowledge of the right person/team through which their UI also improves.

_That was a short write. Thanks for reading! Happy coding :)_
You don't need to remember everything
Tags: html, css, javascript, motivation
Published: 2020-06-21 16:40:04

In this article, I want to discuss what to learn when you want to learn a programming language.

In the beginning, I used to think programming is a mess. I would say, Man look at that site it looks so out of the world, they must have used so many tools and technologies to make it look so. But the truth is, it does not require all the HTML tags or attributes, CSS properties to design an extraordinary web page.

It just requires us to learn some simple and universal tags, attributes, and properties and all the beautiful pages are a result of a combination of various simple features to bring out of the world experience.

The main reason why HTML got popular because it was not feasible for scientists to publish there content with good semantics online. This problem was solved by HTML. Later when they realized to bring some styles to the webpage, CSS was developed. Now they were able to produce beautiful web sites that can provide a lot of information. To make the web sites interactive and bring life to the sites JavaScript was brought to the picture. It has come a long way now.

When we are learning a markup language or we are learning a programming language, we need to remember that these are tools that can perform tremendously. We don't need to remember every aspect of the tool. We just need to remember what we might use in the upcoming future. Just by learning 10% of the features and concepts of the language that are used the most, we will be able to produce beautiful websites and web applications.

If you are starting with new technology like HTML, CSS, or JavaScript. I suggest you take a tutorial on Udemy and create a simple project like a todo list. This will cover, essential features and concepts that are required to build any application. After understanding and implementing the basics, with practice, we will be able to learn complex projects and complex concepts.
What do you call your folder where you keep your code?
Tags: watercooler, beginners, discuss
Published: 2020-06-21 16:24:31

---
title: What do you call your folder where you keep your code?
published: true
description: I assume everyone does this?
tags: watercooler, beginner, discuss
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/rii1lm7ygokrtf5kt2km.png
---

On each new PC I make a folder named after some version of the afterlife: 'xibalba,' 'elysium,' 'outerdark.' And that's where I keep all my code. I assume everyone does this? And I'm curious where you keep your code on your own PC.