teleren/devto huggingface dataset:
Scroll to top(Back to top) - React and MaterialUI
Tags: react, beginners, materialui
Published: 2020-07-02 17:52:00

The Scroll To Top button is a very helpful navigation tool that brings the user to the top of a page without them having to scroll all the way up. On a blog it is very useful. In this tutorial I will show you how to implement this feature with React and MaterialUI.

{% youtube zwCaIrZ64M4 %}
Video: How to update Google Sheets with JSON API
Tags: nocode, tutorial, video
Published: 2020-07-06 19:17:15

---
title: Video: How to update Google Sheets with JSON API
published: true
date: 2020-07-02 17:45:15 UTC
tags: NoCode,Tutorial,Video,tutorial
canonical_url: https://maxkatz.org/2020/07/02/video-how-to-update-google-sheets-with-json-api/
---

This video shows how to update Google Sheets with JSON API. The video is based on [this blog post](https://dev.to/maxkatz/how-to-update-google-sheets-with-json-api-3e96).

{% youtube gL_mwqvXaO0 %}
JavaScript's Lack of Inversion
Tags: javascript, architecture
Published: 2020-07-02 17:39:58

#Intro
I think we can risk to say that from its humble beginnings, JavaScript has become the most popular programming language during the past two decades.

As the old adage goes: your true nature cannot be avoided, just as a tree cannot deny its own roots. Similarly, JavaScript has a few important design decisions inherent in being a browser scripting language, which have some substantial consequences. 

#The Problem
Let us suppose you want to implement a plugin architecture based solution. You have a PluginManager module which will manage all the registered plugins in the system. 

```javascript
import {pluginA} from './plugins/PluginA'
import {pluginB} from './plugins/PluginB'

class PluginManager {
    registerPlugins() {
        register(pluginA);
        register(pluginB);  
    }
}
export const pluginManager = new PluginManager();
```

And somewhere in your index.js or similar top level script, you will do something like the below:

```javascript
import {pluginManager} from './PluginManager'

pluginManager.registerPlugins();
```

So what is the big problem here, you're on about?

Well, if you look closer, you will see that the PluginManager has explicit knowledge about the plugins it manages. This contradicts all the software design principles, and among other things it means whenever we want to introduce a new plugin we will need to modify the PluginManager. 

#OK but how other languages go about this?
In a poor man's implementation you could have a simple file like plugins.txt, where you list all your plugins to be loaded:

```
com.supercool.plugins.PluginA
com.lesscool.plugins.PluginB
```

And then you would construct your PluginManager with this piece of configuration and it would be able to load the classes and register them. Without explicit knowledge about any of them.

Yes, you can go much fancier than this, and use some Dependency Injection framework for example.

#Back to JS
The reason for this is rather prosaic: the lack of dynamic module loading.

In other words, if it ain't mentioned it ain't bundled (and won't be loadable as it won't be there). So that is why everything has to be so explicit, as otherwise the poor bundler would have no knowledge of the stuff and so it would not be bundled. 

This is inherent in how JavaScript was born as a scripting language for the browser. Its resources (script files) are treated the very same way as say a GIF, it has to be referenced and made available in a resource file, available to the browser, otherwise it does not exist. 

#Conclusion
To me, the lack of dynamic module loading means that certain designs are impossible to implement in JavaScript. Also, it fosters brittle architectures based on strong coupling by having to reference concrete module implementations (module files).

Some of these issues are easy to work around, some are less so. At any rate, this is a serious limitation, which is only now becoming more and more apparent, as we are putting JavaScript to more use as a generic programming language, not just the cowboy language of the Internet.
Share your experience with feelings of embarrassment during code reviews
Tags: discuss, podcast
Published: 2020-07-02 17:26:36

---
title: Share your experience with feelings of embarrassment during code reviews
published: true
description: Answer this question for a chance to be featured in the next episode of DevDiscuss!
tags: discuss, podcast
---

The format of DEV's first official podcast, [DevDiscuss](https://dev.to/devdiscuss), begins with an interview and ends with commentary from the community.

For this week’s episode, we want to know...

**Have you ever felt embarrassed or inadequate during a code review? How have you used that experience to improve the code-review process for junior developers?**

If you'd like a chance to be featured in the episode, please send us a voice memo or leave a comment below by next Wednesday, July 8th at 5 PM PT (8 PM ET, 12 AM UTC). 

### Details on how to participate:

* Call our Google Voice at +1 (929)500-1513 and leave a message 📞
* Send a voice memo to pod@dev.to 🎙

OR, if you don't want your voice recorded...just leave a comment here and we'll read your response aloud for you 🗣

### Our most recent episode:

{% podcast https://dev.to/devdiscuss/s1-e9-how-to-develop-for-neurodiversity-and-universal-design %}

#### Review DevDiscuss on [Apple Podcasts](https://podcasts.apple.com/us/podcast/devdiscuss/id1513053883) and fill out [this form](https://airtable.com/shr8oKAIMZgdYnBxx) to get free stickers! 🦄⚡💻
Speed up your image heavy website…
Tags: html, imageoptimization, fastloadimage, imageloadingspeed
Published: 2020-07-04 12:23:42

---
title: Speed up your image heavy website…
published: true
date: 2020-07-02 17:15:05 UTC
tags: html,imageoptimization,fastloadimage,imageloadingspeed
canonical_url: https://medium.com/innovation-incubator/speed-up-your-image-heavy-website-6af8de8ea735
---

### Speed up your image heavy website.

![](https://cdn-images-1.medium.com/max/1024/0*g8q0f23In8w-nyuQ.png)

### 1. Resize your image

```
<img src="image.jpg" alt="full size image" width="200" height="200"/>

<img src="resized\_200x200\_image.jpg" alt="resized image"/>
```

![](https://cdn-images-1.medium.com/max/452/1*WgjPF4KVMY2Kn53UFl481Q.png)

### 2. Optimize your image

**JPG** , **PNG** and **GIF** are the most common image formats being used currently  
on the web. There is another relatively new image format called **WebP** that  
combines the best of these image formats.

![](https://cdn-images-1.medium.com/max/564/1*6NTgRgmpWg9vBHCn70p9wg.png)

### 3. Build for mobile

Data suggests that almost 60% of the global traffic originates from mobile  
devices. With responsive image tags, using the ‘ **srcset** ’ and the ‘ **sizes** ’   
attributes of the img tag

![](https://cdn-images-1.medium.com/max/597/1*gswYRHM_JPjZlZdsk73ZJQ.png)

### 4. Load fewer resources

Use **lazy loading** for your images. Lazy loading basically means that we  
defer loading of images that are not required immediately.

![](https://cdn-images-1.medium.com/max/1000/1*zi11reoH6QFy5njkJYhalQ.gif)

### 5. Use a good CDN for image delivery

![](https://cdn-images-1.medium.com/max/700/0*uu5hju31ZkJAJbhT.png)

* * *
Self Signed Cert error
Published: 2020-07-02 16:56:06

```typescript
 ng build
Building Angular Package

------------------------------------------------------------------------------
Building entry point 'msl'
------------------------------------------------------------------------------
Compiling TypeScript sources through ngc
Bundling to FESM2015
Error: self signed certificate in certificate chain
    at TLSSocket.onConnectSecure (_tls_wrap.js:1506:34)
    at TLSSocket.emit (events.js:315:20)
    at TLSSocket._finishInit (_tls_wrap.js:948:8)
    at TLSWrap.ssl.onhandshakedone (_tls_wrap.js:706:12) {
  code: 'SELF_SIGNED_CERT_IN_CHAIN'
}
Bundling to FESM5
Bundling to UMD
Minifying UMD bundle
Copying declaration files
Writing package metadata
Built msl

------------------------------------------------------------------------------
Built Angular Package!
 - from: D:\Source\MNLottery\CC\projects\msl
 - to:   D:\Source\MNLottery\CC\dist\msl
------------------------------------------------------------------------------
Error: self signed certificate in certificate chain
    at TLSSocket.onConnectSecure (_tls_wrap.js:1506:34)
    at TLSSocket.emit (events.js:315:20)
    at TLSSocket._finishInit (_tls_wrap.js:948:8)
    at TLSWrap.ssl.onhandshakedone (_tls_wrap.js:706:12) {
  code: 'SELF_SIGNED_CERT_IN_CHAIN'
}
```
Npm suggest making sure to run these commands

```
npm install npm -g --ca=""
npm config set ca=""
```
Which did not work for this problem..

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

Whoever allowed (Angular) that error message to omit the offender name should be flogged.

Here's how to find it. Search node_modules folder for .pem files.
Understand the factors of DevOps
Tags: devops, aws
Published: 2020-07-02 16:54:15

This article is the third post from the series of "Get Started with DevOps". As easy as that sounds, transitioning to a DevOps way of working isn’t always that straightforward. This article will help you to understand fundamental DevOps success factors for organizations looking to make the transition.

To read the second post from series, visit "Problems and challenges to adopting DevOps"

## DevOps Factors
DevOps offer continuous integration and continuous delivery. It makes the product delivery cycle quicker, and enterprises become able to launch the software timely without compromising its quality.

Following the list of a few factors:
- Predictability
- Maintainability
- Improved Quality
- Lower Risk
- Cost-Efficient
- Stability
- Streamlined Delivery Process

### Predictability
DevOps decrease the failure rate of new product releases.

### Maintainability
The process improves the overall recovery rate at the time of the release event.

### Improved Quality
DevOps improves the quality of product development by incorporating infrastructure issues.

### Lower Risk
Security aspects are incorporated in SDLC, and the number of defects gets decreased across the product.

### Cost Efficient
Cost efficiency is improved due to DevOps that is always an aspiration of every business organization.

### Stability
DevOps implementation offers a stable and secure operational state.

### Streamlined Delivery Process
DevOps provides streamlined software delivery, so marketing effort is reduced up to 50%. It happens due to the mobile application and digital platform.


## Summary
Transitions or conversions are never easy. It takes a large amount of time and effort to smooth out the transformation. Similarly, the transition to the DevOps is not simple for organizations as well. It requires certain factors for a successful transition to the DevOps. Organizations need to understand these significant success factors for a smooth change. By giving a fast turnaround Devops develops software quickly without compromising its quality. It lowers the cost and makes the process economical. Further, it boasts a well-organized delivery process, which helps in the reduction of extra costs and efforts. It helps in lowering risks and provides secure operations and performances.

I am a DevOps Consultant. My job is to help the startup to build and maintain application infrastructure. Provide technical solutions. Help to introduce and improve DevOps Practices in the application development lifecycle. Proficient with Kubernetes and docker across AWS, GCP, and on-prem. 

You can find me on [Twitter](https://twitter.com/safoorsafdar) and you can also check my [Linkedin](https://www.linkedin.com/in/safoorsafdar) profile. If you liked this post, please recommend and share it with your followers.

_Note: The substance of this post is derived from a variety of web assets to be instructed._
Day 4: Planning & Design
Published: 2020-07-02 13:55:18

Now that the first step of the Stellaris mod is out of the way, we hit upon a new 'design' element of game design: creating all the traits I want to add to the game.

## Adding new traits

The code involved in adding new traits is some of the simplest stuff that I'm going to have to do for this mod. I could do it right now if I wanted, and in fact part of designing the habitability system involved doing so.

But the code is not the only thing I need to do here. I also need to know what I'm going to be adding, and that's not something that I'm going to do while sat at a PC. So this morning's work has all been pen and paper (still my preferred note-taking and planning tools), sketching out some brief ideas of what I want to add.

I don't know how many traits I want to add to the game, or how similar I want them to be to what currently exists, but I have an idea of the direction I'm going, and as long as I have **something** to put into the game, the rest can be fixed later.

## Balancing content

This is another distraction I keep bumping up against in every part of designing this mod. Just like layout and design distract me when building an app or website, the exact values I want to assign to each trait keep becoming sticking points.

In practice, I should know that I can change these later. I'm not going to get a perfectly designed mod first time around, and once they're implemented it'll be much easier to play around with all the pieces and start settling on what the values will actually be. But there's something of a perfectionist in me that makes it a struggle sometimes to just put in vague filler values.

Still, it's all good practice. I've got a fair few traits written down, and I'm going to keep thinking about it and jotting down ideas as they come to me. The joy of this part of design is not being bound by having software open at the right time, or even sitting in front of a computer. I can do this anywhere, any time, in bits and chunks as necessary.

Tomorrow's going to be my last 'working' day on this project for a little while, though, so I want to use that time to finish something playable off that I can come back to at a later date and build on without worrying too much about what I left unfixed. That means in tomorrow's blog I'll hopefully have an overall summary of what the mod looks like (so far) and what still needs doing to it, future plans etc.

Next week I'm going to start learning PHP, which may make for a less cohesive story structure, but will perhaps be more relatable nonetheless.
Translation, Multi-tenancy, and New Regions - Stream Chat Swift
Tags: news, swift, opensource, github
Published: 2020-07-02 16:16:24

---
title: Translation, Multi-tenancy, and New Regions - Stream Chat Swift 
published: true
description: 
tags: news, swift, opensource, github
cover_image: https://i.imgur.com/yBtS07Q.png
canonical_url: https://getstream.io/blog/chat-swift-june-2020/
---

In June 2020, [Stream Chat's Swift SDK](https://github.com/GetStream/stream-chat-swift/) received three updates: 2.2.3, 2.2.4, and 2.2.5. These updates bring us further in the mission of providing [high quality chat experience for iOS apps](https://getstream.io/tutorials/ios-chat/). Let's go through the highlights.

## Message Translation

With this feature, introduced in 2.2.5, you can enable live translation of messages to and from a total of **55 languages**. This is great feature for apps where speakers of different languages are expected to chat with each other.

We're excited to learn about the different ways **automatic translation of messages** will empower your apps!

For information on [how to power your iOS chat app with translation](https://getstream.io/chat/docs/translation/?language=swift), visit the docs.

## Multi-tenant Chat

Also in 2.2.3, support for multi-tenants was added. This is an essential feature for businesses that **provide their own chat service based on [Stream Chat](https://getstream.io/chat/)**. For example, a team chat app such as Slack can use multi-tenancy to **isolate the channels and messages between each workspace**.

We're confident this feature will empower the next generation of productivity, healthcare, and education chat providers. 

For instructions on [enabling multi-tenancy for your iOS chat app](https://getstream.io/chat/docs/multi_tenant_chat/?language=swift), visit the documentation.

## New Regions

As of 2.2.3, you can choose **Singapore** or **Sidney** as your server location to improve speed and reliability in the delivery of messages if your main user base falls in or closer to those regions.

We're happy to provide **faster and more reliable** service around the globe!

For information on [hosting your iOS chat experience in different regions](https://getstream.io/chat/docs/multi_region/?language=swift&q=region), see the documentation.

## And more

Among these awesome features, there are other additions, improvements, and deprecations worth taking a quick look at.

Check out the full [changelog on the Stream Chat Swift](https://github.com/GetStream/stream-chat-swift/blob/master/CHANGELOG.md) repository.
Contenus Cloud - juin/juillet 2020
Tags: cloud, azure, developpement, microsoft
Published: 2020-07-02 15:42:44

Ci-dessous les dernières ressources publiées en français par les passionnés de Cloud et de développement. Les sujets tournent beaucoup autour des technos Microsoft mais pas que.

Comme d'habitude, si vous avez des contenus à me suggérer ou si vous appréciez l'initiative, faites-le moi savoir dans les commentaires. 

👇👇

Juin 2020 :
###✍ Articles
- [Pourquoi les développeurs francophones devraient utiliser un clavier QWERTY international](https://www.monsieurangular.com/blog/why-you-should-use-a-qwerty-layout-for-development) par Amadou Sall
- [Les Virtual Nodes AKS](https://thomasrannou.azurewebsites.net/2020/07/01/les-virtual-nodes-aks/) par Thomas Rannou
- [Les aspects juridiques de la reconnaissance faciale] (https://blog.cellenza.com/data/les-aspects-juridiques-de-la-reconnaissance-faciale) par Nathalie Fouet
<hr />

###🎙 Podcasts
- Je vous recommande chaudement d'écouter le [RDV tech](http://frenchspin.fr/category/le-rdv-tech/) pour vous tenir au courant des actus de la tech, et de consulter [cette liste de podcasts](https://twitter.com/manekinekko/status/1277505382680854529).
<hr />

###🎞️ Videos
- Question Dev en 2 minutes : [Projets IoT : dois-je savoir coder ?](https://www.youtube.com/watch?v=u5cM6Xi5eYc) par Christopher Maneu
- Question Dev en 2 minutes : [Les Azure Static Web Apps](https://www.youtube.com/watch?v=pl05wjIt_RQ) par Yohan Lasorsa
- [Comment surveiller les applications pour les développeurs](https://www.youtube.com/watch?v=rEYPAFMki-8) par Ahmed Raboudi
- [Passer un projet en open source en production] (https://www.youtube.com/watch?v=X9QkPnTtUjk)
 <hr />

###💡 Autoformation et jeux 🎮
- [Améliorer votre fiabilité avec des pratiques opérationnelles modernes (Modern Ops)](https://docs.microsoft.com/fr-fr/learn/paths/improve-reliability-modern-operations/?WT.mc_id=recapfrblog-devto-malev) 
- Jeu tech : [Azure Maya Mystery](https://www.microsoft.com/AzureMayaMystery/pyramid/fr/1/) vous plonge dans la peau d'un explorateur qui mène l'enquête. Explorez une pyramide, découvrez des glyphes, relevez des défis.
- Des dizaines d'autres nouveaux modules sont publiés sur [Microsoft Learn](https://docs.microsoft.com/fr-fr/learn/?WT.mc_id=recapfrblog-devto-malev) tous les mois en plus de ceux cités ci-dessus.
<hr />

###📅 A venir en juillet - événements en ligne gratuits :
- 9 juillet : [Meetup Ladies of Code](https://www.meetup.com/Ladies-of-Code-Paris/events/271601944/)
- 28 juillet : la conférence [Virtual Azure Community Day](https://azureday.community/).
Let's connect if you love to dance
Tags: webdev, opensource, startup
Published: 2020-07-02 15:42:42

---
title: Let's connect if you love to dance
published: true
description: If you are developer, who also dance salsa, bachata, kizomba or other social dance
tags: #webdev, #opensource, #startup
---

I love to dance and I love to travel. As a dancer in my city I have lots of groups in Facebook and Whatsapp and there is only spam and thousands of reposts of the same event. As a traveler I don't have any groups and can't find anyone or any events in cities where I travel to.

That's how I got an idea for WeDance. Once I was traveling to Italy, visited lots of cities and couldn't find any salsa party there. So I want to help dancers to find parties no matter if they travel to a new city or just are new to the city. 

My goal is to be able to travel around the world and easily find dance events and partners, for this to happen each major city should have at least 1000 dancers.

Let's build open source, non for profit, democratic dance community together 🙂

[we-dance/community](https://github.com/we-dance/community) <- I suppose you already have a github account :)
Beware of the import
Tags: discuss, help
Published: 2020-07-02 15:22:06

---
title: Beware of the import
published: true
description: 
tags: discussion, help
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/j5um8cvgn5bu6del3u9k.jpg
---

When you are working on an existing project for a year or more, at one point you change your webpack or babel configurations rarely. You add something here or optimize their.

But what if you change scope and start working on a rather outdated setup? 

Here is me, interested in adding Storybook 😀 and ending up updating Babel 6 to 7 and trying to understand why existing imports are not working anymore.


The great news is, babel as an upgrade script which updates your `package.json` 🎉

`npx babel-upgrade --write --install`

Does great things. It updates your old babel dependencies to the new ones. Yet somehow it didn't change my `.babelrc` file so I was left alone trying to understand what I really need.

When I opened it, I saw this:

![meme](https://i.imgflip.com/471gbi.jpg)

So here we are left with this package.json:

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

As I went through all plugin documentation pages I discovered that I don't need any of them except three.

Once I changed that, the application was loading and everything looked fine until I hit a strange error:

`"export 'timezone' was not found in 'Config/config'`

And this is shown in 60+ files. Something that worked before isn't anymore.

So let's check what this config file is all about:

```
import _ from "lodash";

const config = [...] // a lot of configuration

module.exports = config
```

So this code doesn't seem to work anymore. After playing around with `export default` for 2 hours I realized one really important thing:

> The curly brackets in import {} are different than the destructuring {} used for example in const { timezone } = config

🤯🤯🤯🤯🤯

I'm not sure if a babel package or simple configuration is missing to allow the behavior before. It looks like in babel 6 + plugins using `module.exports` allowed after compilation to use named imports.

If anyone has a tip, please comment below 😃
My Love for Faded Wallpapers
Tags: webdev, showdev, javascript
Published: 2020-07-02 15:03:16

---
title: My Love for Faded Wallpapers
published: true
description: 
tags: webdev, showdev, javascript
---

[This post has a permanent address](https://blog.siddharthgelera.com/2020/07/02/love-faded-wallpapers/)

I'm the kind of guy who changes his wallpapers a lot. Like... A LOT!

But, there's this thing that I fancy. Almost all wallpapers that I download, I modify them to have a slightly washed out or faded look, if they weren't already that way. 
A few examples of what I'm talking about can be found on [here](https://imgur.com/a/XgYEs) (note: these are not mine, just examples).

And since it's normally the same amount of settings from GIMP for almost all images, I thought I'd write a service. Which I did somewhere around `3rd Jul 2019` , exactly a year ago and I've been using it since. 

Yeah, no emotional, motivational, rock hard, development problem solving story this time.

Here's the app: [Washed](https://washed.siddharthgelera.com)