teleren/devto huggingface dataset:
Optimize Renders in React.js Function Components
Tags: react, javascript, webdev, tutorial
Published: 2021-10-18 01:55:53

You may come across issues in react where transitions and animations fire more than you'd like and in some cases it may be hard to control those renders, especially when dealing with libraries. In my case I had chart animations that would fire when the component was rendered and there wasn't any easy way to throttle that or prevent the duplicate transitions.

The docs point out that
> This method only exists as a performance optimization. Do not rely on it to “prevent” a render, as this can lead to bugs.

Speaking of https://reactjs.org/docs/react-api.html#reactmemo.

This is a memoization technique not afforded by component should update since we're not using class components. To the react docs point it can be buggy, but in my case it works wonders and prevents rampant animations.

```jsx
import * as React from 'react';

export default React.memo(function MyComponent({
  data,
  options
}) {

  const [chartData, setChartData] = React.useState(() => {
    // some advanced filtering for the chart
    return (data || []).filter(item => item !== item + 1);
  });

  return (
    <Chart {...options} {...chartData} />
  );
});
```

In this hypothetical chart component, if the parent would render, well the myComponent would rerender, which normally isn't an issue, but in our case the chart has transitions on it that trigger on every render and we cannot modify that API because it's a 3rd party. This will provide and easy way for us to still use hooks and only have the myComponent to render once, which will run our filter logic on the data and allow a performance optimization as well possibly.

Important note: hooks still work as you'd expect in a memoized component so you can use them and get renders on state change.

I think the majority use case is the intended of the react team which is performance for unnecessary renders, but this works perfectly for throttling renders in the case of UI side effects.
Getting Started with YOLTv4 for Object Detection in Imagery: Part 1
Tags: machinelearning, yoltv4, imagery, jupyter
Published: 2021-10-18 01:38:39

