teleren/devto huggingface dataset:
Javascript Frameworks you should definitely learn in 2020
Tags: javascript
Published: 2020-01-07 08:32:34

Javascript has come out to be one of the most prominent languages for the past few years, especially after the rise of NodeJS. Since Javascript is the only language supported by browsers, there is no denying the fact that web development needs expertise in Javascript.

And with Javascript being supported in the backend, this came as a huge benefit as a single function/library/utility, which can be shared across both frontend and backend. Hence development time and resources are reduced.

<img src="https://codersera.com/blog/wp-content/uploads/2020/01/Jvascripts-framework-should-learn-2020.jpg">


With an increase in the use of javascript, many people are opting in to use javascript and the language is evolving faster and bringing the best of all the world. Be it Typescript, Promises, async awaits, these features come in very handy when doing enterprise development.

<a href="https://codersera.com/blog/javascript-frameworks-you-should-definitely-learn-in-2020/">Javascript Frameworks you should learn in 2020.</a>
A very humble pitch about Design Thinking for developers
Tags: beginners, designthinking, devlearning
Published: 2020-01-07 08:28:55

Even if you are a developer who is not familiar with "Design" like me, you probably overheard topics about design thinking. 
I asked it to a UX researcher friend of mine. 
I said "Please give me a very short explanation about Design Thinking. I don't need something perfect and academic."

She began with showing these 2 web pages.

1. https://www.ideou.com/pages/design-thinking
2. https://designthinking.ideo.com/

Why Design Thinking?
----

Why we should use design thinking?
Because we want to make innovative products.
Okay, what is "innovation"?

Everybody has their own definition of "innovation".
But, we should follow the definition by IDEO in this context.
Because they coined the phrase "Design Thinking".

Below is definition of Design Thinking.

