teleren/devto huggingface dataset:
There Will Always Be More Work
Tags: career, leadership, healthydebate, devjournal
Published: 2021-08-11 13:49:49

Software engineering is an interesting field because the work never really ends. You may be working to finish a feature now, but after that there will be more features to build. More bugs to fix. More tech debt to pay down.

You could spend your entire life working and never really "finish." I suspect the same is true of most other professions.

And yet, I often feel a sense of urgency, that I must work later or longer to get more work done.

To be clear, this isn't a result of poor time management –– I get plenty of work done throughout the day, more than is expected of me. I'm not trying to catch up because I've fallen behind. What I'm describing is an urge to continue working longer than necessary to get more work done simply because there is more work to do.

Logically, I realize that this is a mistake. Working longer hours does not always lead to greater productivity. In the long run, it leads to burnout.

So why do I feel this way? It may be because I enjoy my job. It may be because I feel a sense of ownership over the work. It may be because in the back of my mind it *feels* like I'm accomplishing something that can ultimately be finished.

But the truth is, none of these reasons are justifiable excuses for working longer hours, later nights, or during the weekend.

So this is my reminder to myself –– and to you –– that there will always be more work. Take care of yourself.

Don't burn yourself out. It's not worth it.
Memory Leaks
Published: 2021-08-08 05:12:25

