teleren/devto huggingface dataset:
🛠 From Redux to the Context API: A Practical Migration Guide
Tags: redux, contextapi, migration, tutorial
Published: 2021-06-21 15:13:32

#### 📚 Let's migrate a React application built with Redux to the Context API and see how it looks like.

### <br>
In my previous post, [**"Starting a New App With Redux? Consider Context API First"**](https://auth0.com/blog/starting-a-new-app-with-redux-consider-context-api-first/), I wrote about the [Context API](https://reactjs.org/docs/context.html) as a viable alternative to [Redux](https://redux.js.org/). In this post, I want to show how a React application using Redux looks when using the Context API.

## First Considerations

I'm assuming that my previous article intrigued you enough that you're considering migrating away from Redux. You have to ask yourself: Is migration worth it? The approach based on the Context API might be simpler, but that's not enough of an argument on its own to rewrite perfectly functional code.

I can't tell you if your situation merits the change or not. You have to consider your circumstances and decide based on that. Here are some helpful questions:

- Is this application **likely** to change? The benefits of a simpler codebase become apparent when people are regularly working on it.
- Is this application **safe** to change? Without a solid base of tests to rely on, a major refactoring is doomed to fail.
- Does it make sense from a **business perspective**? I get it. Developers love to work on restructuring their applications. But without alignment with your stakeholders, they may perceive it as technology for the sake of technology.

## A General Approach

Alright, you're still here. You might be thinking: _Let's do this!_. What is the plan? You need _one_. I strongly recommend an incremental approach. Whatever you do, don't do a Big Bang release. Work on small chunks of functionality, and release them bit by bit. You'll thank me later.

Also, be realistic. If your application is big enough, this isn't going to be an immediate transition. In my experience, people often fail to account for the transition period during a migration.

## Enough Talking, Show me the Code!

[Read more...](https://auth0.com/blog/redux-to-context-practical-migration-guide/?utm_source=content_synd&utm_medium=sc&utm_campaign=redux)
Data Types In Java
Tags: java
Published: 2021-06-21 15:12:48

Before taking a deep dive into any programming knowledge, its very important to understand the basics. One of the most important thing to understand is data types. As long as you are a programmer you will always work with data types.

In Java there are two types of data types:

1. Primitive
2. Reference


## Primitive Data Types

### Integer Type

Under this type we have four other types,namely:

* **byte** has a size of **1 byte** and holds integer **-128 to 127**
* **short** has a size of **2 bytes** and holds integer **--32,768 to 32,767**
* **int** has a size of **4 bytes** and holds integer **-2 billion to 2 billion** 
* **long** has a size of **8 bytes** and holds integer **-2 quatrillion  to 2 quatrillion** Note it ends with an "L" 3999999999467898997777776088768759L

### Decimal Type

Under this type we have two types,namely:

* **float** has a size of **4 bytes** and holds fractional number up to 7 digits. **Note** it ends with an "f" 3.467899f
* **double** has a size of **4 bytes** and holds and holds fractional number up to 15 digits. ****

### Char Type

Single character / letter / ASCII value e.g 'h'. Has a size of 2 bytes

###Boolean

Has a size of **1 bit** and its either **True** Or **False**

## Reference Data Types

### String Type

A sequence of characters e.g 'hello world'. It has varying size.

##Difference  between Primitive and Reference Data Types

###Primitive Data Types
1. 8 types
2. Stores data
3. Can only hold one value
4. Less memory
5. Fast

### Reference Type
1. Unlimited(user defined)
2. Stores an address
3. Could hold more than one value
4. More memory
5. Slower
Dockerfile: Best practices for building an image
Tags: devops, docker, cloud, kubernetes
Published: 2021-06-21 15:01:04

Hi there,

This is Ankit, your friendly DevOps content curator. I read a lot of articles about DevOps, distributed systems, performance monitoring, etc., and then share key takeaways from those articles so that you can stay updated and learn a few things quickly.🙂

I read this article on best practices for building a docker image. A Docker image serves as a template to build Docker containers. It also acts as a starting point when using Docker.

Link to the full article👇
[Dockerfile: Best practices for building an image](https://medium.com/swlh/dockerfile-best-practices-for-building-an-image-6120e512b1fa)

## Summary of best practices for building Docker images

Below is the list of best practices to follow while building Docker images:

### 1. OS base image
OS base image size can have a lot of impact on image sizes and security vulnerabilities. You should choose minimal Docker images like Alpine(~5 MB) compared to the most downloaded base image like ubuntu(~188 MB)

### 2. Base images
Each base image should have a specific goal and should be as generic as possible to ensure re-usability.

### 3. Docker users with minimal privileges
Docker users should only have the privileges that they need. For e.g. the ROOT user should not be used for starting the container.

### 4. Leverage Dockerignore
Dockerignore can be used for keeping your Docker images as lean as possible. You can create a file named .dockerignore in your root folder and use it to exclude files and directories that are not needed to run the app.

### 5. Be specific with AND or COPY
While using `AND` or `COPY`, be specific with the folder or files you want. It is an easy way to optimize image size.

### 6. Specific tag instead of fixed tag
Docker tags convey useful information about specific image versions/variants. Avoid using fixed tags like 'latest' as it makes it hard to track which version of the image is running and hard to roll back.

### 7. Image life cycle management
A security breach can happen in case you are running a deprecated version of an image. Hence, it's necessary to put in place a proper image life cycle management.

### 8. Sensitive information
Environment variables are not a good way to manage secrets as they are not encrypted. Solutions like Hashicorp vault can be used for managing secrets.

### 9. Multi-stage builds
With multi-stage builds, you use multiple `FROM` statements in your Dockerfile. Using multi-stage builds, you can selectively copy artifacts from one stage to another, leaving behind everything you don’t want in the final image.


### 10. Combine commands
As each command in a Dockerfile adds one layer to the image, one way to reduce image size is by combining commands. For example, multiple RUN commands can be combined into a single RUN statement.

___

I hope you enjoyed this summary and learned something new. I will be coming up with more such notes soon.

Please give me a follow if you liked it 🙌
___

Currently building [SigNoz](https://bit.ly/35G7QXU) - an open-source APM & observability tool 💙

{% github signoz/signoz %}
Daily Developer Jokes - Monday, Jun 21, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-06-21 14:50:12

---
title: "Daily Developer Jokes - Monday, Jun 21, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Monday%2C%20Jun%2021%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12596739999.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Why couldn't the React component understand the joke?

___A:___ Because it didn't get the context.
 -->
Prototype.call() vs Prototype.apply()
Tags: apply, call, javascript, ecmascript
Published: 2021-06-21 14:42:35

---
title: Prototype.call() vs Prototype.apply()
published: true
date: 2021-06-21 14:41:44 UTC
tags: apply,call,JavaScript,ecmascript
canonical_url: https://blog.jws.app/2020/prototype-call-vs-prototype-apply/
---

This is going to be a relatively short post.  We have been doing a lot of [x] vs [y] vs [z] posts on the main blog and this one is no different.  Today, I figured that we would look at [Prototype.call()](https://codepen.io/steinbring/pen/37fde6087a63c6775687ff1eece47bb6?editors=1010) vs [Prototype.apply()](https://codepen.io/steinbring/pen/516f22b7a9491922ad5cb2b0363a4783).  Both [apply()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply) and [call()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call) are used to invoke functions.  The difference is that call uses a comma separated list of arguments and apply uses an array of arguments.

### Prototype.call() example:

{% codepen https://codepen.io/steinbring/pen/XWdGYMV %}

### Prototype.apply() example:

{% codepen https://codepen.io/steinbring/pen/QWNoxpE %}

For the sake of clarity, both examples do the same thing beyond the one difference.  They both have teachers, students, and persons but where one uses `Person.apply(this, [fname, lname]);` the other one uses `Person.call(this, fname, lname);`.

Have a question, comment, etc?  Feel free to drop a comment, below.

 

The post [Prototype.call() vs Prototype.apply()](https://blog.jws.app/2020/prototype-call-vs-prototype-apply/) first appeared on [Blog.jws](https://blog.jws.app/).
How to get RSS from wordpress using PHP
Tags: webdev, php, wordpress, html
Published: 2021-06-21 14:32:55

Good evening. Today, I'll introduce how to get arbitrary information from RSS feed and display it in HTML.
Recently, I'm developing only with Laravel, so I didn't write PHP in the vanilla environment, so make a note so that you don't forget it.
## Sample & Code
### Sample
This time, I got the latest 5 articles from the RSS feed https://0115765.com/feed/ of this blog.(It’s displayed in Japanese)

https://0115765.com/samples/rss.php
![RSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8vo3fxvbs4s0xhucsov7.png)

### Source Code
It's a very simple mechanism that just reads and parses the XML.
```php
<?php
// Get RSS&Pursing XML
$rss = simplexml_load_file('https://0115765.com/feed');

$cnt = 0;
foreach($rss->channel->item as $val){
    // Make HTML
    echo "<a href='" . $val->link . "'>" . $val->title . "</a><br>";
    echo date("Y/m/d", strtotime($val->pubDate)) . "<br>";
    $cnt++;
    
    // End with the number of items you want to display.
    if ($cnt==5) {
        echo "View Older Article";
        break; // Be sure to end with break.
    }
}
```
Please also check the blog and Twitter if you like :D
[Twitter @tomox0115](https://twitter.com/tomox0115)
[My Profile&Portfolio](https://tomox0115.github.io)

## XML Composition
The XML structure of each article in the RSS feed looks like this.
```xml
<item>
	<title>
		Article Title
	</title>
	<link>
		https://0115765.com/archives/xxxx
	</link>
	<comments>
		https://0115765.com/archives/xxxx#respond
	</comments>
	<creator>
		Creator
	</creator>
	<pubDate>
		Publish Date
	</pubDate>
	<category>
		Category
	</category>
	<guid isPermaLink="false">
		https://0115765.com/?p=xxxx
	</guid>
	<description>
		Article Discription
	</description>
	<commentRss>
		https://0115765.com/archives/xxxx/feed
	</commentRss>
	<comments>
		xxxx
	</comments>
</item>

```
Prototypes vs Traditional Classes
Tags: javascript, oop
Published: 2021-06-21 14:26:21

The difference between **classes vs prototypes is a common question among Javascript devs** and from experience I can say it’s really hard to understand especially if you have only known programming through the lens of JS. 

But I think I found a simple way to put this in simple words. Let me know what you think. 

I want to start by clarifying that Javascript is a **language based on prototypes** which is a design pattern. I haven’t read an explanation making this connection before or menting this pattern when clearing up what it’s a prototype, so I thought it was worth meaning it. 

*If you haven’t heard of design patterns, I recommend you to start checking them out. Basically it’s a standardized pack of solutions for common programming problems. And if you are a Javascript developer definitely take a look at the prototype pattern.* 

With this pattern you can create a **clone** of an existing object without being dependent on its class. This may not sound like a big deal for a Javascript developer, but this is not the default behavior in object-oriented languages like Java, in which you can’t create objects out of nowhere by just opening and closing curly brackets; you must create a class to be able to create an object. 

*You can always implement a prototype design in Java, but the entire language wasn’t built upon it.*

So we fall back into the question, what’s the difference between traditional classes (like the ones you found in languages like Java) and the prototypes you found in Javascript?  

As a Javascript developer myself, I came up with this analogy to help my brain solidify the idea:   

> With prototypes you are creating clones, with traditional classes you are given birth. 

The cloned objects are also able to clone themself, so the design is not based on creating a blueprint responsible for constructing objects, but in **objects able to copy and paste themself.** 

With the arrival of “classes” in Javascript, this concept was harder to understand, **they look like classes, so they must be classes right?**....well not quite the case, they are just a different way to write prototype objects, underneath they are nothing like the traditional classes.

Let me know what you think, is this a good way to explain the difference?
Is the Selenium testing tool easy to learn?
Tags: selenium, seleniumtest, seleniumtesting
Published: 2021-06-21 13:18:52

Selenium is a free (open source) electronic testing suite for web applications across various programs and stages. In any case, it is like HP Quick Test Pro (QTP now UFT). Be that as it may, Selenium centers around mechanizing web applications. Further, testing done utilizing the Selenium apparatus is typically alluded to as Selenium Testing. 

It isn't only a solitary instrument yet a set-up of programming, wherein each takes into account diverse testing needs of an association. It has four segments – 

Initially, Selenium Integrated Development Environment (IDE) 

Besides, Selenium Remote Control (RC) 

Thirdly, WebDriver 

Ultimately, Selenium Grid

Why should you learn Selenium?

The advantages of <a href="https://www.testingxperts.com/blog/selenium-testing">Selenium for Test Automation</a> are massive which has made Selenium one of the most requested and famous apparatuses. Here we are clarifying a portion of the top motivations to learn selenium. These reasons will help you in making a decent profession in computerization. Thus, let begin. 

Firstly, Selenium is an Open Source/Free Tool 

Besides, Selenium requests no extraordinary OS/Browser or Hardware 

Thirdly, Selenium bolsters numerous Programming Languages
The cheekiest React versus Web Components post
Tags: webcomponents, javascript, webdev, showdev
Published: 2021-06-21 13:44:16

---
title: The cheekiest React versus Web Components post
published: true
description: How a well written Web Component can beat React code
tags: webcomponents,javascript,webdev,showdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mf0rm6s4zaoyz1sc9aj2.jpg
---

It is never polite to make fun of someone else. 

Rest assured my pun is aimed at the technology, not the author.

### React (+ D3)

[This DevTo post](https://dev.to/vineethtrv/react-d3-donut-chart-49cm) uses:

* **4487 Bytes** React library  <sup>source: https://minime.stephan-brumme.com/react/17.0.2/</sup>
* **88200 Bytes** D3 graphing library
* app. **150** lines of **JavaScript** code

to create a donut chart:

![](https://res.cloudinary.com/practicaldev/image/fetch/s--367Pul1r--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vy0i2voa4xfjvlzo04ap.png)

### Web Component 

The same donut chart can be created 
using the **999 Bytes** [Pie Meister Web Component](https://pie-meister.github.io) and **only HTML**:

{% jsfiddle https://jsfiddle.net/WebComponents/7envzgfq html,result,js,css %}

{% jsfiddle https://jsfiddle.net/WebComponents/7envzgfq result,html,js,css %}

<br>
<hr>
<br>

{% jsfiddle https://jsfiddle.net/WebComponents/62f1eLay result,html,js %}
New Generation Setting Files
Tags: python, github
Published: 2021-06-21 13:38:15

Don't you think there should be a better way than making a setting file for your program and hoping that user can figure out how to use it through documentations? Like giving user an interface to change settings and a tool to make settings for developers?
Once i tried changing mysql setting files on a server and it was very unclear what my options are, what is the right thing to do? i had some stress will i break the program by messing with server? i couldn't find good documentation or a full enough documentation so i started a project to make this situation easier. 
with sema user has a nice GUI interface to work with settings and developer can make setting files in predetermined way.

I would love to hear about your reviews about this project.

Check my project at: https://github.com/MoeinMavini/sema
TIL how to ship an executable with Poetry
Tags: todayilearned, python
Published: 2023-05-19 20:39:17

---
title: TIL how to ship an executable with Poetry
published: true
date: 2021-06-21 13:28:00 UTC
tags: TIL,python
canonical_url: https://www.zufallsheld.de/2021/06/21/til-how-to-ship-an-executable-with-poetry/
---

I wanted to build an executable python script on PyPi, so it can be run like `MyPackage` instead of `python MyPackage.py`.

Finding out how to do this with Poetry was hard. Googling for “Python [distribute\|publish] executable” didn’t yield any useful results. I don’t even know how I found the correct answer anymore, but what you need are “scripts”: https://python-poetry.org/docs/pyproject#scripts

These scripts describe executables that will be installed in the user’s system:

```
[tool.poetry.scripts]
MyPackage = "MyPackage.MyPackage:main"

```

After adding this to `pyproject.toml` and building the project, I can then run `MyPackage`!
Javascript Questions
Tags: javascript, beginners, intermediate
Published: 2021-06-21 13:05:48

💡 for (var i = 0; i < 3; i++) 
      {
    setTimeout(() => 
    console.log(i), 1);
      }

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1);
}



A: 0 1 2 and 0 1 2
B: 0 1 2 and 3 3 3
C: 3 3 3 and 0 1 2

Answer: C
Because of the event queue in JavaScript, the setTimeout callback function is called after the loop has been executed. Since the variable i in the first loop was declared using the var keyword, this value was global. During the loop, we incremented the value of i by 1 each time, using the unary operator ++. By the time the setTimeout callback function was invoked, i was equal to 3 in the first example.

In the second loop, the variable i was declared using the let keyword: variables declared with the let (and const) keyword are block-scoped (a block is anything between { }). During each iteration, i will have a new value, and each value is scoped inside the loop.
We need to make content creation worth software engineers' time
Tags: writing, watercooler, webdev, devjournal
Published: 2021-06-21 12:52:47

Software engineers make a lot of money. And yet, blogging, for most tech writers, pays very little. How do we reconcile these two truths?

---

To make the numbers more concrete, let's imagine a software engineer makes $100,000 per year. If they work 40 hours per week, 52 weeks per year, that comes out to roughly $48.08 per hour.

A salary of $150,000 would be $72.12 per hour, and a $200,000 salary would be $96.15 per hour.

That's a lot of money. And yet, most paid tech writing opportunities advertise payments of anywhere from $100 to $350 per article. That sounds decent until you consider how many hours go into writing an in-depth technical blog post.

Let's go with the higher number and say that a publication will pay you $350 to write an article for their blog. In order to match a $100,000 salary, you'd want to spend no more than 7 hours writing the article.

If you make $150,000 per year, you'd want to spend just under 5 hours writing the article. And for $200,000 per year, your target would be about 3 and a half hours.

---

In reality, I find myself spending about 10 hours when working on any freelance piece of writing. It takes time to put together a working demo app and an easy-to-follow tutorial, not to mention any back and forth or editing with the client.

So taking those 10 hours as a baseline, writing an article for $100 would amount to $10 per hour. Writing an article for $350 would equate to $35 per hour.

Looking strictly at the compensation, this isn't a very good deal.

---

So why do we do this? Or, even more astonishing, why do we write for free?

For me, writing is a form of teaching. It's a way for me to solidify my own thoughts while simultaneously giving back to the community and sharing what I've learned. Writing is great for sharpening your communication skills. It's also a way to establish yourself as an expert in your field. Writing might make it easier for you to land your next job, and it may even open up opportunities for paid speaking engagements.

Ultimately, writing is intrinsically rewarding - as long as you're passionate about the subject matter.

When it comes to paid writing gigs though, often the topics are pre-selected or require you to promote a specific product or technology. In those instances, you may not be as intrinsically motivated. To compensate, the external rewards need to be greater.

In other words, publications advertising paid writing opportunities need to increase the financial incentives. The consequence of failing to do so is losing out on top engineers passing up writing engagements because they're simply not worth their time.