teleren/devto huggingface dataset:
Memoize a React component
Tags: react, webdev, memoization
Published: 2022-08-25 12:29:29

Memoization is a feature in React. The library compares (in a shallow way) two versions of an object and, if they are the same, does not re-render (or recompile) it, creating an optimization in performance and memory.

The React.memo higher order component (to notice, not useMemo) used on a component is very easy to implement, but it's not always efficient or necessary. As everything about memoization in React, we shouldn't memoize everything but just the objects that are heavy, big, or re-renders very often.

So in my job it happened  an interesting case. I had quite a big parent component that is wrapping inside smaller children components. I'll just change the type of subjects and component name, but the example I'm giving is the same I have.

How do we memoize a component?

Supposing we have:

```js
  const BigComponent = ({...lots of props}) => {...lots of stuff done}
```

then we just put memo on the export 
```js
  export default memo(BigComponent)
```

Is it enough? Sometimes yes. But the more interesting part is another. How does React knows what to compare? It takes a previous version, and a next version (the one we're updating with new props). In the same way, memo could use those two version as callback arguments. They can be checked to make a quicker comparison, speeding up even more the memoization process.

Supposing that our BigComponent is mostly managing a school student card, and we have the children components showing according to the student. Then we'll have BigComponent supposedly changing when the id of the student change (supposing that is mapped from a parent component).

```js
  const BigComponent = ({student, ...other props}) => {...lots of stuff done}
```

We can now memoize the component comparing the IDs of the student. We can think of the IDs as the keys of the object. If they're the same, the component will remain the same, otherwise it will re-render.

But as you can see, I've done it slightly differently!
```js
  export default memo(BigComponent, (prev, next) => prev.student.id !== next.student.id)
```

This above will say: if the previous ID is different comparing to the next one, return true. The problem here is that we're getting the props and we use them on a child component, so if the IDs are the same (===) it won't do anything (won't open the card). 

In my case, it checks that the IDs are different, and don't do anything. But if they're the same, it'll allow the rerender. It's similar to how ShouldComponentUpdate was working, as we're giving the condition on when to rerender.

So, to sum up, we're memoizing (not rerendering) this component the opposite way only when the IDs (keys) change. That means that when we open a student card it will rerender. But when we add more students, or we use other student cards, they won't rerender in the page, and we will be getting a performance improvement.
Digital China officially joined the openGauss community
Published: 2022-08-25 12:11:19

On August 16, Digital China (China) Co., Ltd. signed CLA (Contribution License Agreement, Contribution License Agreement) and officially joined the openGauss community.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q2wikugzimgrnruvjtds.png)
With the mission of "Digital China", Digital China is determined to change and forge ahead, and always adhere to the world's leading technology and independent innovation core technology to empower the digital transformation of the industry and the development of the digital economy. 
As a leading digital transformation partner, Digital China has pioneered the "digital cloud integration" strategy and technical system framework around the key elements of enterprise digital transformation, focusing on cloud native, digital native, key technologies of digital cloud integration and the innovation industry. Build product and service capabilities to provide ubiquitous agile IT capabilities and integrated data-driven capabilities for customers in FMCG, automotive, finance, healthcare, government and enterprise, education, operators and other industries at different stages of digital transformation. The world integrates innovative digital business scenarios and new business models to help enterprise-level customers build future-oriented core capabilities and competitive advantages, and comprehensively promote the digital and intelligent transformation and upgrading of society.

Digital China's TDMP data desensitization platform is committed to enterprise data security and test data management to protect enterprise privacy data. It has the characteristics of high security, high availability, high reliability, high stability and high efficiency, and can be widely used in banking, insurance, securities, postal, telecommunications, logistics and transportation enterprises, manufacturing enterprises, medical care, government, cloud, big data , education, end-customer-facing Internet services company. As an open source relational database management system, openGauss is deeply integrated with Huawei's years of experience in the database field. It has enterprise-level features such as high performance, high reliability, high security, and easy operation and maintenance. It is currently widely used in finance, telecommunications, government affairs, etc. field.

Digital China and openGauss database are powerful alliances, and will work together to carry out exchanges and cooperation in enterprise data security and test data management to provide users with more secure and stable database solutions.
TV Channel Website: Route to Dashboard
Tags: webdev, tutorial, python, bottle
Published: 2022-08-25 12:04:00

GitHub: [https://github.com/Sokhavuth/TV-Channel](https://github.com/Sokhavuth/TV-Channel)
Vercel: [https://khmerweb-tv-channel.vercel.app/login](https://khmerweb-tv-channel.vercel.app/login)
<br/>

<p>To be able to build a dashboard, we need to define a route to that page first. This route will be linked to the Post class in the controllers section that in turn will be linked to the views section.</p>

```py
# index.py

from bottle import static_file, get
from routes.frontend import index
from routes.frontend import login
from routes.backend import admin


app = index.app
app.mount("/login", login.app)
app.mount("/admin", admin.app)

@app.get('/static/<filepath:path>')
def staticFile(filepath):
    return static_file(filepath, root="public")


###################################################################
import socket
host = socket.getfqdn()    
addr = socket.gethostbyname(host)
if(addr == '127.0.1.1'):
    app.run(host='localhost', port=8000, debug=True, reloader=True)

###################################################################
```

```py
# routes/backend/admin.py

from bottle import Bottle


app = Bottle()

from . import post
app.mount("/post", post.app)
```

```py
# routes/backend/post.py

from bottle import Bottle, get
from controllers.backend.post import Post


app = Bottle()
post = Post()

@app.get("/")
def getPage():
    return post.getPage()
```

```py
# controllers/backend/post.py

import config, copy
from bottle import template, redirect, request

class Post:
    def __init__(self):
        self.setup = copy.deepcopy(config.settings())


    def getPage(self):
        self.setup["pageTitle"] = "Post Page"
        self.setup["route"] = "/admin/post"

        return template("base", data=self.setup)


```
Is there a feature to mark something as read in dev.to ?
Tags: meta, help
Published: 2022-08-25 12:03:00

I'm using the forem android app.

I would like to hide/archive/mark as read posts. To make my feed clearer.

The feature exists in the saved articles and it make sense.

Some articles are pushed via tags I follow, but I find them irrelevant. Once read, I would like get read of them.

Is it possible ? Planned ?

EDIT: an github feature request discussion has been opened https://github.com/forem/forem/discussions/18385
😎Host your express API in Heroku in a second🔥👇👇
Published: 2022-08-25 11:46:11

step 0

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7lgolgb3zve98e1up2ya.jpg)
step 1

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gba3fdw2w0we7j54qd2d.jpg)
step 2

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/652u4y4c77znc6l2kr79.jpg)
step 3

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9yyza6s2r7lkbaeh8z9q.jpg)
step 4
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qrr2qs7jxfiij1edyy3z.jpg)
step 5

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5m4cfbh5rs1owtsy7r1x.jpg)
step 6

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p6gfaq2dywdlv95sctab.jpg)
step 7

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hml719nwx8xt9wz5prqn.jpg)
step 8

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jahrei4i0pavzlknjglt.jpg)
Steps to install User Meta
Tags: user, wordpress, programming
Published: 2022-08-25 11:50:57