![Fig1: what is innovation?](https://thepracticaldev.s3.amazonaws.com/i/5m6t2op8wfpzmgy9b661.png)

This kind of innovation satisfies 3 conditions.

- **Feasibility**: We can make it!
- **Desirability**: Someone wants it!
- **Viability**: We can make enough money by selling it!

The Process of Design Thinking
----

Next, we should follow this process as below.

![Fig2: Diverge & Converge](https://thepracticaldev.s3.amazonaws.com/i/y73bgsn4or0142sj07kb.png)

- **Divergence**: A team increases their number of options.
- **Convergence**: A team selects an option from the options they created.

Any process should have this structure.


Mindset of Design Thinking
----

People who are in a design thinking context, even developers, have to have a mindset of Design Thinking.
What is the mindset?

![Fig3: Mindset](https://thepracticaldev.s3.amazonaws.com/i/qbvmfw3kavt2tr6cgal7.png)


- **Inspiration**: an inspiration should influence ideations.
- **Ideation**: an ideation should influence implementations.
- **Implementation**: an implementation should influence inspirations.

Of course this loop is perpetual.

# that's all!
Styling Console Messages
Tags: javascript, css, webdev, beginners
Published: 2020-01-07 07:59:28

As developers, we at a point log messages to the console for debugging purposes. Getting unexpected results can be stressful at times especially if you have multiple components in your application. In this case, console messages are extremely helpful.

What if you can style your console messages? Probably not for only debugging purposes but to also warn people to stay away from your work. Interestingly, you can do this by adding the ``%c`` specifier to your console statement. Now that you know, open up the Developer Tools and try this in your console.
```js
console.log('%cStyling Console Messages', 'color:green; background:#33eeaa; font-size:25px;')
```
![Styling Console Messages](https://thepracticaldev.s3.amazonaws.com/i/ktc4qs7mo0z0h6b08dt7.png)
## ``%c`` Specifier
The specifier ``%c`` makes it possible for you to add CSS style to the console statement. As shown in the above example, ``%c`` applies the CSS style rules in the second parameter to the console statement. Read about other specifiers, [Google Developers — Console API Reference](https://developers.google.com/web/tools/chrome-devtools/console/console-reference).

## Other Console Messages
There are other console statements that we can style but let’s focus on applying CSS style to a few of them.
```js
console.log('%cGeneral output of logging information', 'color: #330000;'); 
console.info('%cInformative logging of information', 'color: #0080ff;'); 
console.warn('%cOutputs a warning message', 'color: #ff8000;'); 
console.error('%cOutputs an error message', 'color: #ff0000;');
```
Similarly, ``%c`` specifier is available for other console statements. Check out the documentation on [MDN Web Docs — Console Web APIs](https://developer.mozilla.org/en-US/docs/Web/API/console).

## Applying Multiple Styles
Certainly, multiple CSS styles can be applied to a console statement. Prepend the console statement with ``%c``. Of course, statements after the directive are styled with the CSS styles stated in the parameter.
```js
console.log('Multiple Styles: %cFirst Style. %cSecond Style','color:#085965; font-size:20px','color:#f53c55; font-size:30px')
```
Notably, there are three parameters specified in the console statement and the style declared in the last two parameters applied to the ``%c`` specifier respectively.

## Styling Console Messages with an Array of CSS styles
As a matter of fact, CSS styles can get long. However, separating the styles into a variable as an array can be helpful.
```js
const styles = [
    'color: #4dbb63', 
    'background: #999588', 
    'font-size: 20px',
    'text-shadow: 2px 2px #615e57',
    'padding: 5px',
].join(';'); 

console.log('%cStyling Console Messages', styles);
```
Note that, the ``join()`` function was used to convert the array to string.

Conclusion
In conclusion, the console is a powerful tool we can leverage. However, if you are interested in the new features of laravel you can read the article, [New in laravel 6](https://anansewaa.com/new-in-laravel-6/).
How not to mess up Sessions in your sensitive web apps
Tags: webdev, session
Published: 2020-01-07 07:53:51

The thing about Session is you read some articles about how it works. You think you understand it well but you are still struggled to apply that effectively.

I have also struggled to manage and apply Sessions in my Session sensitive web apps.
Then I just made an abstract pattern to memorize how the session works for myself. 

[“SessionName”, “BrowserId”] = Value(The value that we want to store in Session)

 Let’s say our program is already deployed in web server and there is one user who logins and it’s Id would be stored in Session[“UserId”].

For that user, the program will check there is already session name with “UserId” and if it is, it will keep on checking it’s “Browser Id”, if both “Session Name” which is “UseId” and “BrowserId” are already there, it will override the existing value otherwise it will create a new value.

[“UserId”, “b1”] =  1

Even though all the users access the Session Name “UserId” parallel , that doesn’t make the values overwrote because they access from different browsers.

So the values would be like

[“UserId”, “b1”] =  1
[“UserId”, “b2”] =  2
[“UserId”, “b3”] =  3

If one different user try to access the same program with the same browser (let’s say “b3” and it’s UseId is 5).
 
[“UserId”, “b3”] = 3 (Already existed one)
[“UserId”, “b3”] = 5 (The value 3 would be overwritten because both “UserId” and “browserId” are the same.)

The most distinct example in real life is FaceBook. We try to login Facebook with one user(Eg. Ken) then open another tab and try to login with different user(Eg.John). When you try to refresh the page of “Ken” , it will be updated to “John” page. Because it is overwritten by userId of “John” and they just used the same browser.

[“UserId”, “b1” ]  =  1 (Id of “Ken”) is overwritten by 
[“UserId”, “b1” ]  =  2 (Id of “John”)  

I just want to point out again that this is just an abstract pattern that I came up with just try to avoid mistakes and not to mess up if your app use so many sessions and depends on it a lot. This does not necessarily mean Session works exactly that way. 

Even though it is OK that we could make an abstract pattern and use that to memorize, it is still very important to know how it really works behind and I suggest you guys keep reading about that.

Thanks and any suggestion is welcomed.

Edited : Thomas Junk explained really well how it really works behind in the comment.
VS CODE EXTENSION FOR DEVELOPER
Tags: vscode, extensions, react, antd
Published: 2020-01-07 07:33:26

---
title: VS CODE EXTENSION FOR DEVELOPER
published: true
description: Some great VS CODE extension for full stack developer
tags: vscode , extensions , reactjs , antd
---

Here are some great VS-CODE extension :-

1. Auto Close Tag
2. Auto Rename Tag
3. Auto Complete Tag
4. Beautify
5. Code Spell Check
6. CodeStream
7. Color Highlight
8. Debugger Community
9. ES Lint
10. GistPad
11. Git Blame
12. Git Graph
13. Intellisense for CSS class name in HTML
14. Material Icon Theme
15. Path Autocomplete
16. Path Intellisence
17. Prettier Code Formatter
18. Print Code
19. ToDo Highlight
20. SVG Viewer



Please comment your own favourite extension :)
Voice Controlled Notes taking application using Svelte
Tags: javascript, svelte, webdev, beginners
Published: 2020-01-07 07:20:35

---
title: Voice Controlled Notes taking application using Svelte
published: true
description: Build a demo application "Voice Notes" that creates notes using Web Speech API and svelte.
tags: #javascript, #svelte, #webdev, #beginners
---
## Application Introduction
I have build a demo application "Voice Notes" using Web Speech API and Svelte. This application help you with the following features
1) Taking notes by using voice and keyboard input
2) Listen to created notes
3) Delete the created notes

## Speech API 
The Web Speech API enables you to incorporate voice data into web apps. The Web Speech API has two parts: SpeechSynthesis (Text-to-Speech), and SpeechRecognition (Speech-to-Text). 

**Note -** Speech API is Supported only in Chrome and Firefox.

## Working Demo on Youtube
{% youtube VB_mN9hrRjA %}

## Mobile design
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/435q5413b6vg9tpznabm.jpeg)

## Complete Code 
https://github.com/karkranikhil/voice-notes

## Demo
https://voice-notes-nh00avakc.now.sh/


## Speech API High Level Overview.

#### 1. Check the API support 
```javascript
try {
    let SpeechRecognition =
      window.SpeechRecognition || window.webkitSpeechRecognition;
    var recognition = new SpeechRecognition();
  } catch (e) {
    console.error(e);
  }
```
#### 2. Speech to Text event handler
```javascript
let recordingText = `Press the Play button to Start recording.`; // use this in HTML
//recognition.continuous - If false, the recording will stop after a few seconds of silence.
// When true, the silence period is longer (about 15 seconds)
recognition.continuous = true;

// onresult called every time the Speech API captures Voice.
recognition.onresult = function(event) {
    let current = event.resultIndex;
   
// Get a transcript of what was said.
    let transcript = event.results[current][0].transcript;
    console.log(transcript);
  };

// Trigger on start
  recognition.onstart = function() {
 // setting the text to inform user about the action
    recordingText =
      "Voice recognition Started. Try speaking into the microphone.";
  };
// Trigger on end
  recognition.onspeechend = function() {
// setting the text to inform user about the action
    recordingText = "Voice recognition turned off.";
  };
// Trigger on error
  recognition.onerror = function(event) {
    if (event.error == "no-speech") {
// setting the text to inform user about the action
      recordingText = "No Voice was detected. Try again.";
    }
  };
```

#### 3. Text to Speech event Handlers
```javascript
function readOutLoud(message) {
    let speech = new SpeechSynthesisUtterance();
    speech.text = message;
    speech.volume = 1;
    speech.rate = 1;
    speech.pitch = 1;
    window.speechSynthesis.speak(speech);
  }
```
## Reference
https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API
Mechvibes app that plays mechanical keyboard sounds as you type
Tags: productivity
Published: 2020-01-07 05:52:25

---
title: Mechvibes app that plays mechanical keyboard sounds as you type
published: false
description: It's an app that let you define and play mechanical key press sound as you type your current keyboard, although it is membrane or mech key with any kind of switch.
tags: productivity
cover_image: https://thepracticaldev.s3.amazonaws.com/i/y03uj2620d3s9k8bwrse.jpg
published: true
---

It's a side project that I made for myself since when I use my own mechanical keyboard at late night or in the office and my parents and my coworkers hate that a lot because the sound of the keyboard is very loud (especially in quiet places). So if you are facing this issue just like me then this product is for you!

- You can add more keyboard sound set by recording any sound you like and add them to this app with some easy steps.
- Use your laptop keyboard or non-mechanical keyboard at work and still hear your loved sound.
- Use this app as any purpose as you want (such as demo for the buyer about the keyboard sound before they buy it, custom any sound for any key...)
- Enjoy happy time by trolling your friends buy assign some funny sound to their keyboards

If you find this interesting or have any idea, please let me know!

Demo: https://youtu.be/FZSao_1a4DI
Home page: https://mechvibes.com
Github: https://github.com/hainguyents13/mechvibes
Contact me at hainguyents13@gmail.com
Web scrapping through Python (Part 3)
Tags: scrapping, css, java, webdev
Published: 2020-01-07 05:32:22

I have already given 2 small session this is 3rd one hope you enjoy it.
 
You can scrape a website in python either by beautiful soup library or by scrapy framework In this article we will learn to scrape websites using scrapy framework

Table of Content

Basic python
Scrapy framework
Practical example
Unique Tips while programming
Selenium webdriver
Applications of web scraping
Conclusions
References

IN THIS SESSION I'LL DISCUSS ABOUT PYTHON SCRAPPING...

1. Python

Python is a general-purpose interpreted, high-level, programming
language. And the best thing about python is it is easiest language to learn
for beginners as well as for professionals. It is created by Guido van
Rossum and first released in 1991. Python can be used for many
applications like web scraping, web and internet development, software
development, science and numeric applications and many others. Python
source code is also available under the GNU general public license (GPL).
For this article knowledge of these topics will be advantage to you-
 For loop
 Conditional statements

 Functions
 List, tuples, dictionaries
 And some basics of strings, numbers and operators

Examples of each topic is given below:

[ Example 1
country = ["india", "america", "japan",”germany”,”france”]
for i in country:
print(i)
Explanation > this will simply print all elements of list one by
one. ]

[ Example 2
a = 50
b = 55
if (b > a):
print("b is greater than a")
Explanation > as we can see “b” is greater than “a” so it will
print 55. ]

[ Example 3
def my_function():
if (i > 5):
print("Hello from a function")

my_function(i = 6)

Explanation > as it satisfies the if condition so it will call
the function and this function will simply print Hello from a
function ]

[ Example 4
list1 = ["apple", "banana", "cherry"]
print(list1)
================================================================
=
tuple1 = ("apple", "banana", "cherry")
print(tuple1)
================================================================
=
dict1 = {
"brand": "Ford",
"model": "Mustang",
"year": 1964
}
print(dict1)
Explanation > this function will simply print the elements of
list tuple and dictionaries.
]

WHAT YOU GUYS THINK ABOUT <a href="https://desklib.com/document/data-visualisation-with-tableau-hsgv" > DATA VISUALISATION</a> TAP TO CHECK.
SQL: Timestamps
Tags: mysql, postgres, timestamp, sql
Published: 2020-01-06 23:47:56

---
title: SQL: Timestamps
published: true
description: 
tags: #mysql #postgres #timestamp
---
The ``TIMESTAMP`` data type holds values that contain both date and time, fixed at 19 characters. The format of a ``TIMESTAMP`` is 'YYYY-MM-DD HH:MM:SS'

In [DBMSs](https://techterms.com/definition/dbms) such as MySQL, ``DATETIME`` is a supported data type that, just like ``TIMESTAMP``, is used to hold date and time values, but they're not entirely the same for the following reasons:

* Size: ``DATETIME`` requires a few more bytes for data storing than ``TIMESTAMP``.
* As specified in the MySQL documentation, MySQL converts ``TIMESTAMP`` values from the current time zone to UTC for storage, and back from UTC to the current time zone for retrieval, which does not occur for other types such as ``DATETIME``. This is particularly convenient when working with different time zones.
* Different supported ranges: '1000-01-01 00:00:00' to '9999-12-31 23:59:59' for ``DATETIME``, '1970-01-01 00:00:01' UTC to '2038-01-19 03:14:07' UTC for ``TIMESTAMP``.

**Retrieving data from ``TIMESTAMP``:**
In order to fetch information from a ``TIMESTAMP`` object, we can use the ``extract()`` function, for which we specify the field from ``TIMESTAMP`` we want. Examples of this field would be: 

![Timestamp fields examples](https://thepracticaldev.s3.amazonaws.com/i/pps0f5f6abl8z3t9ek5b.png)

Let's consider the following table to work on some examples:

![Table for timestamp examples](https://thepracticaldev.s3.amazonaws.com/i/jio9dkkny7whfh94mmit.png)

All payments were made in november, so let's grab these bills along with the days they were paid:

![Timestamp query](https://thepracticaldev.s3.amazonaws.com/i/9awzlpras90fqi5zhs2r.png)

We add the AS statement to name the resulting column from using EXTRACT.

![Timestamp query results](https://thepracticaldev.s3.amazonaws.com/i/y8ello95nzl9ida6gxk6.png)

If our bills table was larger, including payments to these bills all throughout the year, we could implement extract() and an aggregate function (SUM) to show, for example, the total amount of money paid in bills by month, with a query similar to this one:

![Another timestamp query](https://thepracticaldev.s3.amazonaws.com/i/ehjdu7ol7qn3lvfxp6aa.png)

The larger our databases, the more ways available to retrieve info!
Have fun!
DevOps - I'm a professional React developer, and here's how I deploy Node.js/GraphQL Microservices to AWS using Terraform. #2
Tags: react, node, webdev, javascript
Published: 2020-01-07 04:24:33

**About Me:** I've been a professional web developer for just over 10 years now. I'm currently the lead web development instructor at [Better Coding Academy](https://codebetter.com.au), and as part of what I do, I post videos on our YouTube channel at [https://www.youtube.com/c/BetterCodingAcademy](https://www.youtube.com/c/BetterCodingAcademy).

_(Subscribe for awesome web development content!)_

In a previous video series, I built a classifieds app with a microservices architecture using React, Node.js, GraphQL and Docker; you can find the dev.to article on that [here](https://dev.to/bettercodingacademy/i-m-a-professional-react-developer-and-here-s-how-i-set-up-react-node-js-microservices-using-docker-and-graphql-20gk).

Now, I'm deploying that application onto [AWS](https://aws.amazon.com/) using [Terraform](https://www.terraform.io/), and this is part 2 of that tutorial.

I hope you enjoy!

{% youtube jdqYmpZic7s %}

Happy coding!

Full source code: [https://github.com/parkroolucas/microservices-demo](https://github.com/parkroolucas/microservices-demo)
Comment créer un Asset ou Smart Asset en NodeJS sur la Blockchain Waves.
Tags: blockchain, waves, developpeur, javascript
Published: 2020-01-07 04:18:19

Bonjour à tous,

Nouvelle vidéo youtube ce samedi 11 janvier à midi ou nous verrons ensemble comment on peut créer un asset/token sur la Blockchain Waves et y associer un script pour en faire un Smart Asset.

Sur la Blockchain Waves il existe différents types de Smart Contract, à savoir :

- Smart Account
- Smart Asset
- dApp Account

Nous verrons tous ces types en détail durant les futures wébinaires mais cette vidéo permettra déjà une première approche concernant les Smart Assets et comment les créer.

A bientôt

N'hésitez pas à nous suivre sur les réseaux sociaux en attendant :

Telegram : https://t.me/wavesdappsFR
Twitter : https://twitter.com/WavesDevFr
Youtube : https://www.youtube.com/channel/UC2DS9ktTKWGW3NHHV2Ja3_A
TIL How To Add Scapegoat To IntelliJ's Build Process
Tags: scala, sbt, intellij, todayilearned
Published: 2020-01-07 03:11:51

At [work](zignallabs.com), we have been using [Scapegoat](https://github.com/sksamuel/scapegoat) with [sbt](https://www.scala-sbt.org/) to check for code smells. Scapegoat is a static code analyzer 
that has an [sbt plugin](https://github.com/sksamuel/sbt-scapegoat) and we are using that to do our analysis on our build server. While it is possible to run locally as well, it is not built into
[IntelliJ](https://www.jetbrains.com/idea/), which is what our team uses to develop all of our Scala codebases. Because it does not run whenever we compile, it is sometimes neglected to be run before checking in a change and developers, myself included, have to go back and make the appropriate changes.

To include this in the compile stage, we will take advantage of the sbt plugin:

```
// plugins.sbt
addSbtPlugin("com.sksamuel.scapegoat" %% "sbt-scapegoat" % "1.0.9")
```

Then, we will create a separate sbt file for scapegoat, enable the compiler plugin and then configure the scapegoat settings:

```
// scapegoat.sbt
addCompilerPlugin("com.sksamuel.scapegoat" % "scalac-scapegoat-plugin_2.12.10" % "1.4.0")

scapegoatVersion in ThisBuild := "1.3.11"

scapegoatDisabledInspections := Seq(
  "AsInstanceOf",
)

scalacOptions ++= Seq(
  "-P:scapegoat:dataDir:./target/scapegoat"
) ++ scapegoatDisabledInspections.value.map(x => s"-P:scapegoat:disabledInspections:$x" )
```

The examples above may not be the most up-to-date versions, but hopefully you get the gist. The second part about the disable inspections is also not required, but it a nice way to define the list in a 'nice' way using the sbt plugin and easily converting it to being using by the compiler plugin. The only required part is the `-P:scapegoat:dataDir` scalac option. Once you add this, you should see Scapegoat errors show up during both IntelliJ builds and when compiling through sbt.
Github Repositories Lack Organization
Tags: codinglife, github, organization, repositories
Published: 2020-01-07 03:36:06

---
title: Github Repositories Lack Organization
published: true
date: 2020-01-07 03:02:41 UTC
tags: Coding Life,github,organization,repositories
canonical_url: 
---

GitHub, a website where more than 2.1 million organizations store their Git repositories remotely, is a great free resource for any programmer. I personally use...

The post [Github Repositories Lack Organization](https://jaeheonshim.com/github-repositories-lack-organization/) appeared first on [Coding with Jaeheon Shim](https://jaeheonshim.com).
My first blog post
Tags: webdev
Published: 2020-01-07 02:32:44

There I was. Sitting in front of the monitor.
I had just gotten a new keyboard — one of those mechanical ones that creates the sound movie subtitles refer to as “clacking.”

I couldn’t wait to listen to the sound of the mechanical clacking.

That sound of teamwork.
The sound of success.
The sound of clack.


Cheers, 
Anilreddychinna.