teleren/devto huggingface dataset:
The EU Court of Justice invalidated the EU-US Data Protection Shield decision. Why is this important?

Tags: security, news
Published: 2020-08-03 20:15:49

Essentially, The Court is ***allowing third parties (in this case 'countries as a third party') to provide a contract with users that is supposed to afford the same protections as the GDPR but here in the US and other countries.***

## **Really?**

My interpretation of this new decision is that they are now creating a loophole to allow the "Terms of Agreement" to function as a "privacy shield". 

### Does this really sound like data protection? 

My experience with the terms of agreement is that users don't read them and website owners use the terms to hide protection for themselves. How will relaxing the privacy shield policy make a user's data more safe?

I think we're headed for trouble by turning over the power to create individual, contractural agreements for users that come from website owners (whether they are tech giants or small businesses).

### **The good, the bad and the sleazy**
Generally, I believe most websites will try their best to comply with GDPR and provide their users with the information they need regarding the transfer of their data.

It's also possible that some websites won't know what they are supposed to do; or how to provide the necessary information to their users. This begs the question: Should service providers rely on the site owners to comply or are they ultimately responsible?

And I also believe there are those companies that will throw in some legal gymnastics into the "terms" and then we will be right back where we started before GDPR.

### **This is only an opinion**
There is a lot of room for interpretation of this decision and how it will affect users in the future. My hope is that, those of us in the software development community will see this as a potential red flag. We ultimately represent the users - especially those users who don't know they have rights regarding their data; or how to protect their data even when notified through a 'terms of agreement contract'.

