teleren/devto huggingface dataset:
5 Soft Skills Every Software Developer Should Learn
Tags: softskills, webdev, career
Published: 2020-05-01 08:15:59

Hello People! Let's move away from core technical things for a bit. In this video, I share soft skills that I feel every developer should learn and improve.

{% youtube b4b_z6gFmlY %}

The norm that technical skills are important than the core soft skills does not hold true in the industry today. We all have to balance both to stay relevant in the industry.

I learned a lot from [Pluralsight](https://www.pluralsight.com) this month already and I decided to learn a bit more about soft skills. Here are some courses that I really enjoyed taking.

[Developing a Killer Personal Brand - Jason Alba](https://www.pluralsight.com/courses/developing-killer-personal-brand) 

[The Art of Speaking: Scott Hanselman]( https://www.pluralsight.com/courses/hanselman-speaking)

[How to Be a Great Mentor: Get More out of Mentoring - Jason Alba]( https://www.pluralsight.com/courses/how-to-be-great-mentor)

Enjoy the video :)
Fallback Route | Redirect Automatically 404 Page In Laravel
Tags: laravel, errors, 404
Published: 2020-05-01 08:09:11

Hello Artisan

In this tutorial i am going to show you how we can automatically user to 404 page in laravel if their requested content is not fount. In this tutorial we will see how to redirect 404 page in laravel using laravel fallback route. Do you know what is fallback route?

https://www.tutspack.com/blog/fallback-route-redirect-automatically-404-page-in-laravel
🌍Simple Digital Clock (JS) [YouTube LIVE]
Tags: javascript, tutorial, frontend, time
Published: 2020-05-01 07:55:17


⬇️ In this video I 'll show you how to create a digital clock, displaying time with the current- time function in Javascript

Codepen: https://codepen.io/EleftheriaBatsou
Background image: https://derpicdn.net/img/2017/1/11/1337488/thumb.png
Working project: https://codepen.io/EleftheriaBatsou/pen/VwvzWpo
Video tutorial: https://youtu.be/ARz2GRCQico

If you guys recreate this project send me a link to check it 

************************************

👋Hello, I' m Eleftheria, an app developer, master student, public speaker, and chocolate lover.

🍩Would you care about buying me a coffee? You can do it here: [paypal.me/eleftheriabatsou](paypal.me/eleftheriabatsou) but If you can't that's ok too!

**************************************

🙏It would be nice to subscribe to my [Youtube](https://www.youtube.com/c/EleftheriaBatsou) channel. It’s free and it helps to create more content.

🌈[Youtube](https://www.youtube.com/c/EleftheriaBatsou) | [Codepen](https://codepen.io/EleftheriaBatsou) | [GitHub](https://github.com/EleftheriaBatsou) | [Twitter](https://twitter.com/BatsouElef) | [Site](http://eleftheriabatsou.com/) | [Instagram](https://www.instagram.com/eleftheriabatsou/)
@Attribute Decorator in Angular
Tags: angular, attribute, decorators
Published: 2020-05-01 07:49:32

The ``@Attribute`` decorator returns the value of the specified attribute that attached to the selector.In some cases, This can bring a performance boost to the application.

Suppose we are having a static value, that we need to child component, we mite use ``@input``. By doing this we are attaching some event and on every change detection cycle it will check for changes.This can affect the performance as this is static value.

For solving this issue we can use @Attribute decorator which will take value only once.Keep in mind that we won't able to pass variable, it should be passed as string.

We will inject this decorator as in the code below in the child component. 

{% codesandbox attribute-decorator-kitoo module=/src/app/hello.components.ts %}

With this changes, Angular will evaluate it once.

So this is what I understandings about @Attribute decorators. If anyone else have any extra information you can comment. 

keep learning.
React Native 0.63 Pre Release
Tags: react, reactnative
Published: 2020-05-01 07:47:14

New Logbox 😍 Pressable, PlatformColor
We can say goodbye to the red, useless old screen?🤣

https://www.youtube.com/watch?v=ed4UrE0HmVw&list=PL7mLOOXvxCQuKSMJkIn15A3O8Vj48sauh&index=4
Ubuntu 20.04 mouse scroll wheel speed
Tags: ubuntu, mouse
Published: 2020-05-01 07:44:59

---
title: Ubuntu 20.04 mouse scroll wheel speed
published: true
description: Ubuntu 20.04 mouse scroll wheel speed
tags: ubuntu, mouse
cover_image: https://images.pexels.com/photos/209053/pexels-photo-209053.jpeg?cs=srgb&dl=animal-apodemus-sylvaticus-brouiller-brun-209053.jpg&fm=jpg
---

# Ubuntu 20.04 mouse scroll wheel speed
-------

I had a very slow scroll speed until I found [that](https://io.bikegremlin.com/11541/linux-mouse-scroll-speed/).

## Install and run

1. You have to install imwhell with :

    ```
    sudo apt install imwheel
    ```

2. And download this bash script on [http://www.nicknorton.net](http://www.nicknorton.net/mousewheel.sh) (thanks to him)
You can type, as @victoor say in comments :
>You can just do ` bash <(curl -s http://www.nicknorton.net/mousewheel.sh) ` instead of copy the script manually and changing permissions. :) 
    ```
#!/bin/bash
# Version 0.1 Tuesday, 07 May 2013
# Comments and complaints http://www.nicknorton.net
# GUI for mouse wheel speed using imwheel in Gnome
# imwheel needs to be installed for this script to work
# sudo apt-get install imwheel
# Pretty much hard wired to only use a mouse with
# left, right and wheel in the middle.
# If you have a mouse with complications or special needs,
# use the command xev to find what your wheel does.
#
### see if imwheel config exists, if not create it ###
if [ ! -f ~/.imwheelrc ]
then
cat >~/.imwheelrc<<EOF
".*"
None,      Up,   Button4, 1
None,      Down, Button5, 1
Control_L, Up,   Control_L|Button4
Control_L, Down, Control_L|Button5
Shift_L,   Up,   Shift_L|Button4
Shift_L,   Down, Shift_L|Button5
EOF
fi
##########################################################
CURRENT_VALUE=$(awk -F 'Button4,' '{print $2}' ~/.imwheelrc)
NEW_VALUE=$(zenity --scale --window-icon=info --ok-label=Apply --title="Wheelies" --text "Mouse wheel speed:" --min-value=1 --max-value=100 --value="$CURRENT_VALUE" --step 1)
if [ "$NEW_VALUE" == "" ];
then exit 0
fi
sed -i "s/\($TARGET_KEY *Button4, *\).*/\1$NEW_VALUE/" ~/.imwheelrc # find the string Button4, and write new value.
sed -i "s/\($TARGET_KEY *Button5, *\).*/\1$NEW_VALUE/" ~/.imwheelrc # find the string Button5, and write new value.
cat ~/.imwheelrc
imwheel -kill
    ```
3. Then set up the .sh file to executable with :
    ```
chmod +x mousewheel.sh
```
4. And then run script with :
    ```
./mousewheel.sh
    ```
5. And set your mouse wheel speed in the popup by clicking on apply button. (my setting is 7) Re-run script for change.

6. Finally add imwheel in ubuntu startup application.

## If you have troubleshooting with previous and next mouse buttons :

- Add `-b "4 5"` to imwhell :

```
imwheel -b "4 5"
```

---------
## You can found others details here for setting speed by app :
{% link https://dev.to/danvoyce/fixing-mouse-wheel-on-chrome-in-ubuntu-18-04-virtualbox-vmware-143n %}

Or in the man page : `man imwheel`
---------
Image : [Pexels](https://www.pexels.com)

Sorry, it's my first post.
Have a nice day !
Securing your software releases with the JFrog Platform
Published: 2020-05-01 07:23:36

Continuing from my previous blog post about [distributing software releases,](https://dev.to/batelzohar/distributing-software-with-the-jfrog-platform-5e6k) there is an additional (just as important) security consideration that you need to take into account.

As you may already know, the Xray service represents our [security and compliance](https://www.jfrog.com/confluence/display/JFROG/Xray+Security+and+Compliance) service which easily integrates with Artifactory and our CI/CD service for license & security compliance. 

Let’s start with licenses. One of the most important responsibilities of an open-source program is to ensure that your organization meets its legal obligations when integrating open source code with proprietary and third-party source code in your products. But we also want to make sure that we don’t have any security vulnerabilities in our code, so we can also create security policies like in the following screenshot:

![policy](https://s6.gifyu.com/images/usX22M39ZK.gif)

Let’s explain a bit more about security and license policies. Security policies have two rules for scanning:

**Minimal severity** - Which is defined on the JFrog vulnerabilities database, in case that an artifact or build contains a vulnerability with the selected severity or higher. 

**CVSS score** - The CVSS score ranges between 1 to 10 to apply to the policy. 

Now on license policy, it will define a bit different by the following rules:

**Allowed Licenses** - To create a whitelist of OSS licenses that may be attached to a component. 

**Banned Licenses** - Create a blacklist of OSS licenses that may not be attached to a component. 

**Optional Disallow Unknown License** - Specifies the wanted behavior for components whose license cannot be determined. When enabling this feature a violation will be triggered if a component with an unknown license is found.

Now after we created a policy let’s add our release bundle to the indexed resources like the following screenshot:

![indexed resources](https://s6.gifyu.com/images/PGfifAwzWR.gif)


That's it we are good to go. We can add our release bundle as part of the [policy](https://www.jfrog.com/confluence/display/JFROG/Creating+Xray+Policies+and+Rules) and keep our binaries :)
Grid Carousel with "Tiny Slider"
Tags: javascript, codepen, tutorial
Published: 2020-05-01 07:18:00

<p>Discover how to create a grid carousel with tiny slider script. Plain JavaScript used to create this carousel as the tiny slider itself using vanilla js. You can use this code in any application like WordPress and create a dynamic grid carousel with it. You can find the tutorial of this pen here at <a href="https://templateartist.com/2020/05/01/create-a-dynamic-grid-carousel-with-tiny-slider/">Dynamic grid carousel with tiny slider</a></p>

{% codepen https://codepen.io/amitbiswas06/pen/RwWomrr %}
10 Awesome TYPO3 Extensions For Editors - Series 3
Published: 2020-05-01 07:12:59

Welcome again to TYPO3 Extensions T3Popular Series 3! Thanks for staying tuned to our T3Popular series, if you're new here, we have initiated a T3Popular Series for TYPO3 developers, integrators, editors, etc.,
Top 10 Popular TYPO3 Extensions For Developers: Series 1
15 Best TYPO3 Extensions For Integrators: Series 2
10 Awesome TYPO3 Extensions For Editors - Series 3

Are you excited to explore which are the most popular TYPO3 Extension for TYPO3 Editors? And here we go!

10) luxletter - TYPO3 Email Marketing Newsletter Tool
9) Comment Extension for EXT:news
8) Yoast SEO for TYPO3 - EXT:news
7) The slug for TYPO3 Pages and Records
6) Scheduled News to Social Media
5) TYPO3 Frontend Editing
4) Events for EXT:news
3) Redirects Management
2) Secure Your Backend Password
1) Yoast SEO for TYPO3

Read full blog and explore them in depth at - https://t3terminal.com/blog/10-awesome-typo3-extensions-for-editors-series-3/
The true code behind the explosive buzzword marketing messages
Published: 2020-05-01 07:11:15

## AI driven personalization and individualization

```js
if (isReturningUser) {
  message = 'Welcome back!';
} else {
  message = 'Welcome!';
}
```


## Cutting-edge security algorithms

```js
const hashedPassword = sha256(password);
// TODO: read about salt
```


## AI-based text sentiment analysis
```js
sentence.split(',').forEach((phrase) => {
  if (['angry', 'upset', 'pissed off', 'disappointed', 'absurd', 'manager', 'get me your manager', 'get me the manager', 'I want to speak with the manager', 'your manager', 'the manager', 'a manager', 'shut up!', '!!!', 'insane', 'crazy', 'stop arguing with me', 'would you just listen?!', 'how many times', 'no!', `${F_WORD} you!`, `${F_WORD} off!`, `${F_WORD}!`].includes(phrase)) {
    return SENTIMENTS.ANGRY;
  } else {
    return SENTIMENTS.NEUTRAL;
  }
  // TODO: We are not using SENTIMENTS.HAPPY - consider removing
});
```


## Rendering engine
```js
function render() {
  components.forEach(c => render(c));
}
```

## State of the art rendering engine
```js
function render() {
  requestAnimationFrame(() => {
    components.forEach(c => render(c));
  });
}
```



## Analytics
```js
function sendAnalytics(event) {
  sendToServer('/analytics', event);
}
button.onclick = () => sendAnalytics('clicked');
```

## Actionable Analytics
```js
function sendActionableAnalytics(event) {
  sendToServer('/analytics', event);
}
button.onclick = () => sendActionableAnalytics('clicked');
```


## Real-time collaboration
```js
setInterval(() => {
  fetch('https://api.server.com/newData').then(isNewData => {
    if (isNewData) {
      this.refreshEverything();
    };
  });
}, 1000);
```




## Data driven business intelligence
```js
if (customer.lastLoggedIn < new Date() - 3 * MONTHS) {
  sendSmartAlert(SMART_ALERTS.USER_CHURN_ALERT);
}
```



#### Contribute more examples using the comments
If you think of funnier examples - comment and I'll include them (if they're good)
Twilio Hackathon Submission: Walkins-Welcome!
Tags: twiliohackathon
Published: 2020-05-01 07:06:15


## [Demo Link](https://walkings-welcome.netlify.app/)
## [Link to Code](https://github.com/msomji/walkinsWelcome)

For too many years, we have been waiting around in the lobby waiting for one thing or another, wasting time, while we could be getting other things done until it is our time. Walkins-Welcome solves that problem and a few more! 

This application is a proof of concept of providing professional care to people in need during social distancing. 
- The application allows professionals, to login in via their google account and create lobbies for their patients. 
- Patients do not need to login, when they visit the website, they "get in line" and wait for their turn.
- When the Doctor is ready to communicate, they click on the "Call next patient" button that will initialize their video call room 
- This will lead to the patient receiving a text message on their phone with a link to the video room where the two con converse.

The below image helps with understanding the process a little more:

![Wakings Welcome Process](https://raw.githubusercontent.com/msomji/walkinsWelcome/master/client/src/assets/images/process.svg)


#### Category Submission: 
- COVID-19 Communications and possibly Engaging Engagements


## Technologies used:
1. React/Redux (client)
2. Netlify client deployment
3. [serverless](https://www.serverless.com/) (server)
4. AWS Lambda backend deployments
5. Mlab (Mongo Database)
6. Google Auth API
7. Twilio Video Api
8. Twilio SMS API
9. Figma 

There were MANY hurdles along the way! I found out about the hackathon pretty late, so this was about a week's worth of work. I used this hackathon as an avenue to exercise my design skills, so most of my time was spent understanding how different colors work together and learning how to layout an application that does not look like it just got into a back-alley fight!
- This was my fist time working with lambdas in general and [serverless](https://www.serverless.com/) was a great tool to get started with! Though getting started was a little bumpy, trying to understand how billing works and ofcourse getting over the fact of how cheap lambdas are, but as I kept working with it, I noticed how much faster I was getting work done with lambdas compared to other alternatives. I certainly see myself using both serverless and netlify more in the future. 

One of the issues I faced with serverless was that it maintains some sort of context of what it expects to see in AWS, and if you manually delete things from aws, it can render the tool useless, at-least to deploy to that environment. This is not a deal breaker since environments are arbitrary.

Twilio was quite a ride to say the least! But a fun one, so I am not complaining. I really with I would have been able to use their lambda functions too, but I just couldn't get those to work, and being pressed for time, I decided it would have to wait. 

I hope you enjoy [Walkins-Welcome](https://walkings-welcome.netlify.app/) as much as I enjoyed building it. 

Note to self: Procrastinate less next time!
34: How does CSS actually work?
Tags: css
Published: 2020-04-30 06:05:27

When a browser displays a document, it must combine the document's content with its style information. It processes the document in a number of stages, which we've listed below. 

Bear in mind that this is a very simplified version of what happens when a browser loads a webpage and that different browsers will handle the process in different ways. But this is roughly what happens.

---

1. The browser loads the HTML (e.g. receives it from the network).
2. It converts the HTML into a DOM (Document Object Model). 
3. The DOM represents the document in the computer's memory. 
4. The DOM is explained in a bit more detail in the next section.
5. The browser then fetches most of the resources that are linked to by the HTML document, such as embedded images and videos ... and linked CSS! 6. JavaScript is handled a bit later on in the process, and we won't talk about it here to keep things simpler.
7. The browser parses the fetched CSS, and sorts the different rules by their selector types into different "buckets", e.g. element, class, ID, and so on. 
8. Based on the selectors it finds, it works out which rules should be applied to which nodes in the DOM, and attaches style to them as required (this intermediate step is called a render tree).
9. The render tree is laid out in the structure it should appear in after the rules have been applied to it.
10. The visual display of the page is shown on the screen (this stage is called painting).

[MDN : HOW_CSS_WORKS](https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/How_CSS_works)
Day 7 of #100DaysOfCode: Learn Jest to test React components
Tags: 100daysofcode, react, jest, testing
Published: 2020-05-01 07:03:46

## Introduction
Jest is a test library from facebook. We won't have to install it if the project is a CRA project (creat-react-app).

This article is to note an easy test for React components. 

## React component
* This is our folders
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dha5ewxkjjoy3hxnxv74.png)

* Suppose that we have a React component
```javascript
import React from 'react'
import PropTypes from 'prop-types'

const FooterItem = ({externalLink, imageSrc, imageAltText}) => {
    return (
        <span className="btn-o">
            <a href={externalLink}>
                <img src={imageSrc} alt={imageAltText}/>
            </a>
        </span>
    )
}

FooterItem.propTypes = {
    imageSrc: PropTypes.string.isRequired,
    imageAltText: PropTypes.string.isRequired,
    externalLink: PropTypes.string.isRequired
}

export default FooterItem
```

## Screenshot match test
1. Create a test component (FooterItem.test.js) in the test folder
```javascript
import React from 'react'
import FooterItem from '../components/FooterItem';
import twitter from '../images/twitter.png';
import renderer from 'react-test-renderer';

describe('<FooterItem/>', () => {
    test('Snapshot', () => {
      const component = renderer.create(<FooterItem imageSrc={twitter} imageAltText="twitter"
      externalLink="https://twitter.com/JenHsuanHsieh"/>);
   
      let snapshot = component.toJSON();
      expect(snapshot).toMatchSnapshot();
   
     });
});
```

2.Run the test
* Type the following command in the terminal
```
npm test
```
* Check the content from the terminal
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6hztv4b56x6oz9kf6xyw.png)

* It will generate the **__snapshots__** folder. 
It will store screenshot files. When we run test second time and Jest will compare screen shots to make sure they are the same.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/70sr655mt1jsc77l1c6y.png)

* If the screenshots are different, the test will fail.
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gwqur54pq1osg9cn58bh.png)

## Coverage
* Type the following command in the terminal
```
npm test -- --coverage
```
* Check the content from the terminal
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rmhljevsa6kta5mhsqbd.jpg)

## Articles
There are some of my articles. Feel free to check if you like! 
* My blog-posts for software developing: https://medium.com/a-layman
* My web resume: https://jenhsuan.github.io/ALayman/cover.html
* Facebook page: https://www.facebook.com/imalayman
Morning Joy - wake up to a happy text every day
Tags: twiliohackathon, reddit, lambda
Published: 2020-05-01 06:59:19

---
title: Morning Joy - wake up to a happy text every day
published: true
description: My submission to the Twilio x DEV Hackathon!
tags: twiliohackathon,reddit,lambda
---

## What I Built

Morning Joy lets you start each day on a good note by texting you an uplifting news story and a picture of something cute.

Following the news can be stressful or even depressing. This is one small way to remember that good things are happening too. 

### Category Submission

Interesting Integrations

## Demo
 
![demo](https://dev-to-uploads.s3.amazonaws.com/i/pdsq2j6bh4f16ul6660l.jpg)

## Link to Code

{% github dguo/morning-joy no-readme %}

## How I Built It

I signed up for Twilio and followed their [quickstart guide for Node.js](https://www.twilio.com/docs/sms/quickstart/node#install-nodejs-and-the-twilio-module). I bought a phone number and tested sending a text to myself. This was painless. I probably spent more time picking the phone number than I did writing the code.

Next, I needed to find a source for the content that I can count on to be renewed on a daily basis and to be of high quality. I decided to use Reddit's [r/aww](https://www.reddit.com/r/aww/) and [r/UpliftingNews](https://www.reddit.com/r/UpliftingNews/) subreddits. They are two of the largest subreddits, so I should never get duplicate content. I also decided to grab the first post when sorting by top for today, which means the community has heavily upvoted the post.

I looked into the best way to fetch posts from Reddit. At first I thought I would use their [API](https://www.reddit.com/dev/api/), but it [turns out](https://www.reddit.com/r/javascript/comments/8yg6ig/adding_json_onto_the_end_of_most_reddit_urls/) that Reddit has a convenient feature where you can simply append `.json` to the end of a subreddit URL to receive the data as JSON: `https://www.reddit.com/r/aww.json`.

This worked well, but I didn't know how to sort it by top for today rather than hot. I [discovered](https://www.reddit.com/r/redditdev/comments/1470nj/what_is_the_json_link_for_getting_differently/) that a query parameter does the trick: `https://www.reddit.com/r/aww/top.json?t=day`.

I wrote a script to grab the top posts for both subreddits and then text them using Twilio.

Lastly, I needed a way to schedule the script to run every morning. To keep it simple, I converted my script into an [AWS Lambda](https://aws.amazon.com/lambda/) function and set up a CloudWatch Events rule that [triggers on a schedule](https://docs.aws.amazon.com/AmazonCloudWatch/latest/events/Create-CloudWatch-Events-Scheduled-Rule.html) to fire the function every day at 10 a.m. UTC. The schedule expression is: `cron(0 10 * * ? *)`.

This was a relatively simple project, but I'm looking forward to seeing what I get every morning!