teleren/devto huggingface dataset:
"Hello, World!" for Communication
Tags: introduction, aboutme, howilearntprogramming, beginners
Published: 2021-05-16 16:27:47

This is my first post. I wanted to write about myself and the stuff I do for a long time. After reading the post by @danytulumidis on [Communication is Key](https://dev.to/danytulumidis/communication-is-key-4h48) I decided to finally do this.

# A little about me
I'm doing my undergraduate in Electrical and Electronics Engineering from SRMIST, Chennai. In my high school days, programming was not a thing which my friends or the people I knew were involved in. After dabbling on some languages I finally fell in love with Python. 

I had taken a Computer Science course to learn C before I knew Python. It was horrible! All I learnt was boilerplate code:
```c
#include <stdio.h>
#include <conio.h>
int main () {

    return 0;
}
```
My teacher did a very poor job of explaining what these actually meant (maybe I never asked). I couldn't wrap my mind around these repeating lines of code in every piece of C code I write. For a beginner like me back then it meant missing blocks of key information.

I completed the course somehow but never opened the C reference book again. I was over with programming then. Fin.

But things changed. After a few months I tried to learn programming once again but this time from a good resource. The top Google result brought me to [Codecademy](https://www.codecademy.com/). After reading some articles on the language I should learn, I decided to start a journey in JavaScript. I took **notes** and became more aware of programming practices. The most important takeaway for me was to **refer the documentation**. I always thought one needed to know all the nitty-gritty stuff of the language!

I didn't last long in the course. I don't know why I left the course mid-way and I never used JS after that (till now!). My next encounter with programming was when I entered my 11th grade. Until then the CS course in 11th grade was **Introduction to C++**. The education system decided to give us a choice to learn either C++ or Python. And Python was chosen.

I wanted to have a head-start so I took up a Python course in Codecadamy. I fell in love with Python from the very first print statement.
```python2
print "Hello, World!"
```
It was so easy to learn Python. The language syntax was very close to spoken English. I didn't need to encounter any technical jargon. When I was a few weeks in, my CS teacher told that we were learning the older version of Python (Python2.7) and that we need to update to the latest Python3.6. A lot of syntax changes had taken place in the updated version. Notably, my favorite print statement was now:
```python3
print("Hello, World!")
```
Did I take up the challenge to learn Python3.6?


P.S. Writing this post gave me more insight to myself. I've never shared my this journey with anyone. I will try to write more soon.
What's SQL, MySQL, MySQLi, PDO?
Tags: programming, php, mysql, database
Published: 2021-05-16 16:20:46

###SQL 
Structured Query Lanaguage
###MYSQL
Database System sama as [MSSQL,Oracle] 
it is poplaur database connecting with PHP .

`(DEPRECATED)` The mysql functions are procedural and use manual escaping.
Mysql has extension to connect to db.
###MySQLi
is a replacement for the mysql functions, with object-oriented and procedural versions. It has support for prepared statements.

###PDO (PHP Data Objects) 
is a general database abstraction layer with support for MySQL among many other databases. It provides prepared statements, and significant flexibility in how data is returned.

###RBDMS 
Relation Database Managment System
I found this in an old Countdown timer JS project
Tags: javascript, css, codenewbie, help
Published: 2021-05-16 16:17:12

So, what actually happen as the timer Ends it shows the expired text and the numbers on the count down goes to -1 -1 -1 -1.

Actually, now I am going to tweak it a bit and want it to show how much time ago the timer was expired.

I want you guys to suggest me some ways to do it.

## This is what happening
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6hfsycvfh4pmbifiy9gj.png)
Upcoming TED-like events for developers
Tags: codenewbie, webdev, career
Published: 2021-05-16 16:07:44

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ynkdiq3eoqag278ns0hy.jpeg)
## The Monthly Dev: World-Class Talks by Expert Developers
The Monthly Dev is a series of online events brought to you with love by daily.dev. It's a place for software engineers to gather and hear world-class talks, once a month.