📌[ User Meta Pro](https://user-meta.com/) is a well-designed, feature-rich, and easy-to-use user management plugin that allows front-end profile update, user registration with extra fields, email notifications and many more.
Install User Meta Pro plugin by following 4 easy steps. 
♦︎  Download Zip File
♦︎  Upload the Zip File
♦︎  Activate the Plugin
♦︎  Validate Subscription
[Installation and License Validation Video ](https://www.youtube.com/watch?v=AooTrSIJ9ls)
Oriental Datang officially joined the openGauss community
Published: 2022-08-25 11:48:30

Recently, Shenzhen Oriental Datang Information Technology Co., Ltd. (hereinafter referred to as Oriental Datang) signed the CLA (Contribution License Agreement, Contribution License Agreement) and officially joined the openGauss community.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hh232ih69sogo9cxcivf.png)
Orient Datang is a new-generation enterprise management digital transformation solution service provider. 
It has the qualifications of National Double Soft Enterprise, High-tech Enterprise, ISO Quality System and CMMI. Professional services such as product, application development, management consulting and system integration, etc., assist customers to build an enterprise digital management platform system with big data, blockchain and artificial intelligence as the core. Dongfang Datang implements the system development idea of ​​"exclusive customization", relies on the self-developed wiilead micro-service middle-end, integrates the concept of risk management and value enhancement, and creates a business management engine that best fits the management thinking of Chinese enterprises.

This time together with the openGauss community, Dongfang Datang will carry out more cooperation in database compatibility, code contribution, community organization, summit activities and so on. In the future, it will deeply integrate and replace closed system management tools, create a digital business management platform for more industry customers, and help customers from good to excellent.
Tourz officially joins the openGauss community
Published: 2022-08-25 11:45:33

On August 12, Hangzhou Tourz Information Technology Co., Ltd. (hereinafter referred to as Tourz) signed CLA (Contribution License Agreement) and officially joined the openGauss community.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/khwy9v0e0inhlg0tdi50.png)
Toulz (www.bintools.cn) is a R&D-oriented data tool software company, focusing on security and efficiency, providing databases such as control, publishing, auditing, desensitization, replication, encryption and decryption, anti-leakage, analysis and other enhancement tools. The main product CloudQuery integrated data operation management and control platform is a unified and secure data access portal for enterprises. 
It supports and controls the data operations of developers and operation and maintenance personnel in the whole link. It includes SQL client, permission middleware, efficient dynamic desensitization, Comprehensive audit and analysis of early warning, data leakage prevention and other functions. DockQuery database client, supports domestic and foreign databases, and includes advanced functions such as data specification modeling, smart prompts, LiteBI, and cloud-integrated collaboration.

