teleren/devto huggingface dataset:
what I didn't know about const variable declaration in JavaScript.
Tags: javascriptwebdev
Published: 2020-05-10 21:20:17

---
title: what I didn't know about const variable declaration in JavaScript. 
published: true
description: JavaScript Es6 
tagse: #webdevelopment # tutorial
---

I'm proudly teaching myself coding, on the journey so far, here is what I think I didn't know about const variable declaration

(1) Const declaration in JavaScript is that  type of variable declaration in which its ''variable assignment'' is set to read-only. This means, value of variable can't be changed once it has  been declared at the declaration time.

Using the code below to drive home my explanation

```const a = 2;
console.log(a) //2
a = 2;//typeError```

In line 3 of the snippet above, assigning the variable to another value didn't work. With const, you can't change the value of variable once it's declared.

(2) Unlike var and let, to get a const declaration with an "undefined" value, you have to declare it manually, const a = undefined 

Consider the code below:
```var a; //undefined
let b; //undefined
const c; //missing initialisation in const declaration```

now we declare it manually
```const c = undefined;
console.log(c)  //undefined```

Now from the above example shown so far, should I think declaring a variable with  const  restricts the value of the variable itself?  Well, this could have been my assumption, if I didn't read further. The answer, however, is simply No!

Const is not a restriction on the value itself but on the variable assignment of the value. This means that the value of const can be modified. Only the variable assignment of the value is frozen, and can't be modified.
Consider the code below
```const a = [1,2,3];
a.push(4);
console.log(a)//[1,2,3,4]```

Wow, the value could be modified, and not read-only. Now what exactly do I mean by variable assignment of a const is immutable/frozen. Let's revisit our snippet above

```const a = [1,2,3];
a.push(4)
console.log(a)//[1,2,3,4] as expected
//now assigning a variable to a new value
a = 2; //typeError!```

Reassigning a to 42 didn't work simply because the variable assignment of const is frozen. Finally, we can say that the value of const itself is mutable but the variable, a reference to the value is immutable.

I'm excited about my journey so far and this is my first publication on this platform
Starting the development of my dream app! 
Tags: ios, design
Published: 2020-05-10 21:01:28

Hey guys! I am currently a college student and inspiring entrepreneur. I am extremely hard working and every single day I aim to get better. I love reading self-help/biographies/psychology, and strive to read at least one a week. I am almost done completing a pomodoro app but with a twist, your rewarded every time a session is over. Got the idea from reading atomic habits, "if a habit is not rewarded it will not be repeated" You're given an avatar you level up, so in essence as you work hard and grow in real life so does your avatar. 


I learned pixel art and started teaching myself IOS dev 6 months ago, and now I almost done with the app! I would really appreciate it, if you could check it out at https://focusbyte.io and sign up! If you have any suggestions or just want to talk please feel free to reach out!

I also have been documenting my process on medium:
https://medium.com/@tfkim67/starting-the-development-of-my-dream-app-ef6245bb6884
GitLab is down! 😨
Tags: gitlab, productivity, discuss
Published: 2020-05-10 20:31:09

---
title: GitLab is down! 😨
published: true
description: 
tags: gitlab, productivity, discuss
cover_image: https://i.ibb.co/qFRxwyD/Screen-Shot-2020-05-11-at-12-04-51-AM.png
---

Well, today GitLab was down for 2 hours for _scheduled_ maintenance that our team didn't account for. I had already woken late this morning and after some time, headed to GitLab to review MRs, only to see the 503 error!
To clarify, the maintenance window was from 12PM to 2PM, which is peak working hours for me at the moment.

I couldn't push, pull or fetch any branches. So what did I do? Thankfully, I had already went through some open MRs a while ago and had their branches on my local, so I started with reviewing the ones that I was sure were up to date using the Git History extension on VS Code.

