teleren/devto huggingface dataset:
React Hooks useEffect()
Tags: react, hooks, useeffect
Published: 2021-08-19 08:47:58

Using hooks in javascript is a way to tuck into pre built methods that come with React 16.8 up.

What is it?

The Effect hook is used to prevent infinite loops occurring within you applications. It allows you to perform side effects in function components.

For example on landing on the page, the logic inside the component, triggers a state change on page load. The component now re renders (due to the state change), which then calls the logic again, this creates an infinite loop.

Using Effect allows to control when the logic can be called. Avoiding the infinite loop.

How to use it?

```javascript
import React, { useEffect } from 'react';
```

```javascript
useEffect(()=>{},[])
```
The Effect hook, takes a function and an array of dependencies.
   

When to use it? 

Used when the page is reloaded to check logic and update state. Or when returning to a page.

Also to re run logic when state has been changed.

Code example

```javascript
  const [enteredEmail, setEnteredEmail] = useState('');
  const [formIsValid, setFormIsValid] = useState(false);

 useEffect(() => {
    setFormIsValid(
      enteredEmail.includes('@')
    );
  },[enteredEmail])

  const emailChangeHandler = (event) => {
    setEnteredEmail(event.target.value);
  };
```

Above, we use Effect to run when the page is loaded. Checking the state for validation. We can then also re run this Effect function when the dependencies passed into the array [enteredEmail] change.

Effect takes a clean up function also like so 

```javascript
useEffect(() => {
    console.log('effect running')

    return () => {
      console.log('effect running clean up')
    }
  },[enteredEmail])
```

The return function that logs effect running clean up. Runs every time firstly before anything else inside the effect hook. Apart from the first time the function is called (page load).

Clean up can be used for example with a setTimeout function and clearTime out. To insure the Timeout is finished. Example of clean up...

```javascript
  useEffect(() => {
    const identifier = setTimeout(() => {
      console.log('check validity!')
      setFormIsValid(
        enteredEmail.includes('@') && enteredPassword.trim().length > 6
      );
    }, 500)

    return () => {
      console.log('clean up')
      clearTimeout(identifier)
    }

  },[enteredEmail, enteredPassword])
```
Did you know .distfile?
Tags: bundle, shell, release, bash
Published: 2021-08-19 09:10:01

I love dotfiles, my dream is to create a popular dotfile as the great .gitignore. This mission motivated me to create the DIST(dot)SH project <https://github.com/javanile/dist.sh>. This is a tool for creating software bundles (ZIP files so to speak) based on a manifest called '.distfile'.
As for the popular '.gitignore' the '.distfile' as a convenient syntax for bundle complex package with custom file structure and ignoring specific files.

```distfile
## File: .distfile
@mybundle-dev.zip
+src
+test
!*.secret

@mybundle-prod.zip 
+src
!*.secret
!*.custom.py
```

Support me with STAR or FORK or better still a Pull-Request

Please be patient for the spammy content but I'm sure you love it for time saving on your next project.
Do a research before using unknown frameworks, unless you work alone
Tags: frameworks, javascript
Published: 2021-08-19 09:01:58

I ran into a situation, where I wished I was wealthy, not because I don't like challenges of solving a problem, no! I become a dev because I knew every problem has a solution given resources and time. But in a case like this, I'd pay a lot of money to anyone to solve this issue for me and leave me alone for good, and never see that framework again. 

Despite all my suggestions to use P5.js or any well documented, stable environment, that has a few thousand issues on #stackoverflow already, a team mate chose a badly documented framework to develop an app, and handed it over on the delivery day with bugs. My next week was about trying to change a DOM element, and no matter how I tried, whenever something was fixed, something else broke. The code was well documented, but the framework's behaviour was totally impossible to debug. After working with many coding languages and frameworks, I never ever in my life felt so stupid and desperate then when I had to face the client, and my team, and tell them I failed again today. 

