teleren/devto huggingface dataset:
Typescript: use the nullish coalescing operator to prevent bugs
Tags: javascript, typescript, webdev, react
Published: 2020-08-21 10:09:16

---
title: Typescript: use the nullish coalescing operator to prevent bugs
published: true
description: Typescript has released the nullish coalescing operator. You should use it to prevent bugs due to default values. This article explains why
tags: javascript, typescript, webdev, react
cover_image: https://blog.theodo.com/static/b4c374be0904379ec6696c422f8e9a75/032ed/good_bad_example_nullish_coalescing.png
canonical_url: https://blog.theodo.com/2020/08/use-nullish-coalescing-operator/
---


My goal as a CTO is to improve quality. The score of this game is the number of bugs we find each week. Today I share with you a typical bug that more than one person got caught by.

Let's say you want to initialize the audio volume of your react application with the value previously saved in the localStorage or defaulting it to `0.5` if nothing was saved. You could write something like:

**Bad example**

```javascript
function initializeAudio() {
  let volume = localStorage.volume || 0.5;

  // ...
}
```

The problem is that if the user has saved their volume to `0` it will be interpreted as falsy and your code will use the default value instead of the right value. Some devs prefer the simplicity of || than putting an explicit if clause. And more than once, they were right because 0 was not a plausible value. But as a standard it is too dangerous. For example someone else could see the code and think the || is a good coding stantard in all situation which will eventually create a bug.

Typescript 3.7 comes with the best option: you can now use the nullish coalescing operator to prevent that wrong behavior and safely write something like:

**Good example**

```javascript
function initializeAudio() {
  let volume = localStorage.volume ?? 0.5;

  // ...
}
```

That will be compiled in:

```javascript
function initializeAudio() {
    var _a;
    var volume = (_a = localStorage.volume) !== null && _a !== void 0 ? _a : 0.5;
    // ...
}
```

