teleren/devto huggingface dataset:
I lost my job. Part 1.
Tags: career, retrospectives
Published: 2020-04-12 10:28:27

I love what I do.
When I thought I finally get the hang of what I value I am bringing to the company and my colleagues -- my company crashed.

My gratitude journal is full of thanks for the work I was doing -- we must have done something right.
My passion is to build the stuff that delivers value to our users.
My job is to build software engineering teams and build digital product features.

Along the way, I built trusts and make friends.
Good working software is the side effect of having a healthy team relationship.

You heard of, "if you want to go fast go alone -- if you want to go far, go together"?
It is all true.

We haven't got around to deploy a big ass Kubernetes yet but we did build a lot of cool stuff in Node.js, Golang, and Elixir.
Serverless is damn cool -- we have a solid plan to strangle our internal services with more serverless.

Water under the bridge.

But I am not looking for a job now.
I lost my job, and I lost myself.
I am searching for me.

I started two journal topics since then bad news -- one on the resources to handle tech interviews.
And, a list of retrospectives.

Let me know if you would like to read more of my journey back to the new exciting world, and my learnings along the way.

Keep safe.
🙏🏻😊
Things No One Tells You About Test Scenario Vs Test Case.
Tags: testing, webdev, tutorial, beginners
Published: 2020-04-16 07:57:35

We are going to learn about the major difference about the Test Scenario Vs TestCases.

👉 Learn Software Testing Concepts:  https://scrolltest.com
🙏 Learn Cypress Tutorial:  https://cypresstutorial.com.
👔 Learn API Testing: https://www.learnapitesting.com
👮🏻‍♀️ Automation Tester Training: https://thetestingacademy.com

🌑 A TEST CASE is a set of conditions or variables under which a tester will determine whether a system under test satisfies requirements or works correctly.

🌑 A TEST SCENARIO is defined as any functionality that can be tested. It is also called Test Condition

> 👇👇 Learn more in the video Below. 👇👇

