teleren/devto huggingface dataset:
React 17 version release
Tags: react, reactnative, webdev, javascript
Published: 2020-08-12 10:58:02

**Version 17 of ReactJS is out.** This release brings no new features, but also no depreciated methods either. The goal was to make sure that bugs are fixed, and the future path for upgrading react is easier.

I've done a quick summary video covering the important items below, but if you want a more in-depth changelog, you can take a look at the official blog post on the reactjs website:
https://reactjs.org/blog/2020/08/10/react-v17-rc.html

{% youtube ZLXYhmgbMBo %}
<center>[Youtube: React 17 Release ](https://youtu.be/ZLXYhmgbMBo)</center>

Summary of what to expect:
* No new features
* No deprecated methods
* New event listener (no longer on documents, but on root elements)
* Easier to run different versions of react at the same time
* Easier to put react inside jquery apps, or visa versa
* useEffects cleanup function runs asynchronously, requires slightly different syntax
* Better error handling (in production)
* Removing Private Exports (effecting react-native for the web)

For the full information of changes, check out the changelog or the official blog:
https://reactjs.org/blog/2020/08/10/react-v17-rc.html

## Follow and support me: 
Special thanks if you subscribe to my channel :)
* [🎞️ Youtube](https://www.youtube.com/channel/UCvM5YYWwfLwpcQgbRr68JLQ?sub_confirmation=1)
* [🐦 Twitter](https://twitter.com/adrian_twarog)

## Want to see more:
I will try to post new great content every day. Here are the latest items:
* [Adobe XD to Fully Responsive WordPress Site](https://dev.to/adriantwarog/adobe-xd-to-fully-responsive-wordpress-site-16e0)
* [Adobe XD to HTML Full Process](https://dev.to/adriantwarog/adobe-xd-to-html-full-process-ao6)
* [Full Tutorial on how to use SASS to improve your CSS](https://dev.to/adriantwarog/full-tutorial-on-how-to-use-sass-to-improve-your-css-57on)
* [Creating a Mobile Design and Developing it](https://dev.to/adriantwarog/creating-a-mobile-design-and-developing-it-5c4o)
Daily Developer Jokes - Wednesday, Aug 12, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-08-12 12:00:03

---
title: "Daily Developer Jokes - Wednesday, Aug 12, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Wednesday%2C%20Aug%2012%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12590f4ba3c.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ What do you call a computer that sings?

___A:___ A-dell.
 -->
SPA vs server-side SSR vs isomorphic SSR; and can I change my mind later?
Tags: discuss, webdev, node, ssr
Published: 2020-08-12 11:58:21

SPA and isomorphic SSR are usually in JavaScript. ([PHP and Java seems to have alternative JavaScript environment.](https://ssr.vuejs.org/guide/non-node.html) And WASM shouldn't be impossible.)

**What are your experience over the years of what to choose for web apps?** Web technologies change quickly, I know.

First, I was looking at Nuxt.js (which full static is very recent) and Quasar.js (which does not support multiple page building anymore, only SSR). And of course I know Next.js is still a big player in this.

Upon searching, I find that isomorphic SSR is still in active development, e.g. [Marko](https://dev.to/ryansolid/i-m-joining-the-markojs-core-team-2fc1).

Also, I realized that even not-frequently-changing SPA can be cached on the server, (in contrast to prerender SPA plugin).
How to call API from Axios in Vuex store. 💾
Tags: vue, tutorial, axios, api
Published: 2020-08-12 11:56:42

Hi Dev Friends! 🤠

In **this.tutorial** i will show you in which mode you can use Axios with Vuex, and call it on you file.Vue.

##STEP ONE:
**First of all you can add Vuex on your project:**

0️⃣) I suggest you to add this, during the installation of Vue.cli, via "manual installation":

```javascript
vue create project
```

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

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

####After this you need to install Axios:

```javascript
npm install --save axios vue-axios
```

####Import Axios on your store -> index.js

```javascript
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(Vuex)
Vue.use(VueAxios, axios)
```

##STEP TWO:
**And now let's create👩‍💻:**

#####1️⃣)Determinate your items.

```javascript
export default new Vuex.Store({
  state: {
        items: [],
    },
```

#####2️⃣)Your getter:
```javascript
    getters: {
        items: state => {
            return state.items;
        }
    },
```

#####3️⃣)Mutation of your items
```javascript
    mutations: {
        SET_Item (state, items) {
            state.items = items
        }
    },
```

#####4️⃣)Action for call your API on you file.Vue
```javascript
    actions: {
        loadItems ({ commit }) {
            axios
                .get('Your API link', {
                    headers: {
                        'Ocp-Apim-Subscription-Key': 'your key',
                    }
                })
                .then(response => response.data)
                .then(items => {
                    console.log(items);
                commit('SET_Items', items)
            })
        }
    },
});
```
##STEP THREE:

Now it's time to call your "items" on your file.Vue:

#####1️⃣)Import you mapState from vex:
```javascript
   <script>

import { mapState } from 'vuex';

```

#####2️⃣) With mounted you can stamp your API, and use "dispatch" method to call the "action" (the difference with mutations is you can use "mounted" method).

```javascript

    mounted () {
        this.$store.dispatch('loadItems')
    },
```

#####3️⃣)Add mapState on your computed:
```javascript

     computed: mapState([
        'items'
    ]),

</script>
```

#####4️⃣)Compile you template with your API.
```html
<template>
  <div class="my-items">
    <div v-for="item in items" :key="items.id">
       // Your v-for...
    </div>
 </div>
</template>
```

Hope I help you!
🙋‍♂️
Useful debugging tools
Tags: debugging, javascript, php, laravel
Published: 2020-08-12 08:47:32

<b>For JS</b>
At work we use a debugging messages which only appear in the dev ENV, defined in your .env file. At some point I will update this post to say how this is done. It is invoked like this: 

lsdebug:
```lsError({lsModule: this, message: ‘No .added element in the found the root tags element’, data: {cake: 'asd'}})```
Outputs the data as an array rather than concatenating like you do in console.log()

console.log('comment', data)


<b>For PHP/Laravel</b>
Telescope Laravel Plugin
`var_dump()` -> dumps the PHP out to the top of your browser
`dd()`
`ddd()`

To view the eloquent commands as sql
DB::enableQueryLog();
DB::getQueryLog();
E.g: 
DB::enableQueryLog();

$user = DB::table("users")->get();

$query = DB::getQueryLog();

$query = end($query);

dd($query);

<b>For processes taking a long time in MYSQL</b>
Prepend the mysql command with EXPLAIN. The rows column shows you can many rows the command has to search through to find the result. If the number of rows is large then you may need to add an index to the appropriate column to reduce this search.
Throttle and Debounce in React
Tags: react, javascript, throttle, debounce
Published: 2020-08-12 11:52:25

Inspired by this post, 
{% post /otamnitram/throttling-and-debouncing-avoiding-unnecessary-api-calls-2god %}
I wanted to try these two concepts out in React.

Here's the code:
{% codesandbox h68c0 view=split %}
Fun Audio Processing using Python on Colab
Tags: python, beginners
Published: 2020-08-12 11:40:05

This is a part of the code i used for "Simple Disco Jockey" lightning talk in EuroPython 2020. 

The code uses a Python package- [Librosa](https://pypi.org/project/librosa/)
####The Google Colab Notebook [here](https://colab.research.google.com/drive/1is-uPUrVuYn5Scyl5oL7w2J02y914q1m?usp=sharing) can be run online. You can create a copy for yourself and work on any music. I have tested for .mp3 and .wav files.

######If music files are missing. Sign in and upload any music files using folder button on the left pane. Click on run/play symbol sequentially from first to last.

In the below image
* 1. Sample music file
* 2. File with slower tempo
* 3. File with faster tempo
* 4. File with clicks added
![Alt Text1](https://dev-to-uploads.s3.amazonaws.com/i/wpqy6hbs64rhmwvjl0lh.PNG)

####_Let us party! A song!_
In the below image
* 1. Song
* 2. Song with clicks
![Alt Text2](https://dev-to-uploads.s3.amazonaws.com/i/l6cvuuy1ao12ndsx4dk2.PNG)

_**Thanks!**_
Web Testing Just Got Easier Thanks to Comparium
Tags: testing, webdev, design
Published: 2020-08-12 11:36:33

With cross-browser testing becoming a must for every developer out there, more and more tools that make the entire process easier and faster started to appear. <a href="https://comparium.app/">Comparium</a> is one of the new shining stars in this field, a complete tool that makes web testing a lot easier and smooth. 

<b>Live Testing Tool</b>

Compared to other tools in its category, Comparium is a live testing tool that gives you the possibility to test on real systems with real browsers for 100% accurate results. Nothing is simulated or emulated, you get a tool that enables you to interact with the sites you test in real-time through a developed remote infrastructure. While the live testing tool is only available for desktop, you will get amazing results using it for your sites.

<b>Get Support For Various Versions of Web Browsers</b>

With Comparium, not only that you will get support for all the web browsers your visitors may use, but you also get access to various versions of them. Most testing tools give you support for the latest version of Chrome, Mozilla, Opera, Safari, or Internet Explorer. However, the developers of these tools forget that not all users upgrade their browsers when prompted to. So, even though we’re not talking about a great portion of your traffic, you’re in danger of your website not to display properly on older versions. Comparium allows you to perform visual compatibility tests across all thee versions of browsers. 

<b>Easily Compare Everything Through Screenshots</b>

This automated cross-browser testing tool makes the entire process smoother by detecting any incompatibilities and taking screenshots of the issues so you can take a closer look at what’s wrong. You have a wide range of comparison settings to choose from so you always get the best error detection modes possible. Not only that the app takes screenshots, but you will also be able to caption and edit them, share the screenshots directly from the app, schedule tests, and even simulate a low-speed connection in future versions.
What strategies do you use to achieve deep focus in your work?
Tags: deepwork, focus, distractionfree, concentration
Published: 2020-08-12 11:25:24

Sinking deep into a flow-state of intense focus has always been hard to do but now more than ever.

So what are **your** favourite ways of achieving deep focus?

If you’re like me, the slightest interruption can have a really negative effect on my work. 

This is especially true if I am working out a tricky programming problem.  If the phone rings my focus goes immediately and it can take a [long time to get it back](https://www.informatics.uci.edu/ozy-what-if-designers-took-a-hippocratic-oath-mark-cited/).

Not ones to sit by, my pal Peter and I decided to try to tackle the problem one step at a time.

We identified that in our own lives the constant attraction of inbound messages (email and IM) was the biggest source of distraction for us.  Even without a notification to say there is actually a new message in the inbox, we find ourselves checking ‘just in case’.  

I have learned that this is like playing a slot machine: [Utterly addictive](https://www.theguardian.com/technology/2008/aug/28/email.addiction).

As we all know, gambling should be enjoyed responsibly.  It turns out I have a major dopamine drug addiction that’s gonna take some serious rehab to fix. [Think Elton 1990](https://fherehab.com/news/how-elton-john-found-long-term-recovery-from-cocaine/).

I need help because [constantly checking your email increases stress](https://news.uci.edu/2012/05/07/email-vacations-decrease-stress-increase-concentration/).

So far I have tried setting all notifications to off on my phone and time boxing email correspondence to the first and last hours of my working day.

However, these methods can only go so far. What I found is that the quality of the conversation makes a big difference too.  Conversations in instant message and email are often slow, off-topic and hard to follow.  This is particularly true if they are conversations between three or more people.

My hypothesis is as follows: If new features could make conversations online better quality, that will reduce the total amount of messages sent and time spent sending them.  

This approach favours the popular sayings: ‘less is more’ and ‘quality over quantity’ .

With this in mind, Peter and I are working on a replacement for email and instant messaging called [Plum Mail](https://plummail.co/). 

Plum Mail’s objective is to improve the quality of your conversations online with features that are not currently possible in email or available in instant messaging.

In addition, Plum Mail has settings that ruthlessly defend your focus. We’re talking inbox delays, group chat messaging limits, zero notifications by default, a complete lack of user status (active, away etc) and read receipts.

We think Plum Mail has the potential to help you protect your focus.  But, we’d love to know more about how you think about your focus and ability to do deep work.

Can you share your favourite ways of achieving deep focus?
Closing The Loop On Event Data Collection With Iteratively - Episode 145
Published: 2020-08-12 11:24:39

<p>Event based data is a rich source of information for analytics, unless none of the event structures are consistent. The team at Iteratively are building a platform to manage the end to end flow of collaboration around what events are needed, how to structure the attributes, and how they are captured. In this episode founders Patrick Thompson and Ondrej Hrebicek discuss the problems that they have experienced as a result of inconsistent event schemas, how the Iteratively platform integrates the definition, development, and delivery of event data, and the benefits of elevating the visibility of event data collection for improving the effectiveness of the resulting analytics. If you are struggling with inconsistent implementations of event data capture, lack of clarity on what attributes are needed, and how it is being used then this is definitely a conversation worth following.</p><p><a href='https://www.dataengineeringpodcast.com/iteratively-event-data-collection-episode-145/'>Listen Now!</a></p>
Growing Dask To Make Scaling Python Data Science Easier At Coiled
Published: 2020-08-12 11:23:20

<p>Python is a leading choice for data science due to the immense number of libraries and frameworks readily available to support it, but it is still difficult to scale. Dask is a framework designed to transparently run your data analysis across multiple CPU cores and multiple servers. Using Dask lifts a limitation for scaling your analytical workloads, but brings with it the complexity of server administration, deployment, and security. In this episode Matthew Rocklin and Hugo Bowne-Anderson discuss their recently formed company Coiled and how they are working to make use and maintenance of Dask in production. The share the goals for the business, their approach to building a profitable company based on open source, and the difficulties they face while growing a new team during a global pandemic.</p><p><a href='https://www.pythonpodcast.com/coiled-dask-python-data-science-episode-275/'>Listen Now!</a></p>
Using Ruby expertise to facilitate a fast media portal launch
Published: 2020-08-12 11:18:03

Media is a tricky industry. It is very difficult for media sites to make money solely from ads, so the most popular solution is to turn the site into a portal that meets a variety of user needs.

In 2008, we developed a universal, versatile Ruby on Rails engine that helps us quickly launch [media portals](https://evrone.com/media) and build content delivery network solutions. It was used to implement klops.ru, the largest media outlet in Kaliningrad, and later it was used in news and media production for web and on other client projects. One of which was 420on.cz, the largest informational Russian-language portal in the Czech Republic.

[Learn more about the development of the largest Russian-language portal in the Czech Republic](https://evrone.com/420on)
What is a Kubernetes Cluster
Tags: kubernetes, learning
Published: 2020-08-12 11:12:04

A Kubernetes cluster is a group of machines that are connected to each other to work as a single block.

A Kubernetes cluster consists of two resources.
1. The Control Plane
2. The Nodes

The control plane and the nodes communicate with each other through the [Kubernetes API](https://kubernetes.io/docs/concepts/overview/kubernetes-api/).

## The Control Plane
The control plane is responsible for managing our cluster. It can be deployments, scaling etc.

## The Nodes
A node works as a machine within a Kubernetes cluster. A node runs an application, and it handles container operations through Docker. A node can be either a virtual machine or a physical computer.
Wednesday Links - Edition 2020-08-12
Tags: java, spring, microservices, architecture
Published: 2020-08-12 11:02:07

Micro optimizations in Java. String.equals() ( 5 min read ) ↔️
https://medium.com/javarevisited/micro-optimizations-in-java-string-equals-22be19fd8416

Micro optimizations in Java. String.equalsIgnoreCase() ( 4 min read ) 🔛
https://medium.com/javarevisited/micro-optimizations-in-java-string-equalsignorecase-ea25dfb03f95

Hooking Into the Spring Bean Lifecycle ( 8 min read ) ☕
https://reflectoring.io/spring-bean-lifecycle/

vmlens, unit-testing multi-threaded applications on the JVM ( 1 min read ) 🔬
https://vmlens.com/

Dependency Watch - Script to wait for an artifact to appear on Maven Central ( 2 min read ) 🗼
https://github.com/JakeWharton/dependency-watch

Extending JUnit 5 ( 4 min read ) 🧩
https://www.mscharhag.com/java/junit5-custom-extensions

IntelliJ 2020.2 support for groovy (20-sec read ) 🥥
https://twitter.com/MGrzejszczak/status/1292848597340430338

Patterns of Distributed Systems ( 13 min read ) 🌌
https://martinfowler.com/articles/patterns-of-distributed-systems/

High-Water Mark ( 6 min read ) 🌊
https://martinfowler.com/articles/patterns-of-distributed-systems/high-watermark.html

Introducing Configuration caching in Gradle ( 8 min read ) ⚙️
https://blog.gradle.org/introducing-configuration-caching
colaprete with me to clone notion.so app.
Published: 2020-08-12 10:57:14

# i'm new to the web stack and I'm here to find some help to learn faster.
## now I'm taking django and react courses in order to make simple full stack apps. So, if you like to learn how to create apps like exelces and notion.so and evernote or if you like to teach and share please fork my repo.
https://github.com/aliplutus/Learning-webstack-from-cloning-notion.so
WordPress Web Development Services
Tags: wordpress, plugindevelopment
Published: 2020-08-12 09:32:04

With WordPress taking over the development market like a storm, most people are now shifting their website on WordPress. And when it comes to WordPress, we’re one of the best WordPress development London service. Over the past few years, we’ve worked with a lot of clients and have perfected the art of creating mesmerizing and fast WordPress websites. From E-commerce stores to Blogs, Industrial to Entertainment agency websites, we’ve worked with clients from all niches. Our expert and highly creative designers are really good at determining what kind of vibe the design is giving and plan the design for a website accordingly.
Click below to follow the link
https://maxenius.com/services/website-developement/wordpress/
Add me to Search
Published: 2020-08-12 09:30:54

Hey everyone!
Hope you all are doing well!
Today I found something very interesting. Google has launched "Virtual Cards"
Google’s new ‘people cards’ allow individuals to link to their website, social profiles, and other relevant pages all from one place.
You can make one of yours. Just follow these simple steps.
1. Search your name on Google or just search "add me to search"
2. Click on get started.
3. Fill the details.
4. Preview and save.
And you are done!
Search your name and you will find your "people card".
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vnpfd6f6s0y8molhdu32.jpeg)
Make a Material table header fix
Tags: angular, material, javascript, header
Published: 2020-08-12 09:30:12

If you see the below code, you'll find out that I've removed the data rows from the first table and header row from the second table. and then added a `tableHeader` and `tableData` ids to both table.

```HTML
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" id="tableHeader">
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
  </ng-container>

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
  </ng-container>

  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef> Weight </th>
  </ng-container>

  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef> Symbol </th>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
</table>

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" id="tableData">

  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef> Weight </th>
    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
  </ng-container>

  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef> Symbol </th>
    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
```
Now, we'll get the width of each column from the second table and reflect them in the first to fix the header.

```JavaScript
const headerTable = document.querySelector("#tableHeader")
const dataTable = document.querySelector("#tableData")

/**
 * Get width of each column named "dataWidths" and
 * Fix first and last column width by subtraction 24px
 * as left and right padding was styled into the first and last column of the table
 * */
const dataWidths = [...dataTable.children[1].children[0].children].map(cell => cell.offsetWidth)
dataWidths[0] = dataWidths[0] - 24
dataWidths[dataWidths.length - 1] = dataWidths[dataWidths.length - 1] - 24


const headerColumns = [...headerTable.children[0].children[0].children]
headerColumns.map(column => {
    column.style.width = dataWidths[count] + "px"
    count++
})
```