teleren/devto huggingface dataset:
Django With MySQL, build your first full-stack app with container
Tags: python, django, mysql, containers
Published: 2020-04-09 11:32:23

Steps:I.
Install git (https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)  and docker (https://docs.docker.com/) in your computer.
II.
Use below command to download and run latest mysql image.

docker run -p 3306:3306 -e MYSQL_ROOT_PASSWORD=root -e MYSQL_DATABASE=djangodocker_db mysql
III.

Once the container is up and running, login to MySql client using the below command

mysql -h localhost -P 3306 --protocol=tcp -u root -p

IV.
Execute following command on MySql Prompt.
CREATE USER 'django'@'%' IDENTIFIED BY 'django';
ALTER USER 'django'@'%' IDENTIFIED WITH mysql_native_password BY 'django';
DROP DATABASE IF EXISTS django;

CREATE DATABASE django DEFAULT CHARACTER SET utf8 DEFAULT COLLATE utf8_general_ci;
GRANT ALL PRIVILEGES ON django.* TO 'django'@'%' ;

V.
Clone the code from  https://github.com/sreenathd/testweb
git clone https://github.com/sreenathd/testweb



VI.
Run the django containerby mapping local code path
docker run -it --entrypoint bash -p 80:80 --name djangotestweb -v localpath:/var/www/testweb sreenathd/testweb

VI.
Update settings.py file in the container
docker exec -it djangotestweb bash
vi /var/www/testweb/settings.py

with following section

DATABASES = { 

'default': { 

'ENGINE': 'django.db.backends.mysql',

 'NAME': 'django', 'USER': 'django', 

'PASSWORD': 'django', 

'HOST': 'db_container_ip', 

'PORT': '3306' 

} 

}


VII.

Run the django app inside the conatiner 

/var/www/testweb# python3 manage.py runserver 0.0.0.0:80

VIII.


Go to any browser and check your site is up and running or not http://127.0.0.1/
Tim Sneath: "Flutter is to apps as Unity is to games"
Tags: flutter, dart
Published: 2020-04-09 11:25:38

Introduction 

We talked with Tim Sneath, Google's product manager for Flutter and Dart, about how both the language and the framework have evolved over the last two years, how they're being used today, and where they're headed.

https://evrone.com/tim-sneath-interview
Learn a New Language: Ruby or Go?
Tags: discuss, ruby, go, beginners
Published: 2020-04-09 11:25:22

I'm lucky enough that I can take my time on lockdown to build some backlogged projects, draft some posts and develop some new skills, one thing I've been thinking about is learning some core concepts of a new language.

After looking at what I enjoy, what's [popular](https://www.tiobe.com/tiobe-index/) and what's actually used, I've narrowed it down to Ruby and Go,

## The case for Ruby
So many tools I love to use are built with Ruby and loads of great websites are written in Rails. Makes me think there's some real utility there I could start leveraging in my own solutions, not to mention Rails opens a new avenue for webdev!

The only hold-ups I have, it's not got a popular reputation locally, there are a few product teams that use it and talk regularly about how there's not many jobs in it and that they hope to migrate to something else...

## The case for Go
Go has a certain appeal to me - most of my stack is Python-based with some JavaScript, using AWS; I used to work in a C/C++ stack and the promises of efficiency, combing my old domain with my current and "easy" integration to my current stack make it hard to not notice.

And again a lot of great tools and services are being built in it or things that were once Python (still my fav) are being ported to Go now, it seems a little less broad spectrum of services built with it?


## Decisions, decisions
I'm leaning towards Go, but want some input, I know very few people who actively use either to draw from, anything I've found normally has a strong agenda, so I want to ask here, see what people think and crowdsource some opinions!

Which would you recommend starting with and why? 

or if you've any strong experiences working on either, think one is easier to learn etc etc
Scully Tutorial: A Static Site Generator for Angular Websites
Tags: javascript, webdev, showdev, angular
Published: 2020-04-09 18:35:50

---
title: Scully Tutorial: A Static Site Generator for Angular Websites
published: true
date: 2020-04-09 11:22:47 UTC
tags: javascript, webdev, showdev, angular
canonical_url: https://snipcart.com/blog/angular-static-site-generator-scully
---

![Scully Tutorial: A Static Site Generator for Angular Websites](https://snipcart.com/media/204858/angular-static-website.png)

No matter how many content pieces I’ve written [on the subject](https://snipcart.com/blog/categories/jamstack), not often have I mentioned the words *JAMstack* and *Angular* next to each other.

That’s kind of shocking, yet understandable.

I mean, when it comes to the [JAMstack](https://snipcart.com/blog/jamstack), Angular’s community is undeniably late to the party. But hey, there’s still well enough cake for everyone to enjoy!

Good news is devs have started to build the tools necessary to bridge the empty gap between Angular and static websites.

Case in point: [Scully.io](https://scully.io/), the first Angular static site generator.

In this tutorial, **I’m going to use Scully to craft an Angular static website**. While I’m at it, I’ll push the demo further by integrating our shopping cart, thus creating a simple e-commerce app in no time.

Tutorial steps 🛠

- Create a new Angular app
- Install external dependencies
- Write an Angular service
- Create the necessary components
- Add Scully to generate an Angular static website

First, let’s see what Scully is and what new opportunities it brings to the Angular community.
  

→ Read the full post [here](https://snipcart.com/blog/angular-static-site-generator-scully)
Lazy loading 1500 images using native IMG loading property
Tags: codepen, lazyloading, poc
Published: 2020-04-09 11:21:17

---
title: Lazy loading 1500 images using native IMG loading property
published: true
tags: codepen, lazy-loading, poc
---

<p>After seeing a tweet by Lea Verou <a href="https://twitter.com/LeaVerou/status/1248003483330129920" target="_blank">https://twitter.com/LeaVerou/status/1248003483330129920</a> where she share excitement about native lazy loading landing in Firefox 75, I wanted to do a little POC about this subject of lazy loading using simply a property on say IMG tag. </p>

<p>Turned out I had to pull in a polyfill for it to work here in my Chrome on Mac (perhaps I am doing something wrong?).</p>

<p>I am greatfull for unsplash.com which provides some categorized images to add just a little more fun this demo/POC.</p>

{% codepen https://codepen.io/netsi1964/pen/pojoNBQ %}
Scripting to Save Lives- helping the fight against COVID-19
Tags: coronavirus, covid19, stayhomesavelives
Published: 2020-04-09 11:21:03

# help donate to hospitals!

we need anything from full page designs to a few lines of code to beat COVID-19!

What do we need you ask?

- home page to describe the cause
- dev help page so you can donate through folding@home
- donation options page
- other ways to help page

anything would help!

see the full article here at https://support.glitch.com/t/scripting-to-save-lives-we-need-your-help/21753
Corona Virus Live Update ReactJs Application
Tags: react, api, javascript, css
Published: 2020-04-09 11:18:01

 Corona Virus Live Update ReactJs Application

 [Corona Virus Live Update](https://coronabd.netlify.app/)
Recently, I have to build coronavirus live updates with fetch API. 
The API will update every data inside my coronavirus application.

To set up the coronavirus update your existing website or make a coronavirus live update 

landing page application

Hire me 

[Fiverr](https://www.fiverr.com/s2/8c9485cd04)
What is your favorite online code sandbox tool?
Tags: webdev, discuss
Published: 2020-04-09 11:17:32

---
title: What is your favorite online code sandbox tool?
published: true
description: 
tags: webdev, discuss
---
Setting up new project locally just for quick ideas and snippets usually is a bit of overkill, since it takes time to set up, requires use of many tools (like editor, browser and terminal) and you end up with extra files in your machine. 

That's where online code sandboxes come in. These requires no setup, includes all tools for tests/preview in single space and allow to quickly get rid of your snippets with just of a press of a button.

For a long time I used a combination of [jsbin.com](jsbin.com) and [codepen.io](codepen.io), recently moved to [codesandbox.io](codesandbox.io) and never really looked back. 

What is your current favorite online code sandbox and why?
Project Aurora - It's Alive!
Tags: uwp, github, csharp, devtools
Published: 2020-04-09 11:06:23

We are //cooking now!

The get, post and patch are all working so we are not just listing issues like before,  but editing, opening and closing them, and submitting new issues!

And there's more.

We're doing all that with Repo's too!

![](https://github.com/RobbyRobbyRobby/PublicImages/blob/master/2020-04-09%20(1).png?raw=true)

![](https://github.com/RobbyRobbyRobby/PublicImages/blob/master/2020-04-07%20(3).png?raw=true)

![](https://github.com/RobbyRobbyRobby/PublicImages/blob/master/2020-04-07.png?raw=true)
Multiple conditions with logical || operator
Tags: javascript, tips, learn, angular
Published: 2020-04-09 10:40:29

---
title: Multiple conditions with logical || operator
published: true
description: 
tags: #javascript #tips #learn #angular
---

Order of condition matters because of `short-circuit-evaluation`. When we apply conditions with logical || or-operator, order of condition checking starts from left to right and if one of the condition that is... left or right condition of logical || is `true` then other is condition will not be checked.

`Logical || or-operator` with multiple conditions sets then, whenever there is only one condition becomes true after that rest of conditions checks gets break and gives output to only from one of the true condition. Condition checking starts from left to right order.

##What is printed in console?

```javascript 
let car = () => {
  console.log('Audi - A4');
  return false;
};

let carManufacturer = () => {
  console.log('Audi Motors India Ltd.');
  return true;
}

let carOrManufaturerOne = false || car() || carManufacturer();
let carOrManufaturerTwo = false || carManufacturer() || car();
let carOrManufaturerThree = true || carManufacturer() || car();

```

    Answer of carOrManufaturerOne: 
       'Audi - A4',
       'Audi Motors India Ltd.'
    
    // Because... carMenufaturer() is returned true, and is called lastly in condition chain.

    Answer of carOrManufacturerTwo:
       'Audi Motors India Ltd.'
    
    // Because... carMenufaturer() is returned true, and is called Second in condition chain. and then after all condition checks fails to laod.

    Answer of carOrManufacturerThree:
       'nothing displayed on console.' or 'undefined'

    // Because... First condition is returned true, and rest in condition chain fails to load.
My Top 5 Favorite Things from JavaScript ES2020
Tags: javascript, webdev
Published: 2020-04-09 10:37:00

Being a JavaScript developer, knowing the ECMAScript standards is the essential one.

So, I would like to share my top 5 favorite things from JavaScript `ES2020` which are all finalized proposals (`stage 4`).

# Top 5 Favorite Things From JavaScript ES2020

### 1. Nullish Operator (`??`)

Before this introduced, we have been using `||` OR operator. But `??` and `||` basically serves a different purpose.

`||` is to check `falsy` [values](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) whereas `??` operator is to check both `NULL` or `Undefined`.

```
const user = { name: 'John' };
console.log(user.name ?? 'Not Exists.');
```

### 2. Optional Chaining (`?.`)

Before this, we have been using `&&` AND operator to check whether left-hand side expression returns true, then the right-hand side expression would be evaluated. 

```
const user = { name: 'John' };
console.log(user?.name);
```

### 3. Dynamically Importing JS Module
We could lazy load the JS module at runtime by using this option,
`import(<module_file_name>)`

```
async loadUser() {
  const user = await import(`./user.js`);
  console.log(user.getName());
}
```

### 4. Accessing Global Context
We use a certain keyword to access the `global` context but it differs for each environment. For instance, 
   * `window` is the keyword for `browser` environment,
   * `global` is the keyword for `Node.js` environment,
   * `self` is the keyword for `Web/service workers`

`globalThis` is the new keyword that solves the above environment context issue.

As a web developer, We often stick to `write once run it anywhere` principle. In this fashion, this new addition would help us a lot.

### 5. Promise.allSettled (`Promise.allSettled([inputs])`)
As a web developer, invoking multiple HTTP requests simultaneously is the usual thing.
`Promise.allSettled([])`, this one will be settled down when all the inputs are either resolved/rejected.

```
const getUser = () => Promise.resolve({ name: 'John' });
const getUserRights = () => Promise.reject(new Error(`Unauthorized Access...`));
const getUsersCount = () => Promise.resolve({ total: 5000 });
```
Let's say we have 3 promise calls which we are going to invoke parallelly.

```
Promise.allSettled([getUser(), getUserRights(), getUsersCount()])
       .then(([user, rights, count]) => {
           if(user.status === 'resolved') { console.log(user.value); }
        })
       .catch(console.error);
```

We have different options available to invoke multiple `Promise` calls at a time, `Promise.all([])` and `Promise.race([])`. But those two Promise objects differ based on the use case.

`Promise.all([x, y, z])` will invoke all the given Promises parallelly but if anyone is failed then this operation would end up in `catch` block of `Promise.all([])`. But the resolved input promise would be ignored.

`Promise.race([x, y, z])`, this output will be resolved as soon as one of the input promise is resolved.

**NOTE:** If you're coming from C# background you have already familiar with `??` and `?.` operators.
Invoke a Java static method from RCPTT
Tags: rcptt, eclipse, invokestatic, java
Published: 2020-04-09 10:11:34

It makes no sense to spend lot of time writing complex procedures when we could reuse all the functions available in our application. We don’t want to reinvent the wheel; instead we want to focus on the main goal to test the application.
The <code>invoke-static</code> ECL command can be used for this purpose, to invoke any static method in a java class. Any class available in the plugins provided by the application under test can be used depending on argument types.
Here are some situations where we can save time reusing utility functions provided by Java SE or Apache Commons.
###Apache Commons *StringUtils*
```
/*
Returns true if the specified value is numeric.
*/
proc isNumeric [val value] {
	invoke-static -pluginId "org.apache.commons.lang3" -className "org.apache.commons.lang3.StringUtils" 
		-methodName isNumeric -args [str $value]
}

/*
Reverses a string.
*/
proc reverse [val string] {
	invoke-static -pluginId "org.apache.commons.lang3" -className "org.apache.commons.lang3.StringUtils" 
		-methodName reverse -args $string
}
```
Some verifications
```
isNumeric "abc" | verify-false
isNumeric "123" | verify-true

reverse "abc" | equals "cba" | verify-true
```
###Apache Commons *FileUtils*
```
// get the user directory path
invoke-static -pluginId "org.apache.commons.io" -className "org.apache.commons.io.FileUtils" 
		-methodName getUserDirectoryPath | log
```
###Java *System*
```
// get the value of a environment variable
invoke-static -pluginId "org.eclipse.rcptt.ecl.core" -className "java.lang.System" 
	-methodName getenv -args "JAVA_HOME" | log
```
Improving SEO in nuxt
Published: 2020-04-09 10:08:41

---
title: Improving SEO in nuxt
published: true
description: 
tags: 
---

Nuxt gives amazing SEO options but there are still somethings that developer should be careful of while building a web/mobile app.

1. Make use of h1 tag. The most important thing of a page should be inside  h1 tag.
Stack: Array as Storage
Tags: javascript, webdev
Published: 2020-04-09 09:17:26

Before writing this, I had a serious debate with myself. Is there a need to implement your own stack using arrays in JavaScript, when the the language itself provides methods, pop() and push(), which are needed in a typical stack???

For the sake of understanding stacks better, I ended up implementing my own, assuming that my stack grows dynamically.  

##Implementation
1.Create a stack class
```javascript
class Stack {
    constructor() {
        this.items = [];
        this.size = -1;
    }
//add methods
}
```
In our stack class, we declare an array to implement a stack and set the size to -1 (empty). 

2.Add methods to stack class to perform push, pop, peek. 

**push item to stack**
```javascript
push(data) {
        //if an item is provided
        if (data) {
            //add item to array
            this.items.push(data);
            //increase size
            this.size++;
        }
        return;        
    }
```
Here, an item is added to top of stack. 

**pop item in stack**
The top item in stack is removed and returned. If list is empty Underflow is returned. 

```javascript
pop() {
    //if empty
    if (this.size === -1) {
      return "UnderFlow";
    } else {
        this.size--;
        //return top item in stack
      return this.items.pop();
    }
  }
```

**peek**
Returns top element but does not remove it from stack
```javascript
 peek() {
    //if empty
    if (this.size === -1) {
      return "Empty stack";
    }
    //return top item in stack
    return this.items[this.size];
  }

```

**Example Test Code**
```javascript
let stack = new Stack();
stack.push(3);
stack.push(5);
stack.push(7);
console.log(stack.pop());//7
console.log(stack.peek());//5
console.log(stack)//[3, 5]
```
Next, I'll be applying my stack knowledge in creating a postfix calculator :wink: .
Happy coding.
6 Tips For Passing Certified Kubernetes Administrator (CKA) Exam
Tags: linux, kubernetes, cka
Published: 2020-04-09 09:16:52

---
title: 6 Tips For Passing Certified Kubernetes Administrator (CKA) Exam
published: true
description: How to pass CKA
tags: Linux, Kubernetes, CKA
cover_image: https://assets.mkdev.me/posts/covers/000/000/012/original/mkdev_article.png
---
Certified Kubernetes Administrator is most known and appreciated Kubernetes certification, provided by Linux Foundation.

In this video, Kirill Shirinkin shares 6 tips for passing Certified Kubernetes Administrator (CKA) Exam, including some less known kubectl features and multiple productivity tricks.

{% youtube Hk07gXekQ1c %}

***

*You can always hire [our mentors](https://mkdev.me/en/specializations) and learn directly from them!*
CodeJar Code Editor
Tags: codepen, javascript
Published: 2020-04-09 09:13:44

---
title: CodeJar Code Editor
published: true
tags: codepen,js
---

{% codepen https://codepen.io/antonmedv/pen/PoPoGwg %}

## Features
* Lightweight (2 kB only)
* Preserves indentation on a new line
* Adds closing brackets, quotes
* Indents line with the Tab key
* Supports undo/redo
Criando um React Custom Hook com Testes
Tags: react, braziliandevs, video, webdev
Published: 2021-04-21 18:37:17

---
title: Criando um React Custom Hook com Testes
published: true
date: 2020-04-09 09:08:32 UTC
tags:
  - reactjs
  - braziliandevs
  - video
  - webdev
canonical_url: https://willianjusten.com.br/criando-um-react-custom-hook-com-testes/
---

## Introdução

Fala pessoal, o post de hoje vem com vídeo, espero fazer mais alguns assim, vamos juntos na expectativa que vocês gostam. Para o assunto de hoje, eu resolvi falar sobre hooks em React, dessa vez como criar um do zero.

O vídeo ficou longo (~30min), então dá uma paradinha, vai lá pegar um café ou chá, avisa no _Whatsapp_ que vai assistir algo importante e segue junto =)

~~Como eu falo devagar, bota em 2x que melhora~~

## Video

{% youtube EvR4RPBsHfE %}

### Alguns links e informações

Todo o código do projeto que fizemos, você encontrará no [repositório do Github](https://github.com/willianjusten/use-konami-code).

O [post sobre React Hooks do blog é esse](https://willianjusten.com.br/habemus-react-hooks/) e o [post sobre como converter class para hooks](https://willianjusten.com.br/convertendo-um-class-based-component-para-react-hooks/).

A biblioteca que usei para testar foi a [@testing-library/hooks](https://github.com/testing-library/react-hooks-testing-library), além disso, utilizei também o [create-react-app](https://github.com/facebook/create-react-app) para fazer a estrutura sem perder tempo.

Você pode ler mais sobre o _Konami Code_ [neste link](https://pt.wikipedia.org/wiki/C%C3%B3digo_Konami) e eu usei o [keycode.info](https://keycode.info/) para descobrir os valores certinhos de cada tecla.

## Conclusão

Espero que tenham gostado do vídeo e se gostaram, por favor, se inscrevam no [meu canal do YouTube](https://www.youtube.com/WillianJustenCursos?sub_confirmation=1), compartilhem e comentem!
Group Anagrams – LeetCode challenge Javascript solution Hashmap
Tags: programming, javascript, codequality
Published: 2020-04-16 12:19:27

---
title: Group Anagrams – LeetCode challenge Javascript solution Hashmap
published: true
date: 2020-04-09 08:58:49 UTC
tags: Programming, javascript, codequality
canonical_url: https://rajeshroyal.com/group-anagrams-leetcode-challenge-javascript-solution-hashmap/
---

## Group Anagrams Problem statement:

[https://leetcode.com/problems/](https://leetcode.com/problems/group-anagrams)   
  
Given an array of strings, group anagrams together.

**Example:**

```
**Input:** ["eat", "tea", "tan", "ate", "nat", "bat"], 
**Output:** [["ate","eat","tea"], ["nat","tan"], ["bat"]]
```

**Note:**

- All inputs will be in lowercase.
- The order of your output does not matter.

## Group Anagrams ES6 solution

```
/\*\* \* @param {string[]} 
strs \* @return {string[][]} \*/

var groupAnagrams = function(strs) { 

  function logMapElements(value, key, map) { 
     lastarray.push(value.split(',')) 
     //push value of the current key "key" = "ate","tea" 
  }

 let map = new Map(); 
 let lastarray = Array(); 

 strs.map(function(crntvalue){ 
 let orig = crntvalue; 
 let sorted = crntvalue.split('').sort().join(''); 
 //sort the orignal array word  

 if(map.has(sorted)){  
  let crnt = map.get(sorted); 
  //get current keypair value 

  map.set(sorted, crnt += ','+orig) 
  //add new value with current key pair 
}else{ 
   map.set(sorted, orig); 
   //create key and value 
} 
}); 

map.forEach(logMapElements); 
//iterate through each map element 

return lastarray; 
};
```

## Submission Output on LeetCode:

![code output on Leetcode Group Anagrams](https://rajeshroyal.com/wp-content/uploads/2020/04/image.png)