In this post:
1. [The Problem](#the-problem)
2. [What's a Memory Leak?](#what's-a-memory-leak?)
3. [The Solution](#the-solution)

Hooks are (is?) still pretty new to me. But since it seems like an important feature of React to understand, I've stretched to use it in my projects and start to gain some practical knowledge.

The most creative implementation that I've attempted so far is wrapping the `useEffect` hook inside of a custom hook that fetches a blog post from my Blog Model.

Here's what it looked like:

```javascript
const usePostData = (user, postId) => {

  const [post, setPost] = useState([]);

  useEffect(()=>{
    httpHandler.getPost(user, postId, (err, data)=>{
      setPost(data)
    })
  },[])
  return post
}
```

I used this function to populate a Post component with data:

```javascript
const post = usePostData(user, post_id)
```

##The Problem
React didn't like this, and it threw the following error:

` Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.`

I did a little reading and found some great resources that explained the issue and provided solution for fixing the memory leak:

- *This one's my favorite.* https://www.benmvp.com/blog/handling-async-react-component-effects-after-unmount/
- https://medium.com/wesionary-team/how-to-fix-memory-leak-issue-in-react-js-using-hook-a5ecbf9becf8
- https://dev.to/nans/an-elegant-solution-for-memory-leaks-in-react-1hol

##What's a Memory Leak?
Put simply, a memory leak is created when data is requested, but has nowhere to go.

In React, this can occur when the feature that is requesting the data unmounts before the data is delivered. This isn't uncommon when making asynchronous calls like over http.

I have some work to do to determine what unmounts in my Post component code, and why. Does it unmount and then remount on render when the data actually reaches the component? No - my understanding is that it mounts on the first render. So when does it unmount? That will remain a mystery until tomorrow.

##The Solution
In the meantime, here's the code after applying the most straightforward solution that all three resources provided:

```javascript
const usePostData = (user, postId) => {

  const [post, setPost] = useState();

  useEffect(()=>{
    let componentMounted = true;
    httpHandler.getPost(user, postId, (err, data)=>{
      if (componentMounted){
      setPost(data)
      }
    })
    return () => {
      componentMounted = false
    }
  },[])
  return post
}
```
Soi cầu MB 9/8 Dự đoán xổ số miền Bắc hôm nay 9 tháng 8
Published: 2021-08-08 15:40:40

Soi cầu MB 9/8 chuẩn xác nhất tại THABET GG. Soi cầu chốt số dự đoán xổ số miền Bắc XSMB miễn phí vip nội gian. Soi cầu XSMB 9 tháng 8 2021 những con số may mắn, lô đẹp hôm nay về tỷ lệ chính xác cực cao. Dự đoán xổ số miền Bắc hôm nay cho anh em về bờ.
https://thabet.gg/soi-cau-mb-9-8-du-doan-xo-so-mien-bac-hom-nay-9-thang-8/
Website for FRONTEND challenges!
Tags: webdev, frontend, css, challenge
Published: 2021-08-08 17:49:18

Are you a beginner in FRONTEND development than you must try this challenges.

#1 100 Days CSS#
![Image1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4p9dgxalfgvupuwvhp7n.jpg)
This challenge help you to become CSS expert in 100 days. Completely free no registration.

#2 Codier.io#
![Image2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cye49ilgjxv4l6ptwlpy.jpg)
Worth to try FRONTEND coding challenges in CODIER.

#3 CODEPEN#
![Image3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sxwdlrs59ht3ydbsy0vk.jpg)
Have fun and level up your skills by building things.

#4 FRONTEND MENTOR#
![Image4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sc5zdi5itpgn3gouu2uo.jpg)
Solve real HTML, CSS and JAVASCRIPT challenges here.

That's it. So go ahead smashed the challenges.
Thank you for reading!!
CodePen Challenge: Fibonacci Sequence
Tags: html, css, codepen
Published: 2021-08-09 09:08:55

CodePen Challenge: 
https://codepen.io/challenges/2021/july/4

DEV TIME: 2.5 hrs

FEATURES:
- Flexbox layout utilising a golden mean ratio, that is derived from the Fibonacci sequence
- Earthy colour palette, to match the imagery and suit a herbarium theme
- Added mobile responsivness (<768px)
- Nice hover effect on buttons
- Thanks to Wikipedia for dummy content

(View full screen)

{% codepen https://codepen.io/drawcard/pen/wvdXEVV %}
Does your "dream tech" solve your actual problems?
Tags: tinydevops, scale
Published: 2021-08-13 07:43:56

---
title: Does your "dream tech" solve your actual problems?
published: true
date: 2021-08-09 00:00:00 UTC
tags: TinyDevOps,scale
canonical_url: https://jhall.io/archive/2021/08/09/does-your-dream-tech-solve-your-actual-problems/
---

Last night I dreamt that I had received an offer for a round of angel investment funds for Tiny DevOps.

Disregarding the fact that angel investment makes no sense for my type of business, after waking I thought about it a bit.

On the one hand, a pile of cash would be nice. It would allow me to focus on improving the production quality of my [podcast](https://podcast.jhall.io/) and [YouTube channel](https://www.youtube.com/channel/UC5UfX0EgUWlcdQ2RDsq_fcA), for example, or buying some paid advertising, or probably improving lead generation in a dozen other ways.

But on the other hand, accepting investment of any kind would completely undermine the purpose of my business, which is to help staff-strapped and cash-strapped teams do better DevOps. If I suddenly had the cash to hire a team of 15, I would be in a completely different game, and no longer able to relate to the people I’m trying to help.

I see a similar trend in DevOps at large. Most of the DevOps stories we hear talked about come from big tech. This means the technical solutions we’re most often exposed to are for problems that big companies have. Scaling to thousands of nodes, or geo-redundancy, or even something as simple as blue/green deployments. These are all good tools, just as investment capital can be a good tool—but these tools are only useful if they solve **your problem**.

Most of us don’t need to scale to thousands of nodes. Most of us don’t need geo-redundancy. Most of us don’t even need blue/green deployments.

What problems are you facing? How do you know if you’re chosing a solution that fits the problem, and your scale?

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
Python Boot Camp Experience!!!
Tags: python, datascience, beginners, machinelearning
Published: 2021-08-10 14:13:02

<p>Friday 6th August, 2021, made the end of week the of the python boot camp at lux tech academy. For so long I have been trying to learn python on my own and most of the times it ends fatally. The constant bugs, indention errors almost made me give up learning python entirely but that's all part of the learning process. In my recent quest to master programming, a friend of mine referred me to the lux tech academy boot camp where have  learnt and familiarized my self with a lot of new stuff thus being a beginner for the nth time now.
</p>
<p>
Though my experience cannot be limited to what am going to list down it doesn’t stop me from sharing a few lessons.
</p>
<h1>INTRODUCTION</h1>
<P> Week one commenced with a variety of talks from how to be abadass python developer to setting up the environment and writing clean code. I learnt the professional way of writing python code that using the <a href ="https://cheatography.com/jmds/cheat-sheets/python-pep8-style-guide/"> <b>pep8</b></a> standard. To make my learning easier I used <a href="https://www.pythontutorial.net/">Python Tutorial website</a> for reference. <a href="https://scrimba.com/learn/python">Scrimba</a> is also a nice place to start on your journey of being a python developer. I also learnt how to write and publish technical articles 
</P> 
<h2>Hello world!</h2>
<p>
As our mentor during the program always quotes "if you can write “hello world” you can change the world" we commenced with learning the basics of the python language which included the syntax, data types, key-words  and styles of writing python  code. At the end of the week I able to build a <a href="https://github.com/priscillahnalubega/password-genarator">random password generator</a>.
</p>
<h2>Happy coding</h2>
<p>
The happy phrase that sends off all programmers into the deep waters of writing code. During the second week of the boot camp i learnt <ul>
<li>lists, tuples, dictionaries and sets</li>
<li>Functions</li>
<li>mutable and immutable</li>
<li>common methods in python</li>
<li>Data structures and alogorithms</li>
</ul>
With that I was able to build a <a href="https://github.com/priscillahnalubega/YouTube-downloader">youtube downloader</a> though faced a lot of challenges with the pytube package.
</p>
<h2>Eat, code, sleep, </h2>
<p>
In week 3 we where Demystifying The Flask Application factory pattern at the end of which I was able to build a <a href="https://github.com/priscillahnalubega/flask-application">simple flask application.</a>
</p>
<h2>Conclusion</h2>
<p> I believe that by the end of the boot camp my confidence as a software developer would have been boosted. The things I have learnt in this boot camp cant be limited to what I have shared but this all I can say for now. 
 thanks for reading, till next time chawwww!!!
Node.js with MySQL database.
Tags: node, mysql
Published: 2021-08-09 21:13:20

Connecting node.js project with MySQL database is easy, follow the following steps to connect to the the database

`By reading this article I believe you have installed nodee Js on your system and familiar with it.`


<h4> Step1</h4>
Open your code editor.

<h4> Step2</h4>
Create a new project
Open your command prompt or terminal and enter

```cmd
 mkdir project_name
 cd project_name
```


<h4> Step3</h4>
Create project file.
enter 
```commad
 npm init -y
```
into the command prompt or terminal.


<h4> Step4</h4>
To be able to connect to mysql database you need to install MySQL module into your project.

To do this is very simple, open your CMD or terminal and enter
```cmd
 npm install mysql
```
this command will install the module into your project.


<h4> Step5</h4>
Now we can open connection From our project code to mysql database
add the code below to your app.js code to open a connection.
```js

const mysql = require('mysql');

// Creating a mysql connection
const conn = mysql.createConnection({
   host: "localhost",
   user: "db_username",
   password: "db_password",
   database: "db_name"
});
```


<h4> Step6</h4>
Let create a simple database and table
```js
conn.connect((err)=>{
   if (err) throw err;
      console.log("Database connected successful");
   var sql = "CREATE TABLE books (book_name VARCHAR(255), book_description VARCHAR(255))";
   con.query(sql,(err, result)=> {
      if (err) throw err;
         console.log("Table created");
   });
});

```
You can leave a comment...
Thanks❤️
Help me find websites dedicated to a single piece of data!
Tags: webdev
Published: 2021-08-10 01:13:25

Hey Devs! I'm working on a project and am trying to collect websites that a) display a single piece of real-time data to answer a question b) are niche. They're usually extremely specific to questions that aren't often asked. This can make them hard to find especially if you don't already know they are there. So I'm looking to crowd source some help! 

I have a small handful of examples, but I'm looking for more. If you have built, or know of, a niche real time data display for a single specific piece of data I'd love to see it! 

It can be something no one would ever care about. It can be useless info. Any website, dedicated to displaying a single piece of data. I look forward to seeing what's out there! Thanks!

[Is it still stuck?](https://isitstillstuck.com/)
A website dedicated to tracking the status of the Ever Given ship that was stuck in the Suez Canal.

[Is California on Fire?](http://iscaliforniaonfire.com)
A website dedicated to displaying California's fire status by answering a simple question "Is California on fire?"

[How many people are in space right now?](http://www.howmanypeopleareinspacerightnow.com)
This website displays the current number of people currently in space, along with some basic information about them such as their name and the country they represent.

[Is Mercury in retrograde?](http://www.ismercuryinretrograde.com)
This website displays whether or not Mercury is currently in retrograde.
Get working Synergy on Ubuntu 20.04, Linux Mint 20.x
Tags: linux, ubuntu, linuxmint, debian
Published: 2021-08-10 07:30:02

No doubt that Synergy is a great tool. But shifted into closed source and lack of update for open source version makes it difficult to work across all platforms. Synergy is available on `pacman`. All you need to do is `sudo pacman -S synergy`. It's that simple but on Ubuntu 20.04 or similar Ubuntu based debian distro there is no easy solution. Most of the `.deb` are old. After searching for a while find a blog post from [Florian Panzer](https://rephlex.de/blog/2020/04/24/synergy-1-11-1-package-for-ubunu-20-04-focal-fossa/) where he rolled his own `.deb` package.
![rephlex.de Blog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mqferwoum5z8qksl43sn.png)

Blog Post: https://rephlex.de/blog/2020/04/24/synergy-1-11-1-package-for-ubunu-20-04-focal-fossa/

Mirror Download Link: https://github.com/shawonsaha/shawonsaha.github.io/tree/main/files/synergy_1.11.1_deb
Global Notification Bar: Best WordPress App for Ecommerce Business
Tags: wordpress, wordpressplugin, ecommerce
Published: 2021-08-10 10:56:44

We at Universe Technologies focus on client satisfaction and transform their project into Revenue Generating Business around the Globe.

We share the happiness of creating something fresh and new that keeps us composed. If you have any online services to offer, this is for you.

Want to boost 🚀your Business? Don’t know how?
Here it is.
The key to any successful business is a healthy sales funnel🛒💰. It is especially true for #eCommerce stores whose survival relies on transforming their site visitors from casual browsers into committing customers.

So, We develop a #globalnotificationbar based on wordpress.
Find new leads with us and transform them into clients for your product or service.

To attract more customers with the focus, we have added a new feature. You customize the background of the image for every notification.

Make your visitors getting engaged, so you can collect more emails and do #emailmarketing to increase sales.
Businesses Are Struggling, They Need Digital Services.
Never Pay For Leads Again.

📱 Get more info and Download App from here 👉
https://wordpress.org/plugins/global-notification-bar/
Why would a React component recreate all its memoized children ?
Tags: react
Published: 2021-08-10 12:29:08

Hello from Belgium,

I have a tree of similar components, each memoized with a custom areEqual. They represent a directory tree in reality. Only the root component knows the full directory structure, and pass down that information recursively to its children as a prop. It is working perfectly well: if I "fold" a child, in exemple, the areEqual functions are called only for that child parents and nothing else is rerendered.

My only problem is when I fold the root component: the root areEqual is tested, return false (as expected)... and then all the children of the whole tree are unmounted/remounted, without a single call to their areEqual functions! In the inspect Profiler companion, I see those children "created for the first time", indicating me that the root parent, when rerendering, considers all its children as being new.

So my question is as fellow: the children areEqual function not being called, they are obviously not recreated because of a prop change. But after several hours of testing, I still don't have a clue on why the root parent consider all of its childrens to be new components. Do you have any idea on how to determine why a component considers its children components to be new instances – even if there are all supposed to be memoised instances ? I'm completely lost on this one :(

Thank you very much in advance !
Quick Notes Based On "Learning JavaScript Exercise" Section of Frontend Masters' "Complete Intro to Web Development, v2"
Tags: javascript, fundamentals, forloops, frontendmasters
Published: 2021-08-11 02:40:11

What I did (in code):

&nbsp;&nbsp;&nbsp; `const character = 'a'`
&nbsp;&nbsp;&nbsp; `const timesRepeated = 50`
&nbsp;&nbsp;&nbsp; `let answer = ''`

&nbsp;&nbsp;&nbsp; `for (let i = 0; i < timesRepeated; i++) {`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `answer += character`
&nbsp;&nbsp;&nbsp; `}`

&nbsp;&nbsp;&nbsp; `console.log(answer)`
&nbsp;&nbsp;&nbsp; `console.log(answer.length)`

&nbsp;&nbsp;&nbsp; Logs: `aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa`
&nbsp;&nbsp;&nbsp; Logs: `50`

What I did (in English):
- Assign the string `'a'` to the variable `character`.
- Assign `50` to the variable `timesRepeated`.
- Assign `''` (an empty string, i.e., a string with a length equal to 0) to the variable `answer`.
- The `for` loop: Set the variable `i` to start at `0`, run the loop as long as `i` is less than `timesRepeated`, and at the end of each iteration of the loop, increment `i` by 1. Each iteration of the loop, store `answer + character` in `answer` (i.e., update `answer`).
- Log to the console `answer`.
- Log to the console `answer.length`.

What I practiced:
- Same as above.

What I learned:
- From the above code, I didn't learn anything new. 
- For this section, there was no instruction outside of the exercise itself.

What I still might not understand:
- Nothing for this section.
ASP.NET Core -Blazor Datagrid server side paging
Tags: webdev, blazor, csharp, dotnet
Published: 2021-08-11 04:23:43

In this video we will discuss how to implement datagrid server side paging in ASP.NET Core Blazor Webassembly project. It's also called on-demand paging or database paging.


Syncfusion Website: https://www.syncfusion.com/

Syncfusion Blazor Components:https://www.syncfusion.com/blazor-components

Blazor WebAssembly Tutorial Playlist
https://www.youtube.com/playlist?list=PL6n9fhu94yhXXmhl1U4_oHZS5nhaabpPN

Blazor WebAssembly Course Page
https://www.pragimtech.com/courses/blazor-webassembly-tutorial/

{% youtube d8GbAa14uZ0 %}
How to manage CSS with esbuild
Tags: javascript, esbuild
Published: 2021-08-11 05:05:53

In this article, I'll show how to add styling to our application. The starting point is where we left in [step 2](https://how-to.dev/how-to-set-up-a-dev-server-with-esbuild).

# JS
To start, let's replace our dummy JS with code that at least put something on the screen. I go with vanilla JS because frameworks tend to complicate the esbuild setup. Let's set `src/index.js` to:
```JS
import "./style.css";

const header = document.createElement("h1");

header.innerHTML = "Hello world";

document.body.appendChild(header);
```

* `import "./style.css";`- by default, esbuild has CSS loader set up, but styles are not included in JS bundle. Before we get to it, we have to add the `./style.css` because now it's failing to build
* `const header = ...` & the following lines - simple code to add element to the page. By doing it in JS, by one glimpse, we can tell if the JS is working or not.

# CSS

The styling goes to `./src/style.css`:
```CSS
body {
  color: #66f;
}
```

If we build our application with `npm run build` or start the server with `npm run start`, we will see the header without the color. That's because styles are emitted to style file - with the same name as our bundle, but with `.css` extension.

# HTML

To include the styling we have to add:
```HTML
    <link rel="stylesheet" type="text/css" href="./main.css"/>
```

With this in place, the application should look like this:

![styled-application.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8em58y2xpnwyjimdj7g2.png)

# Links

The [repo](https://github.com/marcin-wosinek/esbuild-tutorial), branch [step 3](https://github.com/marcin-wosinek/esbuild-tutorial/tree/step-3).

You can check out my [video course about esbuild](https://bit.ly/esbuild-course).

# Summary
In this article, we have seen how to add styling to our esbuild application. If you are interested in the hearing when there is a new part ready, you can sign up [here](https://landing.mailerlite.com/webforms/landing/b8k4x6).
What is VCS ?
Tags: github, git, vcs
Published: 2021-08-11 07:25:31

In simple terms, version control is nothing but a system that keeps track of the changes made to source code or files. With a version control system, you can look back at the changes made to a particular file, either by you or another person, by accessing the version control database. This system gives you the ability to compare different versions of a file, thus allowing you to stay informed about the changes that have happened over a period of time.

The version control system can be referred to as a database that stores snapshots of different files in a project. These snapshots are taken every time a file is modified. It maintains all the records of the different versions of a file. In addition to comparing different versions of a file, VCSs also allows you to switch between them. VCSs can either be distributed or centralized. Let us see how these two types differ.

Centralized version control systems use a single, centralized server to store all the different versions of a file. Users can access these files by gaining access to this centralized server. Now, there is a disadvantage associated with this type of VCS. If the central server fails to function due to any reason, the entire history stored on its will be gone and no one will be able to recover any version/versions of the lost files.

Git is one of the most popular VCS, and I will discuss about Git in the next post.
Till then keep learning and keep sharing.