teleren/devto huggingface dataset:
How to learn coding?
Tags: computerscience, productivity
Published: 2020-09-02 19:49:38


This is the question when you just bump into computer science. Most of the time beginners are struggling with mainly three problems. When to learn, what to learn and how to learn. These questions are raised because the tech industry is rapidly changing. For example, now we have fields like data science, AI, AR, VR, and many more. 

What I have learned from my experiences is “don’t go after new technologies without mastering basics”. If you are a beginner, start from scratch, master the basics, then choose a new technology and go in-depth to do cool stuff.

If you have mastered the basics, learning new technologies is nothing for you. I’ll share some tips that I have followed.

1.	Talk with your seniors/lecturers. 
ask questions, and carefully listen to what they have to say. They will guide you with their experiences. That is a very important thing when it comes to IT industry.

2.	Start with the basics. 
I recommend you to learn HTML/CSS at the beginning. Then learn programming with C language. If you master the basics of C language, trust me learning another language is super easy. After you finish with C basics, move back to HTML/CSS with javascript and PHP. Then you will get the basic idea of how to create a website, write an algorithm, and working with databases. 

3.	Follow a tutorial series that is best for you.
4.	Learn one thing at a time
5.	Practice it
6.	Do a project

The most important thing I have to mention is “Google and search for everything that comes to your mind”. That is the best advice that I can give you when it comes to programming. In my case, I googled every problem that comes to my mind. And that leads me to explore new areas as well as finding the solution.

When it comes to tutorials, You can refer loads of websites and youtube tutorials to learn anything within seconds. And there are so many online learning platforms also. You can take courses on what you wish to learn and master the skill.

In the upcoming articles, I will mention the best online learning platforms, youtube channels, and learning resources that would help you to learn code.

Happy Coding!
Async First!
Published: 2020-09-02 19:49:08

**Async First?**
Apart from learning async/await in C#, Node was the first JavaScript Async first framework that I encountered. If Node did it, then shouldn't we?

**Converting to Async**

Once we decide to convert our traditional Synchronous Components into Asynchronous components, we start to notice a few odd things.  One of them is that single stepping to a line of code with an "await" will surprise us. 

Anytime an "await" is seen it "yields" control to the async engine to do its thing. It most likely will not hit the next statement right away. Solution: Put in more breakpoints, just before and after "await" statements. 

**Pervasive throughout the Code Stack**

Making our Functions Async tends to have a ripple effect upwards in the stack. Any async function requires the caller to "await" return, this means the caller must be asynchronous too.  This often ripples up until perhaps maybe the entire stack becomes async. 

**Mixing Synchronous and Asynchronous**

Yes it can be done but the recommendation is just be careful.  For example, even event handlers themselves should become async.

```typescript
// Before
onButtonClicked(event){
   //do some synchronous work here
}

// After, browser gets control back immediately

async onButtonClicked(event){
  await doSomeWork();
}
```

**Lambda Conversion**

```typescript
// before
collection.map(item=>{ //do work here});
// after
collection.map(async(item)=>{
   await workWithItem(item);
})

// using Promise resolve
collection.map(async(item)=>{
  let newData = workWithItem(item)
  await Promise.resolve(newData);
}
```

**Closures**

But just firing off Async requests may lead us to dependency trouble. If we encounter any dependencies along the way, we need to implement an Asynchronous closure.

```typescript
 // this is a closure on result.
 let result = await getSomething(1);
// result must be complete before this statement
 let result2 = await getSomething(2);
```

**Integrate with Promises**

```typescript
async function getPromise(){
  return await getSomethingThatReturnsOnlyPromises();   
}
```
**Awareness of the Team**
When a team first looks at Async first they will be confused. It's not the same as Synchronous style programming. Be prepared to answer a few questions and to even roll back changes if the team leader doesn't go for it. They may not know it now but getting to all Async is a good design.

JWP2020 Async First
Day 13 of 100DaysOfCode
Tags: 100daysofcode, twitter, bot, python
Published: 2020-09-02 19:24:43

Worked on the bot that I started yesterday. Didn't have that much time and managed to get it working until I did what every developer does best - Added bugs. 

So the bot is still a work in progress but Python is cool as always. Will probably continue working on this tomorrow. 

I encourage you to check out yesterday's post which tells a little more about the bot. 

###What I did today:

####1. Continued working on the Twitter bot. 
https://www.youtube.com/watch?v=ewq-91-e2fw

#### What I learned from it:
* Finding and solving bugs