[![Test Scenario Vs Test Case: What you Should Know. [MindMap] (With Example)
](https://i.imgur.com/nbyoyvC.png)](https://www.youtube.com/watch?v=ePGAEJURzqU "Test Scenario Vs Test Case: What you Should Know. [MindMap] (With Example)
s")

![Test Scenario Vs Test Case](https://i.imgur.com/Ut4U7KJ.png "Test Scenario Vs Test Case")

--
Be sure to subscribe for more videos like this!

[![ TheTestingAcademy](https://dev-to-uploads.s3.amazonaws.com/i/r7vcy6wbvyjbk1y1uu0o.png
)](https://www.youtube.com/TheTestingAcademy?sub_confirmation=1 "TheTestingAcademy")
I've created React lazy loading component
Tags: react, performance, javascript, lazy
Published: 2020-04-16 07:45:15


###React Laz-Y
Few weeks ago I've built a simple component that utilize [React Lazy API](https://reactjs.org/docs/code-splitting.html#reactlazy) and browser [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). In simple words, React Laz-Y allows you to lazy load your component when it appears in the browser's viewport. Thanks to that you don't have to load components that user won't see on the first render, React Laz-y will detect the scroll position for you and inject the correct code when it's actually needed.

####Where and how?
You can check it on [npm website](https://www.npmjs.com/package/react-laz-y-component-loader) or on my [GitHub account](https://github.com/maciekgrzybek/react-laz-y#readme)
Usage should be pretty straightforward and everything is explained in the docs. 

I hope you'll find this useful :slightly_smiling_face:
Is there a library for better <a href>'s, like social sharing cards?
Tags: help, webdev, seo, meta
Published: 2020-04-16 07:36:01

It seems to need a backend to [fetch metadata](https://developers.facebook.com/docs/sharing/webmasters/) so as to bypass CORS...

I can try to create my own (in Now.sh), but it wouldn't support multiple media types by default.

Also, this should be done in `dev.to` to enhance `<a href>`s (currently, only handful stuffs are supported, like GitHub and Dev.to posts).

Interestingly, Dev.to seems to generate `og:image` when I post in Discord.
How to write cron jobs on AWS EC2 instance
Tags: aws, cron, ec2
Published: 2020-04-16 07:22:30

Cron is a time-based job scheduler run on the server in the Unix-like operating system.
To perform such action we write cron expression made of five fields, followed by a shell command to execute.

First, we have to log in to AWS EC2 instance using CLI (Command Line Interface).
For log in, type:
ssh -i <.pem file> username@ip_address
After successfully log in, type: 
crontab -e
then select any editor from the list (preferred nano).
 Type cron command. For example:
* * * * * * php /var/www/html/file/name.php
Now save the changes. If you are using nano editor type Ctrl + x and Select Y and then press Enter.
To list out all the running cron type:
crontab -l
* is used for every minute, every hour, etc. Here ”php” is shell command followed by file location of php script, separated by white space.

If you want to run nodejs script then type:

* * * * * * node /var/www/html/nodejs/file/name.js
Each from five stars represents a job:

How to write CRON jobs on AWS EC2 instance

Allowed special characters are:

Comma (,) – Commas are used to separate the item list.

For example:

Cron to run at minute 1 and 10 every hour 
1,10 * * * * php /var/www/html/file/name.php
Cron to run at mid-night and mid-day 
0 0,12 * * * php /var/www/html/file/name.php
Hyphen (-) – Hyphen defines range.

For example:

Cron to run at every minute from 1 minute through 10 minute, every hour
0-10 * * * * php /var/www/html/file/name.php
Cron to run at minute 0 past every hour from 6 AM through 6 PM 
0 6-18 * * * php /var/www/html/file/name.php
Slash (/) – Slash defines step values.

For example:

Cron to run every 5th minute 
*/5 * * * * php /var/www/html/file/name.php
Cron to run at minute 0 past every 6th hour 
0 */6 * * * php /var/www/html/file/name.php
Sleep cron:

For example:

Cron to run every minute after sleep of 30 seconds
* * * * * * sleep 30; php /var/www/html/file/name.php

For more examples visit: https://coderssecret.com/how-to-write-cron-jobs-on-aws-ec2-instance/
Technology Modernization for Digitization – Part 1
Tags: digitaltransformation, technology, designthinking, erpapplication
Published: 2020-04-16 07:13:11

When was the last time you saw a “Site temporarily down for maintenance” page? When was the last time you saw glitches with large scale social media applications last for more than few hours? When I was a kid, we used to have instances when the television channels would blackout for couple of hours with weird noise that rings in my ears when I think about it. Though the memes around 90s kids and 2k kids sound funny but the reality is that the technology is changing at rapid phase. The transition from 80s to 90s to 2k kids is phenomenal in terms of technology transformation.

As technology gets transformed, the end user experiences and expectations also get transformed at sub-conscious level and the organizations are forced to reinvent continuously. Gone are the days where you can invest on a legacy Mainframe or ERP application, roll it out and forget about the patronage for next 10 years. The organizations are increasingly forced to reinvent from technology perspective as every business is digital business. The technology modernization is the underlying initiative for digital transformation and it involves organization wide re-engineering and synchronization.

The technology modernization and digital transformation go hand in hand and they have to be oriented towards, enhancing customer experience, smart workforce management and process efficiency. To meet these objectives, the technology platforms and the organization got to be agile. Few major questions to be answered are:

1) Is there agility in the organizational technology ecosystem to meet new requirements and changes?
2) Is the organization thought process oriented towards design thinking with focus on end user empathy?
3) How open is the organization to accommodate and open for changes and challenges?

To summarize, it’s all about agility, design thinking and change management which lays the foundation for the technology modernization in sync with your digital transformation. Though they may look more of management or motivation terms but they have underlying relevance to the technology modernization.

Agility = A microservice architecture transformation from monolithic architecture

Design thinking = UX oriented development with focus on design thinking, prototyping and iterative development

Change management = Leverage tools for managing process and operations.

In the following weeks, we will deep dive into each of those areas on how we can accomplish technology modernization to stay relevant in the days to come.
Day 1 of #100DaysOfCode: Trying Out Tanker for End-to-End Encryption
Tags: javascript, webdev, node, e2ee
Published: 2020-04-16 06:59:27

---
title: Day 1 of #100DaysOfCode: Trying Out Tanker for End-to-End Encryption
published: true
description: I kick off my 100-day coding challenge by experimenting with end-to-end encryption of a Vue.js web app.
tags: javascript, webdev, node, e2ee
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/wqgkk2i9as629mx9ir9g.png
---

For the longest time, it's been on my bucket list to figure out how to implement end-to-end encryption for web apps. So I'm starting with it as my first day of #100DaysOfCode.

I did a quick search and discovered @dmerejkowsky's post on [adding end-to-end encryption to Mastodon](https://dev.to/tanker/taking-mastodon-security-to-the-next-level-part-1-encrypt-your-toots-2p00). He uses Tanker's API to encrypt Mastodon direct messages.

[Tanker](https://tanker.io/) looks promising:

![Tanker](https://dev-to-uploads.s3.amazonaws.com/i/wqgkk2i9as629mx9ir9g.png)

I followed Tanker's [Encrypt and decrypt data in a web app](https://docs.tanker.io/latest/tutorials/encrypt-decrypt-web/) tutorial, converting it from React to Vue as I went along.

I remixed https://glitch.com/edit/#!/vuejs-tailwind-starter to create a new Vue.js project with Tailwind CSS.

I added my Tanker app ID to 🔑.env.

In package.json > Add Package, I added:

* @tanker/client-browser
* @tanker/fake-authentication

I then added the imports as per the tutorial:

```
import FakeAuthentication from '@tanker/fake-authentication';
import { Tanker } from '@tanker/client-browser';
```

At this point I ran into the error `Module not found: Error: Can't resolve 'fs'`. Commenting the second line out gets rid of the error. 

I tried installing graceful-fs which didn't help. Uninstalled it. Found a [Glitch forum post about fs](https://support.glitch.com/t/fs-library-unable-to-be-installed/11590/5) that said fs is already part of node.js. 

In case memory might be the culprit, I upgraded to a paid Glitch subscription and boosted my app. That didn't help.

At this point I'm stuck.

That was a rough Day 1. I was hoping to at least get through the Tanker tutorial. If anyone wants to help debug this, here's the code: https://glitch.com/edit/#!/morning-pages

I'm also open to suggestions of other tools/libraries for web app end-to-end encryption.
Learn Gatsby.js at Online Weekend Workshop
Tags: gatsby, javascript, react, webdev
Published: 2020-04-16 06:48:03

Learn to build blazing fast apps and websites with React using Gatsby, a static PWA (Progressive Web App) generator! Starting from scratch, you’ll learn to build a full blog and website app. Use GraphQL in Gatsby for storing and retrieving data and create pages and posts with markdown (MDX). Then deploy your brand new blog website to Netlify for the world to see!

https://www.eventbrite.com.au/e/learn-gatsbyjs-tickets-102760467324
Easily distracted while working? Here are 5 ways to stay focused and cut distractions
Tags: productivity
Published: 2020-04-16 06:34:15

Are you easily distracted while working? Here are 5 ways Flowify can help you stay focused and cut distractions:

https://play.google.com/store/apps/details?id=me.flowify.flowify

**1) Set clear objectives before start working**

Starting with the end in mind is the first step toward a rewarding and productive work session. With Flowify, create a list of clear objectives before starting a work session.

**2) Work on one task at a time with a time limit**

Timeboxing and focusing on a single task are proven productivity techniques. With Flowify, set a time limit on each task. Flowify features a countdown timer that creates a sense of urgency and helps you stay engaged with work.

**3) Time your breaks and be reminded to get back to work**

It is not uncommon for a short break to turn into hours of work snooze.
With Flowify, define in advance the duration of your breaks and be notified to return to work.

**4) Beep generator to work mindfully**

Being regularly aware of what you are up to can help notice quickly when you are distracted and then take action to quickly refocus.

With Flowify, set a subtle background beep at a regular time interval to keep you mindful while working. The beep breaks an otherwise unnoticed mental distraction and triggers to refocus on the work. The beeps can as well be used to gamify work by mentally setting nano-objectives to reach before the next beep; this maximizes engagement and focus.

**5) Track time usage**