[Here is a link to the EU court's decision](https://curia.europa.eu/jcms/upload/docs/application/pdf/2020-07/cp200091en.pdf)
Use Telegram Bot for staying in touch with your Javascript apps health
Tags: npm, javascript, webdev, showdev
Published: 2020-08-03 20:10:45

**👋 Hi there!**

# Prehistory

A few days ago in the evening, my team leader wrote to me that he found that a new feature that I added to our application was causing an error. And then I thought I needed a way to stay in touch with all critical errors.

At that moment I got an idea: make a npm package for integrating projects existing log service with telegram bot and log everything I need to know.

And here you may have questions:

**- Why not to use one of existing cool packages for creating telegram bots and just send log messages?**

*- Because all of existing packages for creating telegram bots are overwhelmed for this usecase. For this task enough just one function for sending messages to chat*

**- Why do I need another one npm package?**

*- The answer is simple: I wanted to learn how to create and publish my own packages*

# And here we are: I present my first npm package ever, called **[node-telegram-log](https://www.npmjs.com/package/node-telegram-log)**

{% github joeberetta/node-telegram-logger %}

## How to use
* First of all create bot. You can read [this article](https://core.telegram.org/bots) if you don't know how;

* After you have finished setting up your bot, we can move on
``` bash
npm install node-telegram-log # Install as project dependency
```

* Let's log it!
``` javascript
const { TelegramLogger } = require('node-telegram-log');

const BOT_TOKEN_ID = 'YOUR BOT TOKEN' // Got it in previous step
const CHAT_ID = 1234 // Feel free to use https://t.me/myidbot

const logger = new TelegramLogger(BOT_TOKEN_ID, CHAT_ID);

// Some logic here...

logger.log('Hooray! It works');

// Notify a colleague about a problem
// Note: @mentions work only if part of message starts with @username
logger.error('@joeberetta', 'Something went wrong:', { formatted: true });
```

# At last

**Interesting fact:** when I published this package I found that [similar one](https://www.npmjs.com/package/node-telegram-logger) exists already!

Feel free to use it (or just Ctrl+C/V it from repo 😁😁😁) and contact me if you have any questions, ideas or issues.

Thanks to @ispoljari for his cool and motivational post: {% post ispoljari/i-just-created-my-first-npm-package-it-ain-t-much-but-it-s-honest-work-5h94 %}

Thanks for reading this post 🙏
A pinball emulator that runs in your browser
Tags: javascript, emulator, art, showdev
Published: 2020-08-03 19:54:34

I wrote a Williams/Bally pinball emulator that runs in your browser (https://playfield.dev/) and in your shell.
I started to create art prints - this is the pitch:

# Reveal the hidden beauty

"Concealed Art" uses retro game consoles, pinball machines and arcade machines as data source and visualize the machines inner working, uncovering beautiful and unexpected patterns which were hidden to the world until now.

Games that were written 30 years ago are used as a source to build a new, interesting representation.

Make sure to check out https://concealed-art.com/ and let me know what you think!
10x CSS
Tags: css
Published: 2020-08-03 19:41:55

This post is just a collection of some CSS tricks and magic I've learned about over the last couple months.

# `background-repeat: space|round` 

When you have tiles-type background and you don't a tile to be cut-off.

Source: [CSS-Tricks](https://css-tricks.com/almanac/properties/b/background-repeat/).

# `scroll-margin-top`

Having sticky header (or nav) is pretty common UI pattern. But it's a bit tricky when your app also has anchor links (`https://....#section`) that users use to navigate between page sections. Header will likely overlay part of the section that user navigated to. `scroll-margin-top` will help with this.

Source: [Bram.us](https://www.bram.us/2020/03/01/prevent-content-from-being-hidden-underneath-a-fixed-header-by-using-scroll-margin-top/)

# `resize: both`

It's not really surprising you can use `resize: ...` to define how users can resize the `textarea` (it's the little handle in the bottom right corner). But what I think is pretty cool about it is you can use it elsewhere - for example on `iframe` - which I personally found very useful when testing responsiveness on certain elements.

Source: [Bram.us](https://www.bram.us/2020/05/15/css-only-resizable-elements/)

# `place-items`

Nifty shorthand for two properties.

```css
place-items: center;
/* ...instead of: */
align-items: center;
justify-items: center;
```

Source: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/place-items)

# `inset`

Another shorthand:

```css
inset: 10px 20px 30px 40px;
/* ...instead of: */
top: 10px;
right: 20px;
bottom: 30px;
left: 40px;
```

It has similar syntax to `margin` or `padding`, so you can also use it like this:

```css
inset: 10px 20px;
/* ...instead of: */
top: 10px;
right: 20px;
bottom: 10px;
left: 20px;
```

Source: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/inset)

# `user-select: all`

Not crazy useful but it's a nice proof of concept. You can use a `user-select: all` trick to select, for example, a code snippet on click.

Source: [Coder's Block](https://codersblock.com/blog/using-css-to-control-text-selection/) (there's actually much more info about this property in general)

# `-webkit-fill-available`

If you have ever tried to use `vh` units you probably know how "tricky" things get on mobile, especially webkit-based browsers. Below is a really nice trick to make things more predictable.

{% tweet 1254151507412496384 %}

# `counter-*`

I have no idea if this could be any useful but I thought it's interesting 😂.

{%tweet 1258283004465680384 %}

# `gap`

One of the best things about CSS `grid` is `grid-gap`. It's something I've been missing on flexbox but looks like it's coming: `gap` will be universal property that can work on both - `grid` AND `flexbox`. Browser support is pretty poor as of today but... Hey! It's coming!

- Source: [MDN](https://developer.mozilla.org/pl/docs/Web/CSS/gap)
- Browser support: [Can I use...](https://caniuse.com/#search=gap)
Using Flexbox and text ellipsis together
Tags: css, flexbox
Published: 2020-08-03 18:49:13

---
title: Using Flexbox and text ellipsis together
published: true
description: 
tags: css, flexbox
//cover_image: https://direct_url_to_image.jpg
---

Another day I was asked to build a table containing a list of files uploaded by the users. Imagine a table similar to the list of files in Finder:

![Finder](https://leonardofaria.net/wp-content/uploads/2020/07/finder.jpg)

The second item of the table is `mobile-phone-screenshot-long-fine-name.png`, however the column is not big enough to show the complete filename. Instead, we see `mobile-phone-sc...g-fine-name.png`. In this project, we decided to cut part of the end of the filename and keeping the extension, as shown above: 

![Finder](https://leonardofaria.net/wp-content/uploads/2020/07/filename.gif)

### HTML markup:

```html
<div class="filename">
  <span class="filename__base">this-file-has-a-really-really-really-long-filename.</span>
  <span class="filename__extension">pdf</span>
</div>
```

### CSS: 

```css
.filename {
  display: flex;
  min-width: 0;
}

.filename__base {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.filename__extension {
  flex-shrink: 0;
}
```

The ellipsis effect can be done by combining `text-overflow`, `white-space` and `overflow` properties, however, we still need to figure out the relation between the filename base and its parent, which also contains the file extension. 

The trick is using the property `min-width`, as covered in this pen by [AJ Foster](https://codepen.io/aj-foster/pen/emBYPW) and [CSS Tricks](https://css-tricks.com/flexbox-truncated-text/). From the [Flexbox spec](https://drafts.csswg.org/css-flexbox/#min-size-auto):

> Note: The auto keyword, representing an automatic minimum size, is the new initial value of the min-width and min-height properties. The keyword was previously defined in this specification, but is now defined in the CSS Sizing module.
>
> ...
>
> In general, the content-based minimum size of a **flex item is the smaller of its content size** suggestion and its specified size suggestion. 

By using `min-width: 0`, we are changing the minimum size of the flexbox container, which will resize the child elements of the container that don't use the `flex-shrink` attribute. Since the filename base element has the `text-overflow`, `white-space` and `overflow` properties, the ellipsis will be rendered properly.

The full example is available in [this Codepen](https://codepen.io/leonardofaria/pen/rNxZJad):

{% codepen https://codepen.io/leonardofaria/pen/rNxZJad %}

--

Also posted on [my blog](https://bit.ly/2E32HP9). If you like this content, follow me on [Twitter](https://twitter.com/leozera) and [GitHub](https://github.com/leonardofaria).
Where to start...
Tags: react, javascript, html, codenewbie
Published: 2020-08-03 18:43:19

Hey Guys!


I have been following this website for a long time along with many tutorials I have been doing on Udemy etc.

I have come across a problem where I think I still have not learnt enough tutorial to tutorial, blog post to blog post it is like the tech is changing so much that I am one step behind always.

Could you guys recommend a step to step guide on how to become a frontend developer using ReactJS?

I find myself to be always getting on a path but its out dated because newer and "easier" replacements have become more popular so I get thrown off on my progress and feel like I have learnt nothing.

One thing I am struggling with the most is state management (redux or contextApi), styling (vanilla css, bootstrap, material UI...) What is the stacks which are industry standard to learn as a base...

Any help would be great! help a newbie find a path..
Oh a jelly button & a css hack
Tags: showdev, javascript, css, webdev
Published: 2020-08-03 18:39:56

Just wanting to show you all a ccs hack.
It use the combinaison of blur & contrast. You should wirte something like that : 
```SCSS
.container{
  filter: contrast(20);
  background:white;
  .content1,.content2{
    filter:blur(0.5em);
    background:black;
  }
}
```
This will make the components a bit like sticky when they move close to each other. You can use it to make some nice loaders, or like that some button : 
{% codepen https://codepen.io/JeremyMonatte/pen/qBEqMZG %}
Help needed
Tags: react
Published: 2020-08-03 18:39:50

Hi, I've been struggling with a question on Material UI React for a while, could you guys please help me?
Here's the stackoverflow post: https://stackoverflow.com/questions/63198613/how-do-i-make-a-material-ui-dropzone-area-not-allow-duplicates
If you don't know the answer i'd appreciate if you could upvote/comment so it gets more attention.

I've offered a bounty of 50 to anyone who solves it
Day 18: The vacation
Tags: 100daysofcode, html, css
Published: 2020-08-03 18:35:07

Took a vacation today, and my destination was the frontend Mentor page. A little design implementation wouldn't hurt for a break. I was on a mission to completely avoid JavaScript, and i did. (Explains why the carousel is missing)

Check out the challenge on [frontEnd mentor] (https://www.frontendmentor.io/challenges/coding-bootcamp-testimonials-slider-4FNyLA8JL)

Here's my implementation
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rzkty0hk6k5g74kyfbmh.png)

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


_It was a lovely but short vacation!_🤗
_Day 18_
Question - knowledge of which non-programming technology give me a boost in job market?
Published: 2020-08-03 18:33:30

Hello everyone! Im wondering which non stricte programming technology is really usefull to find a good job. In term non-programming technology i mean things that developers use in their work but isn`t programming language or framework. I already know Git pretty well, and know basics (101) of Docker. Things like that are really usefull on finding job (everyone developer use git, its not depending on your programming language) and im curious if there are more of them. Thanks in advance!
Building Browser version of mmhmm
Tags: threejs, mmhmm, webservice, webrtc
Published: 2020-08-03 18:25:00

---
title: Building Browser version of mmhmm
published: true
description: 
tags: ThreeJs, mmhmm, webservice, webrtc
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ky04lh40o1p1ubdlckq3.png
---

We're building browser based presentation tool called "Virtual Studio". 

https://virtual--studio.com/

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

The product allows you to present any contents on your desktop alongside with your video as well.

[Check the video to see how it works!](https://youtu.be/K3XAf8_X0f4)

Virtual Studio is compatible with Snap Camera, and works on Chrome and Safari so far.

Virtual Studio is currently alpha version and will be added more & more useful/fun functions!

It would be super appreciated if you give it a try, and let us know any questions and/or requests.

Cheers,

Virtual Studio team
How many projects can one person run?
Published: 2020-08-03 18:19:31

---
title: How many projects can one person run?
published: true
description: 
tags: 
//cover_image: ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6y60gpe5716mha8qrf7x.png)
---
I created an all in one university and college application system.
Then it was a big challenge signing up institution. They seem not to understand the whole concept of helping prospective applicants being able to apply to more than one college with just a click. 

I have been thinking of giving up, then I feel, i can still make it work and it can be the next big school application system for Africa.

While it stalled, I developed a dating website. 
I launched, after a month os 25 users, i pulled it down, I was using a free domain and hosted it on vultr... 
The sad thing was, i missed the payment when i was deployed in the bush for military recap course. So vulture deleted my server and my data without backing it up. 
I lost much time and I have felt lazy to get my dating site up again.

My Macbook charger broke and had no PC for two months. I was trying to organise funds to get a new charger... Here in my country, Macbook original chargers from Apple store cost a fortune, those from small local stores are typical Chinese (not original), they don't last long.
So, I lost valuable time. And if you are used to coding, then you find yourself with no computer, its almost like getting a toothache... 
I resorted to doing morning and evening runs, while i sourced for funds.
A friend from Canada brought me a new charger and I excitedly got back to coding.
Its two months now, am thinking of either getting back my dating site online. 
I forgot to mention that I also lost my domain name to goddady, and they have raised the price * 10 to get it back.

Anyway, am hoping no one buys the domain, and they release it so that i get get it again.

Right now, build https://weblister.co just to keep myself busy as I try to come up with a more viable project.

Tell me what you think if this article.
CLUSTER MULTI THREADED NODEJS -- Run threads in parallel to speed up long processes
Tags: javascript, node
Published: 2020-08-03 18:17:32

---
title: CLUSTER MULTI THREADED NODEJS -- Run threads in parallel to speed up long processes
published: true
description: 
tags: javascript, node
---

My JavaScript that creates thumbnails for hundreds of files is taking too long. So I have decided to speed things up with `cluster.fork()` that is built into Node.js. This will allow the workload to be spread out across my multi-core processor system.

⚠ `8:53` should read: `index % forks === cluster.worker.id - 1`

To follow along, you can fork this repository. I have added a tag you can check out that will bring you right to the point this video was created.


```
git checkout https://github.com/joelnet/mojo-gallery.git
cd mojo-gallery
git checkout youtube-video-cluster
```

Be sure to [subscribe](https://www.youtube.com/c/JoelCodes?sub_confirmation=1) for more videos like this!

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xb6e84yj8yc2gqelz4op.png)](https://www.youtube.com/c/JoelCodes?sub_confirmation=1)
What are your favorite npm packages?
Tags: webdev, discuss, node, npm
Published: 2020-08-03 17:59:39

---
title: What are your favorite npm packages?
published: true
description: 
tags: webdev, discuss, node, npm
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--TDxjmZRC--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://res.cloudinary.com/practicaldev/image/fetch/s--YhYF2XRD--/c_imagga_scale%2Cf_auto%2Cfl_progressive%2Ch_420%2Cq_auto%2Cw_1000/https://dev-to-uploads.s3.amazonaws.com/i/8gnnk4yife6udz5a4gvl.png
---
Let's share some of the most loved npm packages you use for the majority of projects. Consider both client and server-side. For me those would be:

Frontend - [react](https://www.npmjs.com/package/react), [react-dom](https://www.npmjs.com/package/react-dom), [react-router-dom](https://www.npmjs.com/package/react-router-dom), [antd](https://www.npmjs.com/package/antd), [styled-components](https://www.npmjs.com/package/styled-components), [axios](https://www.npmjs.com/package/axios), [moment](https://www.npmjs.com/package/moment), [validator](https://www.npmjs.com/package/validator).
Backend - [express](https://www.npmjs.com/package/express), [mongoose](https://www.npmjs.com/package/mongoose), [CORS](https://www.npmjs.com/package/cors), [body-parser](https://www.npmjs.com/package/body-parser), [dotenv](https://www.npmjs.com/package/dotenv), [uuid](https://www.npmjs.com/package/uuid), [nodemon](https://www.npmjs.com/package/nodemon), [concurrently](https://www.npmjs.com/package/concurrently), [morgan](https://www.npmjs.com/package/morgan), [ejs](https://www.npmjs.com/package/ejs), [helmet](https://www.npmjs.com/package/helmet), [bcrypt](https://www.npmjs.com/package/bcrypt), [jsonwebtoken](https://www.npmjs.com/package/jsonwebtoken), [nodemailer](https://www.npmjs.com/package/nodemailer).

What are some of your favorite npm packages?
What is a PWA? Advantages & disadvantages of PWA - Should you build a PWA? [ Podcast ]
Tags: podcast, javascript, webdev, codenewbie
Published: 2020-08-03 17:58:26

Hey there!

New podcast episode out!
{% spotify spotify:episode:2VsbwfhzCV8SXBOOvvhQM2 %}

Hope you find it helpful. 

{% user developertharun %}
How To Build a Full Stack Clojure Project
Tags: clojure, react, tutorial, functional
Published: 2020-08-03 17:44:27

This is a video series that covers building a simple full stack CRUD application with clojure and clojurescript.

# What you will learn

The main focus here is the language of clojure itself, and the libraries used isn't as important. There is a small assumption that you are already a javascript/react developer and so some technologies have been chosen should be familiar, like the usage of VS Code instead of emacs. This is also the reason why helix was chosen instead of something more popular like reagent, because if you already know modern React, I didn't want that knowledge to be thrown away. If you don't know modern react however, it shouldn't be difficult to follow along.

## Reitit Ring Set Up

{% youtube R5YZRfABbWY %}

- Manage dependencies with [ deps.edn ](https://clojure.org/guides/deps_and_cli)
- Set up a [ ring ](https://github.com/ring-clojure/ring) server with [ http-kit ](http://http-kit.github.io/) and [ reitit ](https://cljdoc.org/d/metosin/reitit/0.5.5/doc/introduction)
- Add middlewares and test routes

## Database Configuration

{% youtube 2_Pd6QeFqYs %}

- Use [hugsql](https://www.hugsql.org/) to connect to a postgresql database
- Write SQL to generate CRUD functions

## API endpoints

{% youtube dMB-EWpR_Cw %}

- Create api routes and endpoints for each of the CRUD operations

## Front End Preparation

{% youtube Jf94HNmCXyU %}

- Set up [shadow-cljs](http://shadow-cljs.org/) for front end dev server and dependencies
- Use [Helix](https://github.com/Lokeh/helix) to add React to our front end
- Add [Taliwind CSS](https://tailwindcss.com/) for styling and theming
- Connect to the backend api we've built

## React Components

{% youtube PDtv-CL0XeI %}

- Create react components by using the helix library

## State Management

{% youtube PRDP5ba8lPU %}

- Set up a redux style state management system using react context
- Introduction to clojure multimethods

## Final Integration

{% youtube p8d9VtrdZ7Y %}

- Integrating our state management with api requests
- A little bit of styling with tailwind css


## Follow and support me
- [YouTube](https://www.youtube.com/c/kelvinmai)
- [Twitter](https://twitter.com/kelvinmai)