teleren/devto huggingface dataset:
First Line Of Code | Javascript Crash Course
Tags: javascript, webdev, codenewbie, tutorial
Published: 2020-07-12 03:44:50

In this video, we are going to download and install visual studio code and then we will be writing our very first line of Javascript code.

If you have any question, feel free to ask them in the comments below!


Connect With Me:
Youtube: <a href="https://www.youtube.com/c/ShubhamSauravYT" target="_blank" rel="noopener noreferrer">ShubhamSauravYT</a>.
Twitter: <a href="https://www.twitter.com/hiShubhamSaurav" target="_blank" rel="noopener noreferrer">@hiShubhamSaurav</a>
Instagram: <a href="https://www.instagram.com/hiShubhamSaurav" target="_blank" rel="noopener noreferrer">@hiShubhamSaurav</a>
Facebook: <a href="https://facebook.com/hiShubhamSaurav" target="_blank" rel="noopener noreferrer">@hiShubhamSaurav</a>
Firebase Emulator Suite: Using production data inside the emulator 
Tags: firebase, googlecloud, firestore
Published: 2020-07-12 03:04:27

---
title: Firebase Emulator Suite: Using production data inside the emulator 
published: true
description: Quick and dirty guide for using prod data for your local emulator seed data. 
tags: firebase,googlecloud,firestore
//cover_image: https://direct_url_to_image.jpg
---


So you have a lot of info in your live (prod/test) database that you want to use with the new fancy firebase emulator UI. Here is how i went upon wiring up the data.

1. Create storage bucket to sync into
   - `gsutil mb gs://[targetstoragebucket]`
1. Export your prod database into a storage bucket. 
   - export the database with this command https://cloud.google.com/sdk/gcloud/reference/beta/firestore/export as a sample if you want to sync the whole database you can do `gcloud beta firestore export gs://[targetstoragebucket]` and you can pick and choose root level collections by doing `gcloud beta firestore export gs://[targetstoragebucket] --collection-ids='customers','orders'`
1. Create seed-data folder in your working directory `mkdir seed-data`
1. Once the export is done, we can sync it down to our filesystem. `gsutil rsync -r gs://[targetstoragebucket] seed-data/`
1. Now here is where we need to do a bit of patching, if we just try to run `firebase emulators:start --only firestore --import seed-data` it will error on us, so lets do a bit of cleaning up
1. lets `cd seed-data` and then `mkdir firestore_export` and `touch firebase-export-metadata.json` and then finally move our export into the firestore export folder, in my case it was `mv 2020-07-12T02:45:39_47881/ firestore_export`.
1. create content of firebase-export-metadata.json file, so lets open it in a editor and point out some important bits
```json
{
  "version": "8.5.0",
  "firestore": {
    "version": "1.11.4",
    "path": "firestore_export",
      "metadata_file": "firestore_export/2020-07-12T02:45:39_47881/2020-07-12T02:45:39_47881.overall_export_metadata"
  }
}

```

