teleren/devto huggingface dataset:
React Router: testing "location.state"
Tags: react, router, testing
Published: 2019-12-26 22:01:53

# Background

In the react channel on Spectrum, someone asked how to test that a component displayed data provided by `location.state` from `react-router-dom`. I had never done this before, so I sought to find out how to do it.

After some investigation, and trial and error, I came up with the following...

```typescript
import * as React from "react";
import { render } from "@testing-library/react";
import { Router } from "react-router-dom";
import { createMemoryHistory } from "history";
import { App } from "./App";

it("renders location state", () => {
  const history = createMemoryHistory();
  const state = { a: 123, b: 456 }
  history.push("/", state);

  const { getByText } = render(
    <Router history={history}>
      <App />
    </Router>
  );

  getByText(state.a);
  getByText(state.b);
});
```

# Other Interesting Tidbits

* `<MemoryRouter history={createMemoryHistory(...)}>` doesn't work

* `<BrowserRouter history={createBrowserHistory(...)}>` does work, but doesn't typecheck

* According to [the docs](https://github.com/ReactTraining/history/blob/master/docs/Navigation.md)

> Note: Location state is only supported in createBrowserHistory and createMemoryHistory.

[and here](https://github.com/ReactTraining/history/blob/master/docs/GettingStarted.md)
> location.state - Some extra state for this location that does not reside in the URL (supported in createBrowserHistory and createMemoryHistory)

# Conclusion

So, this seems to work. It passes the tests.
Know of a better way? See any problems? Let me know, thanks.
Coding Style?
Tags: coding, style, music, share
Published: 2019-12-26 20:33:28

---
title: Coding Style?
published: true
description: Coding style
tags: coding, style, music, share
---

When I code something I listen to music I love something like Electronic Pop Synth just to relax my brain to think faster and effectively. Also, sometimes I open a music video in a small screen so while coding I can watch. If you ask me if I can focus, yes I can! Without doing these things I can't code haha. What's yours?
Do You Still Use Var? If So Why?
Tags: javascript, webdev, discuss
Published: 2019-12-26 19:28:39

---
title: Do You Still Use Var? If So Why?
published: true
description: Javascript Keyword Discussion
tags: JavaScript,web dev, discussion 
---

Is using the keyword var still viable in 2019/2020? What’s your use case for it? Is it only for older legacy code?
Understanding Javascript Data Types
Published: 2019-12-26 19:20:11

When starting out on learning how to use javascript, one must understand how javascript interpret these data types that is passed through javascript.  Without knowing the difference between data types, it can create errors within the javascript functionality.  When creating javascript functionalities, one of the creator's main goals should have little to no bugs within their codes.  If there are bugs within the code, it can be difficult to resolve the bug problems if there are large amount of code lines within one's work.  

Understanding the difference between data types that are used in javascript will be helpful when creating functions.  There are six primitive data types in javascript and they are:

- null
- undefined
- Boolean
- Number
- String
- Symbol

When we are able to know the difference between these data types in javascript, we can reduce the problems of data types error in our code.  For example, we would like to compare a number value with the use of Number and String data type.  If we are strictly using numbers to be used for comparison, using a String value can give an output that is not intended.  This can cause the functionality to provide the wrong output which can lead to possible errors to the overall code itself.
Truncate multiline text with CSS line-clamp property
Tags: css, standards, webdev, scss
Published: 2019-12-26 19:12:10

---
title: Truncate multiline text with CSS line-clamp property
published: true
description:
tags: css, standards, webdev, scss
---

Hello people,
This is my first post, so feedback and suggestions are welcome!

A few days ago I was working on a quote component where I needed to limit the amount of characters on each quote to the mobile version only.

The first thing that came to mind was using `text-overflow: ellipsis;`, but this property only limits the characters inline.

So after doing some research I found the `line-clamp` property. This property limits the contents of a block to the number of lines you define.

For example, I needed to limit each statement to 3 lines, so I used:

```css
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-wrap: break-word;
  text-overflow: ellipsis; /* It will end with ellipsis when text-overflow: ellipsis is included */
  position: relative;
  visibility: visible; /* this is a tricky to work correctly at IOS */
```

I created a Sass Mixin that contain fallback for older browsers:

```scss
@mixin truncate-text($font-size: 16px, $line-height: 1.4, $lines-to-show: 3) {
  display: -webkit-box;
  -webkit-line-clamp: $lines-to-show;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-wrap: break-word;
  text-overflow: ellipsis; /* It will end with ellipsis when text-overflow: ellipsis is included */
  position: relative;
  visibility: visible; /* this is a tricky to work correctly at IOS */

  // Fallback for browsers that not support line-clamp
  @supports not (-webkit-line-clamp: $lines-to-show) {
    display: block;
    max-height: $font-size * $line-height * $lines-to-show;
    line-height: $line-height;
  }
}
```

## See an example:

{% codepen https://codepen.io/djadriano/pen/XWJmrLL %}

As it was a mobile-only solution, it was a great solution as support for this property in mobile browsers is over 90%.

See you next time :)
Monorepo with three subrepos for web apps
Tags: webdev, typescript
Published: 2019-12-26 17:04:44

I wonder how you usually set frontend repo and web server repo? Separate repo? Single repo with web server as parent?

However, as I have found [Lerna](https://lerna.js.org/) and [Rest.ts / RESTyped](https://github.com/hmil/rest.ts/wiki/Rest.ts-vs-RESTyped), I have starting to adapt *one monorepo with three subrepos* structure...

```
.
├── lerna.json
├── package.json
└── packages
    ├── api-definition
    │   └── package.json
    ├── server
    │   └── package.json
    └── web
        └── package.json
```

Where `./packages/web/` is created with `@vue/cli`.

As I also use Yarn Workspace, I adapted Lerna to use Yarn Workspace

```javascript
// ./lerna.json
{
  "version": "independent",
  "npmClient": "yarn",
  "useWorkspaces": true
}
```

```javascript
// ./package.json
{
  "private": true,
  "workspaces": [
    "packages/*"
  ]
}
```

Also, in each folder's `package.json` I use [org-scope](https://docs.npmjs.com/creating-and-publishing-scoped-public-packages) with

```json
{
  "publishConfig": {
    "access": "public"
  }
}
```

When I run `yarn` or `yarn install` anywhere in the workspace, it will default install to `./node_modules`

Now, I can reference `@org/api-definition` anywhere inside both `./packages/server` and `./packages/web`.

Example and working repo

{% github patarapolw/web-api-typescript-monorepo no-readme %}

Now, with some questions,

- Is using global `.eslintrc.js` and `.eslintignore` acceptable?
- What about non-Node.js server? How would you set up the repo?
WomenTech Berlin 2020 on January 21st!
Tags: womenintech, inclusion, diversity
Published: 2019-12-26 17:41:42

WomenTech Network is a global platform powered by Coding Girls, Tech Family Ventures and Tallocate promoting diversity in the tech, leadership and entrepreneurship.

On January 21st our WomenTech Berlin event is going to kick-off! Join us here: https://www.womentech.net/

Our events are focusing on networking, interviews and exploration while connecting tech talent like engineers, data scientists, designers, product managers and other tech-roles with opportunities at companies that share the same values and put diversity as their top priority.
AllTechsavvy - Website Promo 🤖🤖🤟🤟
Tags: alltechsavvy
Published: 2019-12-26 17:32:52

👉👉👉Visit At:- https://alltechsavvy.com/👈👈👈

⚡⚡Best Flutter Development Tools⚡⚡
https://alltechsavvy.com/best-flutter-development-tools/

🔥Github Profile: https://github.com/sagarshende23


▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Enjoyed the video? Please leave a LIKE 👍 to show your support and appreciation:
▶️ SUBSCRIBE:  https://www.youtube.com/c/AllTechSavvy?sub_confirmation=1

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Social Media Links🎉🎉

► Twitter:  https://twitter.com/sagarshende95
► Facebook: https://www.facebook.com/AllTechSavvyOfficial/
Do this when confused about what to spend your time on
Tags: career, productivity
Published: 2019-12-26 17:21:53

There are days when we get confused by having too many choices. Confused about what we should learn. Because there are so many choices.

I recently came across a story which helped me clear my thoughts on this topic.

There once was a donkey. The donkey was hungry as well as thirsty. On one side there was water and on the other side there was food. The donkey kept on thinking which side to go first. At the end the donkey did not move and died.

What's the moral of the story? 

Do not fall in the trap of short-term thinking. Think long term and plan long term. 

I am currently 27 years old. There is a lot left to live. I like this website https://www.failflow.com/die/1450. It  shows me exactly how much assuming average life expectancy.

I am on week 1,451 of 4,732 of my life. 
If it takes 50 weeks to become advanced at any skill, I can learn about 44 new skills during my career. 64 if I include retirement. 

We live in the age of instant gratifications and our attention spans have shortened. This has led to us thinking short term. Instead of planning for a few years we plan as we are going to die next week. 

There would always be a need to balance short term and long term efforts. But we should not get confused between what is for short term and what is for long term.

---

If you want to know when I write more articles join telegram channel for [Data posts](https://t.me/aseem_data), [software posts](https://t.me/aseem_software) or [other posts](https://t.me/aseem_life). I don't spam, promise.
Login Form In Pug
Tags: pug, pugtutorial, loginform
Published: 2019-12-26 17:07:24


Pug is an HTML template engine that is built in Node.js with easy to write code. One of the most popular HTML template engine which directs compile and generates an HTML file.  Pug has a top-level of features like loop, conditions, operate, mixins and also different types of written tags. So here we designed a simple login form using Pug with some basic CSS.

In these elements, we used font awesome icons in our social button and also used background RGB color to show the best user-interface.  To make our login form responsive we used css3 media queries and also used CSS3 flexbox properties.

Download Source code and Visit login form

https://w3hubs.com/login-form-in-pug/
Daily Challenge #145 - SET Card Game
Tags: challenge
Published: 2019-12-26 17:00:18

---
title: Daily Challenge #145 - SET Card Game
published: true
series: Daily Challenge
description: There is a game called SET, where the goal is to find 3 cards that match attributes.
tags: challenge
---
This is a game called SET. The goal is to find three cards that match. Each card has 4 attributes:
- count (1, 2, 3)
- color (red, blue, green)
- shape (rectangular, oval, wave)
- filling (plain, shaded, empty)

In total, there are 3 ^ 4 = 81 cards. Cards are defined by `[count, color, shape, filling]` and every attribute can be represented as either 1, 2, or 3. In order for cards to form a set, each of the attributes have to be all the same or completely different. 

For example, for color:
red + red + red = ✔
red + green + green = ❌
red + blue + green = ✔

Here's some examples including all the attributes. 
SET: `1 red plain rect + 2 red plain rect + 3 red plain rect` ✔
SET: `1 red plain rect + 1 green plain rect + 1 blue plain rect`✔
NOT a SET: `1 red plain rect + 2 red plain rect + 3 red plain oval` 
❌ -> 2 rectangles and 1 oval 
NOT a SET: `1 red plain rect + 1 green plain rect + 1 blue shaded rect` 
❌ -> 2 plain and 1 shaded 

A path could be to take a 2D array of cards and return an array of solutions. 
<pre>
cards[x][y]
with
0 <= x <= 3
and
0 <= y <= 2

[] - no SET found
[ [ [ 0,0 ], [ 1,2 ], [1,3 ] ] ] - found 1 SET
[ [ [ 0,0 ], [ 1,2 ], [1,3 ] ], [ [ 2,2 ], [ 3,2 ], [1,1 ] ] ] - found 2 SETs

 [ [ 0,0 ], [ 1,2 ], [1,3 ] ], [ [ 2,2 ], [ 3,2 ], [1,2 ] ] ] - found 2 SETs
The above is NOT A VALID RESULT because the card at [1,2] is used twice!
</pre>

Your solution for a given set is correct if no card is used twice and you return the maximum number of solutions.

Keep it simple and have fun!

***
_This [challenge](https://www.codewars.com/kata/522f421badceba9f8a0000a6) comes from ineiti on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
Favorite Refactoring Techniques: Split Phase
Tags: refactoring, splitphase, cleancode
Published: 2019-12-26 16:36:16

---
layout: post
title:  Favorite Refactoring Techniques: Split Phase
series: favorite refactoring techniques
published: true
tags: refactoring, split phase, clean code
---

Split phase is the technique of breaking down and separating bloated behavior. Say we have a function that has multiple behaviors or a single line of code that carries out several behaviors and it's hard to deduce the result. We would _split_ the different _phases_ of a program's instruction; rather than keeping them altogether to make it more understandable and readable. 

In the example below, the purpose of the program is to board passengers.

{% gist https://gist.github.com/Naomi-Dennis/bffea7d5c7e216840700d0a03889f210 %}

We can identify four behaviors in this script:

* Parse input from user
* Separate passengers based on class
* Board the passengers in order of class

To begin refactoring, we are going to separate the behaviors into functions.

{% gist https://gist.github.com/Naomi-Dennis/ae9a00a1850b6f103413674108359550 %}

In summary we split the instructions in `rawPassengerData#map` into the following functions: 

* `#processPassengers`
* `#separatePassengerIntoFlightClass`
* `#boardPassengers`
* `#checkAllPassengersBoarded`

A `#main()` was added to give the program a proper starting point to call main instructions. If we were to read the instructions in `#main()`, we can deduce the program will: processes a list of raw passenger data, board passengers and checks that all passengers were boarded. All without needing to know the inner workings of each function.

# In Conclusion

A good way to view the split phase technique is to keep your functions small, readable and consisting of one behavior. There is more we can do like creating classes and streamlining passenger creation. Look out for future blog posts on refactoring to see the techniques used!
It's better to code with friends
Tags: beginners, chingu, webdev, codenewbie
Published: 2019-12-26 13:50:30

The journey of being a software developer is a never-ending journey of learning. This journey can be daunting if you are going about it on your own. So my advice to anyone who is beginner their journey or a well seasoned veteran start coding with your friends.


I graduated from a coding bootcamp over a year ago and my progression kind of hit paused. That structure of bootcamp was gone and I got stuck in what is known as tutorial purgatory. It's when a person goes through coding tutorials step by step but when it comes to doing projects from scratch it's hard to do. I stumbled upon Chingu Cohorts, a community of developers that improve their skills by doing project-based work. I thought that this would be a good way to learn how to work on a team, meet some new people, distract me from the fact that I don't have a job, and pick up some new skills along the way. 

I got put in a team with three awesome people

- [Ming Yong](https://medium.com/@mingyong)
- [Sophi Li] (https://medium.com/@sophiali124)
- [Rafael D. Hernandez] (https://dev.to/rafaeldavish/)

We decided to reverse engineer the [Momentum App](https://momentumdash.com/). By the end of the 6 weeks, we accomplished our goal [Check it out here](https://moto-toucans03.netlify.com/).

Here are a couple of skills that I picked up during my time with my cohort.

*Project Management*

- I learned how to coordinate schedules from people in different time zones.

- Used [Agile](https://medium.com/chingu/a-short-introduction-to-the-scrum-methodology-7a23431b9f17) development methodology to keep track of our progress and used a tool called Zen Hub that is integrated with GitHub.

- We created a user story in order to determine our most viable product(MVP).

- I learned how to do Code Reviews



*Git Skills*

- Learned how to merge git branches via terminal

- Learned how to create pull requests and how to use them to keep track of an issue


*Javascript Skills*

- Learned how to call an API using async/fetch

- Learned how to use ES6 modules

- Practiced [clean code](https://medium.com/mindorks/how-to-write-clean-code-lessons-learnt-from-the-clean-code-robert-c-martin-9ffc7aef870c) practice by creating meaningful variable names and using single responsibility rule for creating functions



*TLDR;*

I feel like I lucked out with my team members. They showed up and showed out. I learned how to work on a team, learned essential soft skills and improved my understanding of vanilla JavaScript. I can't wait to join another voyage. If you are interested in reading detail weekly accounts of this voyage checkout [Rafael's dev.to articles] (https://dev.to/rafaeldavish/blog-6-chingu-voyage-log-moto-is-alive-ngf) which links sprints 1 - 6 written by other members of the team.
لوحة تسجيل تفاعلية
Tags: codepen
Published: 2019-12-26 16:29:11

<p>هذه لوحة تسجيل دخول تفاعلية من باب التعلم والتطوير</p>

{% codepen https://codepen.io/antarsidgi/pen/bGNROZV %}
What is the z-index property in CSS and How is it Controlled?
Tags: css3, latestposts, css, html
Published: 2019-12-26 18:17:06

---
title: What is the z-index property in CSS and How is it Controlled?
published: true
date: 2019-12-26 16:13:40 UTC
tags: CSS3,Latest Posts,CSS,html
canonical_url: http://robdoylecreative.com/what-is-the-z-index-property-in-css-and-how-is-it-controlled/
---

The z-index is a stacking order property for an element. What does this mean exactly?. Well, think of it as something similar to using layers in Photoshop. The stacking order controls what element is positioned first, last or in between. With z-index, you could define the order of images, or place text over or an […]

The post [What is the z-index property in CSS and How is it Controlled?](http://robdoylecreative.com/what-is-the-z-index-property-in-css-and-how-is-it-controlled/) appeared first on [Rob Doyle Creative](http://robdoylecreative.com).
Ubuntu development
Tags: ubuntu, development
Published: 2020-01-02 06:59:41

---
title: Ubuntu development
published: true
date: 2019-12-10 00:00:00 UTC
tags: ubuntu, development
canonical_url: http://jamessessford.com/blog/ubuntu-development
---

After a few days, and a few more installs, I think I've got to a development environment I'm quite happy with.

It's essentially the same as the Windows environment with the addition of Nginx and Supervisor.

```
- VSCode for editing files
- Nginx to serve the application
- Supervisor to monitor php tasks
- MySQL and Redis running as background services
- Node running webpack or gulp
- Firefox to view the website
```

## Nginx

I chose Nginx as the web server in my stack as it's just as easy to configure it to serve PHP as it is to upstream a connection to a Node backend.

This has eased development by allowing me to have one less terminal open when working on a project.

I can also quickly switch between the front end of any of the projects I'm building as they'll all have a dedicated config file.

## Supervisor

Supervisor is a process control manager that monitors the status of it's running task and will automatically restart a task/process on error.

By using Supervisor to control these tasks, I've removed the need to have another couple of terminal panes open and also stopped myself from needing to start workers the project may rely on.

## Current state of happiness

Very happy. So far I haven't needed to boot back on to the Windows machine and I'm very much enjoying developing on Ubuntu.
Which software/app you recommend for designing web sites?
Tags: design, ui, ux, beginners
Published: 2019-12-26 16:06:00

Hi!

Recently started learning front end web technologies and I am curios which software/application you recommend for designing web sites?

I heard about Adobe XD, Sketch, Figma but not quite sure which one to pick...

Any suggestion, article or video on this topic would be very helpful.
How the Italian DeepSpeech model helped our Mozilla Italia community
Tags: mozilla, machinelearning, community
Published: 2020-03-09 11:16:25

---
title: How the Italian DeepSpeech model helped our Mozilla Italia community
published: true
date: 2019-12-26 15:41:40 UTC
tags: Mozilla, machinelearning, community
canonical_url: https://daniele.tech/2019/12/how-the-italian-deepspeech-model-helped-our-mozilla-italia-community/
---

A long story how Mozilla Italia promoted and got the Italian open source model for voice recognition.

The post [How the Italian DeepSpeech model helped our Mozilla Italia community](https://daniele.tech/2019/12/how-the-italian-deepspeech-model-helped-our-mozilla-italia-community/) appeared first on [Daniele Mte90 Scasciafratte](https://daniele.tech/eng).