teleren/devto huggingface dataset:
Upgrade your React game with TypeScript: Routes
Tags: typescript, react, javascript, webdev
Published: 2020-08-18 01:29:42

Hello there! This is the part of the tutorial where we make navigation magic :sparkles: happen.

In order to start, we first need to add some dependencies to our project with `npm i react-router-dom @types/react-router-dom`.

If you remember, in our Menubar component we have everything set up so we could navigate between two links: `/` for Home and `/dates` for Tour Dates.

Let's create those.

In your src folder, create a Pages folder and inside create two files: `Home.tsx` and `TourDates.tsx`. We're using the `.tsx` extension instead of the `.ts` because the first one will allow us to use JSX.

For now, I'll leave both components really simple but you can go and add whatever you want on them.

{% gist https://gist.github.com/misselliev/a28e083843eab0771687b94ded424d9d.js %}

{% gist https://gist.github.com/misselliev/b51c7e25c77655dfe13c278178ce0c5b.js %}

Great, now we have our two components all typed up and pretty. Now, we have to create a `Routes.tsx` where we place all of our preferred routes.

In this case, our `Routes.tsx` would look something like this. 
{% gist https://gist.github.com/misselliev/eb05d2be32e3dd6d8c75b3737a6323c0.js %}

And finally, we have to make sure we add our Router component to make everything happen in `App.tsx`.

{%gist https://gist.github.com/misselliev/0632390fe98b14f47bce59f083ed2bbe.js %}

And :sparkles: that's it! You can now go back and forth between `\` and `\dates` in your Menubar.
<br>
<img src="https://i.imgur.com/zt3l2hP.jpg" alt="Chi working zone" width="400"/>
<figcaption>Dulce, my local PM, checking out your cool routing</figcaption>
<br>
I hope you found this helpful, stay safe and please remember to take a break.

Got something to add? Please feel free to [reach out](https://twitter.com/miss_elliev) for any question, comment, meme or dog photos swap.
Day 78 : #100DaysofCode - Projects
Tags: 100daysofcode
Published: 2020-08-18 00:53:10

Today, I worked on my second rails project application that I wanted to build. I was able to iterate over the unsplash gem and display the photos on the index page. YAY! Now to get everything else going!  

Here is the link to my github repo:

{% github SincerelyBrittany/photo-app %}

I was able to get the photos by iterating over the object provided by the unsplash gem by doing the following:

```
   photos = Unsplash::Photo.search("cats")
        @photos = []
        photos.each do |a|
            description = a["alt_description"]
            portfolio = a["portfolio_url"]
            photo = a["urls"].full
            @photos << photo
        end 
```

Then I was able to display the photos by adding this code to my views:

```
<div class="cards">
<% @photos.each do |photo| %>
    <div class="card">
        <img src="<%= photo %>" alt="random" >
        <br/>
        <div><p> <%= @quote %> </p></div>
    </div>
<% end%>
</div>
```

The next step is to add a checkbox to my views that will send the information to the photos controller and save it to the database.

I am aiming to have this application running by the end of the week so that I can focus on the next section for my bootcamp, Javascript.

Thanks for reading!

Sincerely,
Brittany

Song of the day:

{% youtube nPO2XNDFWN0 %}
NestJS-JumpStart
Tags: nestjs, node, jumpstart, typescript
Published: 2020-08-18 00:50:59

github.com/clj-solutions/nestjs-jumpstart

Nest (NestJS) is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with and fully supports TypeScript (yet still enables developers to code in pure JavaScript) and combines elements of OOP (Object Oriented Programming), FP (Functional Programming), and FRP (Functional Reactive Programming).

For beginners, it is a bit difficult to land on, and develop a new project with it.
So I have created public repo as a jumpstart, and here it provides basic authentication by passport and unit testing by jest.
Please take a look, and give your feedback.
Thank you.
Web Audio com React
Tags: react, webaudio, reactreconciler
Published: 2020-08-18 00:46:31

Estou usando o [react-reconciler](https://github.com/facebook/react/tree/master/packages/react-reconciler) para integrar a [API Web Áudio](https://www.w3.org/TR/webaudio/) com [React](https://pt-br.reactjs.org/). Um preview de como está ficando a implementação de uma reprodução do exemplo [Step Sequencer](https://mdn.github.io/webaudio-examples/step-sequencer/) da [MDN](https://developer.mozilla.org/pt-BR/):

![](https://i.imgur.com/ALlzGpI.png)
![](https://i.imgur.com/073QcKF.png)
![](https://i.imgur.com/SuW0EPf.png)

Eu uso a extensão [Web Audio inspector](https://chrome.google.com/webstore/detail/web-audio-inspector/cmhomipkklckpomafalojobppmmidlgl) do Chrome para visualizar o grapho de áudio

Alguns vídeos que postei no Facebook:
- [Vídeo 1](https://www.facebook.com/filipe.roberto.beck/videos/3131169306966562)
- [Vídeo 2](https://www.facebook.com/filipe.roberto.beck/videos/3135788363171323)
- [Vídeo 3](https://www.facebook.com/filipe.roberto.beck/videos/3137663279650498)
- [Vídeo 4](https://www.facebook.com/filipe.roberto.beck/videos/3138293122920847)
- [Vídeo 5](https://www.facebook.com/filipe.roberto.beck/videos/3144790862271073)
CardGame by ReactJS
Tags: react, redux, github, opensource
Published: 2020-08-18 00:44:06

ReactJS is very popular thesedays, and it is really helpful to build a web application by component based.
For beginners, I have created my own card game with ReactJS.

- Major Components
* CardHolder
* Card
* BlankCard
* BackCard

Now it is not enough to play with good mood, and much things to update.
Welcome for any developers to contribute, and provide great idea.
When you Create a Django project.... what are the ideal files and folders to have? As a example, for a typical website.
Tags: django, python, html, css
Published: 2020-08-18 00:33:32

When you create a Django project, you have the Env.

So what type of file structure is typical? 

Are there components? 


Allot of people like to just show off a “to do app”,
THAT TELLS ME NOTHING
What's the deal with AWS Cognito
Tags: aws, ios, swift
Published: 2020-08-18 00:24:45

Ever wondered what the deal is with AWS Cognito and iOS apps? Check this video we made demystifying the user experience it provides.

Check it out before you decide if you want to use AWS Cognito in your app!

[Youtube - What's the Deal with AWS Cognito and Federated Logins?](https://www.youtube.com/watch?v=TSCkSO83dUQ)
PyCharm with asdf
Tags: asdf, pycharm
Published: 2020-08-18 00:22:33

---
title: PyCharm with asdf 
published: true
description: 
tags: asdf, PyCharm
//cover_image: https://direct_url_to_image.jpg
---

As PyCharm does not support [asdf ](https://github.com/asdf-vm/asdf) pointing /Users/{username}/.asdf/shims/python
was not working.

I was able to make it work by running

```
$ asdf which python
```
Let's build our first JavaScript npm package!
Tags: javascript, npm, node, development
Published: 2020-08-18 00:09:14

--- 
title: Let's build our first JavaScript npm package!
published: true
description: Introduction to building and publishing a JavaScript package to the npm registry.
tags: javascript, npm, nodejs, development
series: Building your first JavaScript package
cover_image: https://images.unsplash.com/photo-1587149185232-4027fd04ef51?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80
---

## About JavaScript packages

You've probably already used some JavaScript libraries, scripts, blocks of code you found online or you might even already built your own library. The need for a package comes when we want to reuse and share code and functionalities with others.

A package, usually, is just a set of functions and/or variables or full-fledged apps and cli's that are made available for us to build our own.

To make it easier for us, fortunately, nodeJS has multiple systems that allow us to maintain, manage, and share these scripts - so they can be enclosed in a "package". The most common or famous one is NPM ([Node Package Manager](https://npmjs.org)).

Let's say that you want to share some functionality between multiple projects. For this, we can write the code we need, "package" and push it to npm to distribute it.

The project that we are going to work on *might not be* of any use right now, but it's a good example of a simple JavaScript package - we want to share some functionality between projects and let *NPM* manage that for us - so we don't have to copy-paste code everywhere.

## About our package - mood-sentences

In this series, we will build a simple package and push it to npm registry. We will cover everything from the very beginning of creating a new git repository to publishing our code to the package manager.

### Project idea 💡

> Note: To be honest with you, I haven't searched for this package. But it probably already exists. 😏

Imagine that we have a Discord chat bot and we need to send some messages when someone joins the server. We could write an array of sentences like "Welcome to the server John 🎉" and then randomly pick one, or, we could write a JavaScript package that exports multiple sentences for different moods as we need them. 

This would enable us to focus on the mood sentences, share them with others, reuse in other projects, and hopefully receive some nice Pull Requests with more sentences and moods. 🤓

We will write some sentences into a JSON file, that reflects multiple moods, starting by adding some sentences that can be used to express:

**Anger, excitement, boredom and happiness** 

Then we will add a few methods to return sentences.

The full project is available on Github, and has multiple branches, each one, corresponds to a chapter of this series.

{% github andrevarandas/mood-sentences no-readme %}

Thanks for reading, in the next part we will start adding our own dependencies and preparing everything to work on our package.
My Favorite CSS Selector
Tags: css, webdev, frontend
Published: 2020-08-18 00:03:18

---
title: My Favorite CSS Selector
published: true
description: Have you ever wondered what the best and most useful CSS selector is?
tags: CSS, WebDev, Frontend
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/csbtvmny026r6j5yp5oz.png
---

During my time as a front-end developer, I've been adopting patterns that help me author CSS in a way that's easier to maintain, expand and not having to constantly override default styles.

{% twitter 1285384461035556864 %}

Margins are unique in CSS because they assume a specific context. For example, if I give every `<p>` element in my site a top and bottom margin of `1em`, I'm going to need to reset those margins inside my components almost every time. Otherwise, I'll have to write my components in a way that assumes all `<p>` elements are going to have margins.

Components should only care about themselves, not their context. That job is for the parent component. So if I have a sidebar with a set of children widgets, the sidebars job is to add proper spacing between widgets, not the widgets to have default margins for when their context is a sidebar.

## Being a good parent

The best CSS selector is all about being a good parent and not delegating the responsibility of the parent to the children. For that, we use this selector:

```scss
> * + * {
  // ...
}
```

This selector targets the adjacent siblings of all direct children of an element. Here's a CodePen example so you can understand which elements are being targeted as well as their specificity:

{% codepen https://codepen.io/sebnitu/pen/wvGWrXy default-tab=css,result %}

There are two main reasons why I love this selector:

- It doesn't add to the elements specificity. A simple `.class` selector is equal in specificity weight to `.parent > * + *`. This is absolutely HUGE if you're using a low specificity CSS authoring pattern such as BEM.
- It allows us to handle the spacing of our children without having to make the children worry about that stuff. Now THAT's being a good parent!

## In the wild

There are two places I use this selector in my projects. The first is a generic `.type` component that handles the styles for a block of HTML elements such as a blog post. Usually this type of content is maintained inside a markdown file or a WYSIWYG editor, so you don't have control over the HTML output. But with these styles, you'd pretty much be good to go:

```scss
.type > * + * {
  margin-top: 2em;
}
```

I also have a `spacing` utility that I include in most of my projects. It's output is built using this Sass code:

```scss
$spacing-map: (
  "xs": 0.25em,
  "sm": 0.5em,
  "md": 1em,
  "lg": 1.5em,
  "xl": 2em
) !default;

.spacing > * + * {
  margin-top: map-get($spacing-map, "md") !important;
}

@each $key, $value in $spacing-map {
  .spacing-#{$key} > * + * {
    margin-top: $value !important;
  }
}
```

Which gives me a tool for adjusting the spacing between a components child elements without having to create a new modifier for every component that needs it.

Thanks for reading!
TensorFlow Certification
Tags: machinelearning, cert
Published: 2020-08-18 00:02:32

It is not my summer vacation but I am defaulted to having only about 2 hours of focus per day. That is basically impossible for making apps so before classes let out, I took a step back and began seeking a way to feel more accomplished since I can't get my app to beta yet. That's because I don't know what it is! So that's okay I don't know but I need something to hold onto for future job interviews or general motivation. 

Then, of course, Twitter, the hell app and world's coffee shop popped up with a post about the TensorFlow Certificate from Google. Hey, I have been learning about all that as a huge distraction from my engineering studies. Maybe it would be beneficial if I were to gain this achievement in the video game of life. My app obsessed voice in my head says, "We need it."

I plan to take the certification sometime next month after I get some full days to do practice. Simply installing tensorflow in PyCharm was a whole day of learning (and getting up to make food, over and over). But, now I know more about what JetBrains is and I can turn this knowledge into more implementation experience. Sometimes, just getting things up and running in Python feels like the greatest achievement.
VirtualBox cannot access shared folder items (permission denied) - Fixed
Tags: linux, ubuntu, virtualbox, sharedfolder
Published: 2020-08-18 00:01:41

One of the common issues I have faced several times regarding Virtualbox's shared folder, that is even though a shared folder connected to the virtual machine, it's not accessible. 

means in some cases after connecting your shared folder to the Linux virtual machine, when you try to access its contents, it will deny the permission and show "<b>The folder contents could not be displayed</b>" message.
<br>
![Permission deny](https://dev-to-uploads.s3.amazonaws.com/i/q9z8vqb9z3d92cjog0nb.png)
<br>
###Let's see how we can fix it

1. Open your Terminal. Type `sudo su` then enter your account password.

2. Write the following commands & execute it

 `sudo usermod -a -G vboxsf mir` (*Instead of `mir` use your account name, which is located at the top-left corner of your terminal)


![vboxsf](https://dev-to-uploads.s3.amazonaws.com/i/faylwp6818q364tqwttt.png)


`sudo chown -R your_account_name:users /media/your_share_folder_name/`

 <u>Example</u> `sudo chown -R mir:users /media/sf_Linux_Application/`


![sf_linux_application](https://dev-to-uploads.s3.amazonaws.com/i/izu8j5nx278ntwios04f.png)


3 . Now reboot your Virtual Machine and check the Shared Folder again.

###[Watch on YouTube](https://www.youtube.com/watch?v=Eq2QUDAuJNk)

Thanks for reading :)

Coffee https://www.buymeacoffee.com/rahedmir
Let's Write a JavaScript Library in ES6 using Webpack and Babel
Tags: javascript, webpack, node
Published: 2020-09-01 10:55:22

---
title: Let's Write a JavaScript Library in ES6 using Webpack and Babel
published: true
date: 2020-08-18 00:00:00 UTC
tags: JavaScript,Webpack,NodeJS
canonical_url: https://www.loginradius.com/engineering/blog/write-a-javascript-library-using-webpack-and-babel/
---

Writing your own webpack configuration for a JavaScript library in ES6 and learn webpack along the way.

   
[Read On](https://www.loginradius.com/engineering/blog/write-a-javascript-library-using-webpack-and-babel/)
How to pass data between the different browsing contexts of the same origin in JavaScript?
Tags: javascript
Published: 2020-08-18 00:00:00

---
  title: How to pass data between the different browsing contexts of the same origin in JavaScript?
  published: true
  tags: JavaScript
  date: Tue Aug 18 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/pass-data-between-contexts-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-185d442c82693a41fc68a6b94273724a.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/pass-data-between-contexts-javascript)
  
To pass data between different browsing contexts like passing data between 2 open tabs, passing data between a tab and service worker, or any context of the **same origin** in JavaScript, you can use the `BroadcastChannel` API.

First, you have to make an instance of `BroadcastChannel` with the channel name of your choice.

The channel name should be passed as an argument to the `BroadcastChannel()` as a string.

```javascript
// create an instance of BroadcastChannel
// with channel name as test_channel
const channel = new BroadcastChannel("test_channel");
```

After creating an instance you need to add a `message` event listener to the `channel` object so that when you receive messages the callback function inside the event handler is called.

```javascript
// create an instance of BroadcastChannel
const channel = new BroadcastChannel("test_channel");

// add message event listener to receive meesage
channel.addEventListener("message", (event) => {
  // data property
  console.log(event.data);
});
```

The callback function is passed with an `event` object.

You can find the data inside the `data` property inside the event object.

Now you may think how will I send data?

For that you have to use the `postMessage()` method in the `channel` object.

```javascript
// create an instance of BroadcastChannel
const channel = new BroadcastChannel("test_channel");

// add message event listener to receive meesage
channel.addEventListener("message", (event) => {
  // data
  console.log(event.data);
});

// send some data or message
channel.postMessage({
  name: "John Doe",
  age: 23,
});
```

Now to test this open a new tab of the website and when you open you can see that the data `{ name: "John Doe", age: 23 }` is shown in the console.

For testing, you can head on to this **[JS Bin](https://jsbin.com/pemoquvoqo/2/edit?js,console)** and open a new tab of the same **JS BIN** URL to see the result.
Open source Cypress tests written in Typescript
Tags: typescript, testing, webdev, cypress
Published: 2020-08-17 23:34:01

We made our [suite of Cypress tests](https://github.com/liquidata-inc/dolthub-cypress) for our Next.js web application (https://www.dolthub.com) open source for anyone to view or use as an example for testing their own web apps. Our tests are written in Typescript and we're currently running our tests on both Jenkins and GitHub Actions.

You can learn more about how we set up our Cypress tests in Typescript here: https://www.dolthub.com/blog/2020-08-17-cypress-open-source
Where can one get a low cost GPS tracker?
Tags: location, gps, countyfinder
Published: 2020-08-17 17:40:15

Choosing the proper [GPS tracker](https://en.wikipedia.org/wiki/Global_Positioning_System) is like deciding on a phone, each person has exceptional needs. The following trackers are what we consider “great in class” from our testing and private use.
GPS monitoring gadgets for cars have become increasingly popular. Car proprietors may want to song their vehicle for numerous reasons. Perhaps they’re afraid of vehicle robbery and want the excellent threat at being capable of locate their vehicle if someone steals it.

Also, if more than one humans use the same vehicle, the proprietor may want to music where the car has been and the way long it's been traveling. If you like to preserve renovation statistics or learn about the overall performance history of your vehicle, then a monitoring tool is the high-quality solution. Here are the pleasant GPS trackers for cars on the market today.

**1 – Americaloc GL300W Mini Portable GPS Tracker**

The Americaloc GL300W is a expensive tracker, but you won’t find one that’s better. It provides real-time monitoring and permits you to view up to 12 months of history.

The magnetic case allows you to hide it genuinely properly on your vehicle and the battery life (up to three weeks) is longer than the competition. You can set it up to warn you on movement, entering/leaving zones, speeding, and different scenarios.

**2. Optimus 2.0 GPS Tracker Bundle**

The Optimus 2.0 is pleasant vehicle GPS tracker which has well suited apps to be had for Android and iOS gadgets as well as it helps you to find [what county am i in right now](https://whereaminow.co/what-county-am-i-in/). Whenever the tracker generates new data, you could use your cell app to view and manipulate this facts.

This is terrific for historical information reference for your car. The protected twin-magnet case works very well for concealment.

**3. Linxup OBD GPS Tracker**

A finances friendly model, the Linxup GPS tracker without difficulty installs in your automobile’s OBD port and is a famous option.

Aside from standard monitoring features, you will have get admission to to Google Maps, textual content alerts, e-mail alerts, maintenance monitoring and more. It also can detect driver performance and provide.

**The Mileage Ace GPS Mileage Tracker**

If you run a company and need to chart your drivers' milestones, let the GPS Mileage Tracker Mileage Ace do its job for you. Typically, to build milage logs for you, you will rely on the driver.

But this tracker will keep track of the miles to ensure there is no human error. This will simplify the argument of vehicle tax deductions and more.

**Spytec GL300 Mini GPS Tracker**

Spy Tec is a great hidden car GPS tracker for you to discreetly place a tracker on your vehicles. The OBDII serial port does not have to be attached. That means that the tracking system can be concealed anywhere in the vehicle.

The battery has a lifetime of about 2 weeks so you have to look at it. The tracking is common, but the monthly fee is very high.