teleren/devto huggingface dataset:
When you're not ready for your new role
Tags: career, video
Published: 2020-08-22 14:24:48

---
title: When you're not ready for your new role
published: true
date: 2020-08-21 21:11:18 UTC
tags: career,video
canonical_url: https://www.notonlycode.org/what-if-you-were-promoted-too-early/
---

{% youtube MbJ9Gc4qD1E %}

In this video I'm talking about an interesting problem: getting promoted too early. I don't think this is a particularly common issue, but it's a one which can have some pretty bad consequences. In the video I'm talking about: why companies might promote their employees too early, what are possible consequences and what to do if you believe that you're not ready for your current role yet.

I believe that this problem specifically affects later stages of career, from lead developer (maybe senior?) onwards, and particularly affects transition from individual contributor to leadership roles.
OpenRCT2 2020 Survey Results
Tags: opensource, github, yearinreview
Published: 2020-08-21 21:02:30


It's 2020 and we finally ran another survey on the OpenRCT2 community to see how the demographics have changed [since the last time, in 2016](https://www.reddit.com/r/openrct2/comments/4ta80w/openrct2_survey_results). Interestingly enough, we had about the same number of respondents, ~1300, which means you are all very loyal <3, but also that we didn't attract too many new players. Come on, refer it to your friend, have you told them that we now have plugins to wreak havoc in the game in a whole new sort of ways? :D

Check it out all out on [OpenRCT2 Website](https://openrct2.io/blog/2020/survey2020.html)
What do you use for structured logging in NodeJS?
Tags: discuss, help, node, javascript
Published: 2020-08-21 21:02:04

I use Winston + Morgan with daily rotating log file.

But, the searching, filtering is kind of hard to do. I know there are online SaaS loggers like loggly. I'm searching for some good & easy to setup practices about backend logging.

How do you setup your logging in NodeJS apps or any backend?
My Problem with HTML Tables
Tags: html, css, frontend
Published: 2020-08-21 20:59:51

I feel like no css framework has really solved the problem of HTML tables. 

Take this basic bootstrap table for example: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/owsbo6qzogfdxsgu8pfj.png)


## "Responsive" Tables On Mobile 🙄
Even the `table-responsive` class is hardly "responsive" it just makes the table scroll sideways off the screen. This is not an ideal solution. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7fjq5edek0e7b49qityd.gif)

## My Alternative 

I string together `div`'s with `col` classes to make sure the interface responds well on mobile devices, so instead of scrolling offscreen, content flows into nice rows: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gm4huroblw8qmfxy3n04.png)

## Codepen 
Open this up and drag the preview window to get a gist of what I mean: 