Turz joins the community and will provide enterprise-level database tools around openGauss, such as cloud management and control platforms, desktop clients, and database version publishing systems. At the same time, it provides efficiency/security customized solutions for openGauss enterprise users, such as auditing, desensitization, replication/migration, data classification and so on.

Turz will also deeply participate in community construction in the following directions, and jointly build the openGauss open source database root community.

DSS:  database development tool that can contribute commercial functions/features such as auto-completion, data specification, data modeling, etc.;

CM (  Operation Manager): Provide industry-related operation and maintenance tools, such as data change, advanced import/export, Web SQL, etc.;

Driver : Embed passwordless authentication, TLS, etc. in the driver layer.
vi (visual editor)
Tags: vim
Published: 2022-08-25 11:39:00

Now that you are here you need to choose which text editor to code with and this is a serious decision you have to make.
The most common and widely used text editors are Emacs and vi, so we are going to cover vi in this post and i will explain Emacs in the next blog post.

vi (visual editor) is a default editor that comes with the UNIX operating system.

Okay now lets talk about vi, well vi gets a bad rep some times because it hard to learn for beginners but once you get to know it, its fairly simple to use and effective.
one advantage i like about vi is that you can find it on any Linux OS except on Ubuntu then you might have to reinstall it properly.

---
lets get into it then,so vi is a full screen editor(doesn't allow you to type any command in the terminal while it is open and it covers the hole terminal) and it has two base of operation.

- **Command mode**: for manipulate the file

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v7nlqy1rsgyduuvibi5s.png)

- **Insert mode**  : for typing text

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w3ekb1gqcsalqxk45f1d.png)

## To Get Into and Out Of vi


**Create a file in vi**

`vi hello.txt `

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ydf4v1j2o4o8ezrixu15.png)
**Exit vi**

If you are in Insert mode you need click Esc or Ctrl [, then enter the commands.

> On command mode

`:x to save the file and quit `
`:w Save and continue editing.`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w7lazobopiiokyvmyao9.png)

`:q! to quit without saving the file`


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bodz1rvor9icbc1sh81d.png)

## Moving the Cursor

In vi you must use the keyboard to navigate around and this saves you time because you don't constantly use the mouse then get back to the keyboard. 

some navigation keys are 

> On command mode

`j  move cursor down one line`
`k  move cursor up one line`
`h move cursor left one character`
`l move cursor right one character`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pii33oj37ajq7maup1uv.png)
`0 move cursor to start of current line (the one with the cursor)`
`$ move cursor to end of current line`

## Adding, Changing, and Deleting Text

**Undo**

`On command mode`

`:u UNDO WHATEVER YOU JUST DID`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c27738pomqufs7fpkdbl.png)
`i insert text before cursor`
`x delete single character under cursor`
`dd delete entire current line`
`yy copy (yank, cut) the current line into the buffer`
`p put (paste) the line(s) in the  current line`


> This are the important commands to know vi