####Time spent learning:
Task 'Twitter bot'. Elapsed time: 1 h 3 min 28 s

#### Time spent actually coding: 1h 3min

#### Total time: 1 h 3 min  
Time spent is tracked by my [TaskTimer](https://www.arttupyykonen.com/tasktimer/) script and the [WakaTime app](https://wakatime.com/about)

### Further reading

#### [FreeCodeCamp](https://www.freecodecamp.org/learn)
Check out FCC for the best interactive exercises! I have finished the Basic JavaScript and ES6 lessons and can recommend them for a beginner! You can read more about the Basic JS and ES6 challenges at posts "Day 8" and "Day 11"

#### [Eloquent JavaScript book](https://eloquentjavascript.net/)

###Psst
You can check my answers to the exercises of Eloquent JavaScript. You'll find them [here](https://www.arttupyykonen.com/ejs-solutions/).

This was a fun day! See you all tomorrow! :)
React js tutorial for beginners hindi
Published: 2020-09-02 19:21:59

React is a JavaScript library for building user interfaces. This is introduction video of react js in this video we will see why react js is better then plain html and js and what all features it provides and how is it as compare to other frameworks like angular,vue etc.
<a href="https://www.ymento.com/home/course/react-js-tutorial-for-beginners-hindi/9">free React js tutorial watch here  </a>
A Short Guide to Python Comprehensions
Tags: python, beginners, documentation, comprehensions
Published: 2020-09-02 19:11:32

---
title: A Short Guide to Python Comprehensions
published: true
description: Let’s learn about comprehensions in python
tags: Python, beginner, documentation, comprehensions
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/2jggtm49cy6ndm33v3kj.png
---

Python does not stop to surprise me. I am currently exploring comprehensions and decided to share some tips about it.
This is an exciting and powerful feature that allows us to write expressive code in a single line. Comprehension creates new sequences (lists, dictionaries, sets...) using sequences already defined. 

**List Comprehension** can be used to replace for loops.

Suppose we want to create a list of squares of even numbers. The first thing that comes in mind would be using for loop, like the one below:

```Python
#Iterating over a list using for loop
new_list = []
for n in range(10):
      if n % 2 == 0:
         new_list.append(n**2)
print(new_list)

#output
[0, 4, 16, 36, 64]
```

Let’s see how to rewrite it in a single line of code:

```Python
#Iterating over a list using list comprehension
new_list = [n ** 2 for n in range(10) if n % 2 == 0]
print(new_list)

#output
[0, 4, 16, 36, 64]
```

A basic form of List Comprehension is built as follows: 
`new_list = [expression for item in list]`

In our example we used if conditional logic: 
`new_list = [expression for item in list (if conditional)]`

**Dictionary Comprehension** is similar, but we need the key: value pairs to create a dictionary.

```Python
#Dictionary Comprehension
new_dict = {n: n ** 2 for n in range(10) if n % 2 == 0}
print(new_dict)

#output
{0: 0, 2: 4, 4: 16, 6: 36, 8: 64}
```
Less popular is **Set Comprehension**, which works in a similar way. It returns a set, which means the elements inside can not have any duplicates.

```Python
#Set Comprehension
numbers = [10, 10, 20, 30, 12, -20]
new_set = {n**2 for n in numbers}
print(new_set)

#output
{100, 144, 400, 900}
```

List comprehension can help us to write elegant code, but sometimes it is not the right choice. We should avoid writing long list comprehensions in one line to ensure that our final code is readable. Otherwise, it’s better to choose an alternative approach.