## Upcoming Events 🦄

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/60886ef7usyylokupge7.jpg)
### The Monthly Dev 5 (May 2021) - RSVP Below 🚀
#### Redux, Career advise for devs, and freeCodeCamp
- [Mark Erikson](https://twitter.com/acemarke) - Redux maintainer
- [Emma Twersky](https://twitter.com/twerske) - DevRel at Google
- [Quincy Larson](https://twitter.com/ossia) - Founder of freeCodeCamp.org

➜ [RSVP to the event](https://www.meetup.com/the-monthly-dev-world-class-talks-by-expert-developers/events/277134257/)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f2gft6v5gscj7s07aak2.jpg)
### The Monthly Dev 6 (June 2021) - RSVP Below 🚀
An event in collaboration with **Microsoft Reactor** and **GitHub**

➜ [RSVP to the event](https://www.meetup.com/the-monthly-dev-world-class-talks-by-expert-developers/events/278158674/)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7g4ni7ylyy34wrhv5947.jpg)
### The Monthly Dev 7 (July 2021) - RSVP Below 🚀
#### Developer Experience, AWS Amplify, and React Query
- [Inian Parameshwaran](https://twitter.com/everConfusedGuy) - Engineering at Supabase
- [Tanner Linsley](https://twitter.com/tannerlinsley) - Co-Founder at Nozzle and OSS fanatic (React Query) 
- [Ali Spittel](https://twitter.com/ASpittel) - Leading Developer Advocacy at AWS Amplify

➜ [RSVP to the event](https://www.meetup.com/the-monthly-dev-world-class-talks-by-expert-developers/events/278158726/)

See you there!
What are Tagged template literals?
Tags: tutorial, javascript
Published: 2021-05-16 16:01:51

> Quick refresher
> - Template literals are basically strings which are quoted with &#96;&#96; instead of single or double quotes.
> - You can interpolate data in them using `${}` syntax. For example, if the variable `data` is `"world"`, `Hello ${data}` will output `"Hello World"`

Tagged template literals are the next step from template literals. They are essentially functions which take a template literal as an argument, but in a special way.

## How does this function work?

Example:

```javascript
someFunction`some ${data} contained in a ${template} literal`
```

As you can see, there are no parenthesis (brackets) for the function call. And the `someFunction` is basically a regular function. 



Now let's see what kind of arguments the function gets:

{% runkit %}
// normal function to inspect the arguments
const inspector = (...args) => {
    console.log(args)
}

// Let's try it!
// First let's use an empty string
console.log(inspector&#96;hello world&#96;)
{% endrunkit %}

Hmm. We get the string as an array. Now, let's just add some interpolation before I explain how this happened: 

{% runkit %}
// normal function to inspect the arguments
const inspector = (...args) => {
    console.log(args)
}

const life = 42;

console.log(inspector&#96;hello world, life is ${life}, and some more ${life} lives&#96;)
{% endrunkit %}

Now we get:
- An array of strings
- 42
- 42

Now let me explain.

Whenever a function is called using this syntax, it get's the following arguments: 
- an array of strings. The strings are obtained by splitting the string wherever there is an interpolation (`` `Hello ${people} and the world` `` => `["Hello ", " and the world"]`)
- all the other arguments are the values of the interpolated data

Now, as this function is a normal function, it can return anything a normal function can. 

## Use cases

Now this may all seem pretty useless, but there are some uses. One could be to sanitize HTML:

```javascript
function sanitize(strings, ...args) {
    // sanitize args
    // join the strings together
    // now return safe strings
}

let userMessages = ['hi', 'what are you up to?', '<script>alert("something evil")</script>']
const sanitized = `
  <div class="chat-list">
    <ul>
      ${userMessages.map(message => sanitize`<li>${message}</li>`)}
    </ul>
  </div>
`
```

Another is CSS in JSX. I don't really use JSX, but I'm pretty sure that's what they do; Why else would they use an object?

Another (main) reason is – they are syntactic sugar. 

Example: did you know you could write `str.split("chars")` as ``string.split`chars```? You just saved a few chars – that could be useful for some code golf?
Difference between library and frameworks
Tags: python, java, programming, css
Published: 2021-05-16 15:44:36

Read more about the library and framework on my website https://buggyprogrammer.com/libraries-vs-frameworks/
![Libraries vs Frameworks infographic](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2dzryk6lh0knck163lcm.png)
Timely computation of derived values
Tags: algorithms, performance, computation, cache
Published: 2021-05-16 15:35:31

In my [penultimate post](https://blog.frankel.ch/real-world-stream-collector/), I described the use-case of an e-commerce shop.

In general, interactions in such a shop are the following:

* You can browse a catalog of items
* Each item has a price tag
* You can put x items in your cart

It's when the exciting part starts.

On most pages, you want to give users a condensed view of their cart's state. Here are a couple of options for the state's view:

1. Empty/non-empty
2. Number of cart lines
3. Number of items
4. Total cost. In demos, it's as simple as the sum of each cart line which amounts to the item's price times the quantity; in real life, there will be discounts, get X for Y, etc.

All the above views consist of derived values. The question is now, when would you compute it? There are two general approaches:

* **eagerly** ,_i.e._, every time you change the cart (by adding, updating, or removing a cart line)
* or **on-demand** ,_i.e._, only when you display the condensed view

The benefit of eager computations is that the derived value is always synchronized with the source of truth. It's a good fit when the computation is cheap, such as the empty or number of cart lines views above. On the implementation side, the cart has one additional read-only field that stores the derived value.

On the opposite side, on-demand is adapted to expensive computations, such as the total cost view above. Because the computation is executed on access, the implementation doesn't need a property to store the value.

For our use-case above, computation is expensive. On-demand means that every page access/refresh will trigger the computation, even when the cart hasn't changed. It looks like eager computation would be the way to go.

Now, let's throw the proverbial monkey wrench in the works. Imagine two clients: the mobile client only displays the empty/non-empty state for space reasons, and the regular web app displays the cart total. In this case, choosing eager price computation is overkill, as it's useless for mobile clients.

You could solve this issue in the view layer. Yet, there's another option. The idea is to add the computed value as in the eager approach but only trigger the computation when you need to access its result. The implementation relies on two properties: a `result` read-only property (the cost in our e-commerce shop) and a `dirty` internal flag.

The flow is the following. When the cart is updated, set `dirty` to `true`.

When you need to display the cost:

![On-demand cached price computation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pdagly0zbfmp102xrsfi.png)

The only con is more complex logic.

It's precisely how JDK developers handled the legacy mutable `java.util.Calendar` class. Check the `complete()` method [source code](https://github.com/openjdk-mirror/jdk7u-jdk/blob/master/src/share/classes/java/util/Calendar.java#L1555-L1563) for more details.

_Originally published at [A Java Geek](https://blog.frankel.ch/timely-computation-derived-values/) on May 16<sup>th</sup>, 2021_
spotinfo - cli for exploring AWS Spot instances
Tags: aws, cloud, devops, tooling
Published: 2021-05-16 15:17:23

The [spotinfo](https://github.com/alexei-led/spotinfo) is an open-source command-line tool you can use for exploring AWS Spot instances across multiple AWS regions.

Under the hood, the tool uses the same data feeds as AWS Spot Advisor and AWS Spot Pricing.

Compared with the [AWS Spot Advisor](https://aws.amazon.com/ec2/spot/instance-advisor/), the `spotinfo` supports advanced filtering and sorting (also with regex), in-place spot prices, cross-region comparison, and multiple output formats (plain text, JSON, table, csv).

A short overview is available on DoiT blogs [here](https://blog.doit-intl.com/spotinfo-a-new-cli-for-aws-spot-a9748bbe338f)
Introducting Global Thumbnail - Weekend Project #0
Tags: youtube, react, typescript, javascript
Published: 2021-05-16 15:04:27

# Get Video Thumbnails

I recently faced an issue where I had to get YouTube and/or Vimeo video Thumbnails, so naturally, I did what many devs do, search an npm package, but I did not get any good results or the results were not up to my mark.

So, I started from scratch to build that functionality and in a week I was successful. I made the exact thing I wanted.

# Get thumbnails easily

Who needs thumbnails, right? but sometimes you do need them. One day I was telling this thing I made to my friend @thisisdg (Dhruv), and Dhruv jokingly told me to publish an npm package, because many might need it, so thanks to his idea I made this package (still not sure if it works in production)

Check it out [here](https://github.com/dextel2/yt-vimeo-thumbnail) and [here](https://www.npmjs.com/package/yt-vimeo-thumbnail)

Try it out `npm i yt-vimeo-thumbnail` and let me know, how can I improve!

So what's next? Well although this is a very basic package, I got to learn a lot of things. I need to get things in order. This is really a hacky project and I get time on weekends only but looking forward to learning new things like this.

Let me know in the comment section how did you like the package and what other small packages I can make out of small problems!
How to import JSON files in ES modules (Node.js)
Tags: node
Published: 2021-05-16 14:57:54

---
title: How to import JSON files in ES modules (Node.js)
published: true
description: Learn about the two ways to lead JSON files in Node.js ECMAscript modules (esm).
tags: node
canonical_url: https://www.stefanjudis.com/snippets/how-to-import-json-files-in-es-modules-node-js/
---

ES modules are still reasonably new in Node.js land (they're stable since Node 14). [Modules come with a built-in module system and features such as top-level await](https://www.stefanjudis.com/today-i-learned/top-level-await-is-available-in-node-js-modules/). 

I just read an informative [post on ES modules by Pawel Grzybek](https://pawelgrzybek.com/all-you-need-to-know-to-move-from-commonjs-to-ecmascript-modules-esm-in-node-js/) and learned that you can't import JSON files in ES modules today. That's a real bummer because I'm pretty used to doing `const data = require('./some-file.json')` in Node.js. 

While [it will be possible to import JSON from within modules eventually](https://nodejs.org/api/esm.html#esm_json_modules), the implementation is still behind a flag (`--experimental-json-modules`).

This post includes ways to deal with JSON in ES modules today.

## Option 1: Read and parse JSON files yourself

The Node.js documentation advises to use the `fs` module and do the work of reading the files and parsing it yourself.

```javascript
import { readFile } from 'fs/promises';
const json = JSON.parse(
  await readFile(
    new URL('./some-file.json', import.meta.url)
  )
);
```

## Option 2: Leverage the CommonJS `require` function to load JSON files

The documentation also states that you can [use `createRequire`](https://nodejs.org/api/module.html#module_module_createrequire_filename) to load JSON files. This is the way Pawel advises in his blog post.

`createRequire` allows you to construct a CommonJS `require` function so that you can use typical CommonJS features in Node.js EcmaScript modules.

```javascript
import { createRequire } from "module";
const require = createRequire(import.meta.url);
const data = require("./data.json");
```

## How should you load JSON files?

I don't know. 🤷‍♂️ Neither option feels good, and I'll probably stick to the first option because it's more understandable.

Let's see when stable JSON modules land in Node.js!
How To Fill Out A Form With Your Voice
Tags: codepen, javascript, webdev, showdev
Published: 2021-05-16 14:45:24

One of my friends is a dermatologist. He has a *very* busy schedule, seeing up to 60 patients a day. In order to save time, he approached me with a request:
> Can you help me make a form, where you fill out the fields using speech recognition? Is that possible?

Yes, indeed it is, but the `SpeechRecognition` API is currently only working in Chrome and Edge (according to MDN, it should also work in Safari 14.1 — but I haven't tested that).

To get started is pretty straight-forward:

```js
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
if (('SpeechRecognition' in window || 'webkitSpeechRecognition' in window)) { /* It's supporpted! */ }
```

I've chosen to create a `speech`-object, that will hold all the stuff I need:

```js
let speech = {
  enabled: true,
  listening: false,
  recognition: new window.SpeechRecognition(),
  text: ''
}

/* To allow to continously listen: */
speech.recognition.continuous = true;
/* To return interim results to a transcript area: */
speech.recognition.interimResults = true;
/* To set the language: */
speech.recognition.lang = 'en-US';
```

The main `eventListener` takes the first result of an array of `results` — and, if the `activeElement` is either an `<input>` or a `<textarea>`, sets the `value` of that field to the `transcript`:

```js
speech.recognition.addEventListener('result', (event) => {
  const audio = event.results[event.results.length - 1];
  speech.text = audio[0].transcript;
  const tag = document.activeElement.nodeName;
  if (tag === 'INPUT' || tag === 'TEXTAREA') {
    if (audio.isFinal) {
      document.activeElement.value += speech.text;
    }
  }
  result.innerText = speech.text;
});
```

The toggle button is simply toggling a class, it's `innerText`, as well as triggering: 


```js
speech.recognition.start();
/* and */
speech.recognition.stop();
```

Now, we're ready to click the ”Toggle listening”-button, focus on a form-field, and start talking. Go to [this Codepen demo](https://codepen.io/stoumann/pen/dyvXmwz) — remember to allow your microphone to be used. 

![speech](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0agentrn1lon7btpz11y.png)

Pause a bit after a sentence, to allow the engine to process the audio and return a transcript.

There's **a lot** of room for improvement —  maybe you could return a `tag-cloud` of transcripts, and then click-to-insert the text? What do you think?

To be honest, the `SpeechRecognition API` **does** feel a little bit shaky, but I'm sure it will improve in the future. I've tested with various languages, and can confirm it works pretty well with danish, english and lithuanian languages!

Thanks for reading!

> **Note:** Due to browser security-restrictions, the Codepen demo doesn't work when embedded.

[Documentation for the API at MDN](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition)
What is HTTP All about HTTP(Part 1)
Tags: html, webdev, javascript, productivity
Published: 2021-05-16 14:39:50

#HTTP
A basically HTTP stands for HyperText Transfer Protocol and HTTP is a protocol for HTML HTTP to create a connection between a web browser and web servers a foundation for collect data exchange on the Web and it is a client-server protocol.

#####Is there HTTP is an important topic?
Yes, we have many following things in HTTP like UserAgent, HTTP Cache, HTTP Cookies, CROS but don't worry I covered all these topics lets start with HTTP today.

##### How HTTP works :-

1.A simple work of HTTP is to send the request to the server from the web browser.
2.After the server is processed you request and try to fulfill your request.
3.then we get a response back and with the use of javascript, we can access that data.

Check the next image to understand how its works I created a simple diagram of HTTP.

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

#####We also have some HTTP Codes

An HTTP status code indicates which specific request has been completed.

1.Informational:- 100 Continue, 101 Switching Protocols, 102 Processing

2.Success:- 200 Ok, 201 Created, 202 Accepted,204 No Content

3.Redirection:- 301 Moved Permanently,302 Found, 305 Not Modified,305 Use Proxy

4.Client error:-400 Bad request, 401 Unauthorized, 402 Payment required, 403 Forbidden, 404 Not found

5.Redirection:- 500 Internal server error, 502 Bad gateway, 503 Service Unavailable, 504 Gateway timeout.

I hope you like this also comments about your thoughts.

For more content follow me on Instagram  [@developer_nikhil27](https://www.instagram.com/developer_nikhil27/).

If you want to more support me then buy me a [coffee](https://www.buymeacoffee.com/nikhilbobade27).

Thank you.
Flexy Boxes: Generador de código Flexbox 😬
Tags: css, webdev, spanish
Published: 2021-05-16 14:38:51

Este más que un post al que les tengo acostumbrado, es un recurso interesante que encontré y que quisiera compartir con ustedes. Se trata de una herramienta llamada [Flexy Boxes](https://the-echoplex.net/flexyboxes/) que ayuda a generar código flexbox de una manera bastante visual y desde mi punto de vista muy sencilla también.

Puedes crear n número de `flex containers` y jugar con la mayoría de sus propiedades más importantes:

* display
* flex-direction
* flex-wrap
* justify-content
* align-items
* align-content

Pero también te da la opcion de configurar las propiedades de los `flex-items`:

* order
* align-self
* flex

A continuación un screen:

![img](https://freetoolbank.com/wp-content/uploads/2020/10/flexyBoxes1-1024x617.png)

Espero que pueda servirles de ayuda, especialmente para aquellos devs que están aprendiendo estos conceptos desde cero.

---
Si gustas, puedes leer otras entradas mías que podrían ser de tu interés:

{% link https://dev.to/duxtech/10-trucos-y-optimizaciones-de-codigo-con-javascript-para-2021-3759 %}

{% link https://dev.to/duxtech/las-bondades-del-metodo-includes-en-javascript-o1i %}

{% link https://dev.to/duxtech/es6-destructuracion-de-arreglos-en-javascript-2a0 %}

---

![img](https://media.giphy.com/media/AkLGHCYGv43uw/giphy.gif)