Knowing the actual time each task requires helps to set more realistic future goals that help stay engaged with work.

With Flowify, track the time spent on each task in comparison to the time budgeted.

https://play.google.com/store/apps/details?id=me.flowify.flowify
Do you bundle your server-side TypeScript?
Tags: discuss, typescript
Published: 2020-04-16 06:22:48

When you have server-side code in TypeScript, it cannot be run directly by default, you have several options.

- `ts-node -O '{"module": "commonjs"}' src/index.ts` or `ts-node-dev -O '{"module": "commonjs"}' src/index.ts`
- `nodemon` with register `ts-node`
- `tsc` the `node dist/index.js`

I believe, it is best to `tsc` first, as `ts-node` isn't meant for production.

Also, if you use Babel, or some special JavaScript features, you will need build steps, anyway (with `@babel/cli`).

Now, if you have multiple TypeScript folders, not just `src/`, like `tests/`, it becomes complex to use `tsc` (you need multiple `tsconfig.json`). What would you do? Use a bundler? Which one?

My current option is using Webpack with [webpack-node-externals](https://www.npmjs.com/package/webpack-node-externals) with the following settings.

```js
// webpack.config.js

const path = require('path')

const nodeExternals = require('webpack-node-externals')

module.exports = {
  mode: 'production',
  devtool: false,
  optimization: {
    minimize: false
  },
  entry: './src/index.ts',
  output: {
    filename: 'index.js',
    path: path.resolve(process.env.OUT_DIR || 'dist')
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader'
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json']
  },
  target: 'node',
  externals: [
    nodeExternals()
  ]
}
```

Tried Babel and Rollup, but it failed with `emitDecoratorMetadata` and `reflect-metadata`. I cannot use [Typegoose](https://github.com/typegoose/typegoose), nor [liteorm](https://github.com/patarapolw/liteorm).
Need Help In Reading Text Files Using JavaScript File Reader API
Tags: html, javascript, help
Published: 2020-04-16 06:18:50

Hi there! I am trying to read a text file using JavaScript File Reader API, but my DOM gets unresponsive for a moment while loading the content of the file in the DOM (if the file size is large, (say: 5MB)). I have identified the piece of code which is causing this behavior but I need help how can I fix this?

Below is my HTML Code.

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

Below is my JavaScript Code for handling file upload

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

Output 

Before Uploading text file.

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

While Uploading the text file, I clicked on the 'Click Me' button but nothing printed on the console. The DOM was unresponsive for a moment. I don't know why it happened.

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


After the content got embedded in DOM then the 'clicked' message got printed on the console.

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


I figured that the below line of code is causing this problem, but I don't know the reason, can anybody please explain me this why this line of code blocking the DOM and how can I fix this?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e7m2wvfr66aegpkkzwaf.jpg)
Eternal Recurrence
Tags: webdev
Published: 2020-04-16 04:57:47

---
title: Eternal Recurrence
published: true
description: Your going to forget things and make mistakes and be mortified with your own failings. So it goes.
tags: webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/f0zs17oqaozp8902v6jh.jpeg
---

Sometimes you start a new thing and fumble something silly and want to hide under a rock. But trying to hide under a rock would make you look even sillier, and soon you can laugh at your mistakes and take pride in learning from them.

Sometimes you spend a quarter century noodling with the web and then, just like that, you go blank writing an at-rule you’ve written countless times before, like `@font-face`. You put a URL directly after the `src` attribute without passing it as an argument to the `url()` function.

You fool. You absolute rube.

You look it up, hate yourself, and are very, very glad that no one is watching.

You’re so paranoid you lift the rock to see if anyone’s there.

Or you try to write a media query by typing `@media-query` instead of `@media`, and then you want to fall off a cliff into an endless void and fade into the fabric of the universe, forgetting yourself and every mistake you’ve ever made.

You want to become like water and seep into the earth or evaporate into the air, drift off into the clouds, rain down on the remotest spot on the planet, never be seen again, and just rest undisturbed, unknown, unable to disappoint yourself or anyone else ever again till the sun swallows this rock and the rest of the solar system and finally burns out.

But then you get over it and live to code another day. And to fail again in the same inconceivable ways. Even when you’re supposed to be an experienced professional.

Especially then.
Avoiding having both `yarn.lock` and `package-lock.json`
Tags: javascript, node, webdev, showdev
Published: 2020-04-16 04:30:29

This is possible with pre-install script to check for `yarn.lock` and `package.json`.

The closest I can find for this is,

{% github sindresorhus/is-npm no-readme %}

Now, I did [ask the author to make CLI](https://github.com/sindresorhus/is-npm/issues/11) for me, but he didn't do exactly what I needed, so I made one myself.

{% github patarapolw/check-npm-yarn no-readme %}

Now, there is still an extra step. `"preinstall": "npx check-npm-yarn"` alone might not be enough. To avoid `npx` and installing every time, I make it,

```json
{
  "scripts": {
    "preinstall": "if command -v check-npm-yarn > /dev/null; then check-npm-yarn; fi"
  }
}
```

## An issue with NPM -- [preinstall npm hook doesn’t execute when installing a specific package](https://npm.community/t/preinstall-npm-hook-doesnt-execute-when-installing-a-specific-package/2505)

I created `nsi` script for this.

```sh
nsi packageA packageB packageC ...
// Or nsi packageA packageB packageC ... --dev
```

## Related Topic

{% post https://dev.to/patarapolw/do-you-have-a-strong-reason-to-use-npm-or-yarn-or-something-else-3pbm %}
Arrays
Published: 2020-04-16 04:25:53

<h1>What is a structure?</h1>

The layout of the array, referring to its layers.

<h1>How can you use it?</h1>

To use it you make a variable or constant, and encase it in brackets [].

<h1>What's the use of index in arrays?</h1>

To access data arrays, using the same notation as arrays.

<h1>Can you modify a single index or do you need to modify the complete array?</h1>

You can modify a single index, you just need to specify which entry.

<h1>What's the use of the length property in an array?</h1>

To find out, in zero-based indexing, how many values an entry has.

<h1>What's the use of the reverse and sort methods?</h1>

Reverse reverses the order of items in an array making the last items first, and vice versa. Sort rearranges array items in alphabetical order.
Flatiron Rails Project GalaxyScout
Tags: rails, postgres, ubuntu
Published: 2020-04-16 03:49:19

Three months into the program and I have created my third project here at flatiron. During the course of the project, I built a complete Ruby on Rails application with RESTful routes. As for my dataset to manage, I decided to create a space picture explorer application similar to Instagram or Pinterest. My inspiration for this project originated from the many space documentaries I have watched while being stuck at home. 
Overall Rails made the backend of this project simple. I worked through the models, controllers, migrations, and routes within the first few days; using Rails generators, which I still do not trust. But on another note, I did like the convenience of just typing Rails g whatever and getting a good setup to build off of. Along with this the routes and link_to helper in rails were a godsend. I just plain do not like writing HTML, so anytime I could generate it, I did. Now on what I came here to talk about, my ISSUES with Heroku and Ubuntu.
So as I was finishing my project I noticed others in my cohort had somehow connected their project to the internet and did not have to use localhost to get to their project!!! So naturally, I became envious and decided I will do that no matter the cost. To get the whole picture of this I will explain how I felt starting out. At the beginning of this process, I was hopeful, curious, and determined. Now after days of reconfiguring my system just to get it to work with Heroku, I am proud that I figured out the error in my system. 
 
The problem I ran into was I made my original project with SQLite3 as the database and Heroku needs PostgreSQL. Naturally, I believe this to be an easy fix so I set off renaming my database in bliss. However, everything I did in my terminal to use PostgreSQL would not work. After scouring the web and scrounging through my ubuntu system I realized my initial setup of ubuntu had gone horribly wrong and needed to be redone.
Thus as you may have inferred the only fix was restructuring my local environment. After running through this process twice because of another error, I finally got PostgreSQL to run on my system. But then my computer decided that this was not enough, and unmounted my ubuntu Wsl from my system and would not tell me what it did. I googled and googled the three various errors I was getting with rake, git, and rails. After some time I finally found the solution on some Chinese forum. While I do not know exactly what the forum said I knew the code would remount my Wsl to my C: drive which fixed all my issues.
After this, I finally had an application on Heroku. Was it worth it? Yes. Did I learn anything? Yes, I now know my ubuntu subsystem much better than my own computer. So the moral to this story is envy often leads us down a hole that you will not soon leave, but Rails makes creating ruby web applications simple.