![Git History extension on VS Code](https://dev-to-uploads.s3.amazonaws.com/i/lgrmt3zq4i5r9pnin8q0.png)

Using this extension, I went through the recent history on a commit-by-commit basis to check for all the changes by comparing them with the previous workspace version. 

![Git History options](https://dev-to-uploads.s3.amazonaws.com/i/zic04zkdusk7sktzb0xj.png)

The extension really came in handy, however there's nothing like viewing all the changes across different files in one page, especially when dealing with a change that affects more than one layer in an MVC.

Today I learned I should take the time to actually read the alerts GitLab sends to account for future downtime 😅 Thanks to all GitLab engineers for their work!

How would you deal with downtime at GitHub/GitLab/BitBucket in the middle of the work day?
Dicas rápidas - React para Iniciantes
Tags: react, reactnative, beginners
Published: 2020-05-10 20:19:28


Você já deve ter se deparado com a situação onde precisa verificar se o valor de estado foi alterado no momento seguinte ao **setState** e deve ter ficado horas se perguntando o motivo do estado ainda estar o mesmo de antes, ou seja, parece que o estado não mudou. Vou exemplificar abaixo...

```js 
import React from "react";

class App extends React.Component {
  state = {
    name: "Dam Abramov",
  };

  componentDidMount() {
    this.setState({
      name: "Emerson V",
    });
    console.log(this.state.name);
  }

  render() {
    return (
      <div>
        <p> {this.state.name} </p>
      </div>
    );
  }
}

export default App;
``` 
No código acima, será mostrado **Dam Abramov** no **console.log** que tem dentro de **componentDidMount** e será mostrado **Emerson V** na visualização da página. Eu vou explicar o motivo de parecer que o estado não foi alterado. O motivo é: **setState** é assíncrono, ou seja, quando o **console.log** é executado, o estado ainda não foi alterado. Para que possamos mostrar o estado atualizado no **console.log**, podemos inserir o mesmo no retorno de chamada do **setState**, que vai ser executado após a alteração no estado. Então o código acima ficaria com uma pequena mudança no **componentDidMount**.  

```js 
  componentDidMount() {
    this.setState(
      {
        name: "Emerson V",
      },
      () => {
        console.log(this.state.name);
      }
    );
  }
```
essa foi a dica de hoje. Qualquer dúvida ou feedback é só comentar :)
Day three - async/await and db refactor
Tags: node, mongodb, cpanel
Published: 2020-05-10 20:16:51

---
title: Day three - async/await and db refactor
published: true
description: Fourth in a new series on building a full stack app using cpanel, mongodb, node and react
tags: nodejs, mongodb, cpanel
cover_image: http://toasterfaves.triplejdeveloping.com/images/logo.png
canonical_url: https://www.triplejdeveloping.com/blogarticles?blog=async-await-db-connect
series: Full stack recipe app - cpanel to react
---
## 10/5/20 Step one. Still

The async/await thing has been bothering me. I didn't do it because I had never used it and never really bothered/had the time to figure it out.

So, I figured now was as good a time as any - I'm supposed to be learning, right?

So for this instalment, dear reader, I went for the async thang.

Turns out it wasn't really all that difficult. I changed the connection/client - added an async keyword:

![async client](https://dev-to-uploads.s3.amazonaws.com/i/35szgdhhmlk45vkth65q.png)

The bigger changes happened in the db functions, although they weren't really that big:

![async db functions](https://dev-to-uploads.s3.amazonaws.com/i/86kuq40yz107s0v9ldo5.png)

Other than this, I made some changes to the recipe interface:

![recipe interface](https://dev-to-uploads.s3.amazonaws.com/i/9117tf23pix65so4ej6b.png)

I also changed the recipe db functions - mostly, I wasn't happy with the db and collection names.

I was working with a db called 'Recipes'. Which kind of forced me to use collections by recipe type - main, dessert, whatever.

I wasn't happy with this - what if I wanted to change the type of a recipe - who knows why, but I might want to. I would have to change the recipe type AND migrate it across collections.

This wasn't the one - I now settled for a 'Toasterfaves' db and a recipes collection. Maybe there will be other things to save with this site? As well as this, you might note I added the dbName argument to the db functions. This will open up those functions to be usable later on if/when we add more dbs.

![recipe db functions](https://dev-to-uploads.s3.amazonaws.com/i/ex0mycbv9h42it1wtmjz.png)

That's pretty much it for now. I'm happier these things are done and I don't need to come back and refactor them further down the line.

I guess next, I will have to expose these functions - I assume using express. Then, I will have to get that api running on the cpanel server. That'll be fun...

Stay tuned...

* one thing worth noting - I can't be sure any of this is correct! But it works. And I'm pretty happy with it. If you have any suggestions, let me know.
I know what it is, I just don't know it's name.
Tags: watercooler
Published: 2020-05-10 19:47:56

I get this feeling quite often, I am a seasoned programmer who has stopped trying to learn everything. The result is a lot more space in my ram headspace for my life and family.

The downside of not knowing everything comes from the root of why I'm a programmer and not a math guy, I don't need to know the answer I need to know the question, this means I need x? To get result, but what is x called again? I used it last year, ummm it begins with R... And so on and so fourth, googling a few rough description to find leads for the name of the thing that I need. Is that you? I'm here to tell you that I have no answer for this, it's just part of being human.
Type `Assertions` vs `Declarations` - the dangers of `as` in Typescript
Tags: typescript
Published: 2020-05-10 19:47:10

Since this has caught me out a number of time recently, I decided it's time to add another resource to any future search results :)

```ts
/**
 * Let's say you're declaring the 'shape' of messages
 * that your application can accept in a union like so...
 */
type Msg =
    | { kind: "sign-in"; email: string; password: string }
    | { kind: "sign-out" };

```

## Type 'Assertions'

The dangerous kind. Typescript allows the following snippet and does **not** warn us that the `email` and `password` fields are absent.

It's very easy to imagine the bugs introduced later when handling a `sign-in` message and expecting `email` and `password` to exist.

```ts
/**
 * Ooops! These `As Expressions` force Typescript to believe *us* that
 * `msg1` & `msg2` are members of the `Msg` union above. 
 */
const msg1 = { kind: "sign-in" } as Msg;
const msg2 = <Msg>{ kind: "sign-in" };
```

So, even though `{ kind: "sign-in" }` is NOT actually a valid `Msg` - it only could be if the `email` & `password` were also present - that doesn't stop Typescript from allowing it in any future place that accepts `Msg`. 

This means that when you attempt to narrow the `Msg` union later - such as in a `switch` statement - you could run into errors when you expect `email` and `password` to actually exist.

Use with caution, and *only* when you think you know more than 
Typescript (see: hardly ever 🤣)

## Type 'Declarations'

The safer way. Use this instead when you want Typescript to actually error when the element in question does not satify the type exactly.

```ts
/**
 * Better! Typescript will warn us here that `msg3` is invalid.
 * Adding the `email` and `password` fields would remove the error 😀
 */
const msg3: Msg = { kind: "sign-in" }; // Error!
```
Use CDN as NuxtJs package
Published: 2020-05-10 19:23:53

Hello, I am starting in Nuxtjs. I am trying to use recent technologies to a project.

For now I do not want to have packages like Vue, Viutify among others on the server, since it would be an additional load on the data transfer from the server.

I have decided to use the Vue cdn, VueRouter, Vuetify and others but I cannot include them as external packages from a cdn in NuxtJs and use them as for example ‘imports Vue from Vue’.

I have already tried to put in 'modules' a "publicPath" and in' plugins: ‘src '' but it generates an error since it is not a link.

For example this is the way for external packages but on the same server https://nuxtjs.org/guide/plugins#external-packages.

Someone could guide me how to achieve since I want to use the minimum bandwidth of the server.

Thank you
Chuck Norris Says - Random Quote Fetcher
Tags: react, javascript, showdev
Published: 2020-05-10 18:55:29

I recently built out an random quote machine to grab some funny Chuck Norris jokes. This was such a fun project, I wanted to share with y'all!

# Chuck Norris Say🃏

https://chuck-norris-says.netlify.app/

## repo 

https://github.com/shimphillip/chuck-norris-says

## Contributing

Feel free to contribute via Issues/PRs.

Thanks! Enjoy.
7 RULES OF CREATING UI DESIGNS
Tags: ux, uiweekly, html, javascript
Published: 2020-05-10 18:53:32

Hi guys, as always while surfing on medium. I found this beautiful in-depth blog for 7 rules of creating UI Designs.

You must check it out especially beginners like me. The link is below ✓

https://learnui.design/blog/7-rules-for-creating-gorgeous-ui-part-1.html#rule-1-light-comes-from-the-sky
Part 2 : The Magic - DEV to JAMStack
Tags: showdev, beginners, tutorial, webdev
Published: 2020-05-10 18:51:14

Now that we have learnt what a JAMStack site is, we shall proceed to the creation  of your own blog. 

## How to start?

Go to the *DEV Settings* by clicking on your profile picture at the top-right corner of your window and select *Settings*. Next navigate to *Integrations*. Here you'll see *Generate a personal blog from your DEV posts*. Click it and voila, you are ready. Just kidding, magic requires more work. 

The integration for converting your DEV posts to a self-hosted static site is done by StackBit. As you might have seen, posts on DEV are stored as Markdown files which use the Markdown syntax language. Even this post was written in Markdown syntax. StackBit takes these files (which are static of-course!) and uses them to build a blog website for you. 

StackBit creates a JAMStack site for you using three main components.
- Static Site Generator : As the name suggests this component generates the static files for your site. Some options you'll see are *Jekyll*, *Hugo* and *Gatsby*. I personally prefer *Jekyll* for it's ease of use and for the rest of this series I'll be explaining using *Jekyll*
- Repository : This is where your site data will be stored(only meta-data, not posts) and deployed from. *GitHub* is where you'll be asked to create a repository.
- [CMS](https://en.wikipedia.org/wiki/Content_management_system) and Deployment : A content management service takes care of the storing the website and your dev posts. For deployment Stackbit gives us the option of using *Netlify*.

Now let's create the site. The steps for this were already published by [The DEV team](https://dev.to/devteam), so I'm not going to write them here. You can find the exact instructions [here](https://dev.to/connecting-with-stackbit). If you want to find more technical details about the integration refer [here](https://dev.to/devteam/you-can-now-generate-self-hostable-static-blogs-right-from-your-dev-content-via-stackbit-7a5).

## TL:DR

- Create website [here](https://app.stackbit.com/create?ref=devto)
- Select a theme for your website (Fjord is awesome!)
- Select Jekyll Static Site generator
- Connect DEV and GitHub accounts (Give a funky name to your repo)
- Create project and connect to Netlify

And now the magic is complete! Your site is ready. 

In the next post I'll explain about Netlify and some of its perks.
Notes on Vue
Tags: vue, beginners, tutorial, writing
Published: 2020-05-10 18:43:10

Hello everyone, I hope you are safe and hanging in there.

I wanted to share another thing I am working on, this time is a VuePress site that I am putting together with different notes and concepts I want to be able to explain when I get to start imparting courses 😛. I figured that if I was already taking the notes and creating kind of a documentation for myself it would perhaps help someone else:

https://notes-on-vue.netlify.app/

I recently [heard](https://egghead.io/podcasts/creating-authentic-content-and-developing-yourself-with-emma-wedekind) that it doesn't matter if the content one is covering has already been written about, there are still people out there who might benefit from what the content creator has to say and the way it is presented. So here we are.

It is a WIP (and to me seems like will forever be) so there are a lot of things I haven't written, but I kind of have an idea of what I want to do with those, so in the future those will be also covered. 

This was as good a time to release what I already have as any. Maybe I can polish it with some feedback from the community too!

I will be very pleased to have you read through and see you there!
Custom Tasks in VSCode
Tags: vscode, php, productivity
Published: 2020-05-10 18:29:52

As a PHP(mostly Laravel) developer, I tend to quickly test my code with ` phpunit ` command. The inbuilt terminal in VSCode thus becomes very essential but it takes time and multiple keypresses to open the terminal, run the command and then close it. Here the custom tasks provided by VSCode comes handy. Let's have a look: 

Create a `.vscode` folder in the root directory and `tasks.json` file in it.
### Example: 1 
To run the complete test suite we use the following command:
```bash
$ vendor/bin/phpunit
```
Let's put our first task. Open the `tasks.json` file and add:
```json
{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Run all tests",
            "type": "shell",
            "command": "vendor/bin/phpunit",
            "group": "test",
            "presentation": {
                "reveal" : "always",
            }
        },
    ]
}
```
Here's a quick rundown of the properties of the objects inside the `tasks` array:

- `label`: Name of the command; Keep it according to your needs
- `type`: Type of the command; other options include `npm` 
- `command`: The actual command to be executed
- `group`: Optional; It is good to group similar type to commands
- `presentation`: The state of the task runner(terminal) while and after running the test.

To run the test: `ctrl+shift+P`, search _Run task_, press enter, find the task _Run all tests_ and BOOM!!

![ctrl+shft+P](https://dev-to-uploads.s3.amazonaws.com/i/ivwcyo07lidvrcm3iddr.png)
![Run Task](https://dev-to-uploads.s3.amazonaws.com/i/ftwh9w63laobyo3szer8.png)
![Terminal](https://dev-to-uploads.s3.amazonaws.com/i/0adhjesfryouwcmsqwf8.png)


### Example: 2
To run tests from the current or specified filename/class, we use:
```bash
$ vendor/bin/phpunit --filter=EmailTest
```
Here the filename changes and thus we cannot hardcode it. Here vscode predefined variable comes handy. In the same `tasks.json` file, add the following object in the `tasks` array
```json
{
    "label": "Run test for current file",
    "type": "shell",
    "command": "vendor/bin/phpunit --filter=${fileBasenameNoExtension}",
    "group": "test",
    "presentation": {
        "reveal": "always",
    }
}
```
Here `${fileBasenameNoExtension}` will take up the current filename without an extension from which you are running the test.

References:
- [VSCode Tasks docs](https://code.visualstudio.com/docs/editor/tasks)
- [VSCode Variable References](https://code.visualstudio.com/docs/editor/variables-reference)

### BONUS: You can assign each of your tasks to a keybinding and further smooth out the workflow.
Anna Coding Front-end Reading in Depth Week - 20
Tags: nextjs, opencv, webpack, css
Published: 2020-05-10 18:23:16

1. An in-depth guide to performance optimization with webpack
2. OpenCV directly in the browser (webassembly + webworker)
3. CSS background image tutorial with examples
4. CSR, SSR, and SSG on NextJS

https://annacoding.com/news/1E9ak08qzPrjR6lSWtjyPT/Front-end-Reading-in-Depth-Week-20?time=2020-05-10
Deno is coming
Tags: discuss, node, javascript, typescript
Published: 2020-05-10 17:45:26

The creator of [Node.js](https://nodejs.org/es/) from some time has been working in a new project called [Deno](https://deno.land/), the first stable version of this project should be published in 3 days on May 13. 

The project is defined as

> Deno is a JavaScript/TypeScript runtime with secure defaults and a great developer experience.

From the [official repo](https://github.com/denoland/deno) we can summarize some of the main features:

1. **Supports TypeScript out of the box.**
2. **Has built-in utilities.**: It include a dependency inspector(`deno info`), code formatter(`deno fmt`), test runner(`deno test`), bundler(`deno bundle`), documentation generator(`deno doc`), debugger
3. **Ships a single executable.**
4. **Scripts can be bundled into a single javascript file.**
5. **Secure by default**: This mean that unlike Node when we run our applications they by default don't have access to the file system, network or enviroment, for that we need enable them  using some flags as command line options to allow access for example `deno --allow-read=/etc`

Some difference with Node are:

1. Deno doesn't use `npm`, it uses modules referenced as URLs or file paths
2. Deno doesn't use `package.json` in its module resolution algorithm.
3. All async actions in Deno return a promise. **Thus Deno provides different APIs than Node.**
4. Explicit permissions.
5. Deno always dies on uncaught errors.
6. Uses `ES Modules` and doesn't support `require()`. 

This and more information can be found on the official repo I expose it here just in order to show a quick resume. So now that we know main features, and differences what are your thoughts regarding it.

_Will you give a try it in upcoming projects ?_
_Do you think it will cause a huge change in the Node community_
_In your opinion what is the best feature_
_What your dislike most about it_

Above I share some of the main question that I hear when I talk about it with some fellows at work. I'll be glad to read your opinions in the comments.

Thanks in advance