> Tip: Read the documentation to vi in here [vi](https://www.cs.colostate.edu/helpdocs/vi.html)
Why you need AWS I AM Identity Centre.
Tags: identity, security, iam
Published: 2022-08-25 11:05:00

## AWS I AM  identity centre 
formerly known as AWS SSO is a centralized, one stop centre where access is managed for AWS accounts and application.
I AM which is Identity Access Management holds a pivotal place in cloud computing and in Aws resources because functionality of resources and architecture.
IAM  basically provides authentication on a granular level resource by resource in the AWS environment. It gives flexibility and creativity on how you design ,tailor accessibility and permissions. 
As interesting as this may sound, the limitation is that you have to grant permission to an account by account basis.
[The Well Architected Framework](https://aws.amazon.com/architecture/well-architected/) was a way out of this otherwise cumbersome task in helping to build scalable designs.

## AWS Single Sign-On (AWS SSO)
—is an expression of IAM, built on its structure to provide centralized access management to  across AWS accounts. The need was further enforced by and through customers use and  adoption of multi-account AWS environments made AWS decide to provide the service.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i0pjdqtr9hrzq3p2cvdl.png)
 

I AM identity center is free and it helps in simplifying  access to the aws environment with multiple accounts.Although the AWS IAM center formerly known as AWS Single Sign on(AWS SSO) was used for multi -account

I AM IDENTITY CENTER helps you connect to your existing workforce directory, create users in one place to use across aws services.
The youtube video below explains more
[https://youtu.be/4yJp5-jGGNk](https://youtu.be/4yJp5-jGGNk)
I am identity center can do the following:

1.Enable multi-account access to your AWS accounts.
2.Enable single sign-on access to your AWS applications.
3.Enable single sign-on access to Amazon EC2 Windows instances.
4.Enable single sign-on access to cloud-based applications.
Fixing the 'Exec Format Error' with Docker Containers on AWS ECS
Tags: aws, ecs, execformaterror
Published: 2023-08-23 12:39:56

---
title: Fixing the 'Exec Format Error' with Docker Containers on AWS ECS
published: true
date: 2022-08-25 09:15:31 UTC
tags: aws, ecs, execformaterror
canonical_url: 
---

The "exec format error" when running docker containers on AWS ECS is caused by a mismatch between the host machine's architecture and the docker image's architecture.

For example, if you are launching an ECS task on an EC2 instance with an ARM-based processor like Graviton, but your docker image is built for x86, you will see this error. The executable in the docker image is incompatible with the host architecture.

To fix this:

- Check if your ECS cluster is running on EC2 instances with ARM processors (like Graviton). If so, you need to build your docker image specifically for ARM.

- Make sure the docker image you are using matches the host architecture. For ARM, use images tagged with "arm64" or push your own image built on ARM.

- If running multiple architectures, you can use ECS Anywhere to build multi-architecture images to run on heterogenous clusters.

- Double check the Dockerfile for the image to ensure it can support multiple architectures if needed.

With matching architectures between the docker image and ECS host, the "exec format error" should no longer occur when launching ECS tasks. Carefully checking the host setup and docker image builds will avoid this mismatch.
10 Useful playgrounds for a web developer
Tags: webdev, web3, playwright, playgrounds
Published: 2022-08-25 09:08:00


Don't want to run the full project for minor tweaks and changes?

Here's the list of 10 playgrounds that can be useful for you if you want to test it very quickly or for experimentation.

You can also save and share it with your colleagues or friends.

**Playgrounds:**

DB fiddle — for Mysql and PostgreSQL
Mongo playground— for MongoDB
Go playground — for Golang
Codepen — for HTML, CSS and js
Tailwind Play — for tailwind CSS
Tutorials point — for python
Online PHP — for PHP
Playcode.io — for HTML, CSS, js, and all-purpose playground including frameworks
CodeSandbox — for HTML, CSS, js, and all-purpose playground including frameworks
Font playground — For trying various font families and size

To read more, navigate to our website [blog.canopas.com](https://blog.canopas.com/10-useful-playgrounds-for-a-web-developer-68b4d1f4c26a)

If you'd like to explore more about us, here are the links:

Website: [https://canopas.com/](https://canopas.com/)
Blog:  [https://blog.canopas.com/](https://blog.canopas.com/)
YouTube:  [https://www.youtube.com/channel/UC77VyeTVJ45HiUS_o2GNcBA](https://www.youtube.com/channel/UC77VyeTVJ45HiUS_o2GNcBA)
Twitter: [https://twitter.com/canopassoftware](https://twitter.com/canopassoftware)
GitHub: [https://github.com/canopas](https://github.com/canopas)
Real-Time Supply Chain Visibility: Best Solutions To Keep Shipping Operations Transparent
Tags: supply, chain, visibility, realtime
Published: 2022-08-25 09:03:46

between companies striving to achieve “one-day delivery” for more customers’ satisfaction.

Custom or ready-made software solutions can boost the ability of the stakeholders to access real-time data relevant to the order process, inventory, delivery, and potential supply chain disruptions.
https://innovecs.com/blog/supply-chain-visibility/
Automated Inventory Management System: How It Works To Enhance Your Business
Tags: automated, inventory, management, systems
Published: 2022-08-25 09:02:09

An automated inventory management system contributes greatly to business digitalization, leading to increased system accuracy, the tuning of real-time tracking, early problem detection, and increased efficiency. Obviously, an automated inventory system is able to grant new possibilities to your business.
https://innovecs.com/blog/automated-inventory-management-system/