teleren/devto huggingface dataset:
6️⃣ Fun Drag & Drop 🧩 Programming Languages To Learn How To Code! 💻
Tags: beginners, learning, codenewbie
Published: 2019-10-03 07:40:18

Programming is becoming increasingly accessible to the world. 

Here are the best drag & drop programming languages for anyone who wants to learn to code.

Whether you’re a seasoned pro or about to start kindergarten there’s something on this list for you!
——-

**[Microsoft Make & Code](https://www.microsoft.com/en-us/makecode)**
A free, open source platform for creating engaging computer science learning experiences that support a progression path into real-world programming.
![Microsoft make and code](https://thepracticaldev.s3.amazonaws.com/i/pa0a2o69qqm4j0nfhcdb.png)

**[iOS Shortcuts](https://apps.apple.com/us/app/shortcuts/id1462947752)**
Shortcuts is a free app for iOS devices that lets you run complicated tasks with just a few buttons. A shortcut can be custom made or you can grab pre-made ones. Free and easy way to get started developing for all iOS devices.
![iOS shortcuts application](https://thepracticaldev.s3.amazonaws.com/i/dwtbgvv30jovw5mcyykl.jpeg)

**[MIT Scratch Jr.](https://scratchjr.org/)**
ScratchJr is an introductory programming language that enables young children (ages 5-7) to create their own interactive stories and games. Snap together graphical programming blocks to make characters move, jump, dance, and sing.
![MIT Scratch Jr](https://thepracticaldev.s3.amazonaws.com/i/ecg6a0so4lvuq0a5qgnu.jpeg)


**[MIT Scratch](https://scratch.mit.edu/)**
Scratch helps people learn to think creatively, reason systematically, and work collaboratively — essential skills for life in the 21st century.
![MIT Scratch](https://thepracticaldev.s3.amazonaws.com/i/0d6oaweh0jk7k2ve7ohu.png)

**[Beetle Blocks](http://beetleblocks.com/)**
A graphical blocks-based programming environment for 3D design and fabrication.
![beetle blocks](https://thepracticaldev.s3.amazonaws.com/i/h1bicedch3ephbcz1z78.png)


**[Code.org](https://code.org/)**
A wonderful platform dedicated to expanding access to computer science in schools and increasing participation by women and underrepresented minorities. Here you can learn with amazingly cute games, puzzles, and drag n’ drop code editor.

One of the best introductions to programming and computer science topics on the internet!
![Code.org](https://thepracticaldev.s3.amazonaws.com/i/eambrqc74pvu49v8v3nt.png)
——-
It was a ton of fun researching and testing these languages and platforms out. 

Enjoyed the post? Let me know! 💛🦄🔖
Raising your BS tolerance
Tags: tolerance, life, resilience, happiness
Published: 2019-10-03 07:29:03

---
title: Raising your BS tolerance
published: true
description: No matter who you are, the BS is practically guaranteed to strike! In this video, I talk about how I'm raising my BS tolerance, to live a happier existence.
tags: tolerance, life, resilience, happiness
cover_image: https://thepracticaldev.s3.amazonaws.com/i/hr8mtqyoelgkrzsestdp.png
---

No matter who you are, the BS is practically guaranteed to strike! In this video, I talk about how I'm raising my BS tolerance, to live a happier existence.
FOUR DIFFERENT WAYS TO WRITE FUNCTIONS IN JAVASCRIPT
Tags: javascript
Published: 2019-10-03 07:25:27


**Functions** are the basic building blocks of the Javascript. A **function** in Javascript is a code block that performs a specific task or set of tasks.
There are basically **4** (four) different ways we can define **functions** in Javascript.

- Function Declaration
- Function Expression
- Arrow Function Expression
- Concise Arrow Function Expression

```javascript
// Function Declaration
function square(x) {
    return x * x;
}

// Function Expression
const square = function(x) {
    return x * x;
}

// Arrow Function Expression
const square = x => {
    return x * x;
}

// Concise Arrow Function Expression
const square = x => x * x;
```

If you prefer you can take a look at the video tutorial,

{% youtube DaVmnMHppq4 %}
Variable Shadowing in JavaScript
Tags: javascript, variableshadowing, csharp, css
Published: 2019-10-03 07:04:45

If you declare a variable within a certain scope (decision block, function, or inner class).It has the same name as a variable declared in an outer scope. This is called variable shadowing. How it works. let's start...

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/c35mgvuutkqdigx05t6t.png)

Also You can understand more about it. 
Click here https://jsbin.com/cupixak/edit?js,console
https://youtu.be/nzSGIzgbv9U

<iframe width="560" height="315" src="https://www.youtube.com/embed/nzSGIzgbv9U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

I hope this is useful javascript tips. if you like please follow, share,comments and like. (Muhammad Rizwan Alam)
also please don't forget to subscribe my youtube channel
JavaScript 30 - Array Cardio 1
Tags: programming, web, javascript, javascript30
Published: 2019-10-14 07:28:09

---
title: JavaScript 30 - Array Cardio 1
published: true
date: 2019-10-03 06:30:00 UTC
tags: programming, web, javascript, javascript-30
canonical_url: https://varunbarad.com/programming/web/javascript-30/2019/10/03/javascript-30-array-cardio-1.html
---

Day 4 of [JS30 challenge](https://javascript30.com), today I worked with various methods on array (I knew most of them beforehand) but I learned two cool things today.

The key concepts I learned from today’s challenge were:

- Converting iterables to array in JS.
- Displaying array of objects nicely formatted in console.

## Converting iterables to array in JS

As you might have observed that `document.querySelectorAll` doesn’t return us an actual `Array` but instead it returns us what is called as a `NodeList`. Consequently `NodeList` doesn’t have all the methods that an `Array` does (like `map`, `filter`, `reduce` etc).

`NodeList` is an example of what we call as “iterable” in JS. So whenever working with iterables we tend to prefer to convert them to an actual `Array` so that we have more options to work with.

I already knew of one way to convert them:

```javascript
const anyIterable = document.querySelectorAll('a');
const convertedArray = Array.from(anyIterable);

```

Here we used the `Array.from` method to convert the iterable to an `Array`.

The other way I learned today was:

```javascript
const anyIterable = document.querySelectorAll('a');
const convertedArray = [...anyIterable];

```

Here we made use of a combination of 2 things:

#### 1. ES6 spread operator `...`

When we prepend an iterable with `...` (called the ES6 spread operator) what it does is it extracts all values from that iterable and replaces the `...anyIterable` part of the expression with those values.

#### 2. Array literal `[]`

Then when we enclose the “spreaded” values with `[` and `]` it converts the whole thing into an array containing all the values from that iterable.

Both produce the same result. I don’t know if one performs better than the other under large data-sets. But even though the `[...anyIterable]` way is more concise, to me the `Array.from(anyIterable)` usage seems more readable.

## Conclusion

That’s all folks, that was it for today. If you have anything unclear in this article or want to discuss anything else, hit me up on twitter [@varun\_barad](https://twitter.com/varun_barad).
Example Angular 8 with NgRx and Redux DevTools
Tags: angular
Published: 2020-04-15 15:45:01

---
title: Example Angular 8 with NgRx and Redux DevTools
published: true
date: 2019-10-03 04:57:29 UTC
tags: Angular
canonical_url: 
---

This was a fun little example and can be used as a template to get started with other projects using Angular 8, NgRx, and Ionic 4.

Here’s what is used:

- Angular 8
- NgRx Store 8.3.0
- NgRx Store DevTools 8.3.0
- For fun, Ionic 4.7.1

{% youtube ybcByDvlEo4 %}
<figcaption>Redux DevTools in action</figcaption>

To build and run this example, clone the GitHub repo here: [https://github.com/jarodms/ionic4-angular8-ngrx-example](https://github.com/jarodms/ionic4-angular8-ngrx-example)

You will also need to install the [Redux DevTools Chrome extension](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd):

Thanks to [https://alligator.io/angular/ngrx-store-redux-devtools/](https://alligator.io/angular/ngrx-store-redux-devtools/) for the Redux DevTools setup info.

The post [Example Angular 8 with NgRx and Redux DevTools](http://www.jarodms.com/2019/10/02/example-angular-8-with-ngrx-and-redux-devtools/) appeared first on [JarodMS](http://www.jarodms.com).
Configuring and Managing Routes Between Multiple Networks with Wireguard
Tags: networking, networkadministrati, vpn
Published: 2019-11-18 06:38:34

---
title: Configuring and Managing Routes Between Multiple Networks with Wireguard
published: true
date: 2019-10-03 04:56:22 UTC
tags: networking,network-administrati,vpn
canonical_url: https://medium.com/@jmarhee/configuring-and-managing-routes-between-multiple-networks-with-wireguard-61ad995c887c
---

I recently updated the VPN solution in my infrastructure lab using Wireguard; my architecture is fairly basic, in that each site (in this…

[Continue reading on Medium »](https://medium.com/@jmarhee/configuring-and-managing-routes-between-multiple-networks-with-wireguard-61ad995c887c?source=rss-d532e3e97d0f------2)
Embed Or Display Image to HTML page from Google Drive
Tags: tipstricks, html, googledrive
Published: 2019-10-03 04:52:28

---
title: Embed Or Display Image to HTML page from Google Drive
published: True
description: Here I will describe how to show or share/display google drive image to your HTML page.
tags: Tips & Tricks, HTML, Google Drive
cover_image: https://thepracticaldev.s3.amazonaws.com/i/uyo860qbzk3hdm5t6j71.png
---

Hey there; here is a secret tip for you to display images from google drive to your HTML web page. 

Step:01 Upload your image to google drive.
Step:02 Share your image from the sharing option.
Step:03 Copy your sharing link.
Your sharing link looks like as shown below:
https://drive.google.com/file/d/14hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp/view?usp=sharing

Step:04 copy the id from your link, in the above link, id is: 14hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp

Step:05 Have a look at the below link and replace the ID.
https://drive.google.com/thumbnail?id=1jNWSPr_BOSbm7iIJQTTbl7lXX06NH9_r
After Replace ID: https://drive.google.com/thumbnail?id=14hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp

Step:06 Now insert the link https://drive.google.com/thumbnail?id=14hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp to your HTML img tag.
<img src="https://drive.google.com/thumbnail?id=14hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp" alt="">


Note: This trick will more effective for you when you want to share your profile picture or portfolio image in your freeCodeCamp account, here is my freeCodeCamp Profile: https://www.freecodecamp.org/imamcu07

Thanx for reading this post.
If you have any suggestions, please place a comment.

#imamcu07
What Should You Do About the Windows Tech Support Scam?
Tags: techsupport, windows
Published: 2019-10-03 04:52:11

“I am calling you from Windows…”

We’ve all had the calls, but what can we really do about the Windows Tech Support and Windows refund scams? Should you hang up, or lead the callers on? Is there anyone you can report them to, and if so, should you even bother? Let’s find out.

The Windows Tech Support Scam Nightmare

Fake [Tech Support](digitaltrap.net) scams are on the rise and almost everyone is at risk. Scams are difficult to spot. Even seasoned IT professionals have been caught out by Windows scam calls. It’s not hard to see why.
Number.isNaN is not isNaN.
Tags: javascript
Published: 2019-10-03 04:36:20

Came across some interesting Tip for JavaScript developers.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ep6cvsqhti0efdgw0hd7.jpg)

<blockquote class="twitter-tweet"><p lang="en" dir="ltr"><a href="https://twitter.com/hashtag/JavaScript?src=hash&amp;ref_src=twsrc%5Etfw">#JavaScript</a> tip for today:<br><br>Number.isNaN is not isNaN.<br><br>Wait, what?!<br><br>Yes, the global `isNaN` returns true for some unexpected values ({}, &quot;hello&quot;, undefined), while `Number.isNaN` will only return true for the actual `NaN`. <a href="https://t.co/b0CftzrIGB">pic.twitter.com/b0CftzrIGB</a></p>&mdash; Tomek Sułkowski (@sulco) <a href="https://twitter.com/sulco/status/1179365654769668098?ref_src=twsrc%5Etfw">October 2, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Ванильный DOM
Tags: javascript, программирование, кодинг
Published: 2019-10-03 14:46:08

---
title: Ванильный DOM
published: true
date: 2019-10-03 04:07:00 UTC
tags: JavaScript,Программирование,Кодинг
canonical_url: https://dev.to/bouhm/a-vanilla-js-guide-on-mastering-the-dom-3l9b
---

[Гайд по манипуляции DOM'ом](https://dev.to/bouhm/a-vanilla-js-guide-on-mastering-the-dom-3l9b) на чистом JavaScript. В самом деле, если твердо знать некоторые стандартные методы JavaScript (например, querySelector), то надобность в jQuery и подобных громоздких костылях отпадает.
The Self-PR - And How Your Team Can Benefit from Them
Tags: pullrequest, git, codereviews, workflow
Published: 2019-10-03 02:09:28

---
title: The Self-PR - And How Your Team Can Benefit from Them
published: true
description: Getting your code production-ready reduces the burden on your teammates and maximizes code review learning opportunities
tags: pullrequest, git, codereviews, workflow
---

Before I ask for a review on a PR, I make sure that my code is production-ready and fully reviewed by me. I developed this mindset by having to review my own PRs and having no code review safety net.

If you adopt this mindset, your code will be less buggy, and future-you will be thankful because of how clear your code is.

If you have reviewers, their PR comments will have more substance, if they have reason to write anything at all. 

## The key takeaways

Re-read your code changes in a PR __as if you were reviewing it for the first time__. This is not unlike cleaning up for a house guest. Is there a confusing corner of code? Fix it! Future-you will be thankful you did.

If you have a reviewer, only have them look at your PR once you have given your full stamp of approval on the code legibility and functionality.

## You're still not an island!

This isn't to encourage coders working in silos. This is to encourage taking responsibility for the code you have chosen to write.

Ask questions as you write code on how it should be written if you're not sure. Confirm the code does what you and everyone expects it to do as  you're solving problems.

## Here's my full process for Self-PRs

(and PRs in general)

- Write code quickly that does everything you want it to do (locally)
- Do a clean up pass (locally)
- Be happy with the functionality of the code (locally)
- Push your branch
- Create a PR (but don't yet ask for a reviewer)
- Read your code changes __as if you were reviewing it for the first time__
  - If anything is unclear as you read... change it!
  - Rename vars/funcs
  - Create functions to separate out logic, if necessary
  - Check spelling and remove not needed code
  - If you pause too long when reading your code after doing the above changes, write a comment
- Document your PR + testing instructions as you validate both
  - Test browsers
  - Run and modify tests
  - Other click through cases
- When you feel that your code is production-ready...
  - Ask for someone to review your PR -OR- accept your own PR

## When should I do this?

I do this on all my PRs except my for fun side projects.

## Closing

I hope this method makes code reviews smoother and faster for you and your coworkers. 

Do you practice this mentality when making PRs? 

Have you ever been completely responsible for your code (and only you)?
Super handy VSCode shortcuts in a printable format! 
Tags: vscode, productivity, linux, windows
Published: 2019-10-03 01:45:54

Found this super handy to print out and hang in my work space, maybe you will too! 

![PRINT ME](https://thepracticaldev.s3.amazonaws.com/i/2f85yvewitdoh8hds9eq.jpg)

Download Links:
[Mac](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf) / [Windows](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf) / [Linux](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf)

---
If you enjoyed this post let me know! 💛🦄🔖
Community Hangout - 2019-10-05
Tags: hangout, community, hoa, phalcon4
Published: 2019-11-01 21:14:03

---
title: Community Hangout - 2019-10-05
published: true
date: 2019-10-03 01:36:52 UTC
tags: hangout,community,hoa,phalcon4
canonical_url: 
---

We missed the hangout - as expected at the end of each month, so we are having one this weekend. Join us on Saturday the 05th of October 2019, at 12:00:00 EST (16:00:00 UTC), to talk about our progress, address concerns and find solutions to common problems. We will hold this virtual meeting on a live event in YouTube. The URL for the hangout is:

[https://youtu.be/iK7CNEwCMlk](https://youtu.be/iK7CNEwCMlk)

Slides: [https://docs.google.com/presentation/d/1v6r3pHODQe-h4gZGaqwUFC5kKW8zn6d5SvvY7B4zNU4/edit?usp=sharing](https://docs.google.com/presentation/d/1v6r3pHODQe-h4gZGaqwUFC5kKW8zn6d5SvvY7B4zNU4/edit?usp=sharing)

Topics to discuss:

- Introduction, welcome to all attendees
- Thank you to the whole community and contributors
- Status update since last hangout
- v4.0.0.rc.1
- Documentation
- Devtools
- Sample applications (vokuro etc.)
- Q/A

We will post another blog post on the day as a reminder.

Looking forward to hearing from all of you and seeing you during the hangout.

\<3 Phalcon Team
JAMstack Roundup for September 30th 2019
Tags: jamstack, react, graphql, webdev
Published: 2019-10-03 00:36:07

1. [Building a Component Library with React and Storybook](https://auth0.com/blog/building-a-component-library-with-react-and-storybook/)
    Learn how to build a component library 📚 with React and Storybook to create modular and reusable components that can be shared across projects.

2. [How I’ve built 100+ open-source apps with automation tool](https://medium.com/@appseed.us/100-open-source-apps-built-with-automation-tools-appseed-24a47db0d5b9)
    See how Sm0ke has generated more than 💯 apps in different languages and architectures, including the JAMstack, using automation tools and boilerplate code.

3. [From WordPress to JAMstack](https://www.d-hagemeier.com/en/articles/wordpress-to-jamstack/)
    Away from WordPress, towards JAMstack. Multilingualism, a domain move 🚀.

4. [The Best React And Vue Static Websites Generators For JAMstack Websites](https://webriq.com/the-best-react-and-vue-static-websites-generators-for-jamstack-websites/)
    From pricing 💵 to performance 🎟, which static site generators are best for React and Vue.

5. [What is Serverless all about?](https://cheesecakelabs.com/blog/what-is-serverless-all-about/)
    In an agile world, shipping 🚢 scalable software with budget constraints has become a big puzzle: one that Serverless may solve.
Трубы с парохода, модные в любое время года
Tags: javascript, программирование, кодинг
Published: 2019-10-03 14:43:50

---
title: Трубы с парохода, модные в любое время года
published: true
date: 2019-10-03 00:07:00 UTC
tags: JavaScript,Программирование,Кодинг
canonical_url: https://dev.to/jfet97/javascript-iterators-and-generators-asynchronous-generators-2n4e
---

Пользователи консоли Linux прекрасно знают о том, какие удобства предоставляет конвейерная обработка данных. Пропуская поток через цепочку утилит, можно решать очень сложные задачи одной (хотя порой и достаточно длинной) строкой кода. В JavaScript тоже есть [средства для организации таких "труб"](https://dev.to/jfet97/javascript-iterators-and-generators-asynchronous-generators-2n4e) - асинхронные генераторы.
Identify the right leaders
Tags: react
Published: 2019-10-22 06:36:04

---
title: Identify the right leaders
published: true
date: 2019-10-03 00:00:00 UTC
tags: React
canonical_url: http://metamn.io/react/identify-the-right-leaders/
---

Or else.

<!--more-->
## The buzz

React is famous about its steep learning curve. No wonder — starting from the programming model through data to user interaction introduced changes which are often paradigm shifts.

Want the buzzwords?

Reactive programming, Functional programming, Pure functions, Side effects, State, Hooks, Functional components, Referential equality, Finite State Machines / XState, Data driven applications, Code splitting, Pre-caching assets, Pre-rendering static HTML, Memoization, Static type checking — none of these were present in your old framework, perhaps.

Learning React is not like it was learning Ruby on Rails, Yii, or MVC. It’s more like a fresh start with unlearning first, then re-learning everything from information architecture design to event-based user interfaces.

## The problem

Identify the right leaders.

A surprisingly compact ecosystem around React makes this process enjoyable. There are a handful of opinion leaders who often share their thoughts which _are in line_.

The list goes:

- Robin Wieruch
- Kent C. Dodds
- Dan Abramov
- Dave Ceddia
- (sorry if I skipped you …)

Once you’ve found the _line_ your learning process will be smooth unless you leave the safe waters. At the edge there is nobody to guide you.

## An example

All the buzz is around the state. It’s React’s cornerstone and it’s not yet solved.

Go with Redux? Forget Redux after hooks? Dive into finite state machines? What about MobX? Many job posts require it — it must be popular and useful.

Apollo started to introduce local state management with GraphQL. What that means for all the other libraries? Will they push it together with Apollo Client?

RWieruch just published a tutorial for state management with RxJS. Should I read it?

There is a new library React Tracked: Super fast global/shared state with context and hooks. Should I read it? Can I trust the author? Is he in the _line_?

## The solution

I went with finite state machines / Xstate. Why?

Its leader is trustworthy. Checked videos, blog posts, chatted on twitter, created a test project, advanced it, found a bug, filed a bug in Github, got a fix for it — and all the time every interaction felt so natural.

Will this choice stand the test of time? I don’t know. But this new piece of knowledge perfectly fits the bigger picture. Good UI/UX should be flawless and this tool helps achieve that.

I’m adding David K. Piano to the list.
I wanna go Freelance
Tags: freelance, work, react
Published: 2019-10-02 23:39:03

---
title: I wanna go Freelance
published: true
description: 
tags: #freelance #work #react
---

Hi!, I'm a software engineering student that works as Full Stack developer with React and Node for almost a year, and I wanted to have a little more experience and experiment with clients outside my daily job and start a working as a freelance part time.

But being frankly, I don't know where to start, in which project should I bid, how much etc etc, so If you guys would give some advice would be nice! Happy coding!
Adopting the Angular Style Guide
Tags: discuss, angular, typescript, codequality
Published: 2019-10-02 23:03:58

I'm working on building some consensus on my team around coding standards. One thing that has sparked a bit of disagreement is coding conventions around Angular. One of our developers is very much in favor of adopting the Angular style guide for all of our Angular code while the other doesn't think it adds very much value. I'm looking for a compromise (mostly because I hate having conflicts).

The developer in favor of adopting the style guide believes that it is an essential part of code quality and that it enhances readability. The other developer cares very much about writing clean code but isn't as concerned about focusing on things such as sorting import statements. Both want to deliver great products and write good code but disagree on this point.

My feeling is that there is a vast array of extensions in the VS Code world (our editor of choice for frontend work) that can help us achieve a happy medium. What are your thoughts on adopting the Angular style guide as a team?