{% codepen https://codepen.io/johnsalzarulo/pen/PoNNzgY %}

# How does everyone else solve this problem? 

I like my solution because it is one piece of code that carries into mobile and desktop, however it's just so incredibly verbose. 

What CSS frameworks handle this well? How else have people solved this?
Please don't overuse optional chaining
Tags: javascript
Published: 2020-08-21 20:11:58

This post is small rant on optional chaining and it's usage.

If you don't know, optional chaining allows you to use shorten your object reference chain by returning `undefined` when it sees a non existent reference in the chain.

Consider a scenario where a person has his country name specified in the chain: `person.location.address.country.name`. Now what if the person doesn't have to specify a whole bunch of this? Location is optional, address is optional if that is present country is optional and so on. You are now either left with shielding your code with lots of `if` or `&&` 🛡 or lodash [`get`](https://lodash.com/docs/4.17.15#get) 🎣 or catch the error yourself 💣.

Optional chaining understands this pain and can shorten it to:

```javascript
const countryName = person.location?.address?.country?.name;
```

This will not hit an error and will just return `undefined` if the chain fails. Also, it works with TypeScript 🎩.

[Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining)

This is obviously a welcome feature, I do use it myself a lot. But sometimes, we see that it is overused. I have overused it in the example itself, `country?.name`

Is there a scenario where there would be a `country` but the `name` is not present? A country without a name?

If there is not, then it should be written as:

```javascript
const countryName = person.location?.address?.country.name;
```

It's true that you are skipping an error in some case when there would be an error and country name is not present. But then, you might just be delaying the inevitable.

```javascript
const coordinates = location?.coordinates;

// eternities later
plotMap(coordinates);
```
If it is mandatory for location to have coordinates, what you are doing here is to move the impact of the error as far from the origin of it. 

When Sentry (error tracking system) says that there is an error in `centerMap` function, you know have to trace back till the roots to figure out there is something wrong with your code. Otherwise, it would have straightforward told you that it cannot get `coordindates` of `undefined`.

![](https://dev-to-uploads.s3.amazonaws.com/i/ue0ioti5vxxi2y1l7cwd.jpg)

If you don't run into an error, the UI is still going to be messed up and you will have the privilege of having to explain to the user that _it works on your system_ because you aren't looking at the cause, just the effect of it somewhere else.

In other words, TypeScript or use Optional Chaining responsibly.
Join a developer's community..
Tags: codenewbie, 100daysofcode, productivity
Published: 2020-08-21 19:10:32

This was exact advice I saw on every blog or article that I went through on **Beginner's guide to getting started with coding**


It's quite easy being a programmer/coder👨‍💻 to get into the 'self-isolation' zone and not want to talk/communicate especially when **"wired in"**. Although,it increases focus towards work,it can be self-destructive at the same time.



That's where community comes to rescue.
So here are some advantages of joining a developer's Community.
##Support🙏
As a beginner, self-doubt is very common.And of course, Imposter syndrome is real. Am I good enough for this? How can I keep up with all these new technologies? What should I learn?
A community supports,encourages to keep learning and sharing.
##Increases network
We all know **Man is a social animal**. And network is important as it increases Knowledge,creates Opportunities, forming genuine Connections.
##Learning from experienced🤓
Smart work is better than hard work, don't you agree? And this is very beneficial for CodeNewbies to get help when stuck. There are devs out there who genuinely want to help you. So why not?

**There are a lot of others advantages like peer-programning ,code reviews, relating to tech memes as well.**

Last but not the least
## Becoming a better person
The community makes you realise the importance of helping and sharing and always being down-to-earth.

Thank you for reading!
#30DaysOfCJS: Futurist Code Bases - Integrating JS of the Future Today
Tags: community, javascript, cloud, nocode
Published: 2020-08-21 19:07:12

---
title: #30DaysOfCJS: Futurist Code Bases - Integrating JS of the Future Today
published: true
description: #30DaysOfCJS Day 20, Futurist Code Bases - Integrating JS of the Future Today
tags: community, javascript, cloud, nocode
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/uyl5warqxnard89xlkmt.png
series: 30DaysOfCJS
---

*This is a follow up post for Day 20 of* **#30DaysOfCJS**, *learn more about* **#30DaysOfCJS** *here* {% link jimcalliu/30daysofcjs-1jd3 %}

**Futurist Code Bases - Integrating JS of the Future Today | Brian Holt | CascadiaJS 2019**

If you'd like to watch the talk, here is the Youtube link.
{% youtube VeIkhgb-i68%}

Further readings:
- [Github Codespaces](https://github.com/features/codespaces)
- [Visual Studio w/ Codespaces](https://docs.microsoft.com/en-us/visualstudio/codespaces/how-to/vside)
Short Videos
Tags: learning
Published: 2020-08-21 19:06:48

When learning new technology, I seek short (less than 4 minutes) videos.

Videos tend to be engaging and easy to follow. When talking as opposed to writing, we tend to be entertaining and make ourselves more understandable.
 
Watching a video requires less motivation. When reading, it's more alone and it can feel like that you are the only active agent in the learning process. However, when watching a video, it feels like a social experience, and someone else is leading you to learn, with enthusiasm.
 
Lastly, if lucky, we can find some short videos that teach a lot in 4 minutes, preserve our passion to learn, and sometimes clear up some big confusion for us.
Send python List of Dictionaries to jinja in a Flask Project
Tags: flask, python, webdev, sqlalchemy
Published: 2020-08-21 19:03:44

Sometimes it happens that the data is stored in two different tables but we want to run a for loop in Jinja which contains both the data from different databases.

So, sending two different lists won't work for us as the For-loop will then iterate the lists individually so in this case we have to send a list of dictionaries to jinja.
<hr>
# When I will use this
Suppose I am managing a class and I have two databases,
One has all the contact data like 
name, address, Phone Number, etc.

And the Other one has data about how many times a particular student was absent.

The common column between two tables is the UID which is unique for every student

# How it will be done
so, in that case, we can do this in Python: ![List of Dictionaries to jinja](https://dev-to-uploads.s3.amazonaws.com/i/7qvl0btrvwx50mkapo1z.png)

And this on the (HTML)Jinja Side: ![List of Dictionaries to jinja](https://dev-to-uploads.s3.amazonaws.com/i/0per87ri5vp385ppoj47.png)
Online Question asking and get answer from experts       
Published: 2020-08-21 18:51:25

I have published an app on playstore named "STUDENTS BD" which have following features:
1.students can ask question of physics chemistry Math and ICT from class 9 to 12.Expert from universities will answer it.
2.Here's Tuition media facilities as well.
3.All public exam result is available in it.
https://bit.ly/2zRoyHx
Convertendo Callbacks para Promises no Node.js
Tags: node, typescript, javascript, npm
Published: 2020-08-21 18:42:21

Um padrão muito usado no início do Node.js foi o padrão **Callback**. Esse padrão foi a primeira forma de resolver o assincronismo da single thread do JavaScript.

Veja um exemplo fake abaixo:

```js
function getUserCallback(id, callback) {
  setTimeout(function () {
    callback(null, {
      id,
      name: 'Gabriel Rufino'
    })
  }, 2000)
}

getUserCallback(1234, function (error, user) {
  if (!error) {
    console.log(user)
  }
})
```

Felizmente, hoje nós temos **Promises** e a dupla amável `async/await` para tratar o fluxo assíncrono de forma mais elegante.

A mesma função `getUser` usando `Promise`:

```js
function getUserPromise(id) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve({
        id,
        name: 'Gabriel Rufino'
      })
    }, 2000)
  })
}

getUserPromise(1234)
  .then(function (user) {
    console.log(user)
  })
  .catch(function (error) {
    console.error(error)
  })
```

Mas nem tudo são flores. Ainda existem diversas funções ou pacotes npm que funcionam apenas com callbacks. Com sorte, o Node.js tem por padrão uma função que nos ajuda a transformar funções que recebem um callback como um argumento para uma função que retorna uma `Promise`.

É o helper `util.promisify`:
```js
const util = require('util')

const functionPromise = util.promisify(/* Função aqui */)
```

Veja um exemplo de conversão:
```js
const { promisify } = require('util')
const getUserCallback = require('./getUserCallback')

getUserCallback(1234, function (error, user) {
  if (!error) {
    console.log(user)
  }
})

const getUserPromise = promisify(getUserCallback)

getUserPromise(1234)
  .then(function (user) {
    console.log(user)
  })
  .catch(function (error) {
    console.log(error)
  }) 
```

**Importante:** A função deve seguir o padrão **callback**
1. O callback deve ser o ultimo argumento
2. O primeiro argumento do callback deve ser o possível erro

Era isso! Obrigado :D
New features - Chrome
Published: 2020-08-21 18:24:22

Hey there!
You're from IT ?
So you've came at the right blog!
We have some new features in chrome -
Sometimes CSS debugging is very tough for developers. We don't even know how many unused CSS we write and incorrect syntax etc. 

Let's see what new features chrome is providing us - 
So here Chrome is giving us some new features that will relax us with tricky CSS.  By using these features, we will can get an overview of our website like - about fonts, colors, number of unused declarations, number of media queries, etc.

* Open up DevTools (Command+Option+I on Mac; Control+Shift+I on Windows)
* Head over to DevTool Settings (? or Function+F1 on Mac; ? or F1 on Windows)
* Click open the Experiments section
* Enable the CSS Overview option

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5gpy8ftxegfl0ysroz6b.png)

Have a look at this! We get a different CSS overview tab in devtools menu, when we close Settings. You have to make sure that it's not hidden in overflow menu.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e32n1sw052gsedlmo3jp.png)

Also notice that the your report is divided in some sections which should include colors, fonts, unused declaration and some media queries. Now that's a quite a lot of info available very easily in a little space just served for you.

Now if you pay attention you would notice that this helps us not only as front enders but also as designers. As a web designer can sort this and start checking our work to make sure that from head to toe or from color palette to the font stack everything is cleared/ sorted.
Modular Javascript: An intro to import and export 
Tags: react, javascript, beginners
Published: 2020-08-21 18:22:20

ECMAScript6(ES6), the standardization of javascript, introduced the import and export functions to the language to encourage and facilitate modular programming(MP). I wanted to discuss what modular programming is and how it's handled in javascript.

So first off modular programming is a software design technique that breaks your code into seperate(or modular) components for the purpose of not only cleaning up but also creating interchangeable and reusable code. Imagine having a larger scale application or website with a lot of functionality and having hundreds of lines of code in one file to handle it all. It becomes difficult to navigate and is just unpleasant to have to sift through so much code whether it's your own code or not. Modular programming is the solution to such a circumstance and does wonders for your code. Now it's not a modern phenomenon in coding by any means in fact it's been around since the 80's but it's not incorporated into every coding language or necessary for all of them. It was however introduced to javascript in 2015 and is used in many if not all modern frameworks.

The whole idea behind MP is to separate your functions and components into their own files and only bringing them in when that sort of functionality is required. This makes your code highly reusable and easier to debug. Not only that but it makes your code easier to navigate and encourages the use of the single responsibility principle. It's a no brainer why javascript adopted it. 

Javascripts way of handling MP was to introduce the import and export methods. When you're trying to use a function inside another file you must *export* it out of its location and *import* into the file where it's needed. Here's a basic example of how that would look. 

In the example.js file I've added a very simple addition function. Notice how before the function prepend *export* 

```
export function add(a, b) {
    return a + b;
}
```

Now in the index.js file I first import the function by adding it in the curly brace like so 

```
import { add } from './example.js';

console.log(add(10 + 3))
```

Now when I run the console log from the index.js file it runs and outputs 13 so the import worked even though the function is in a separate file. Now that's it to the absolute basics but that concept can be applied to giant functions or entire subsets of functions to keep your code organized, neat, and reusable.
First Flutter App - Minutes
Tags: flutter
Published: 2020-08-21 18:06:48

Flutter is one of the best things that happened to me this year given the fact that we are all undergoing this pandemic season. 

It has been a long while since I have been trying to learn Android. I have gone as far as buying a Udemy course on Android and looking up Macbook prices for iOS coding. None of that worked though.

So being a JS developer, Flutter was just what I was looking for. The concepts, the way code is structured are very easy to pick up and if you have a bit of exposure to React, you will feel right at home. 

With concepts like render == build, setState == setState, route == Navigation.push, componentWillUpdate == initState and much more similarities it's a breeze for a react dev. So please take time off and learn this amazing tech. 

It's been 3 weeks and this is the first app on the playstore. GO ahead and check it out guys. https://play.google.com/store/apps/details?id=com.souparnika.newsapp

Looking forward to more amazing apps. Oh and if you are worried about community pub.dev and stackoverflow are the only things you will ever need. 

Happy coding!
Insertion Sort
Tags: javascript, sorting, algorithms
Published: 2020-08-21 17:59:00

This is my second post on Sorting algorithms.

We will see how *Insertion Sort* works

Insertion sort is another naive sorting approach which can't be used for large data sets. But, if you understand the crux of how it works under the hood. It's easy to implement.

Below is the Pseudocode for the sorting algorithm

*Pseudocode*

1. Element at the very first index is assumed sorted
2. You pick the element at the second index
3. Compare the element with the sorted subarray list (one element at a time)
4. If element compared within the sorted subarray list is bigger than the current you will shift them one place to the right.
5. You will repeat the above process until either you reach the left end of the array or if the element compared with is less than the current element.
6. Repeat the process until all elements are sorted.

I got this beautiful visual representation of how it works in a nutshell. 

Please click on the below reference link to check it out.

https://tutorialsbookmarks.com/wp-content/uploads/2019/08/Insertion-sort-example.gif

Below is the source code implemented in JavaScript.

This is not a pure function-based implementation!

![Insertion Sort JS](https://dev-to-uploads.s3.amazonaws.com/i/jieyzle3roi3h6enh4pp.png)

Hope you like this, please share your comments and I am looking forward to any optimizations that can be done here.

On my next post, we will see the Selection Sort and also understand how it's similar to the Insertion sort we saw above.

For this content, I got an awesome video reference that I can't wait to share.

See you in the next post!

Thanks,
Sudharsanan Ravichandran
Why I started Graphql
Tags: graphql
Published: 2020-08-21 17:57:24

Well, with a couple of years of experience with REST APIs, it was time to try something new. That is how I ended up with GraphQL. This amazing new alternative to REST. 

Turns out it is much more logical than REST and is really easy once your project starts growing. Yeah, the initial setup is a bit time taking but I guess it's worth the effort. 

I heard they have caching and subscriptions. Apparently graphql has a feature to cache HTTP requests. It has several different caches like Network, Optimistic, etc. I started with Optimistic caching in a flutter graphql client library for a todo app. Apparently it checks the network for any change and then if none found, uses the cache. 

Whereas subscriptions are a way to trigger information to the client upon some events on the server. I assume they are using WebSockets inbuilt. Still waiting to try this thing out. 

Overall loved the coding part, code looks very nicely structured than the previous REST. 

Check the repo over here -
https://github.com/visakhvjn/todo

Shall update when I find newer things as I learn them. A thing I observed was how there is a delay compared to the REST counterparts. Not sure if it's the way I am doing things, but the first look at performance says it's a bit slower than REST. 

Also, if you guys are looking towards a new project, go ahead with NestJs with graphql plugin, it greatly simplifies the implementation process.

Hoping to make some exciting projects in this tech.
Golang Time Format
Tags: go, time, format
Published: 2020-08-21 17:55:41

---
title: Golang Time Format
published: true
description: 
tags: go,golang,time,format
---

{% github gomodul/waktu no-readme %}

### Year

**format**: `2006, 06`

```go
fmt.Println(time.Now().Format("2006")) // 1993
fmt.Println(time.Now().Format("06")) // 93
```

### Month

**format**: `January, Jan, 01, 1`

```go
fmt.Println(time.Now().Format("January")) // September
fmt.Println(time.Now().Format("Jan")) // Sep

fmt.Println(time.Now().Format("01")) // 10, 09
fmt.Println(time.Now().Format("1")) // 10, 9 
```

### Date

**format**: `02, 2`

```go
fmt.Println(time.Now().Format("02")) // 10, 09
fmt.Println(time.Now().Format("2")) // 10, 9
```

### Day

**format**: `Monday, Mon`

```go
fmt.Println(time.Now().Format("Monday")) // Friday
fmt.Println(time.Now().Format("Mon")) // Fri
```

### Hour

**format**: `15, 03, 3, PM`

```go
// 24 hours
fmt.Println(time.Now().Format("15")) // 13 

// 12 hours
fmt.Println(time.Now().Format("03")) // 01, 12
fmt.Println(time.Now().Format("3")) // 1, 12
fmt.Println(time.Now().Format("PM")) // AM, PM
```

### Minute

**format**: `04, 4`

```go
fmt.Println(time.Now().Format("04")) // 37, 01
fmt.Println(time.Now().Format("4")) // 37, 1
```

### Second

**format**: `05, 5`

```go
fmt.Println(time.Now().Format("05")) // 11, 01
fmt.Println(time.Now().Format("5")) // 11, 1
```

### Nano Second

**format**: `.999999, .999, .99, .9`

```go
// Now
fmt.Println(time.Now().Nanosecond()) // 130037000

// Format
fmt.Println(time.Now().Format(".999999")) // 130037
fmt.Println(time.Now().Format(".999")) // 13
fmt.Println(time.Now().Format(".99")) // 13
fmt.Println(time.Now().Format(".9")) // 1
```

### Time Zone Location

**format**: `MST`

```go
fmt.Println(time.Now().Format("MST")) // WIB, UTC, +04, -07
```

### Time Zone Offset

**format**: `Z07, -07`

```go
fmt.Println(time.Now().Format("Z07")) // +07, Z, +02, -07
fmt.Println(time.Now().Format("-07")) // +07, +00, +02, -07
```


### Example

```go
fmt.Println(time.Now())
// 1993-09-10 13:37:11.000000011 +0700 GMT+7

"2006-01-02 15:04:05.999999999 -0700 MST" 
// 1993-09-10 13:37:11.000000011 +0700 GMT+7

"2006-01-02T15:04:05Z07:00"
// 1993-09-10T13:37:00+07:00

"2006-01-02T15:04:05.999Z" 
// 1993-09-10T13:37:11Z 

"Monday, 02 January 2006 MST. 15:04:05.999." 
// Friday, 10 September 1993 WIB. 13:37:11.993.

```