teleren/devto huggingface dataset:
The frustrations of having to learn on the fly
Tags: discuss, typescript
Published: 2019-06-20 16:40:21

---
title: The frustrations of having to learn on the fly
published: true
description: how many of you have lost hours of effort due to having to rush to learn a new topic?
tags: discuss, typescript
---

I recently picked up TypeScript. Coming from an object oriented background, it felt natural and easy (for the most part) to learn. 

I learn most of it in a day. However, there are some very important parts that still escape me. This is from needing to get a project done, vs taking the time to learn the other 10% of TypeScript, which is where the important tidbits live.

I spend 2 hours trying to figure out why my new module declaration files were not being found. The IDE clicked through and could find them just fine. 

I checked that they were all there, that the package.json "types" pointed to the file, all seemed to be configured right. 

Well apparently for what ever reason, you have to add "baseUrl": "." to the tsconfig.js file..... I thought that it would default to the root directory. 

Why is the hell did that fix my code? How frustrating! 

This leads me to the frustrating point that the devil is in the details. 

How many of you have been stumped, just to realize you missed something simple due to not fully learning a language? 

What was it and did you learn anything from it?
Iphone X Notch - Apache Cordova
Tags: notch, iphone10, apachecordova, cordova
Published: 2019-06-20 16:37:40

---
title: Iphone X Notch - Apache Cordova
published: true
description: Tutorial para arreglar la visualización del notch en dispositivos Iphone 10
tags: notch, iphone 10, apache cordova, cordova
cover_image: https://thepracticaldev.s3.amazonaws.com/i/ie80ybfvaoepsrcg5js0.png
---



#Arreglar Iphone X Notch - Apache Cordova

Para muchos ha sido un dolor de cabeza lidiar con el notch de los nuevos teléfonos que apple ha lanzado al mercado.