make sure to note the version field (version of firebase-tools you are using, and the metadata file, this is that folder we used the `mv` command for.


and just as final screen shot of the important stuff in case you want to compare.
![Screenshot](https://dev-to-uploads.s3.amazonaws.com/i/6oazzrloa9103cvua8fi.png)


now if we boot up the emulator with `firebase emulators:start --only firestore --import seed-data` lets do a compare of the live database and our emulator

Woow!

![success](https://dev-to-uploads.s3.amazonaws.com/i/c7djev82lle1x10ez9bo.png)
Day 41 : #100DaysofCode - Collaboration
Tags: 100daysofcode, codenewbie
Published: 2020-07-12 02:25:44

Today I worked on a collaborative project with some of my classmates. To prepare for my first real collaborative project I researched some of the best practices using Github. 

I found the following medium article:

{% medium https://medium.com/@jonathanmines/the-ultimate-github-collaboration-guide-df816e98fb67 %}

The article allowed me to set up a Github repo and set up collaborators. I was designated as the "driver" for the Github so I will be the one checking, merging, and accepting the pull request to the master branch. I am excited to build our project and share it with the dev.to community soon. 

I would love more advice from others on how to collab on Github and some best practices to use.
How to Make AI Feel Less like Sci-Fi with AI Builder 
Tags: ama, powerfuldevs, azure, cognitiveservices
Published: 2020-07-12 01:56:36

--- 

title: How to Make AI Feel Less like Sci-Fi with AI Builder 

published: true

cover_image: https://dev-to-uploads.s3.amazonaws.com/i/jg7lmp70e49wofrrbzzs.png

description: In this session, Chloe Condon will share how you can build and train your own AI models and add more intelligences to your apps with Azure AI + Cognitive Services. 

tags: ama, powerfuldevs, azure, cognitiveservices 

--- 

<hr /> 

  

#### #PowerfulDevs Conference 

  

`RSVP HERE BY JULY 15:` 

[https://aka.ms/powerfuldevsconf](https://aka.ms/powerfuldevsconf) 

  

The [Powerful DEVs Conference](https://aka.ms/powerfuldevsconf) is the first virtual conference of its kind. We will showcase how developers can leverage the Power Platform to build applications faster and with far less effort. Connect with industry-recognized ProDev influencers, Microsoft Cloud Advocates, trusted and diverse community leaders, and members of the Power Platform Team. 

  

`BOOKMARK THIS FOR RESOURCES AND DISCUSSION WITH SPEAKERS`  
{% link https://dev.to/azure/powerfuldevs-conference-join-us-on-july-15th-online-fe3 %} 

  

Revisit this page during the event to engage in live (and post-event) discussions on those topics with both speakers and community. The speakers will be here for a live Q&A for at least 30 minutes immediately after their session concludes. After the event, come back to find additional slides, videos, and resources for this session. 

  

<hr/> 

  

## About This Session: 

  

`July 15, 2020: 12:30 PDT - 12:55 PDT` 

  

"Artificial Intelligence" may seem like a deeply complex and technical topic- but did you know you can build your own models with zero code? In this talk, I'll share how you can build and train your own models and add even more intelligence to your apps with Azure AI + Cognitive Services! 

  

## About the Speakers: 

  

Chloe Condon is a Cloud Advocate @ Microsoft where she loves to showcase fun ways to use Azure. Follow [@chloecondon](https://twitter.com/chloecondon) on Twitter.
Launch a VirtualBox machine without GUI | Use only with SSH | Any OS
Tags: ubuntu, linux, codenewbie, tutorial
Published: 2020-07-12 01:31:00

Hey there!
  This is [Tharun](https://www.tharunshiv.com) here. Most of us would have wanted to use the VirtualBox without GUI, with the use of SSH. In this Article, I introduce you to a way you can launch VirtualBox without GUI and connect to it using SSH.

## What is VirtualBox?

The [VirtualBox](https://www.virtualbox.org/) is a software that can be used to run multiple operating systems on your own operating system and effortlessly switch between them, create snapshots, delete them, restore them on the fly.

We all have wondered if we had an easier way to access our VirtualBox Machines. In this tutorial, we will look at how you can launch the VirtualBox without a GUI and SSH into your VirtualBox machine. This will prevent you to have to open your VirtualBox GUI to do everything. (duh!)

## How to launch without GUI?

![virtualbox-gif](https://dev-to-uploads.s3.amazonaws.com/i/d7nbzcmydow63d66z879.gif)

**Step 1:** Open VirtualBox
**Step 2:** Right click on the virtual machine that you want to open and start it in **Headless start** mode.
**Step 3:** No more steps. Time to connect to the machine using SSH.

## How to connect to the machine using SSH?

{% post https://dev.to/developertharun/easy-way-to-ssh-into-virtualbox-machine-any-os-just-x-steps-5d9i %}

Hope this article helped. Give this article a like, unicorn, and save it for later. Share it with your friends and let them know this useful trick. 

My Blog: https://www.tharunshiv.com

Written by,
{% user developertharun %}

# Thank you for reading, This is Tharun Shiv a.k.a Developer Tharun

![Tharun Shiv](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xtxq6bdms36fmn62450h.png)
My First Electron App.
Tags: javascript, html, node
Published: 2020-07-12 01:26:39

It is not pretty! But functional.

I created a Network speed test application in Electron.

Check this URL if you need to try my application.

http://openspeedtest.com/results/39563137


In just four commands you can make apps for windows, mac and linux.

open cmd or terminal

Install Node.js and Git

then open development folder

npx create-electron-app openspeedtest-server

npm start

npm run make

Done.. Yes now you need to write application logic etc but there are the only few steps you need to do to make you Awesome web-app to a cool desktop application.
Batch Your React Updates
Tags: react, web
Published: 2020-07-12 00:25:30

---
title: Batch Your React Updates
published: true
description: How to improve React app performance by batching updates.
tags: react,web
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/c0znmeo2iejim78ljcbi.jpg
---
React doesn't automatically batch updates that you trigger in:
* Native DOM event listeners (e.g., `el.addEventListener()`)
* Async callbacks (e.g., promises, timeouts, intervals)

Consider the following code:
```jsx
fetchProfile(userId)
  .then(({name, age}) => {
    setName(name);
    setAge(age);
  });
```

In the above example, React will re-render your UI tree twice! [Try it on CodeSandbox](https://codesandbox.io/s/festive-monad-d6eld?file=/src/App.js).

One way to fix this is to use a single state variable.
```jsx
fetchProfile(userId)
  .then(({name, age}) => {
    // now instead of using two state
    // variables, we just use one.
    setUserProfile({ name,  age });
  });
```
[Try it on CodeSandbox](https://codesandbox.io/s/sleepy-galois-rurjp?file=/src/App.js).

Another way is to wrap updates inside `unstable_batchedUpdates` callback. As the name suggests, this API will batch your updates in a single reconciliation pass, resulting in less component renders.

Don't worry, the API is very stable despite the `unstable_` prefix. The only thing to keep in mind is that the API is renderer-specific, meaning that on the web it should be imported from the `react-dom` package, not `react`.

```js
import {unstable_batchedUpdates} from 'react-dom';
// react-native
import {unstable_batchedUpdates} from 'react-native';
```

Then, use it like so:
```js
unstable_batchedUpdates(() => {
  setName('John');
  setAge(25);
});
```
[Try it on CodeSandbox](https://codesandbox.io/s/compassionate-shamir-tl7fz?file=/src/App.js).

You might be thinking that this is pretty unintuitive and verbose. I sometimes wonder myself why this isn't automatic. The good news is that React will make it so in a future release, but we need to first opt-in to either [Blocking Mode](https://reactjs.org/docs/concurrent-mode-adoption.html#feature-comparison), or [Concurrent Mode](https://reactjs.org/docs/concurrent-mode-adoption.html#feature-comparison). In the meantime, try these workarounds!
Javascript performance benchmarking (aka JSPerf) with JSBench.me
Tags: javascript, benchmark, react
Published: 2020-07-12 00:24:15

Disclaimer: this is my app and the post is mostly announcement

https://jsbench.me

Long time ago, JSPerf was down for some time and since I was learning React and JSPerf was server-side app, I decided to build my own, SPA version in React. Fast forward to today... JSBench.me is out of beta. v1.0.0 is released.

## What is it for?
Well, if you use(d) JSPerf, then explanation is not needed. If not, shortest description would be that it is Javasscript playground (like JSBin, JSFiddle) but for testing performance of your snippets. In the background Benchmark.js runs all tests and JSBench.me is UI for it.

#### Question? Do you benchmark your Javascript code?
I got a habit of doing it, more as a learning tool than a development tool. Once you realize one way of doing something is faster, you adopt it for future.

## What's under the hood?
As said, it is an SPA, built with React and Mobx. Back office is relatively complex mix of AWS services: Cloud Formation, API Gateway, Cognito, Lambda and DynamoDB. So, complete project is in the cloud depending on AWS services. V1 also uses AWS SAM with Cloud Formation to build complete infrastructure from yaml files. Whole project tought me a lot and will produce several posts here, one of which is already [here](https://dev.to/psiho/build-deploy-all-aws-resources-as-easy-as-npm-run-deploy-prod-aws-sam-worflow-4d83).

## Features and what's new in this version
Other than standard test running, you always could save/publish and link your test suites. Voting is also possible. Last version (other than complete rewrite to latest libraries and Typescript) adds many UI helpers that users requested like: sorting tests (drag&drop or buttons), running individual tests in the suite, dark & light theme, manual&auto resizing of code editors, etc. More in the [change log](https://github.com/psiho/jsbench-me/wiki/Change-log)
Quick Python: Async Callbacks
Tags: python
Published: 2023-01-06 01:17:24

---
title: Quick Python: Async Callbacks
published: true
date: 2020-07-12 00:23:29 UTC
tags: Python
canonical_url: https://brandonrozek.com/blog/asynccallbacks/
---

I’ve written a post on using [callbacks in Python](/blog/pysubscribepattern/). Though to add callbacks to `asyncio` functions, you’ll have to interact with the loop object directly. Replace the emit function in the previous post with the following:

```
class Application:
    # ...
    def emit(self, message):
        for callback in self.callbacks:
            if asyncio.iscoroutine(callback):
                loop = asyncio.get_running_loop()
                loop.call_soon(
                    functools.partial(
                        asyncio.ensure_future,
                        callback(message)
                    )
                )
            else:
                callback(message)

```
Generate All Possible Images!
Tags: python, picture, idea, image
Published: 2020-07-12 00:19:02

Let's discuss a __HUGE__ project but so useful one!
The main idea is to generate all possible pictures with a specific resolution such as 1080×1920.

___

Why:
===
Your first question might be, __why the hell should this happen?__
>Cause it is literally EVERYTHING!!! Everything has happened, Everything that will happen, it can be a huge resource of inspiration, it can be leaked photos, it can be any media that will be released tomorrow, it can be exactly the __future__. This is "Why".


If we want to generate all 1080p pictures, it will be around
```< 1080*1920*255*255*255 = 3.47892351×10¹³ >```, it is noticeable we are facing two different issues:

>__Time__
>__Size__

Therefore i though as the first step , i should use a lower resolution to generate , so i did some research:

○ 352 x 240 (240p)
○ 480 x 360 (360p)
○ 858 x 480 (480p)
○ 1280 x 720 (720p) 
○ 1920 x 1080 (1080p)
○ 3860 x 2160 (2160p)

The best choice is 240p. it will be something like:
  

![](https://t3.ftcdn.net/jpg/00/56/75/84/240_F_56758407_WUNlXkdA7s1RhTrmJ2ELPNLzEtwCxMfK.jpg)
  
  
Alright, Let's check a number of possibilities:
```240×352×256×256×256 = 1.417339208×10¹²```
it is still a lot but with a huge difference in size.
so I had another idea, limiting the range of red/green/blue:
#2 Different Ways#
##Option 1##
instead of having __(256³)=16777216__ options for each pixel , have __((256/8)³)=32768__ => we saved __16777216/32768=512__ , in other words __(240×352×32*32*32)=2768240640__ possibilities

  
>How About analysing size and time:

#Size:#
Each .Jpg format 240p : 51KB (maximum)
Each .Png format 240p : 254KB (maximum)
It is clear we have to use .jpg format.
All possible pictures size will be :
```(240×352×32*32*32)*51KB = 141180272640KB or 137871360MB or 134640GB or 131TB```



#Time:#
Each pixel (in a loop not random) takes 0.000000166

Each 240p picture generate takes ```(0.000000166*(352*240))+0.08 = 0.09402368```

Then for all Possible pictures, it takes ```0.01*2768240640= 27682406.4 sec or 461373.4 min or 7689.5 hour or 320.3 days```

___
___
___

##Option 2##
instead of having __(256³)=16777216__ options for each pixel , have __((256/32)³)=512__ => we saved __16777216/512=32768__ , in other words __(240×352×8*8*8)=43253760__ possibilities

  
>How About analysing size and time:

#Size:#
Each .Jpg format 240p : 51KB (maximum)
Each .Png format 240p : 254KB (maximum)
It is clear we have to use .jpg format.
All possible pictures size will be :
```(240×352×8*8*8)*51KB = 2205941760KB or 2154240MB or 2103.7GB or 2.05TB```



#Time:#
Each pixel (in a loop not random) takes 0.000000166

Each 240p picture generate takes ```(0.000000166*(352*240))+0.08 = 0.09402368```

Then for all Possible pictures, it takes ```0.01*43253760= 432537.6 sec or 7208.9 min or 120.1 hour or 5 days```


___
___
___

Thanks for your attention, hope you like the idea and I really love to see your ideas to optimize!

[Revisto](https://github.com/Revisto/)
My Master Guide To Learning Front-End Development and UX/UI in 2020
Tags: ux, design, learning, codenewbie
Published: 2020-07-12 00:04:06

A couple months ago, a good friend of mine asked me how to learn how to code. Since she already has a background in design, I thought web design or UI developer would be a good fit for her. So to help her get started, I created a master list on my github to share with her. 

I included a variety of topics such as:
<ul>
<li>Essential Topics and Learning</li>
<li>Mastering the Front-End</li>
<li>Tutorials</li>
<li>HTML, CSS, & Javascript</li>
<li>Advanced Topics + Computer Science</li>
<li>Exercises</li>
<li>Just for Fun</li>
<li>Developer Communities</li>
<li>Accessibility for Developers</li>
<li>Job Boards</li>
<li>UX & UI Design</li>
</ul>

I tried to cover a wide range of topics and subjects, especially ones I wish I had learned about when I first started. Like accessibility for examples. Or learned more computer science concepts. 

When I first started out, I learned the very basics of HTML and CSS, we barely covered Javascript in my classes. We did however touch on other great ideas like Wordpress and responsive web design. 

But I didn't know that there were guides on how to learn everything and I wish I would have known about them back then. I really enjoy the popular Road Map to Front End Development (2020) and other similar resources. 

Guides like these make learning development a lot less daunting, since otherwise everything is overwhelming. For the newbie dev or beginner programmer, it can be tempted to want to learn everything at once. But I think with some guides and mentorship, we can help each other grow and become better. 

Please let me know if there is anything I should add to it!

<button style= "color:pink;"><a href="https://github.com/SarehPrice/Learn-Front-End-UI-Design-2020">View My Guide</a></button>
Maskable Icon template for Affinity Designer
Tags: web, pwa, maskable, affinity
Published: 2020-07-13 04:05:05

---
title: Maskable Icon template for Affinity Designer
published: true
date: 2020-07-12 00:00:00 UTC
tags: 
  - Web
  - PWA
  - Maskable
  - Affinity
canonical_url: https://tigeroakes.com/posts/maskable-icon-template/
---

To support full-bleed icons on various platforms, there’s a new PWA icon purpose called [“maskable icons”](https://tigeroakes.com/posts/maskable-icons). By providing an icon with padding, the web browser can crop it to fit alongside other icons (especially on Android where different manufacturers use different shapes). You can read more about it on my posts on [CSS Tricks](https://css-tricks.com/maskable-icons-android-adaptive-icons-for-your-pwa/) and [web.dev](https://web.dev/maskable-icon/).

It can be difficult to design a maskable icon as you have to deal with several constraints without a clear preview of what the icon looks like. To help with that, I created [Maskable.app](https://maskable.app). It lets you preview and edit your maskable icons on the web. However, if you’re designing icons in local design software you’ll need to export the icon before you can preview it. In order to quickly look at possible renderings, I created an Affinity Designer template based on [Cyril Mottier’s Adaptive Icon Template](https://www.cyrilmottier.com/2017/07/06/adaptive-icon-template/).

![Template used in Affinity Designer](https://tigeroakes.com/posts/maskable-icon-template/affinity-designer.png)

The template makes use of a Affinity Designer 1.5 feature: Symbols. The left-most icon – labeled “Master” – is based on a symbol which is then duplicated to get different shapes. Any changes made to the master symbol will be directly replicated to the other copies. Symbols are marked with a solid orange border on the left. The template is licensed under the [CC BY 2.0](https://creativecommons.org/licenses/by/3.0/), just like the original template by Cyril Mottier.

[**Maskable Icon Template**](https://tigeroakes.com/posts/maskable-icon-template/maskable_icon_template.afdesign)
Reversing a string
Published: 2020-07-11 23:58:23

Here comes the next challenge: Reversing a string. 

Description: **Write a function that reverses a string. The input string is given as an array of characters char[]. Do not allocate extra space for another array, you must do this by modifying the input array in-place with O(1) extra memory.
You may assume all the characters consist of printable ascii characters.**

Simple enough! Here was my first answer when I attempted it a few months ago.

```js

return s.reverse()

```

Cheeky. But let's come up with our own solution.

So we cannot allocate memory to a new array, and we have to modify the array in-place. The first thing I do is look for a pattern. When reversing a string, the last letter is first, first is last, second to last is second, second is second to last, etc. This will be repeated until we hit the middle. It may be different odd/even length words, but we can account for that. Let's implement that solution!


```js
var reverseString = function(s) {
    
for(let i = 0; i < s.length/2 ; i++){
        let prev = s[i]
        s[i] = s[s.length - 1 - i]
        s[s.length - 1 - i] = prev
    }
}
```

Let's break down this solution. On each character, we will save the current character, change the current character in the array to the character on the opposite side of the array, and then use the saved character to change the character on the further end. 

In this solution, we only need one pointer, **prev**. The iterator variable **i** will increment until it hits the middle of the word. For odd numbered words the reversing will stop before it hits the one letter in the middle and for even numbered words it will continue until it reverses the last pair in the middle of the word.