teleren/devto huggingface dataset:
The Front End: S2-E8 - Mark Baldino
Tags: podcast, frontend, ux
Published: 2020-11-16 09:15:57

Hark, the new episode alarm soundeth! 🙂

For episode 8 we're joined by [Mark Baldino](https://www.linkedin.com/in/markbaldino).

Mark runs Fuzzy Math, a user experience design agency and shares his founder's journey and how good UX can improve your business.

Listen to the brand new episode here:

- Apple Podcasts > https://podcasts.apple.com/gb/podcast/the-front-end/id1499349107
- Pocket casts > https://pca.st/osul2zsa
- Spotify > https://open.spotify.com/show/4GuAxptrtY8Es5iHwp09dT
- Anchor > https://anchor.fm/the-front-end

## In this episode

Mark is the co-founder of Fuzzy Math, a UX design and strategy consultancy based in Chicago with clients worldwide.

He and his team educate organisations on the importance of UX skills through tailored training and workshops.

Over the past nine years as co-founder, Mark has built Fuzzy Math into a 15 person firm focused on UX design, strategy, and innovation in Chicago. Mark has 18 years experience implementing a user-centered design approach to solve difficult problems.

He kindly shares his experiences with UX, how it can improve your business and how devs can get involved in the UX design process.

## Listening direct

Want to listen directly from here?

{% spotify spotify:episode:1s19GrepXrzCXUjylN2R0L %}

## Want to be a guest or sponsor the show?

We're always happy to take requests for guests to talk about a range of different development topics from careers to origin stories, learning and professional growth, frameworks and more.

Similarly, we're looking for sponsors to fill promotional slots within the show. 

You can find out more here:

- [Being a guest](https://thefrontendpodcast.site/guests)
- [Sponsorship information](https://thefrontendpodcast.site/sponsorship)

Thanks for listening!
Git on Windows (vs *nix, via WSL2) - does "file mode" matter?
Tags: git, wsl, windows, help
Published: 2020-11-16 09:12:45

So, I happened to use Git on a repo cloned to Windows filesystem, but with WSL2 shell, and sent git commands via WSL2 zsh.

That is, in `settings.json`.

```json
{
  "terminal.integrated.shell.windows": "C:\\windows\\System32\\wsl.exe"
}
```

Git is installed on both Windows and WSL2.

It appears that file mode when created with Git on Windows is `644`, but on WSL2 Ubuntu, it is `755`. I found this out when switching branches with VSCode (outside Remote WSL2 plugin).

## Quick fixes

- Current repos

```sh
sed 's/filemode = true/filemode = false/' .git/config
```

- Globally. Run this on both WSL2 shell and PowerShell.

```sh
git config --global core.fileMode false
```

## Additional notes

I don't know how you keep up with Git on Windows. So many choices to be made on set up. I did none of these on macOS or Linux.
Have you tried Parcel for your Vue projects?
Tags: vue, javascript, webdev
Published: 2020-11-16 08:41:15

Did you think `vue create` gives you a Vue project with few dependencies? Think again. Parceljs will blow your mind.

With [Parcel](https://parceljs.org/), you can create a project very quickly without installing a bunch of dependencies or edit lots of config files. This is very useful when you want to test a concept you learned or practice something specific instead of making a full-blown project. For this, Parceljs gets you started quickly.

Although you can get the same result without Parcel, a bundler that doesn't get in the way is always a good thing to have. Plus, it can create a server with hot reload.

## Creating a Vue project with Parceljs
I wrote an article on creating a [React project with Parcel](https://niharraoteblog.netlify.app/how-to-create-a-minimal-react-and-parcel-app-in-5-steps). The steps for creating a Vue project are similar.

### 1. Creating the project
Before we install Parceljs and other dependencies, we need a project directory and a package file

![Creating project](https://dev-to-uploads.s3.amazonaws.com/i/me7nsw8yz2c2wywuq3y5.png)

### 2. Installing dependencies
The dependencies required for a Vue project are even fewer than those required for a React project.

![Installing dependencies for the project](https://dev-to-uploads.s3.amazonaws.com/i/ygywfd7kxf8cnbi5srxs.png)

### 3. Editing babel config and package.json script
After installing the necessary dependencies, let's add the Parcel scripts in our `package.json` and Babel preset in its respective config file

![Editing babel config file and adding start script to package.json file](https://dev-to-uploads.s3.amazonaws.com/i/xuc9ev1u3kg6uczy4s11.png)

### 4. Running the project with Parcel
Running a server is pretty straightforward. Add the `--open` flag to automatically open the server in your default browser. Without the flag, you'd need to type it out.

![Running localhost with the start script](https://dev-to-uploads.s3.amazonaws.com/i/zqfrhu5y1lu0ibqh0g3l.png)

## Wrapping up
Four easy steps to set up a Vue project with Parceljs. Although you need to make some effort to get something like Sass working properly, for the most part, Parcel does what you expect from it and moves out of your way.

[Parceljs](https://parceljs.org/) is a good alternative to Webpack and I would recommend it to those who might be overwhelmed looking at Webpack's docs. Parceljs is working on making things more buttery smooth, but a majority of the things work just fine. If you don't want to run a command in the terminal and have an application bundler working behind-the-scenes, but want to take charge and work closely with your bundler, I highly recommend going with Parcel first.

While Webpack is more stable, reliable, and probably supports everything you may ever want in your project, Parceljs is simpler than Webpack. Although an application bundler packed with features, like Webpack, is a great choice, Parceljs is a decent alternative.
Day 46 of #100DaysOfCode: Images Lazy Loading with IntersectionObserver and React Hooks
Tags: react, 100daysofcode, webdev, javascript
Published: 2020-11-16 08:15:40

## Introduction
The website with Image lazy loading loads off-screen images after all critical resources have finished loading to lower Time to Interactive (TTI). The user can avoid wasting money on large data and processing time for decoding the downloaded contents.

The TTI score is a comparison of your page’s TTI and the TTI for real websites, based on data from the HTTP Archive. Developers can measure TTI from Lighthouse

This article introduces the following topics.

1. What is Lazy Loading?
2. Implement Images Lazy Loading with IntersectionObserver for React Components

## Details
Please refer to my [article](https://medium.com/a-layman/explain-images-lazy-loading-with-intersectionobserver-with-react-hooks-in-short-733e05b610dd)

## Articles
There are some of my articles and released projects. Feel free to check if you like! 
* [My blog-posts for software developing](https://medium.com/a-layman)
* [Facebook page](https://www.facebook.com/imalayman)
* [My web resume](https://jenhsuan.github.io/ALayman/cover.html)
* [Twitter bot](https://twitter.com/ALayman84368087)
* [Side project - Daily Learning](https://daily-learning.herokuapp.com/)
MVC là gì? Tổng quan về MVC framework trong lập trình.
Published: 2020-11-16 08:06:17

MVC là gì? Đây là một framework thường được sử dụng và phổ biến trong thời gian gần đây để phát triển giao diện người dùng hiện đại. Xem chi tiết tại: http://nghelaptrinh.net/mvc-la-gi/
Coding in Java
Tags: java
Published: 2020-11-16 08:04:48

I don't know how to explain java. It's just that one language that exists, everyone loves it and hates it at the same time. Personally, I think its OK. I can use it to make applications, and Jetbrains has a powerful IDEA for it (Intelij IDEA)
 So let me tell you about my experience working with java. 

#1. Prepare for the most BS errors ever. 

Errors in java are helpful but not helpful at the same time. It will tell you what exception was triggered and where it was triggerd from but it doesn't tell you what went wrong. In languages like JavaScript (Node.js is the only example I can think of) it tells you what went wrong and where it went wrong. That is more than enough information to make debugging easier. However in java, errors are mostly handled by exceptions and oh boy do I get the wierdst of exceptions. So when coding in java, I've come to terms with the fact that when I'm going to debug I'm going to have a hell of a time. Sometimes it's alright, but sometimes you just have this one NullPointerException that is hiding deep in depths of your hurderds of lines of code.

#2. Storing data, welcome to hell

Storing data is somthing your going to have to do no matter what you do in coding, what for you store it into is a different story. My personal favourites are JSON, mongodb and SQLite. They are simple to use and work for just about anything. However, anything that is simple in one language will definitely not be simple in java. There's just this fustation that comes with saving files or connecting to any external services with java. So many objects with so many functions, initialisers. Its doable, its always been doable, but sometimes you just think to yourself, I don't need this in my life right now. 

#3. Data types confuse minds

There are 4 data types that most if not all coding languages have. Intagers, Booleans, Strings and Floats. In java it's nice and simple. int for Integers, bool for Booleans, float for Floats, and string for Strings- hang on. That sounds too easy. Yep, even the basic data types have a confusing side. For example, if I wanted to make a int null, I have to use Integer to define the variable instead of int. And the rabbit hole continues from there. Turns out, every single data type exept strings have two ways of defining it. Either the short abbreviations of it or the actual Java Class. Oh and btw in java you also have doubles. But why are strings an exception? You need to have the Class String to define it. Why java made it like this? I will never know. 

Well that 3 things I have picked up while coding in java and I hope you enjoyed reading me talk about useless stuff. Until next time, bye!
the web platform: lighten the JSX load in React apps
Tags: javascript, react
Published: 2020-11-16 08:04:39

We can simplify, modernize and accelerate UI work with React by translating templates at runtime as-is. Several years ago browsers implemented a new way of embedding expressions in strings called [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) (`backticks with ${ expressions }`), including tagging these expressions for specific handling. We can modernize our React apps by moving the template work in JSX build processes to the runtime using these template literals and the [HTM helper library](https://github.com/developit/htm). This removes the associated transformation cost in development, simplifying build processes while also mostly removing the need to maintain knowledge related to the differences between standard HTML and this XML dialect. The HTM library itself offers a list of additional conveniences over JSX that I've come to expect in conventional work like supporting self-closing tags, better fragment handling, etc. Here's a simplified example and linked working [gist](https://gist.github.com/jimmont/3f27649c626e6b8a0c94175cc82e1cbb) and [demo](https://jimmont.github.io/example/ReactHTM.html):

```
const jsx = htm.bind(React.createElement);

class App extends React.Component{
	constructor(props){
		super(props);
		const count = Number(props.count) || 0;
		this.state = { count };
		this.update = this.update.bind(this);
	}
	update(e){
		let {count} = this.state;
		count++;
		this.setState({count});
	}
	render(){
		return jsx`
<label>
click ${ this.state.count }  <button onClick=${ this.update }> from ${ this.props.count } </button>
</label>
		`;
	}
}

ReactDOM.render(
	jsx`<${ App } count=1 key=2> <//>`,
	document.querySelector('[react]')
);

```

Give it a try to simplify and accelerate your development experience. There's also a previous [late 2018 mention](https://dev.to/ben/hyperscript-tagged-markup-htm-jsx-alternative-using-standard-tagged-templates-with-compiler-support-4nc8) here on DEV.


On The Web Platform: Following several several years of using frameworks and libraries I realized the high cost associated with this Catholic-wedding approach, especially when something naturally changes like updates, etc. As a result I began focusing on what patterns and trends were actively evolving in native browser support. This based on the premise that in browsers, the engineering and vetting of solutions is of a higher caliber than the in-the-wild constantly maturing community. As a result those native solutions will tend to be more stable and longer lived, and a better investment long-term.
Could some on explain something to me
Tags: beginners, help, javascript
Published: 2020-11-16 07:59:28

Hello, I am new to this and still learning the new stuff :)

I have a question about mine javascript and i hope this is the right area to get a answer :)

So i made a code that every 2e of 3e word change from color(its a bit random). I used 'getElementById' but i know so far mine knowledge goes that it only works for 1 id. And i want to use the code on more places with diffrent "id's" but don't want to duplicate mine code.

Could some on explain to me what to do? Or is there documentation i could read with some explanation how to make maybe a function with the code? I hope some on could explain how to clean this up ;)

Here is mine code:

var paragrapgh = document.getElementById("ads_colordtitel");
var words = paragrapgh.innerText.split(" "); 
var colors = ["#0B88EE", "#FFFFFF"];
var spans = [];

for(var x = 0; x < words.length; x++){
    var color = colors[Math.floor(Math.random()*colors.length)] 
    var span = "<span style='color: " + color + ";'>" + words[x] + "</span>"

    spans.push(span);
}

paragrapgh.innerHTML = spans.join(" ");
CI CD Là Gì- Tổng Hợp Những Lợi Ích Mà CI CD Mang Lại
Published: 2020-11-16 07:48:53

CI CD là gì? Chúng có quan hệ như thế nào và những lợi ích từ việc sử dụng CI CD ra sao.Tất cả những nghi vấn này sẽ được giải đáp ngay sau đây. Xem chi tiết : http://laptrinhvacongnghe.com/ci-cd-la-gi/
User Mode and Kernel Mode
Tags: linux, devops, beginners, codenewbie
Published: 2020-11-16 07:48:30

**This is a multipart blog article series, and in this series I am going to explain you the concepts of operating system. This article series is divided into multiple modules and this is the first module which consists of 12 articles.**

_In this article I am going to explain you about **User Mode** and **kernel Mode** in an operating system._

This below diagram will help you to understand about the user mode and kernel mode, and give a better picture about these two modes in operating system.

![Untitled Diagram.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605512650759/zzkSXuDt2.png)

- Whenever we use an application at that time by default we are in user mode.
- All the core functionalities and drivers work in kernel mode.
- The process get switched in between two modes i.e. user mode and kernel mode.
- Operating system works at kernel mode. 
- Suppose we are writing a C program, and in that program suppose it is written that _you have to read a file and have to write something in that file._
- Remember one thing that the file is stored in Hard Disk and hard disk is a hardware and all the hardware are in control of kernel. So a user cannot directly access the hardware it have to take the help of kernel.
- To read that file we have to use system call. System call is a way to by which we can access the kernel. We will use `read()` system call, it means that we want to read some data from any file.
- After it the process gets shifted from user mode to kernel mode.
- Now, we will read the file as we are now in the kernel mode. All the operations of read and write will be completed here.
- After that the process will get shifted to user mode again. The process have to shift to user mode because we the user are working in user mode. 

_This was all about user mode and kernel mode. Hope you liked it and learned something new._

If you have any question, query, doubt or just want to share something with me, then please feel free to contact me. 

### 📱 Contact Me

[Twitter](https://twitter.com/r_mishra10)
[LinkedIn](https://www.linkedin.com/in/rahul-mishra-66210b185)
[Telegram](https://t.me/rahul_mishra10)
[Instagram](https://www.instagram.com/rahul_mishra10/?hl=en)

### 📧 Write a mail
<rahulmishra102000@gmail.com>

#### 🚀 Other links

[GitHub](https://github.com/rahulMishra05)
[HackerRank](https://www.hackerrank.com/rahulmishra10201)
Why Should All Business Owners Learn Digital Marketing?
Tags: digitalmarketing
Published: 2020-11-16 07:38:37

The reality is that very few business owners feel they have time to learn digital marketing, however, what most of them quickly discover is that by not taking the time to at least learn what digital marketing is, it ends them costing. thousands over the life of your business.

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

You see, an entrepreneur usually has to learn as many aspects of running an organization as possible before he can hand over the reins to someone else. The reason is that it enables them to understand the value of the time and effort required to perform all the tasks associated with their business. Now, where most of the others get it wrong is to say that they don't have time to learn what it takes to promote their [business online](https://www.propelguru.com/). Now, this happens almost every day with business owners all over the world and what they usually do is outsource to an SEO or online marketing agency, even if they really don't know what they are paying and what the agency is really about. doing for them.

Or while this approach is not a bad approach, this approach without having the required knowledge will cause a company to lose money in the future, because having a little knowledge in the east an entrepreneur can seek the best. service at the best price.

A good example of this would be when it comes to asking the general question of how much does digital marketing costs.

Now, while it is easy to think of online marketing as a commodity in which all prices are based on a simple set of factors and are exactly the same, the truth is that much of the prices of digital marketing are based on a large part. part of the experience and knowledge acquired over time.

So by a better understanding of how [digital marketing](https://www.propelguru.com/) works and what is required in a digital marketing campaign, you can negotiate cheaper prices over time.

It is very easy to see that the business owner who took the time to learn the steps necessary to put together a digital marketing campaign can use one of the best companies in the world for 50-60% cheaper than someone who has not. done. took the time to learn the basics and still get the same results.
Redis Là Gì- Chia Sẻ Những Ưu Điểm & Ứng Dụng Của Redis
Published: 2020-11-16 07:31:11

Redis là một trong những cơ sở dữ liệu giúp người sử dụng có thể gia tăng khả năng lưu trữ dữ liệu.Vậy Redis là gì, chúng có những ưu điểm gì? Xem chi tiết tại: https://blog.itnavi.com.vn/redis-la-gi/
Understanding Docker: part 15 – Copy from/to a container
Tags: docker, devops, beginners, cloud
Published: 2020-11-16 07:07:07

---
title: Understanding Docker: part 15 – Copy from/to a container
published: true
description: Serie of sketchnotes about Docker. Explaining in a visual way Docker principles.
tags: Docker, DevOps, beginners, Cloud
series: Understanding Docker in sketchnotes
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/9wcx93d4xolk3vhc8ndi.jpg
---

Understanding Docker can be difficult or time-consuming. In order to spread knowledge about Cloud technologies I started to create sketchnotes about Docker. I think it could be a good way, more visual, to explain Docker (and other technologies like Kubernetes and Istio).

We continue the series of Docker sketchnotes with a focus about how to copy from/to a Docker container.

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

As usual, if you like theses sketchnotes, you can follow me, and tell me what do you think. I will publish others sketchs shortly :-).

If you are interested, I published all the sketchnotes on Docker (and new ones!) to make a "book" of 93 pages: ["Understanding Docker in a visual way"](https://gumroad.com/aurelievache#YTLzM).
GitHub for Mobile 👌
Tags: python, javascript, programming, github
Published: 2020-11-16 06:55:25

GitHub for mobile, get a lot of done with ease of using your smartphone !

Recently GitHub updated it with new - most in demand - features that you will definitely love (and require !).

It already had review feature that, with it’s inception for mobile, have registered more than 700,000 reviews and around 350,000 merges !

That’s a huge task done within your palm, while having a tea or coffee !

And last month it gave several new updates 👇

👉 GITHUB FOR MOBILE FEATURES AN OVERHAUL OF THE CODE REVIEW EXPERIENCE

👉 ABILITY TO TURN OFF LINE WRAPPINGS

❄️ It was super difficult to view line of codes in mobile !
❄️ But now with a toggle added for line wrappings, will save a lot of time !

👉 CHANGE EMAIL ASSOCIATED WITH COMMIT

❄️ You need a little more control on how your commit appears ?
❄️ Add email associated with commit/merge and change it's description as well !

👉 JUMP TO OPTION TO REVIEW MULTIPLE FILES

❄️ Dealing with larger reviews with code spanning multiple files ?
❄️ Don't worry, now you can bounce between different files and review with ease !

👉 COMMENTS ON MULTIPLE LINES OF CODE

❄️ Last year support for comments on multiple lines of code was launched on GitHub's web interface.
❄️ Now you can do the same on mobile app !

Now it's super easy for you to contribute to open source.
What are you waiting for then ?
Go ahead and check out hello-open-source !
Register your first PR and say Hello to the World of Open Source ✌

[hello-open-source](https://github.com/siddharth2016/hello-open-source)
What microservices mean?(in short)
Published: 2020-11-16 06:46:21

I have realized every explanation of microservices is confusing. After spending 1 month understanding it I came up with following short definition. Hope it will give you instant knowledge boost about microservices.

They are not library, they are not small web technologies, they are not plural, they are just an aproach to split backend into different pieces, especially  when your app and team becomes bigger. 

Microservices is microservice architecture. The idea is to simply divide backend of the website into components. Imagine we have a store website.In product page, we can divide the page into pieces as Navbar, Product Details, Popular Products. Here you go. when your backend code are separated according to parts of your micro needs, they call it microservices.
Bootstrap 4 Navbar with Slider
Tags: css, bootstrap, html, webdev
Published: 2020-11-16 06:45:53

The Homepage is the default page of any website. When someone visits a particular website address, this is the main page see at the very first moment. We can call it the starting point of the website. The website's Homepage is much more important than we think. It creates the first impression among the visitors and encourages them to visit the rest of the website. This blog will share a snippet based on creating a responsive homepage design with Bootstrap four and animate CSS.<a href="https://www.divinectorweb.com/2020/11/bootstrap-4-navbar-with-slider.html">Download the Code</a>