Actually I don't even care, how the issue was solved (never happened to me before), because it doesn't matter if I get the point, there are people who will come after me. Personally I'd never do this to my co-workers, I always think of people who will work with my code. Occasionally the pressure is too high, because the management didn't make it clear to the client, that development is not a sprint, but the client is not stupid, especially those, who work with developers regularly. They don't want the impossible, but they require to be kept up to date and in the loop, rightfully. I totally understand coders who scrap the whole app and start new from scratch. Also knowing clients I'm aware that once the stuff works, they'll want more levels, features, dynamics, etc, and someone will suffer.

Please consider, talk to your future self, what tools should be used before making decisions. And if you already worked on it since a week, and find it odd, or counterintuitive, or badly documented, and no help online, SWITCH! Please. Thank you.
🔥 JavaScript Alerts in Cypress
Tags: alerts
Published: 2021-08-19 08:51:55

Alerts are pop up's that appear on the browser window based on a specific user action which is "Click" 

There are 3 types of alerts. 
1. Simple alerts with alert text, Ok button
2. Confirm alerts with alert text, Ok & Cancel button
3. Prompt alerts with alert text box, Ok & Cancel button

Note: 

The way cypress are handled in cypress aren't the same way just like in case of Selenium. 

In Selenium, Where there is a pop up alert on the screen. 
The user should navigate to the alert pop to perform action. 

But, In cypress simple alerts are handled by default as its one of the in-built capabilities of Cypress. 

Cypress for now directly supports simple and confirm alerts. 
Where as for prompt based alerts, One must use cy.window() with a then call back function along with a stub to handle it. 

Example: 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mhnz4id82crcqtxtttr2.png)
Powers of Nextjs
Tags: javascript, programming, react, nextjs
Published: 2021-08-19 08:43:35

   After a while I finally came up with something to write about.
   Nextjs is a library built on top of Reactjs library,It is Seo friendly and also has server side rendering capabilities.

   Below are some of the key features why you should consider Nextjs as a React developer

  HOT RELOAD:
      Nextjs make use of hot reload which is 
      similar to React virtual dom, as it renders 
      component after save and doesnt require a 
      page reload.

  PREFETCH:
      Nextjs provides developers with a Link 
      component with enables easy page routes.

  NO NEED FOR ROUTE CONFIGURATION:
      In Nextjs developers doesnt necessarily need  
      to set up page routes for every specific 
      component  as all components could be 
      rendered in a pages folder serves specific 
      component with the components nme. for 
      example Header.js will be served as 
      process.env.NODE_ENV !== "production" ? 
         "localhost:3000/Header":"https://yourdomainname.com/Header".

   Typescript support:
       Nextjs is written with typescript and has 
   excellent typescript support.

    Node Ecosystem:
        Nextjs being React based gels well with 
    node ecosystem.

     Component specific styles:
          Nextjs components could have specific 
     styles for each of them ,thou a global 
     styles could be written but it is practically 
     recommended to add specific styles to 
     component.


Here are just a few of the capabilities of Nextjs...
Machine Learning in Production Phases
Tags: machinelearning, ai, mlops
Published: 2021-08-19 08:25:45