To make sure people from your team use it, you can use the [prefer-nullish-coalescing](https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/prefer-nullish-coalescing.md) ESLint rule. You can also use it with javascript and this [babel plugin](https://babeljs.io/docs/en/babel-plugin-proposal-nullish-coalescing-operator). If you want to go deeper in the understanding of this operator you can go [here](https://javascript.info/nullish-coalescing-operator).

I hope this article will help your team prevent this kind of bugs. For more actionable code quality tips, find me on [Twitter](https://twitter.com/maxthoon).

And you? What's your secrets to prevent bugs in your application?
Blog summery - How to get 100% Score in Google PageSpeed Insights for Magento Store
Published: 2020-08-21 09:46:49

As many of you might know the importance of page load speed for ranking higher in SERPs. Google and other search engines consider the loading speed as a ranking factor for websites. Also, Google has provided a tool called PageSpeed Insights (PSI) to test your Magento 2 website’s loading speed performance. 
This tool ranks website out of 100 on basis of how it performs on certain fixed criteria called Core Web Vitals and other Web Vitals. Both collectively affect the performance score of your website on PSI. The tool also illustrate that opportunities and other diagnostics, which directly don’t affect the performance but supplement the Core Web Vitals and other Web Vitals.
Once the common issues listed in the opportunities and diagnostics are resolved you might be able to achieve the unthinkable 100% score on Google’s PSI tool. But the question is, is it worth the time and effort put into improving the performance and achieving 100/100 score? Does it even matter? To know more and find answers to these questions read our detailed article on the same. Also, through the blog, we have covered fixes for most common issues found for Magento 2 websites for performance optimization. 
Read more: https://www.mconnectmedia.com/blog/google-pagespeed-insights-optimization-for-magento-store/
Why Laravel web development is a good choice for your Business Software
Tags: laravel, wordpress, android, reactnative
Published: 2020-08-21 09:33:04

Every online and also offline business is different and so are its needs. But when it comes to web development and web softwares first and the toughest choice is to select the right framework. Going by Trends, it seems Laravel web development framework is one of the most popular PHP frameworks because of its rapid development and deployment features.

Laravel follow MVC ( model – view – controller) architecture. When we use MVC architecture standardization, re usability and scalability becomes very easy.
Vue page transitions
Tags: codepen, vue, animation
Published: 2020-08-21 08:55:11

A page transition example using Vue and GSAP 3 together (works best on desktop size):


{% codepen https://codepen.io/daniel-hult/pen/RwrYozK %}


This was done using the Vue router, setting up some routes, and then using the JS hooks in the main Vue app instance. In there you can have your own `@enter` and `@leave` hook code.

The idea is that you add the image overlay and remove the text in the `@leave` hook, and then bring it in again from the bottom in the `@enter` hook.

Hope you like it!
Percy upload simplified
Tags: actionshackathon
Published: 2020-08-21 08:42:26

[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon, please fill out all sections.)


### My Workflow
Wraps percy/agent docker in a Github action. Executes ```percy upload``` operation. The users of this action does not need to know docker. They get a simplified interface to upload generated images to percy.io for regression testing.


### Submission Category: 
Maintainer Must-Haves (for image regression testing)


### Link to Repository
[Percy Upload](https://github.com/MindaugasLaganeckas/percy-upload)


### Additional Resources / Info
[Mermaid CLI](https://github.com/mermaid-js/mermaid-cli/) uses percy-upload action
How augmented reality is changing the face of Broadcasting
Tags: arinbroadcasting, augmentedreality, ar, queppelin
Published: 2020-08-21 07:55:47

Do you know that you can interact with your favorite players or brands by simply browsing a link in your mobile phone or through QR code scanning? Imagine how it would feel if you can view photos and video contents of yourself as a visitor with an option to download or share it online on social media platforms. Augmented Reality is redefining the entertainment world and changing the way we interact with brands. Broadcast AR/Live AR is showing great potential for your business, work, entertainment, and other areas as well.Learn More: https://www.queppelin.com/how-augmented-reality-is-changing-the-face-of-broadcasting/
I participate in js13k this year
Tags: javascript, webdev, watercooler
Published: 2020-08-21 07:45:21


I'm glad to announce I will participate in js13k this year with my buddy [MogSogeking](https://github.com/MogSogeking).

## What is js13k?

[js13k](https://js13kgames.com/) is a game jam! But, what is a game jam? It is a competition where participants try to create a game from scratch in a limited time. js13k lasts a whole month and has a specific limitation. Your game must not weight over 13kb. Each year edition has a theme. This year's theme is **404**.

## Why do I say it to you?

I plan to share with you things I learn during this journey here on [dev.to](https://dev.to/yvonnickfrin). It will be mostly things on programming but also water cooler topics on graphism and music.

## Where can you track our progress?

One rule of js13k competition is to share a readable form of your code on Github. Here is our [repository](https://github.com/frinyvonnick/js13k-2020). We will work with pull requests so feel free to sneak around and leave comments 😉

<hr/>

The first blogpost on this journey will be about our project's development environment. Follow me on [dev.to](https://dev.to/yvonnickfrin) or [twitter](https://twitter.com/YvonnickFrin) if you want to be informed when a new blogpost is published!
How to git add the only modified files, not the untracked files
Published: 2020-08-21 07:26:32

---
title: How to git add the only modified files, not the untracked files
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---



```sh
git status | grep modified | cut -d':' -f 2 | xargs git add
```
8 Ways to Launch Your TER TYPO3 Extensions
Published: 2020-08-21 07:19:30

Amazing! You’ve made a great decision to OpenSource contribute to the TER TYPO3 Extensions, I appreciate it! Are you looking for help to publish the TER TYPO3 extension? In this article, You will find a step-by-step guide to release manuals or automize your extension to TER.

TYPO3 Extensions Repository (aks TER) is a centralized place where many TYPO3 agencies and developers develop and publish their TER TYPO3 extensions - As give back to OpenSource. For productive work of the TYPO3 Developer, publishing, and deployment of extension to TER should be easy and convenient. That’s why I’m writing this article to help you - to save your time. You just focus on the development of your TER TYPO3 extensions, and let’s learn automate the publish by

- Create TYPO3.org Account
- Register TYPO3 Extension Key
- Initiate Git Public Repository
- Prepare TYPO3 Documentation
- Issues Management
- 8 Ways to Launch Your TYPO3 Extension to TER
- Tips & Tricks for TER TYPO3 Extensions

Read the complete blog at - https://t3terminal.com/blog/extension-ter-typo3/
Offline-first Apps, huh ?
Tags: javascript, react, android, ios
Published: 2020-08-21 06:52:57

Chances are, when I say the term "offline-first" apps, you will go like "huh🤔 what's that". And If you just did that, let me introduce you to this exciting new idea of building apps, that work for everyone(doesn't matter if you have a internet connectivity or not).


*__But Wait a minute, all apps on my phone work alright with or without internet. What's new in this ?__*

Well, that's a correct observation, and this is often the case that trips people while thinking about offline-first apps. _How are they any different from apps like calculator, notes, etc_.

## The Subtle, but Critical difference
Apps like calculator, notes, etc are what is knows as offline apps, because of the property of having no dependence on your internet connectivity. But with offline-first apps, users need to connect to internet every once in a while for the app to function correctly.

> Sounds, weird🙄

Let look at an example, Imagine we have an app like Netflix, which is primarily a streaming platform, i.e users need internet connectivity to be able to use there platform. Now, say that they want to expand into countries, where either internet is not available at all, or the internet speeds are just too slow, or the prices are just to high. So to take there business to a place where users don't have consistent internet connectivity, they would have to change there app architecture to support working without internet.

This theoretically can be achieved by an offline-first app. They can keep, a selection of say like 10 movies within the app and when the user is done watching those, then they can connect to the internet and can get more videos.


Now the example above might not make complete sense in terms, like this is exactly similar to downloading movies. But for some companies this makes more sense. Take for example [uLesson](https://www.ulesson.com), which is an [eLearning](https://www.talentlms.com/elearning/what-is-elearning) company, operating in Western Africa Regions, they ship data dongles to there customers, which has the learning material. Students can learn, give tests, take exams, etc. After a set amount of time, the user has to connect to the internet briefly to sync there progress, get new content, etc. For them, the offline-first app model makes sense, since without it they can't reach there customers.
Best ways to update state array object using React Hooks?

Tags: reacthooks, react
Published: 2020-08-21 06:51:43

I have 
```
const [data, setData] = useState([{"name": "joy", "age": 25}, {"name": "tom", "age": 41}]);
```

Somehow I need to update only a particular object, May be name or age.

I am doing in such way. But It seems not good.

```
setData(prevState => {
      let obj = prevState.find(o => anycondition);
      if(obj !== undefined) {
        obj.name = "Demo";
      }
      return [...prevState];
    })
```

is there any other method to update only object from state array using React Hooks?
Disable your trackpad for better ergonomics
Tags: watercooler, productivity, workstations
Published: 2020-08-21 06:49:18

TLDR: *Disabling the trackpad and getting an external mouse is the least effort thing that you can do to improve your ergonomics.*


I have recently switched to a 13-inch Macbook Pro from the 2014 model 15.6 MBP.

If you may have noticed, the trackpad area is huge in this machine, which lead to an unnatural posture for me when typing.

It's been a month I have been using this machine and I started developing ulnar pain between my pinky and wrist. I googled about this, and just to add to my anxiety, the results that came were related to carpal tunnel syndrome.

I was in disbelief, how can this happen in under a month? I asked in a popular slack channel where devs hang out, regarding this. At least 5 people suggested that it might be due to unnatural posture. And suggested me to get an external keyboard, mouse, and monitor. And I do have to those things with me, but just in a different city, as I moved over to my parent's place at the beginning of this pandemic with just my laptop.

While I made some arrangements to have that stuff sent back to me, I got a temporary mouse meanwhile. And disabled the trackpad on the laptop so that I need not worry about touching the trackpad.

I took a day off, and have been using this setup for 2 days. My pain is gone. I just wanted to share this because some of you who are reading this, might have experienced this. Disabling the trackpad and getting an external mouse is the least effort thing that you can do to improve your ergonomics.
Which RSS Reader Do You Use?
Tags: discuss
Published: 2020-08-21 06:38:01

*[Cover Image from LinuxHint](https://linuxhint.com/10-best-rss-readers-for-ubuntu/)*

---

Hi everyone!

I'm using [Liferea](https://lzone.de/liferea/) as an RSS reader. So, I wonder which RSS reader do you use?

Before this, I've been used google reader until it shut down. I don't use Windows on my personal computer. I can use any Linux distro, I always use Liferea. but I never saw an RSS reader such as Google Reader. Is there an RSS reader to a good alternative? It could be self-hosted. But should be free, not freemium.

In this post, you can tell your paid RSS readers too (:
CSS Neon Animation
Tags: css, html
Published: 2020-08-21 06:24:11

Guys! Thank you all 🥳, I've hit a 100 subscribers to my Newsletter and I'm over the moon!

It means a lot to me that people choose to read my articles and subscribe to receive my email every day, from the bottom of my heart: Thank you! 🧁

Therefore I wanted to make a cool 100 subs `CSS` neon animation to celebrate.

See below for what we'll be building today, this amazing `CSS` Neon Animation

{% codepen https://codepen.io/rebelchris/pen/WNwGVMv %}

## HTML Structure

As for our `HTML` we need the following structure:

```html
<div class="container">
  <div class="text">
    <b>100 s<span>u</span>bs</b>
  </div>
</div>
```

We are going to use the container to center everything and use the span to make a cool neon glitch.

## CSS Neon

First we are going to import a cool [Google font](https://daily-dev-tips.com/posts/how-to-use-google-fonts/), which looks like it could be used in Neon letters.

```css
@import url(//fonts.googleapis.com/css?family=Pacifico);
```

The on to our Neon effect!

```css
.text b {
  font: 400 25vh 'Pacifico';
  letter-spacing: -5px;
  color: #fee;
  text-shadow: 0 0px 10px, 0 0 1em #560a86, 0 0 0.5em #560a86, 0 0 0.1em #560a86,
    0 10px 3px #333;
}
```

As you see, we are setting our font to be the Google Font, and making it a font-weight of `25vh` (25% [Viewport Height](https://daily-dev-tips.com/posts/how-to-work-with-css-viewport-units/).

Then we are using the `text-shadow` to make it show as Neon. We add multiple glow "layers" and end with a dark grey to make it appear thicker.

> Note: You can use a cool tool like this for [creating text-shadows](http://angrytools.com/css-generator/text-shadow/)

## CSS Neon Glitch Animation

We added a glitch on the `u` letter. This is common in Neon, and we can re-create this using `CSS` Animations.

```css
.text b span {
  animation: flicker linear infinite 2s;
}

@keyframes flicker {
  75% {
    color: inherit;
    text-shadow: inherit;
  }
  76% {
    color: #222;
  }
  77% {
    color: inherit;
    text-shadow: none;
  }
  78% {
    color: inherit;
    text-shadow: inherit;
  }
  79% {
    color: #222;
    text-shadow: none;
  }
  80% {
    color: inherit;
    text-shadow: inherit;
  }
  90% {
    color: #222;
    text-shadow: none;
  }
  90.5% {
    color: inherit;
    text-shadow: inherit;
  }
}
```

The actual animation is a mix of resetting the color and removing the text-shadow for a split second; this gives it the appeal of flickering.

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Fix Leaks with Salesforce CRM

Tags: salesforce, crm, fixleaks
Published: 2020-08-21 06:04:45

**Leaky bucket concept**
This concept is a very simple basic idea that assumes the total market share of a [company](https://www.cloudanalogy.com/) as a bucket of water as customers. A hole in the bucket makes the water run. The same goes for customers. To increase or at least maintain our market share, the company must now begin to attract new customers or attract customers from its competitors. These are the two ways.

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

The first is to find more customers than you leave. This can be done through techniques such as branding, product differentiation marketing, targeting a new segment, etc. marketers.

The second tactic is to fix the leak. However, an ideal situation with no customer churn is never possible, but reducing churn or, in other words, ensuring that the leak is small and never grows is a better idea.

**Now how do you fix the leak?**
As mentioned above, fully fixing the leak is an ideal situation that is difficult to achieve unless your business is a pure monopoly, but using Salesforce CRM techniques can help you retain your customers effectively. Any business would like to repeatedly buy their products and for a repeat purchase, they must ensure that their customer is always satisfied. Not just repeat purchases, but a satisfied customer can be the one who suggests the same product they are using to friends and family. Therefore, a satisfied customer is indirectly a brand ambassador for your business, and a dissatisfied customer can damage your brand image.

The customer is the king and the king must always be happy.

**How does Salesforce CRM work?**
This will help you create a good customer database that will help you divide your customers into different types and heads. Provides a centralized way to collect, consolidate, and share data with current and past customers. You can analyze them using it to understand their needs and complaints and understand the reasons that make your customers dissatisfied. These problems can be solved with solutions that help with good customer relationship management, and Salesforce CRM can do this effectively. Salesforce is the most popular cloud-based CRM software, with 14.8% (highest) of the overall [CRM software](https://www.cloudanalogy.com/) market with its own testing framework and more standardized, giving it a more operational profile.
Newbiefy - Make Your Repo Beginner Friendly Again
Tags: actionshackathon, github, opensource, showdev
Published: 2020-08-21 05:51:46

---
title: Newbiefy - Make Your Repo Beginner Friendly Again
published: true
description: Hello World! (again)
tags: actionshackathon, github, opensource, showdev
---

### My Workflow
Makes your repository beginner friendly by removing everything in place of a hello_world file in the mostly used language of the repo.


### Submission Category: 

Wacky Wildcards


### Yaml File or Link to Code

{% github dansyuqri/newbiefy %}

### Additional Resources / Info
https://github.com/Dansyuqri/newbiefy-test
source codes for the different languages were from [here](
https://towardsdatascience.com/how-to-print-hello-world-in-top-12-most-popular-programming-languages-736d49c6c61c)
A little tip on making your deployment less tedious
Tags: devops, bash, beginners
Published: 2020-08-21 05:34:36

Deployment can be a pretty time consuming and tedious task when your website is under development. To properly deploy, you have to run a number of commands to deploy your code and test it.
To overcome this, I recently created a bash script mentioning all the required commands.

deploy.sh
```
# mention full paths for all the commands to be on the safe side
#!/bin/bash
cd /root/staging;git pull;cd /root/staging/frontend;npm run build;
``` 

These commands will run one after another and will give full feedback just like when you run individual command.you can cancel anytime by pressing CTRL/CMD+c

Running the deployment script.


```
sh deploy.sh
```
One Thing I Do Not Like in Ember
Tags: ember
Published: 2020-08-21 02:05:58

---
title: One Thing I Do Not Like in Ember
published: true
description: I was asked in an interview this question, and it was hard to come up with an answer.
tags: EmberJS, ember
// cover_image:
---

So I was interviewing someone for a role with my company and during the part where you ask the person, “Do you have any questions for me?” came up, he asked something different. Tell me one thing that you do not like in Ember.

![Tom Hanks thinking about something]( https://media.giphy.com/media/3o7TKTDn976rzVgky4/giphy.gif)

I had to sit back and think about this. I did not want to cop out and say, there is nothing wrong in Ember, I like it all. EmberJS is a great framework to use and its improving all the time. So I thought about it for a second, and I remembered about how the API I work with, returns their properties in sentence case, instead of camel case.

In our code base, we have a bunch of serialization files that basically tell ember that something like, FirstName is really firstName. Of course at a certain point, Ember has come up with a better solution for this, and we have converted from doing this way, to the new way. Ember Data expects your API to send you back the data in a certain way. When it does not, there are things you need to do to change that output to be Ember Data friendly.

For you Ember developers out there, how would you answered this question? Comment and let me know.