![](https://thepracticaldev.s3.amazonaws.com/i/vuuatt1j1be3eycsdurx.png)
Tengamos en cuenta los siguientes emuladores:

Iphone X
`cordova run ios -l --target="iPhone-X, 12.2" --buildFlag="-UseModernBuildSystem=0"`

Iphone SE
`cordova run ios -l --target="iPhone-SE, 12.2" --buildFlag="-UseModernBuildSystem=0"`


## Iniciamos


1. Cambiemos el color del toolbar/statusbar de nuestro dispositvo móvil.
Modificar el archivo config.xml de la raíz del proyecto.
![](https://thepracticaldev.s3.amazonaws.com/i/7ld1mot5dda8av9qsx3o.png)
Modificar la siguiente linea y reemplazar el color en hexadecimal (UI: usar el color primario de la app)
`<preference name="StatusBarBackgroundColor" value="#005eb8"/>`

2. Agregamos la siguiente línea en nuestro index.html en la sección de metatags 
` <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">`

![](https://thepracticaldev.s3.amazonaws.com/i/qt70r4s6kdfy771lo9m4.png)

Todavía no está todo, debemos modificar nuestro splash de bienvenida

3. Creamos un splash con dimensiones 2732px x 2732px (Dimension máxima para ipads) El logo de nuestra app lo centramos lo más posible al diseño.
Lo nombramos así: Default@2x~universal~anyany.png


4. Agregamos el splash screen a nuestro archivo config.xml
  `<splash src="resources/ios/splash/Default@2x~universal~anyany.png" />`
   nota: Debe ir dentro de `<platform name="ios">`
I need help with cleaning up duplicated code
Tags: react, redux, typescript
Published: 2019-06-20 16:20:23

Hey,

I would like to show you my react, redux, typescript project that I'm working on. Afterwards I would like you to help me to refactor my duplicated code. I have many functions that are doing the same but I'm not able to put it into one function.

Let's get right into it. The application has something like a file tree structure to store urls. So something like the bookmarks that most browsers provide.

![](https://thepracticaldev.s3.amazonaws.com/i/vbi8en24r2m6s5w2t8iy.gif)

I think it is easy to see that I'm someone who is mainly concentrating on functionality over the look of my application because what I did so far is unbelievable ugly.

Nevertheless I care a lot about clean code. And there is one thing that I just can't figure out how to make it better, even so I'm sure there must be a nice solution.

In my little clip you can see that you can edit every single field of an url by clicking the edit button. Editing the field and clicking the button again will send a request to my backend to update this field. It is working fine but every single button is calling a different function that is doing the same just for an other field.

Here you can see the functions that are toggling the fields of the url to input fields and dispatch an action that the ``urlFormFields`` property has been changed.

```typescript
  toggleIsNameEditField() {
    this.props.urlFormFields.isNameEditField = !this.props.urlFormFields.isNameEditField;
    this.props.dispatch(updateUrlFormFields(this.props.urlFormFields))
  }

  toggleIsDescriptionEditField() {
    this.props.urlFormFields.isDescriptionEditField = !this.props.urlFormFields.isDescriptionEditField;
    this.props.dispatch(updateUrlFormFields(this.props.urlFormFields))
  }

  toggleIsUrlEditField() {
    this.props.urlFormFields.isUrlEditField = !this.props.urlFormFields.isUrlEditField;
    this.props.dispatch(updateUrlFormFields(this.props.urlFormFields))
  }
```

The property ``urlFormFields`` is looks the following

```typescript
export interface UrlFormFields {
  isNameEditField: boolean,
  isUrlEditField: boolean,
  isDescriptionEditField: boolean,
  isRatingEditField: boolean,
}
```

My first try was to create a function that looks something like this
```typescript
  toggleEditField(editField: boolean){
    editField = !editField;
    this.props.dispatch(updateUrlFormFields(this.props.urlFormFields))

  }
``` 

But it simply would not work. 

Other things came into my mind which just would not work out :(

You can find the code here https://github.com/SirHeadless/FileSystemTree 

If you are willing to help me but you would like to run this code locally I would also mock the calls to the back end and put it into a own branch.

I realized from my previous post's on different pages that it is really hard to me to communicate what my problem is and to make it understandable. If you have any question or need help to help me please contact me :) 

Any help is highly appreciated!
I just took couple of LinkedIn quizzes and was wondering do they even matter?! 🤔 
Tags: discuss, career
Published: 2019-06-20 16:19:38

---
title: I just took couple of LinkedIn quizzes and was wondering do they even matter?! 🤔 
published: true
description: Will recruiters take the time to consider those Passed: LinkedIn Assessments
tags: #discuss #career
---

Apparently, Linkedin is using their resources at Linkedin Learning (formerly Lynda) to create pass/fail tests with adaptive questions for specific skills. If you pass the timed test and find yourself in the 70th percentile you receive a badge. 

![](https://thepracticaldev.s3.amazonaws.com/i/txng1r0jmo6tnhkktd1r.jpg)

You can choose whether you’d like to display this badge on your profile to represent that you’ve passed the assessment for that given skill. If you don’t pass an assessment for a given skill, you’ll be able to retake it one more time after three months and failed tests are not displayed on your profile.

This re-imagination of skills is far more reliable than someone checking a box on your profile to endorse a skill. I do like the idea that skills on LinkedIn profiles are becoming reliable but **will recruiters take the time to consider this**? There hasn't been much discussion about this on the web. Please let me know what you think.
Ask dev.to - struggle with flask+sqlalchemy
Tags: flask, gunicorn, postgres, sqlalchemy
Published: 2019-06-20 16:06:33

---
title: Ask dev.to - struggle with flask+sqlalchemy
published: true
description: 
tags: flask, gunicorn, postgres, sqlalchemy
---

Hello! Need some help from the bright minds of dev.to 🙏 Recently I started to implement a backend for my project using flask + sqlalchemy (postgres + pgbouncer) + gunicorn. The problem is, that it performs only ~1 request per second... I started to play with the gunicorn config and set 5 gevent workers, 🙈 monkey patched psycorp2 (the driver for postgres). Didn't work. Okay, maybe sqlalchemy blocks the main thread and the app performs poorly. So I switched to 5 sync workers. Now at least it should give me 5 RPS... Not this time. After some investigation, I found out that the bottleneck was between my web app and the db. pg bouncer (47 connections) and postgres are hosted on digital ocean, so I believe the guys made the right settings for me. The only thing that is left is sqlalchemy and how it handles sessions (and my hands which wrote the code). Maybe somebody had a similar issue or can give advice where to look further? Thank you in advance, you're awesome 💚
How to Grow a Multi-Sided Platform: Start with Single Player Mode
Tags: startup, meta
Published: 2019-06-20 15:50:40

_I got this question in a DM and felt like answering it more broadly. Obviously by founding DEV, I have some ideas on this topic._

***

It started by focusing hard on "single player mode".

The platform sort of grew from me delivering content and seeing if it would get it shared around social media, etc. This pre-dates even having the [dev.to](/) website.

I started the website by interviewing popular developers, like this post:

{% link https://dev.to/ben/dhh-on-the-future-of-rails %}

Here's a trick: People are pretty willing to say yes to being interviewed if you make it easy for them.

Gradually I added more "networky" kind of functionality, but only as it made sense for the number of daily users. There was no sense in having too much functionality early on besides my own blogging, but I just added one thing at a time. This takes a **long time** even in the best case scenario, so this had to be a solo project until it started looking promising.

I then found @jess and then @peter to co-found the company when it looked like that was actually a pretty good idea, but this was more than two years from its inception. This was also an element of evolution. These two brought in very different, complementary skills into the venture. Whenever we have the opportunity to expand, we look for people who bring in new perspectives and skills.

From there we followed our nose for interesting ways to make the platform more appealing for more people. But it was all with the feeling that it's hard enough to even get your friends and family to actually _use_ things you've built. It's hard to change people's habits, so you have to be truly committed to observing how people react to things, having empathy for different use cases and committing a lot of time to the project.

Anyway, that is what worked for us. I think each situation has different opportunities, but the idea of starting with somewhat "single player mode" and evolving as needed seems like a repeatable pattern in general. DEV is a multi-sided marketplace for ideas which started as a one way flow. Any marketplace could have a similar dynamic.

Happy coding!
What are your top ten command lines?
Tags: discuss, productivity, career
Published: 2019-06-20 15:38:01

Run the following command list to find out!

```sh
history | cut -c8- | sort | uniq -c | sort -rn | head -n 10
```

Mine is the following:

![image](https://user-images.githubusercontent.com/418605/59861137-44a66b00-934e-11e9-899a-4ff6d9169df7.png)

Since I used a lot of aliases, here is the expanded version:

1. `git status` (alias gst)
2. `git push` (alias ggpush='git push origin "$(git_current_branch)"')
3. `git commit` (alias gca='git commit -v -a')
4. `ls` (list files current directory)
5. `code .` (opening visual studio in the current folder)
6. `git pull` (alias ggpull='git pull origin "$(git_current_branch)"')
7. `..` (go back previous directoy)
8. `grunt serve` (alias eos='cd "$LOCKHART"/eos && git pull origin "$(git_current_branch)"; grunt serve')
9. `git checkout master` (alias gco='git checkout')
10. `grunt karma:...` (run unit tests)
Goodbye Sass, Hello CssPresetEnv
Tags: css, sass, csspresentenv, nuxt
Published: 2019-06-20 15:12:41

---
title: Goodbye Sass, Hello CssPresetEnv
published: true
slug: goodbye-sass-hello-csspresetenv
description: My experience dropping Sass from my Nuxt projects
tags: css, sass, csspresentenv, nuxt
---

For a long time every project I worked with depended on `node-sass` and `sass-loader`. It always bothered me that CSS itself wouldn't allow nesting of rules. Recently I learned you can have access to [stage 0 css-preset-env][stage-0] features in Nuxt via `nuxt.config.js`:

[stage-0]: https://preset-env.cssdb.org/features#nesting-rules

```js
export default {
  build: {
    postcss: {
      preset: {
        stage: 0
      }
    }
  }
}
```

Now your `<style>` blocks in Nuxt can read like:


```css
<style>
& .content {
  flex-basis: 75%;
  padding: 20px;
  & h3 {
    user-select: none;
    & span {
      color: #2f495e !important;
      text-shadow: 1px 1px #fff;
      margin-bottom: 0px;
      border-bottom: 2px solid #2f495e;
    }
    &:not(:first-of-type) {
      margin-top: 50px;
    }
  }
}
</style>
```

Note that syntax is [a bit different][nesting-spec] (and current syntax highlighters can't really grok it): you're always required to use a nesting selector (`&`), but otherwise it feels just about the same.

[nesting-spec]: https://tabatkins.github.io/specs/css-nesting/

There's a ton of other [css-preset-env goodies][goodies] you can use. 

Make sure to check them out!

[goodies]: https://preset-env.cssdb.org/features
Blockchain Development - Explained
Tags: blockchainbitdeal
Published: 2019-06-20 13:14:32

---
title: Blockchain Development - Explained
published: true
description: Blockchain is a progressive technology that uplifts every industry verticals.
tags: blockchain bitdeal
---

##Blockchain - Introduction

The blockchain technology is a most promising technology that transfers the whole economy into more transparent globe.This offers every industries a decentralized, democratic, proficient and secure system for recording and transferring  their data.

Thus, Blockchain is a distributed ledger technology which is a open source and used to transfer,store transactions.

##Blockchian Development 

Blockchain development is nothing but the process of utilizing blockchain technology for every business growth and making a remarkable changes in the digital world.

Every industry, knowing the benefits of blockchain technology adopts the 
blockchain development for their business.

##Why Blockchain Development ?

Here is a list of reasons to blockchain development for every business .
1. The process of Automation is possible every industry with the implementation of blockchain technology.
2. Presence of vast data in every industry is a main challenge and use of blockchain technology helps to reduce data storage costs.
3. Adoptation of Blockchain for your business can reduce time  and help you reach your global customers quicker as possible.
4. As Blockchain is an open source technology it enhance the data storage and security that every business individual and end-users.
5. Implementation of blockchain can reduce the risks such as data duplication,data theft and lot more.

##Bitdeal - Blockchain Development Company 

Bitdeal is a leading blockchain development company who provides complete blockchain related services and solutions for more than 20+ industries.
Some of their blockchain solutions includes 
1. Smart contract development
2. Private/Custom  Blockchain Development
3. Dapp development
4. STO/ICO development
5. POC and Hyperledger blockchain development and lot more.

To know in detail about all blockchain solutions provided by Bitdeal, just have look at their Blockchain Solutions.

Source : [Bitdeal](https://www.bitdeal.net/blockchain-development)
Security in OSS DevOps
Tags: devops, devsecops
Published: 2019-06-20 14:33:59

---
title: Security in OSS DevOps
published: True
description: Security in OSS DevOps (Java) - WhiteSource Bolt
tags: #DevOps #DevSecOps
---

{% slideshare wDT4Q96eOUDG0A %}

My YouTube Channel:
https://www.youtube.com/c/engsooncheah

Blog:
http://www.techconnect.io/
Update twitter link for dev.to
Tags: help
Published: 2019-06-20 14:32:29

---
title: Update twitter link for dev.to
published: true
description: 
tags: help
---
Recently I have changed my [twitter](https://twitter.com/dhanushkadev) account username. But, I don't see any option in dev.to setting to update it. Someone please help me to find where to change.
Do you use time-tracking for work or for your personal time?
Tags: discuss, productivity
Published: 2019-06-20 14:31:29


At one of my office jobs, we had a time tracker on our computers that was measuring the time spent at the office, and we needed to spend ~40h/week there. That tracker had a lot of issues, and later the company stopped using it.
At my previous (remote) job, we reported the hours spent on each task, but I was not tracking my time meticulously.

I've recently stumbled upon a [Nebulab playbook](https://bit.ly/2XXBL8l) where they describe pretty strict rules about the time tracking.
E.g. developers need to report separately:
- billable time (spent working on clients' projects)
- time spent on other tasks like 1:1s, studying, etc
- "wasted" time
- report if they worked more or less than 8 hours a day.

It seems like a convenient way to bill clients, but I suppose it can cause stress for the developers.

Personally, I see time tracking more as a personal productivity technique. I often use the Pomodoro and sometimes plan my day hour by hour, but always add some buffering time for context switching and unpredictable stuff.

And what are your thoughts on time tracking?
JavaScript Fundamentals for Absolute Beginners
Tags: javascript, webdev, tutorial, beginners
Published: 2019-06-20 14:29:56

Learn JavaScript hands on in quick and easy steps

This hands on JavaScript training course provides the fundamental knowledge necessary to design and develop dynamic Web pages using JavaScript. It introduces students to client-side JavaScript and how the language can be used to turn static HTML pages into dynamic, interactive Web pages.

JavaScript topics include adding JavaScript to a Webpage, use of dialogs to interact with the user and JavaScript intrinsic objects such as Date, Array and Math. Students will also be introduced to the Document Object Model (DOM), creation of functions, event handling, form validation, object creation and more.

What you'll learn
- Create JavaScript Programs
- User Variable and Operators
- Launch Popup Boxes
- Write conditional and looping logic
- Create custom functions
- Handle Events Programatically
- Catch and handle errors
- Learn the basics of debugging
- Manipulate HTML from JavaScript
- Use the Browser Object Model
- Do HTML form validation
- Create custom JavaScript Objects

{% youtube G9L9NWiqrrU %}
Is there any pattern for handling network error when sending requests?
Tags: discuss, javascript
Published: 2019-06-20 13:56:47

Hi everyone, so cool to have you back here on Dev. 

Today I wanted to speak about something that I thought and never tried to test in a real app. 

Let's say I am answering an email. I opened my web app and log to Gmail for example.

My network is fine, I type my answer and while the time goes by I am having a network failure. The app did not warned me, and I press "send".

# How would you tackle this? 

In one hand, the classic way is to catch the 500 and inform the user nothing can go on for the moment. 

Gmail in another hand is putting the request in queue and will send the email as soon as possible.

**What do you think about it?**

- Is there a good way to handle network fluctuations while sending requests to the server, so the user have the best experience possible?

- What about queueing requests in the browser cache, and sending them as soon as the network is ok?

- Do you think retry strategies, like n retry then fail would fit client-to-server architecture?
Progress Indicator With Fetch
Tags: javascript
Published: 2019-06-20 13:50:14

---
title: Progress Indicator With Fetch
published: true
tags: javascript
series: Blog-A-Day in June
---

A quick tip: [in a previous demo](https://dev.to/samthor/pwas-that-download-like-apps-fd6), I showed how we can download a large file to seed the content for a Service Worker. If you look fast enough, you'll see a progress indicator. (Although for a small file, blink and you'll miss it!) 👀

The code is pretty simple. Let's start with a simple async `fetch`:

```js
async function downloadFile(url) {
  const response = await fetch(url);
  const arrayBuffer = await response.arrayBuffer();
  const bytes = new Uint8Array(arrayBuffer);
  // do something with bytes
}
```

The `arrayBuffer` call waits until the entire target has downloaded before returning the bytes. Instead, we can consume 'chunks' of the file (since we'll get parts of the file over time) at a time, to get a sense of percentage.

## Check The Header

Firstly, we read the "Content-Length" header of our response: this is something the server sends us before the data, so we can actually work out how far along we've gone:

```js
  const response = await fetch(url);
  const length = response.headers.get('Content-Length');
  if (!length) {
    // something was wrong with response, just give up
    return await response.arrayBuffer();
  }
```

If there's no valid header, then either there's something wrong with the response, or the server hasn't told us how long it is. You can just fall back to whatever you were doing before.

## Chunks

Your browser is receiving chunks of bytes from the remote server as the data arrives. Since we know how long the total response will be, we can prepare a buffer for it:

```js
  const array = new Uint8Array(length);
  let at = 0;  // to index into the array
```

And grab the reader, which lets us get chunks:

```js
  const reader = response.body.getReader();
```

Now, we can store where we're _up to_ (in `at`), and insert every new chunk into the output:

```js
  for (;;) {
    const {done, value} = await reader.read();
    if (done) {
      break;
    }
    array.set(value, at);
    at += value.length;
  }
  return array;
```

Within the loop above, we can log the progress as a percentage, something like:

```js
    progress.textContent = `${(at / length).toFixed(2)}%`;
```

Then as above, just return the array: we're done.

# Fin

20 👋