This tutorial attempts to fill gaps in this excellent article: [Announcing YOLTv4: Improved Satellite Imagery Object Detection](https://towardsdatascience.com/announcing-yoltv4-improved-satellite-imagery-object-detection-f5091e913fad).

## Preparing your computer with a GPU

This part is specific to this Kubuntu Focus M2 which has a NVIDIA GPU. This part is optional, but make sure that NVIDIA drivers installed.

 ```bash
/usr/lib/kfocus-001/bin/fixup_run.sh 0 1 1
# If libraries do not match, run the following:

/usr/lib/kfocus-001/bin/fixup_run.sh
```

You can also install the Kubuntu Focus Deep Learning Suite if you wish to run the tutorial on you computer.

## Build the YOLTv4 Docker container

You will need Docker installed. You can use the [convenience script](https://docs.docker.com/engine/install/ubuntu/#install-using-the-convenience-script) for Linux systems to simplify installation.

The tutorial uses a CUDA enabled Docker container. Follow the instructions in section [2.1 Installation](https://towardsdatascience.com/announcing-yoltv4-improved-satellite-imagery-object-detection-f5091e913fad).

## Running Jupyter from the YOLTv4 container

The tutorial assumes you know how to run a Jupyter note book in the yoltv4 container. This isn't apparent and here's how to run the notebook in the container. 

Start the YOLTv4 Docker container interactively and specify port 8888 to access Jupyter on the host machine.

```bash
nvidia-docker run -it -v /yoltv4:/yoltv4 -ti --ipc=host -p 8888:8888 --name yoltv4_gpu0 yoltv4_image
```

Note that the container is running as root and that we need to specify the host machine IP address, otherwise the Jupyter server will only be available on the container's IP address, e.g., 172.17.0.1.

```
$ (yoltv4) root@adf5ef237fc4: jupyter notebook --ip 0.0.0.0 --allow-root --no-browser

## some output followed by:
[I 00:40:23.697 NotebookApp] Use Control-C to stop this server and shut down all kernels (twice to skip confirmation).
[C 00:40:23.700 NotebookApp] 
    
    To access the notebook, open this file in a browser:
        file:///root/.local/share/jupyter/runtime/nbserver-22-open.html
    Or copy and paste one of these URLs:
        http://e1c3bd493c38:8888/?token=823ecbcbcde87da0b9a7225fdca98a1313f3de3a893d5e31
     or http://127.0.0.1:8888/?token=823ecbcbcde87da0b9a7225fdca98a1313f3de3a893d5e31
```
To access the notebook, use the following address on the host browser.

```text
http://0.0.0.0:8888/?token=<token>
```

That's it for now. Next article will go over training the model.
Using Array.prototype.sort()
Tags: javascript, webdev, tutorial, beginners
Published: 2021-10-18 01:16:19

#Introduction
The `sort()` method sorts the elements of an array in place and outputs the newly sorted array. By default the sort order is increasing, built upon converting the given elements into strings, then comparing their sequences of UTF-16 code units values.
 
Let's take a look at how this method is done.
![Trash Sorting Gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/st3suotakbjav2dpu28c.gif)
###Syntax:
```js
// Functionless
sort()

// Arrow function
sort((firstEl, secondEl) => { ... } )

// Compare function
sort(compareFn)

// Inline compare function
sort(function compareFn(firstEl, secondEl) { ... })
```
####Parameters: 
`compareFunction` `Optional`
Specifies a function that defines the sort order. If omitted, the array elements are converted to strings, then sorted according to each character's Unicode code point value.

`firstEl`
The first element for comparison.

`secondEl`
The second element for comparison.

####Return Value:
The return value is the newly sorted array. `Note: The newly sorted array is in place of the previous unsorted one`

##Example: 
```js
const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
```
`The expected output is: Array ["Dec", "Feb", "Jan", "March"]`
####Output:
```js
> Array ["Dec", "Feb", "Jan", "March"]
```

##Application of sort()
Now that we understand how to actually use `sort()`, let's see some examples of it's application and where we can use it.

`Sort numbers in an array in ascending order:`
```js
const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});
```
`Find the lowest value in an array:`
```js
const points = [40, 100, 1, 5, 25, 10];

// Sort the numbers in ascending order
points.sort(function(a, b){return a-b});

// points[0] = 1 (the lowest value)
```
`Find the highest value in an array:`
```js
const points = [40, 100, 1, 5, 25, 10];

// Sort the numbers in descending order:
points.sort(function(a, b){return b-a});

// points[0] = 100 (the highest value)
```
`Sort an array alphabetically, and then reverse the order:`
```js
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
fruits.reverse();
```
##Browser compatibility:
![Browser compatibility](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ytvdx1g6w64khiqrt25t.PNG)

##In Conclusion
As we have now seen `sort()` has a lot of very useful applications that can help us to streamline the task we are trying to complete. Sorting is a key essential method when working within Javascript. Therefore it's important to understand it's function and it's proper application. 

###See Also:
•A polyfill of `Array.prototype.sort` with modern behavior like stable sort is available in `core-js`: 
https://github.com/zloirock/core-js#ecmascript-array 
•`Array.prototype.sort()` on MDN Web Docs:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
Hactoberfest 2021
Tags: hacktoberfest, opensource, beginners
Published: 2021-10-18 01:04:26

Hello everyone,I am very happy to share that I have successfully completed the #hacktoberfest2021 challenge.
My Contributions were:
1.Splash Screen Added to Buddhad/Contribution_Website
2.Star Catching Game Added to ZeroOctave/ZeroOctave-Javascript-Projects
3.Covid-19 Android Project Added to Coder-forfun/Hactoberfest-test
4.Hello World in LUA Added to indranil32/HelloWorld
Basic Concepts of OOP (Object-Oriented Programming)
Tags: tutorial, programming, beginners, webdev
Published: 2021-10-18 00:26:19

###What Is an Object in Programming?

Object-oriented programming, or OOP, is an approach to problem-solving 
where all computations are carried out using objects. 

An object is a component of a program that knows how to perform certain actions and how 
to interact with other elements of the program. 

Objects are the basic units of object-oriented programming.
A simple example of an object would be a person. 

Logically, you would expect a person to have a name. 

This would be considered the property of the person. 

You could also expect a person to be able to do something, such as walking or driving.
 
This would be considered a method of the person.


####Basic Concepts:


Class 

- The class is a model or blueprint or prototype of an object that defines or specifies all the properties & behavior of the objects. 


object 

- An object is an entity or instance of a class. 
- Each object has properties and behaviors. 


Polymorphism 

- Polymorphism refers to the ability to process objects differently depending on their data type or class. 


Abstraction 

- Abstraction means hiding the implementation and showing only functionality to the user. 


Encapsulation 

- Encapsulation is the process of binding the data by making it private and functions to process that data into a single unit. 


[Watch this video till the end](https://www.youtube.com/watch?v=pTB0EiLXUC8)

[object-oriented programming with python full course for beginner]
(https://youtu.be/Ej_02ICOIgs)
BDUF vs emergant design
Tags: bduf, emergantdesign, xp, architexture
Published: 2021-10-18 10:46:38

---
title: BDUF vs emergant design
published: true
date: 2021-10-18 00:00:00 UTC
tags: bduf,emergantdesign,xp,architexture
canonical_url: https://jhall.io/archive/2021/10/18/bduf-vs-emergant-design/
---

There’s a decades-long debate among software developers and architects over the relative merits of spending the time to develop a well-designed system architecture at the beginning of a project, versus a more progressive approach. Advocates of the former, often called [Big Design Up Front or BDUF](https://en.wikipedia.org/wiki/Big_Design_Up_Front), argue that thier preferred approach leads to a more sustainable system that’s easier to work on and maintain.

Advocates of the second approach argue that BDUF often leads to wasted effort, designing features [“ya ain’t gonna need”](https://en.wikipedia.org/wiki/You_aren%27t_gonna_need_it), and leads to over-complicated systems that are harder to maintain and expand.

So who’s right?

Here’s the thing…

**Both groups are right.**

As with most things in software development, it’s a matter of trade-offs.

It’s also a matter of context.

If you’re building a software system where the end goal is easily known or predicted, then BDUF may make perfect sense.

On the other hand, if you’re working in a more chaotic or experimental project, then spending a lot of time designing a systme that may be irrelevant before it’s written will obviously be a waste.

In my experience, the vast majority of software projects fall closer to the chaotic than the predictable. But even in chaotic projects, there are often predictable components, and some amount of BDUF may be appropriate on such components.

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
Curl issue: SSL certificate problem: certificate has expired
Tags: curl, certificate
Published: 2021-10-17 23:58:54

In the following article we'll cover a common certificate issue faced with cURL application. `curl` is a command line client URL, which provides us the response of a given request for any HTTP(S) method. After this introduction, let's go deep into our issue... 

#### Issue 
When trying to execute a curl command to a specific site, like `curl https://airlabs.co/api/v9/ping.json` it is giving the following error: 

“curl: (60) SSL certificate problem: certificate has expired
More details here: https://curl.haxx.se/docs/sslcerts.html

curl failed to verify the legitimacy of the server and therefore could not establish a secure connection to it. To learn more about this situation and how to fix it, please visit the web page mentioned above.”

The same url is working fine on any browser, and we have the `openssl` library installed on our server,


#### Root cause explanation
CURL certificate stored on the server has expired. So we need to obtain the updated certificate for the site  and replace it in the certificates’ system folder.


#### Resolution steps

1. First make sure you have wget installed on your server. 
You can install it on Mac using `brew install wget`. 
For Ubuntu, you can use `apt install wget`. 
For CentOS/RHEL, you can use `yum install wget`.  

2. Download the updated curl’s SSL certificate (from site curl.se), doing: `wget https://curl.se/ca/cacert.pem`
The certificate will be downloaded as cacert.pem file. Then, you can execute the curl command with the flag `--cacert <path_to_cacert.pem_file>`. 
For example: `curl --cacert ./cacert.pem https://airlabs.co/api/v9/ping.json`
If the certificate file is a valid one, the error should have disappeared. As we don’t want to add the  `--cacert` flag for every curl command, we’ll go to the next step. 

3. Replace the updated certificate on the certificates’ system folder. To get the folder path, execute the openssl version -a on your terminal. You’ll see something similar to this (it may vary according to the OS configuration).
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vf0xjqrow5jlo9akbfai.png)
The *OPENSSLDIR* folder is the folder where the certificates are stored by default; so copy it to the clipboard.   
Then, copy (or move) the certificate into that folder. In our example, it can be:
`cp cacert.pem <OPENSSL_DIR>`


After that, if we execute our curl command again, it will work as expected!
Accenture - August + September 2021
Published: 2021-10-17 23:51:11

_Cross posted on [my website](https://mitchinson.dev/pillar/august-september-21/)_

## What I've worked on

- Created dozens of tickets coinciding with new 2 project kick-offs.
  - Feels good to organize a fresh Zenhub project board with clear acceptance criteria / patterns for completing and discussing spikes / making goals clear and accessible to the team.
  - Team members expressed that they enjoyed getting to work on the initiatives because the work was made so clear.
  - Velocity on these new projects is high 📈
- Deployed a suite of data ingestion microservices to Azure with Helm, k8s, and Terraform
- Setup Github actions to do static code analysis, image publication, and deployment with Terraform.
- Setup boilerplate for a Typescript Express API with CI/CD, Linting, automatic increased VSCode support, and Jest class mocking structures / patterns

## What I'd like to improve

#### Code Reviews

I've read the [google eng practices](https://google.github.io/eng-practices/review/) dozens of times now. I feel like when I start a review I ask myself different questions every time, leaving me with reviews I don't feel super confident in, that are inconsistent in depth. Would like to start documenting questions I ask myself when beginning a review.
Array.prototype.pop, push, shift, and unshift.
Published: 2021-10-17 23:01:36


This tutorial is about array’s methods which will cover all the differences between them. Also, it will show when and how we should be using it

lets start with this array for this tutorial:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/679au9xt1sma44b8fwu7.png)
 
 

* First one - Pop() is an array method to remove the last element of the array.  The method Syntax is pop( ).
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6qwp2e1u0ypcbgd5yguk.png)Output : 
[ 'Will', 'Bell', 'Anas' ]

______________________________________________________________

* Second one - Push() is an array method to add new element at the end of the array.  The method Syntax is Push( ).
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rarzssb70oc1wfbp7tsh.png)Output :
[ 'Will', 'Bell', 'Anas', 'Adam', 'Zac' ]

______________________________________________________________

* Third one - Unshift() is an array method to add new element at the first of the array.  The method Syntax is Unshift( ).
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3pno1fkn8dzcox5vmzqe.png)Output :
 [ 'Matt', 'Will', 'Bell', 'Anas', 'Adam' ]

______________________________________________________________

* Last one - Shift() is an array method to remove the first element of the array.  The method Syntax is Shift( ).
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gqus7f1twx83tbazxxtz.png)Output :
[ 'Bell', 'Anas', 'Adam' ] 

______________________________________________________________

ADDITIONAL RESOURCES:
- pop()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop

- push()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push

- unshift()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift

- shift()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift
Download Bootstrap 5 using npm
Tags: bootstrap, beginners, html, webdev
Published: 2021-10-17 22:56:25

Today I will list steps needed to download Bootstrap 5 using npm.

1- Install `Bootstrap`.
```npm install bootstrap```

2- Use `Bootstrap`:
You have 2 options to import Bootstrap's JS.

*Option 1:*
import all of Bootstrap’s plugins so you will not need `@popperjs/core` package
```
import '../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js';
```

*Option 2:*
Import just plugins you need. Then you will need to install and import `@popperjs/core` package before import bootstrap plugins

a- Install `@popperjs/core` package.
```npm i @popperjs/core```

b- In your app.js file import bootstrap and @popperjs/core.

```
import '../../node_modules/@popperjs/core/dist/umd/popper.min.js';

import 'bootstrap/js/dist/dropdown';
```
c- Import Bootstrap's CSS.

```@import "bootstrap/scss/bootstrap";```
My Proudest Day as a Developer.
Tags: flutter, mobile
Published: 2021-10-17 22:16:32

I have always been impressed with developers who always have the answers to my questions. They appear so all-knowing to me. 

I was particularly impressed by the Senior Developer at Logiciel Ghana, a fin-tech startup where I started my professional developer journey as a Mobile App Developer Intern. He had all the answers to my questions. When I was literally pulling my hair out in frustration at some bug, he would just coolly point out what I was doing wrong and suggest a new path to a solution. 

He appeared to know everything there was to know about Software Development. He had experience as a Systems Admin, Mobile App Developer, Frontend Developer and Backend Developer. He was the one everyone went to for information on the capabilities of the products that Logiciel offered. He was an incredible mentor and role model. I wanted to be like him.

Less than a year after leaving Logiciel for another startup, I was presented with the opportunity to be like him in a small way. I had been spending a lot of time using Flutter in a project by then and had ran into a problem with the **CupertinoTabView** *widget*, for some reason none of the routes registered in *main.dart* could be found when I tried to navigate to them. 

I dutifully hit up Google search for help. The only thing I found on stack overflow was a post from more than a month ago by someone facing the same issue. It had very little engagement and no answer. I grunted in frustration and went back to the Flutter documentation hoping for some answers. After a lot of reading I finally found a "routes" property in the **CupertinoTabView** *class* documentation.



I didn't dare to hope, I could be wrong; there was no way this Flutter team forgot to mention this on the Cupertino widgets page. There was no mention of having to register screens once more. Still, I tried out what I was thinking. And it worked! I was overjoyed, I figured it out!

I immediately went back to the stack overflow page and posted my answer. You can see it [here!](https://stackoverflow.com/questions/62554769/trying-to-add-router-with-bottom-navigation-bar-in-cupertinoapp/63121507#63121507)

I was ecstatic about figuring it out. I was even more excited when Sayed (he posted the question) verified my answer and made this [comment](https://stackoverflow.com/questions/62554769/trying-to-add-router-with-bottom-navigation-bar-in-cupertinoapp/63121507#comment111664298_63121507)


The developer community is amazing. There is such a willingness to share solutions that is overwhelming at first. I'm so happy that I got the chance to be like my mentor.
Using Chi as a router for Go APIs
Tags: go, chi, api
Published: 2021-10-17 18:55:45

---
title: Using Chi as a router for Go APIs
published: true
description: Short introduction into build an API with Go using the Chi router
tags: Go, Chi, APIs
//cover_image: https://direct_url_to_image.jpg
---
The Go `net/http` package is great, it provides Go developers with a fantastic build block for building super fast APIs with Go.

However, it doesn't have a built in router that most developers would be used to. Luckily, a lot of community members have built really simple routers that can be used with the standard `net/http` package. There is a lot of options out there, but my personal favourite is [Chi](https://go-chi.io/#/) 

Disclaimer: I'm not going to go into a lot of detail why I personally prefer Chi as I believe that those who are new to Go should be allowed to freely make there own choice on their favourite router without influence from others.

Right, let's take a look at how we can build a small API using Chi as our router.

Firstly, let's install Chi 
```
go get -u github.com/go-chi/chi/v5
```

Then, we'll define our `main.go` and start using Chi straight away. We're going to declare a new router and create an initial route to receive a `GET` request and then start our `http` server. That will look like this:
```
package main

import (
    "net/http"
	"github.com/go-chi/chi/v5"
)

func main() {
    router := chi.NewRouter()
    
    r.Get("/", testHandler)
    
    http.ListenAndServe(":8000", r)
}
```

To recap this we're importing `chi` and `net/http` then defining a main function and creating a new Chi router and assigning it a new variable called `router`. We're then defining a new route at the path `/` that will receive a `GET` request and will run the `testHandler` function, we haven't defined that handler and we won't to keep this tutorial short. We then start the `http` server on port 8000 and pass the Chi router.

This has just touched the surface on Chi and it has a lot more features to offer when building an API and I plan to write more on the power of Chi in the future.

If you'd like to stay up to date with my content, make sure to follow me on [Twitter](https://twitter.com/samnewby_)