![deploying machine learning models in production](https://jenniferkwentoh.com/wp-content/uploads/2021/07/introduction-to-mlops_ml-in-production-1-1024x576.png)
In deploying [machine learning](https://jenniferkwentoh.com/what-is-machine-learning-fundamentals/) models to the production environment, It is important to consider performance in the real world. [Machine learning](https://jenniferkwentoh.com/category/machine_learning_in_production_mlops/) operation involves model testing, versioning, continuous deployment (CI/CD), availability, and monitoring.

## These phases below are essential in building an excellent end-to-end machine learning system.

1. **Project Scope**: In a typical MLE project, it is crucial first to define the scope of the project. An excellent project scope will define the outcome of the project.
 
2. **Data Engineering**: this phase defines the methods and techniques used to collect, organize and store big data. Some other ways to clean and preprocess data.

3. **Build Machine Learning Models**. At this phase, you already have the correct data defined in your scope documentation. Different machine learning algorithms are applied in training and testing a good model. 

4. **Model Deployment**. Deploy models to connect with new or existing applications either natively or through application interfaces (API). 

5. **Model Monitoring and Maintenance**. It is crucial to monitor models in production. Monitor its performance over time and if there is a need to retrain based on new information.
Refactoring Legacy - Intro
Tags: php, refactoring, legacy, development
Published: 2021-08-19 07:58:05

This post is a summary of a couple of years spent battling a legacy application. This is not (necessarily) a how-to because I have yet to declare a "mission accomplished" here and whether it's a success or not, it's too soon to call. 

While this represents a particular set of circumstances, I believe it can help you ask the right questions in the beginning, take into account a variety of paths and also give the benefit of the doubt to those whose mess you've inherited (they were doing their best at the time).

The application:
- legacy PHP, started with early 5.x versions and patched just enough so that it runs on 7.2
- really old-school: html is formed by echo-ing stuff in random scripts that are "require'd" in the right order. Warnings are totally silenced, nobody cared about a missing array item when fetching a deeper array entry.
- evidence that someone tried to MVC the whole thing, but not by introducing, say, Symfony components but by creating scripts that act like views (just echo stuff, but without buffering it into a final string - echo wherever/whenever) and some classes - but missing a proper service layer
- database access done via a class that mysqli_connects, no caching of any kind 
- some models carry state but still choke-full of static methods that bring fresh data, as if someone wanted to go more like Doctrine-style but someone else later wanted a poor man's Eloquent Active Record 
- sometimes the same query ended up being done against the DB 10s of times during a request (well, 29 was the top I've seen myself)
- running on manually maintained VMs, deploy manually via "git pull" then clear some local static files then restart Apache
- the whole thing was becoming multi-tenant
- the application was heavily dependent on data fetched from remote APIs and had to push data back to the same APIs (some where REST, some SOAP)
- non-existent error handling, WARNING were silent, catching was used to ignore Errors (for the most part), virtually no logging.
- objects were used for data models only for the DB, for SOAP/REST(JSON) only arryas/stdClass were used to serialise/deserialise (always assuming that some item exists via the developer's knowledge of the structure of a given request).

The Challenges:
1. migrate to a cloud provider and add scalability (automatic, preferably)
2. create a layered system of environments for each tenant with automatic deployment on a QA environment and manual promotion for local (our) acceptance then customer acceptance then prod.
3. tackle a number of bugs in the code. Right off the bat it was clear most were linked to the hidden warnings, where the code would for example expect `$array['level1']['level2']` but 'level2' may be missing due to some buggy change yet that fact was hidden from developers since warnings were silenced.
4. create a system of aggregated structure logging
5. integrate more external APIs
6. tackle an existing feature backlog
7. improve performance

Let's explore them, as part of the series!
WTF is Gitmemory?
Tags: wtf
Published: 2021-08-19 07:51:39

---
title: WTF is Gitmemory?
published: true
description: 
tags: wtf
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p2i8l55w3dugnqmk80vc.png
 
---

It's just scrapping GitHub issues, and it has appeared a lot on my search results.

Are you guys experiencing the same?

And Gitmemory is not the only site doing this. Others are doing the same. Between this and search results from 2009, I'm thinking of switching to another search engine, especially for development, but I'm not sure there is a better one, though.
Finding Where A Function Is Defined With PHP!
Tags: php, function, reflectionfunction
Published: 2021-08-19 07:23:46

### There is a function or class in PHP and you want to find out which line of the file it is defined in? I have a solution for you!

This is the biggest problem for us as programmers. There is a function and maybe we waste our days trying to find where it is defined but we can't find it. Sometimes we wrote this function, and sometimes the 'ex-programmer' put it in such places on the work we were working on that he hid that function as if he were hiding it in a golden chest. But don't worry, take a breath, we will find your functions in 5 minutes, line by line. 

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

### ReflectionFunction
```php
my_func(); // For example, we want to find this function. 
 
$refFunc = new \ReflectionFunction('my_func');
// Here we have defined ReflectionFunction to get its details. 
 
print $refFunc->getFileName() . ':' . $refFunc->getStartLine();
// Here, we have printed the file name and the line where our function is located on the screen.
```

#### Other things you can do with ReflectionFunction: 
`getDocComment`: Returns in-function comments.
`getEndLine` Returns the end line of the function.
`getExtensionName` Returns the extension where the function is located.
`getFileName` Returns the file containing the function.
`getName` returns the function name.
`getNamespaceName` Returns the field name of the function.
`getNumberOfParameters` Returns the number of variables.
`getNumberOfRequiredParameters` Returns the number of required variables for the function.
`getParameters` Returns variables.
`getReturnType` Returns the result type of the function.
`getShortName` Returns the short name of the function.
`getStartLine` Returns the start line of the function.
`getStaticVariables` Returns constant variables.
`hasReturnType` Checks whether the function returns a response. isClosure: Checks if it's an anonymous function.
`isDeprecated` Checks if its use is not recommended.
`isUserDefined` Checks if the function is a user-defined function.
`returnsReference` Checks if the function return value is referenced.

You can also use these functions as we used above. For example, when we write ``getEndLine()`` where we write ``getStartLine()`` in the code, it will return us the end line of the function.
Weekly web development resources #85
Tags: weekly, webdev
Published: 2021-08-19 06:46:57



______

##[Blokada](https://blokada.org/)
[![Blokada](https://wweb.dev/weekly/content/85/blokada.jpg)](https://blokada.org/)
A free, open-source app to block ads and trackers on Android and iOS.

______

##[CSS Modules](https://css-tricks.com/css-modules-the-native-ones/)
[![CSS Modules](https://wweb.dev/weekly/content/85/css-modules.jpg)](https://css-tricks.com/css-modules-the-native-ones/)
An article about the native browser feature CSS Module Scripts.

______

##[The State Of Mobile First and Desktop First](https://ishadeed.com/article/the-state-of-mobile-first-and-desktop-first/)
[![The State Of Mobile First and Desktop First](https://wweb.dev/weekly/content/85/mobile-first.jpg)](https://ishadeed.com/article/the-state-of-mobile-first-and-desktop-first/)
A nice article by Ahmad Shadeed.

______

##[Openby.design](https://openby.design/)
[![Openby.design](https://wweb.dev/weekly/content/85/openbydesign.jpg)](https://openby.design/)
A website for free and open-source design assets.

______

##[Progressive Tooling](https://progressivetooling.com/)
[![Progressive Tooling](https://wweb.dev/weekly/content/85/progressive-tooling.jpg)](https://progressivetooling.com/)
A list of community-built, third-party tools that can be used to improve page performance.

______

##[psst](https://github.com/jpochyla/psst)
[![psst](https://wweb.dev/weekly/content/85/psst.jpg)](https://github.com/jpochyla/psst)
Fast and multi-platform Spotify client with native GUI.

______

##[daisyUI](https://daisyui.com/)
[![daisyUI](https://wweb.dev/weekly/content/85/daisyUi.jpg)](https://daisyui.com/)
A collection of Tailwind CSS components, which are customizable and themeable.

______

##[Imba](https://imba.io/)
[![Imba](https://wweb.dev/weekly/content/85/imba.jpg)](https://imba.io/)
A programming language for building web applications with great performance.

______

##[100 underline/overlay animations](https://dev.to/afif/adding-100-underline-overlay-animations-the-impressive-css-collection-1a93)
[![100 underline/overlay animations](https://wweb.dev/weekly/content/85/hover.jpg)](https://dev.to/afif/adding-100-underline-overlay-animations-the-impressive-css-collection-1a93)
A nice CSS collection of animations without SVG, JavaScript and keyframes.

______

##[View Source (on Mobile)](https://css-tricks.com/view-source-on-mobile/)
[![View Source (on Mobile)](https://wweb.dev/weekly/content/85/view-source-mobile.jpg)](https://css-tricks.com/view-source-on-mobile/)
An article on how to see the  HTML source while using a mobile browser.

______

To see all the weeklies check: [wweb.dev/weekly](https://wweb.dev/weekly)
DataTables Server-side Processing with PHP and MySQL
Tags: mysql, php, database
Published: 2021-08-19 06:25:42

DataTables is a library of jQuery that displays the list records in an HTML table using an intuitive interface. It offers features such as search, pagination, and sort.

In an earlier article, we saw a custom code that allows search and pagination of the records. In addition, DataTables will enable us to limit the number of records displayed on a page.

DataTables extension supports both client-side as well as server-side processing. This article will show you the database results using DataTables server-side processing.

A PHP file calls domain class by sending the table, column, and configuration details to the function. The domain class executes the query and returns an array of results. The JSON format encodes the resultant array and will be sent as a response to the DataTables AJAX program.

Tutorial: https://www.phplift.net/datatables-server-side-processing-with-php-and-mysql/
Demo: https://demos.phplift.net/datatables-server-side-processing/
Download Code: https://www.phplift.net/?wpdmact=process&did=MjUuaG90bGluaw==
HTML tags | wbr
Tags: html, tags, wbr
Published: 2021-08-19 06:21:28

It is used to **specify where in the text there can be a line break**. When a text is too long, the browser will cut it where it deems appropriate. With `<wbr>` opportunities are indicated for it to do it where we want.

It has an opening tag but not a closing tag, despite being an empty element.

**It does not introduce a hyphen** at the cut point of the text. If you want to achieve this effect, you have to use the entity `&shy;`.

- Type: *inline*
- Self-closing: *No*
- Semantic value: *No*

[Definition and example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr) | [Support](https://caniuse.com/wbr-element)
Cara Install MySQL di Ubuntu
Tags: mysql, ubuntu, linux, tutorial
Published: 2021-08-19 06:20:05

Dalam tutorial ini, Anda akan mempelajari langkah demi langkah [cara install MySQL di Ubuntu](https://ruangkoding.id/cara-install-mysql-di-centos-7/). Versi MySQL yang akan kita gunakan adalah MySQL 8. Untuk [cara install MySQL di Ubuntu](https://ruangkoding.id/cara-install-mysql-di-ubuntu-20-04/), Anda dapat menggunakan perintah berikut ini :

```
sudo apt-get install mysql-server
```
Lalu gunakan perintah berikut untuk menjalankan service MySQL.
```
service mysqld start
```
MySQL Anda sudah siap untuk digunakan.

**Contact Saya**
Website  : [https://ruangkoding.id](https://ruangkoding.id)
Telegram : [https://t.me/s/ruangkoding](https://t.me/s/ruangkoding)
Liman MYS setup on Ubuntu 20.04
Tags: ubuntu, liman, php
Published: 2021-08-19 06:06:19

As of the development of the Liman MYS, it is packaged for use on the Pardus operating system. However, there is no obstacle to running it on Debian based systems.

# Adding PHP 7.3 on Ubuntu 20.04

With the following repository and update, PHP 7.3 version will be available on Ubuntu.

```
sudo apt install software-properties-common
sudo add-apt-repository ppa:ondrej/php
sudo apt update
```
# Adding the Aciklab Repository where the Liman is located

With the following two commands, it is possible to add the repository to the system and to introduce the public key of this repository to the system.
```
echo "deb [arch=amd64] http://depo.aciklab.org/ onyedi main" | sudo tee /etc/apt/sources.list.d/acikdepo.list
sudo wget -qO - http://depo.aciklab.org/public.key | sudo apt-key add -
```
# Required PostgreSQL Version

Liman MYS needs PostgreSQL 13.x version due to various corporate needs as infrastructure. Since there are no PostgreSQL 13.x packages in Ubuntu official repositories, the following repository must be added:

```
sudo sh -c 'echo "deb http://apt.postgresql.org/pub/repos/apt $(lsb_release -cs)-pgdg main" > /etc/apt/sources.list.d/pgdg.list'
sudo apt install gnupg2 ca-certificates -y
wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo apt-key add -
sudo apt update
```

# Installing the Liman from the repository

In order to install the current Liman from the repository, the following two commands are required.

```
sudo apt update
sudo apt install liman
```
# Creating an Admin Password and entering the interface
The first thing to do after installation is to create an Administrator password. For this, we need the following two commands.

```
sudo su liman
sudo php /liman/server/artisan administrator    
```

At the end of this step, you will see your username and password to log in from the Liman web interface.
If you write the IP address of the server on which you installed the Liman on your web browser and log in with this information, you will be logged into the Web interface of the Liman.



![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7a8trj4jpryrly5vh5sc.png)