You can learn more about Comprehensions [here](https://docs.python.org/3/tutorial/datastructures.html#list-comprehensions)
Welcome Thread - v89
Tags: welcome
Published: 2020-09-02 19:02:34

---
title: Welcome Thread - v89
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
---

![sup cartoon](https://media.giphy.com/media/xT8qBmOafy8F5ahUXu/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
Mostly used RxJS Transformation Operators
Tags: rxjs, javascript, beginners
Published: 2020-09-02 18:45:41

Hey Buddies, we already covered the  [Crash Course of RxJS Operators](https://www.dasjs.com/rxjs-crash-course-takeuntil-and-takewhile-operators/). And today I have some bonus RxJS Operators which will ease your work. RxJS transformation operators are useful for generating data by Observers.

In this article we’re going to see the Rxjs transformation operators like  _bufferTime_,  _bufferToggle_,  _bufferWhen_, and  _concatMap_  operators.

[Originally published here.](https://www.dasjs.com/bonus-rxjs-transformation-operators-every-developers-need-to-know/)
Docker + AWS (CodeCommit +CodeBuild+ECR) = Release breeze
Tags: aws, codecommit, codebuild, docker
Published: 2020-09-02 18:44:45

Hi! This is my very first post here and I'm happy to share something it may be useful for you.
#####When working with a Docker projects, AWS provides a couple tools that may come handy to you.#####
__1)__ One is **ECR**. 
Amazon Elastic Container Registry is a __Docker__ registry service fully managed by AWS. Here you can push you Docker images the same way as you do to DockerHub. The benefit I get from this is: If you are deploying your Docker image to an AWS EC2 instance, then you are already in the same AWS ecosystem.
Some additional __PROS__ and __CONS__ may be found [here]
(https://stackshare.io/stackups/amazon-ecr-vs-docker-hub)

__2)__ Another is AWS __CodeCommit__
CodeCommit provides a fully-managed source control service that makes it easy to manage application code for any company. You don't need any servers or infrastructure to host the environment where you code lives while your Software engineers work on shipping new releases.
For example, for very small teams(just one Dev) to large ones, you can manage your applications and commit (save your code changes) to CodeCommit, keeping it safe and up-to-date.

__3)__ Last but no Least comes AWS __CodeBuild__
CodeBuild is a continuous integration service that compiles source code, it can run tests, and also produces software packages that are ready to deploy. You can deploy to any of the environments that are part of your infrastructure.

With these 3 services you can connect your Dev environment to CodeCommit and once you commit and push the changes you are 1 click away of having a new Docker image including the recent changes, that is already deployed to __ECR__ and from there you only need to pull the image and run it.

I've set this up and it will definitely recommend it to anyone that is looking to reduce efforts regarding release and Dev environment's management.

I'm now researching about a way of automating the creation of Release notes out of the commits. Any suggestions?

Hope you enjoyed this article! Let me know if there is anything else I can add to it to make it more useful.

######Image credit: happyvalley.dev######
Bootcamp in the time of Covid
Tags: codenewbie, beginners, career
Published: 2020-09-02 18:35:42

Week one, day two of my coding bootcamp. I won't refer to it by name because I'll probably end up coming across as a plant... If you're interested enough it won't take much digging to find where I'm attending! 

It's been an intense couple of days. I'm coming out of a career in yacht interior design, and the contrast here is stark. Seven years of managing projects in which ultimately I had no control over the crafting of the actual pieces - traded for four months of learning to make, by hand, pieces of work in a different format. 

I like control. I like being accountable for my own work. It has been years since I've been intellectually challenged in the way that I think this course is going to do and I can't wait.
I was a nerd in school; my favourite things were Maths and Latin. I hid in the library during PE and managed to go my whole school career without a single cross country run. I left sixth form to study Physics and then decided after a year of it that I wanted to break out of that "nerd" box. I switched course, moved, and ended up taking an unrelated arts degree.

Ten years (ish...) on, and I was chugging along in the design world. But something was missing. I applied to two bootcamps, figuring that their in house assessment process (necessary to maintain their professed 99% post-course hire rate) would give me a good indication of whether I'd be able to complete. I got in to both and chose my favourite. This was in June 2020 - peak lockdown. I had plenty of time on my hands whilst work was slow so I started some Codecademy courses (Javascript, PHP, Bash, HTML & CSS). I worked on them every damn day for the three months between getting in to the bootcamp and starting - driven partly by curiosity and partly by fear. Two days in and I am so grateful that I did. The gulf between the people who prepped for this and those who didn't is already apparent, and all we've done is basic HTML & CSS styling. 

Next week we apply this to build a skeleton portfolio website; the idea being we fill it with all the projects we make between now and Christmas. I'm excited like a small child.
Перенос docker wsl2 на соседний ssd
Published: 2020-09-02 18:01:18

## Лирика
Так уж получилось, что мой компьютер развивался эволюционно, сначала был только один ssd объёмом 120GB. Со временем появился появился второй SSD объёмом 240GB, на который переехала виртуальная машина huper-v с docker внутри. Для этого было достаточно сменить соответствующую настройку в Docker Desktop. Совсем недавно мой Windows обновился до версии 2004. И у меня появилась возможность задействовать WSL2. Включив WSL2 в Docker Desktop обнаружил, остатки свободного места заняты, а системе поплохело. Настроить средствами Docker Desktop расположение wsl-подсистемы нельзя. Зато можно это сделать средствами windows через командную строку.
## **Update 1.** Перенос docker автоматически
После того, как я написал статью, github предложил посмотреть проект, который делает тоже самое. Смотреть я не стал, но возможно он сэкономит время вам. https://github.com/pxlrbt/move-wsl
## Перенос docker
Сначала нужно закрыть Docker Desktop, чтобы его значка в трее не было.
Нам потребуются права администратора. Нажмём <kbd>Win</kbd>+<kbd>X</kbd> и выберем "Командная строка (администратор)"
_Данный код можно [скачать](https://gist.github.com/gimntut/0ca607fff95bd2a6871a1942d53fa17a#file-move-wsl2-docker-cmd)_
```
:: С двойного двоеточия начинаются комментарии, 
:: поэтому можно весь код скопировать и вставить 
:: в командную строку или в батник.

:: 1. Окончательно усыпим Docker Desktop, чтобы он не нервничал, когда wsl пропадёт

   sc stop com.docker.service

:: 2. Остановим все wsl-машины, чтобы все файловые кэши сбросить на диск

   wsl --shutdown

:: 3. Сделаем дампы подсистем докера

   wsl --export docker-desktop-data d:\dumps\docker-desktop-data.tar
   wsl --export docker-desktop d:\dumps\docker-desktop.tar

:: 4. Удалим подсистемы докера

   wsl --unregister docker-desktop-data
   wsl --unregister docker-desktop

:: 5. Восстановим подсистемы докера в новом расположении

   wsl --import docker-desktop-data d:\wsl\docker-desktop-data d:\dumps\docker-desktop-data.tar --version 2
   wsl --import docker-desktop d:\wsl\docker-desktop d:\dumps\docker-desktop.tar --version 2

:: 6. Запустим службу Docker Desktop

  sc start com.docker.service
```
Теперь можно запускать Docker Desktop и пользоваться.

Примечание №1. Команды писал по памяти и мог где-то ошибиться. Напишите в комментариях, если найдёте ошибку.
Примечание №2. Чтобы освободить ещё немного места, можно заменить на символические ссылки базовые образы докера в "Program Files", а сами образы положить туда, где места много.
Shortcut to use lodash library
Tags: webdev, trick, tips, lodash
Published: 2020-09-02 17:57:15

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

**Thanks for reading 💙**  
Follow **@codedrops.tech** for daily posts.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack  
**[codedrops.tech](https://www.codedrops.tech/)**
Discussion: SPA v SPA. When do you use each?
Tags: spa, ssg, nuxt, nextjs
Published: 2020-09-02 17:57:07

Hey folks, I can't quite wrap my head around when to build an app as an SPA and when it's better to use an SSR framework like Next.js or Nuxt.js.

If we take Gmail as an example, which approach would be the best to use for building an app like that where all of the content is private?

Guide me! Why would you use one pattern over another; state the reasons behind your choices.
Laravel Relationship Gotcha
Tags: laravel, php, webdev
Published: 2020-09-02 17:33:43

Laravel is nice. It lets you define relationships painlessly.

```php
// app/MultipleChoiceQuestion.php
class MultipleChoiceQuestion extends Model
{
    public function answers()
    {
        return $this->hasMany(\App\Answer::class);
    }
}
```

We can even make relationships in the other direction.

```php
// app/Answer.php
class Answer extends Model
{
    public function question()
    {
        return $this->belongsTo(\App\MultipleChoiceQuestion::class);
    }
}
```

If we know we're often going to query for the answers to our questions when we query for the questions, it makes sense to eager load them by default.

```php
// app/MultipleChoiceQuestion.php
class MultipleChoiceQuestion extends Model
{
    protected $with = ['answers'];

    public function answers()
    {
        return $this->hasMany(\App\Answer::class);
    }
}
```

But what happens when we eager load the question on the answer as well?

```php
// app/Answer.php
class Answer extends Model
{
    protected $with = ['question'];

    public function question()
    {
        return $this->belongsTo(\App\MultipleChoiceQuestion::class);
    }
}
```

Chaos. When you query the question you query for its answers as well which in turn queries for the question they belongs to and...

Your relationships must terminate somewhere.
Is there IndexedDB or localStorage for localhost or local file:// protocol?
Tags: webdev, desktop, electron
Published: 2020-09-02 17:12:26

I believe it is a no for all.

This is pretty much a killer for both

- Neutralino.js (default browser webview with token-based auth localhost)
- Lorca (Chrome DevTools protocol in app mode)
- Even Electron or Ultralight, if you use localhost or file protocol... (of course, a fix might be to use custom protocol, like `app://./`)

So, is there an option at all, for convenience, without contacting the server API's?
Báo chí nói về sản phẩm của ePlus.DEV
Tags: eplusdev
Published: 2020-09-02 17:12:05

Trong thời gian tránh dịch rảnh rỗi, có rất nhiều hot trend được giới trẻ tạo ra, và mới đây nhất không thể không kể đến đó là cách làm một tấm ảnh trang cá nhân Instagram của bạn hoặc bất kì ai trong suốt. Cách làm rất đơn giản, hãy cùng thực hiện theo một vài bước trong bài viết này là được nhé.
Thật ra bạn có thể làm trên bất kì đâu, chỉ cần một trình duyệt web và không cần tải app nào khác về. Đầu tiên, hãy vào trang Instagram của bạn lựa một tấm hình đẹp nhất và bấm vào dấu ba chấm ở góc phải rồi chọn copy link (sao chép liên kết).

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

Sau đó, hãy bấm vào trang web bên dưới đây và dán đường link bạn vừa copy vào đó. Không cần phải chọn sever vì trang web sẽ ưu tiên chọn sever cho các bạn để tránh quá tải. Hãy bấm gửi và chờ một chút tầm 5 đến 10 giây tùy tốc độ mạng của bạn.

[https://instagram.eplus.dev/](https://instagram.eplus.dev/)

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

Bây giờ chỉ cần bấm download để tải về là xong rồi.

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

Bạn có thể làm tương tự với trang cá nhân của bạn bè để gửi tặng người thân hoặc người yêu chẳng hạn. Nên nhớ trang Instagram nào bật chế độ công khai thì mới làm được nhé. Chúc các bạn thành công và nhớ chia sẻ bài viết này với mọi người nhé.

Trích nguồn: [thegioididong.com](https://www.thegioididong.com/tin-tuc/huong-dan-tao-trang-instagram-trong-suot-cuc-dep-dang-la-hot-trend-1246028)

--------------

Các bài báo khác:

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

[Bắt sóng trào lưu “ảnh lồng ảnh” instagram card siêu hot](https://www.yan.vn/trao-luu-instagram-card-la-gi-cach-tao-anh-long-anh-sieu-hot-225256.html)

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

[Cách chế ảnh Instacard cực xịn và cực nhanh hiện đang hot trên Instagram
](https://congngheviet.com/cach-che-anh-instacard/)

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

[Hướng dẫn tạo trang Instagram trong suốt cực đẹp đang là hot trend
](https://v24h.vn/blogs/news/huong-dan-tao-trang-instagram-trong-suot-cuc-dep-dang-la-hot-trend)

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

[Hướng dẫn tạo ảnh Instacard, trào lưu đang hot trên mạng xã hội
](https://www.techrum.vn/threads/h%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-t%E1%BA%A1o-%E1%BA%A3nh-instacard-tr%C3%A0o-l%C6%B0u-%C4%91ang-hot-tr%C3%AAn-m%E1%BA%A1ng-x%C3%A3-h%E1%BB%99i.296821/#top)
MongoDB in your browser
Tags: javascript, webdev, frontend
Published: 2020-09-02 16:59:30

---
title: MongoDB in your browser
published: true
description: 
tags: javascript, webdev, frontend
//cover_image: https://direct_url_to_image.jpg
---

LocalDB is a localStorage based small database for your web applications. 
You can use mongodb-like queries to manage your in-browser database. 

Check it out here: https://github.com/kucukkanat/LocalDB/
CSS Only Room Escape Game
Tags: codepen, html, css, showdev
Published: 2020-09-02 16:43:36

<p>This is an escape game only made in CSS.</p>

<p>I created all of the assets, using MS paint to draw the image, and Paint.net to make the background color of the PNG files into transparent.</p>

<p>These functions are just made my many hidden checkboxes, and radio buttons.</p>

<p>Instructions are already written the game.</p>

<p>Please do not look on the source code, to find the clues to go outside.</p>

<p>Keep in mind that there are concealed object in the game. I haven't written it on the instructions, but basically, it has.</p>

<p>There are 5 stages to complete.</p>

<p>If you completed the game, please challenge your friends to do the puzzle too. It is recommended to play this game on either full-screen mode, or debug mode, to avoid accidentally looking on the source code.</p>

<p>Please enjoy this simple game!</p>

{% codepen https://codepen.io/takaneichinose/pen/YzqreVp %}