teleren/devto huggingface dataset:
The way declare(strict_types=1) works in PHP
Tags: php
Published: 2021-09-19 11:07:33

Readers of my previous article noticed that I used the strict_type declaration and asked me what it does. In this article I will explain what it does and why I started to love using it.

## What does strict typing do
PHP has never really been a language with strict typing. You just had variables and you could put anything in it that you wanted, but we're slowly getting more and more type restrictions that we can use.

Type hinting in method parameters or class properties is very useful and it helps you catch type errors before you run your code. Class based type hinting has worked since PHP 5, but primitive hinting is rather new. When passing an unexpected type to a function, PHP will attempt to automatically cast the value to the expected type. If strict_types has been declared then PHP will throw an exception instead.

Using `declare(strict_types=1)` will tell PHP to throw type errors when you try to (accidentally) cast primitive values. Take a look at this example without the strict type declaration.

```php
function dump(int $value): void  
{  
 var_dump($value);  
}  

dump('13.37');
dump(19.42);
```

Running this script will result in the following output.

```
int(13)
int(19)
```

You'll notice that our dump function expects integers even though we give it a string in one of our function calls. Your editor might call you out if you try to do this, but it's still valid PHP code.

## How to enable strict types

Enabling strict typing for primitive values is as easy as adding a single statement to the top of your PHP files. Here is the example from above with the added declaration.

```php
declare(strict_types=1)

function dump(int $value): void  
{  
 var_dump($value);  
}  

dump('13.37');
dump(19.42);
```

Running this script with the declaration will result in the following error.

```
Fatal error: Uncaught TypeError: dump(): Argument #1 ($value) must be of type int, string given, called in /Users/rienvanvelzen/Desktop/demo.php on line 10 and defined in /Users/rienvanvelzen/Desktop/demo.php:5
Stack trace:
#0 /Users/rienvanvelzen/Desktop/demo.php(10): dump('13.37')
#1 {main}
  thrown in /Users/rienvanvelzen/Desktop/demo.php on line 5
```

Using the strict_type declaration can help you catch bugs early on by restricting PHP to automatically cast primitive values. It may be a bit daunting when you start to use it, as you need to properly define everything from the start.

## A (small) Caveat
There is one thing that you need to keep in mind when using the strict_type declaration. It only works for the file that the declaration is placed in. Meaning that when you use a class, which has the strict_type declaration, it can still result in PHP casting primitive value. So keep that in mind when you want to start using this!
Handling CORS in Axios and Socket.io
Tags: codenewbie, node, tutorial, beginners
Published: 2021-09-19 11:06:58

#What is CORS??

CORS stand for Cross-Origin Resource Sharing. It's a way for the server to check if the client the server is communicating with is actually a permitted client to use the server. Before the browsers  send the actual request for any operation the client sends a preflight request with a header where Origin is  set to  its base URL and the server replies with a `Access-Control-Allow-Origin` in response header.
                If it's value is a wildcard('*') or the base URL matches the Origin set in the request header only then the actual request is made else you get a CORS error. This has been shown in the picture below especially focusing on the `Origin` values in the request header and `Access-Control-Allow-Origin` in the response header.

![Header exchanges after a request is made](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kniit40nvscz258vifv8.png)

> If you are getting a CORS error go to inspect mode by pressing F12 and go to network and see in the header of any file , you will find a request and response header. You can add other headers to it at [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)

Now Lets see how to handle the CORS error if you are using 
1. [Axios](https://axios-http.com/docs/intro) 
You can use [CORS npm package](https://www.npmjs.com/package/cors) 

```
var express = require('express')
var cors = require('cors')
var app = express()
 
var whitelist = ['http://example1.com', 'http://example2.com']
var corsOptions = {
  origin: function (origin, callback) {
    if (whitelist.indexOf(origin) !== -1) {
      callback(null, true)
    } else {
      callback(new Error('Not allowed by CORS'))
    }
  }
}
```
Here you can directly do an ``app(cors(corsOptions))`` before the routers or you can add  `cors(corsOptions)` in the (req,res,next) part.

2 [Socket.io](https://socket.io/)

In socket.io you have to add cors while creating io.
```
const io = require("socket.io")(server, {
  cors: {
    origin: "https://example.com",
    methods: ["GET", "POST"]
  }
})
```

If you have anything to add do comment and share your views.
Kingdomseo
Tags: kingdomseo, marketing
Published: 2021-09-19 10:18:41

https://kingdomseo.vn  chuyên cung cấp Dịch vụ SEO, Dịch vụ SEO Google, Đào tạo SEO, Thiết kế web, Dịch vụ SEO tổng thể,… call: 0938312876
How JS is executed & Call Stack
Tags: javascript, webdev
Published: 2021-09-19 09:59:19

Exactly when a JS program is ran, a global execution context is made.The execution setting is made in two phases:-
Memory creation stage - JS will dole out memory to variables and functions. 
Code execution stage. 

##What about we think about the accompanying code and it's execution: 

`var n = 5; 
function square(num){ 
var ans = num*num; 
return back; 
} 
var sqr2 = square(n); 
var sqr4 = square(4);` 

Indisputably the **primary** thing which JS does is **memory creation stage,** so it goes to line one of the above code digit, and award a memory space for variable **'n'** and a short time later goes to line two, and **allocates a memory space** for **function 'square'**. While disseminating memory **for n it stores 'undefined'**, an exceptional incentive for 'n'. **For 'square', it stores the whole code of the capacity inside its memory space.** Then, as sqr2 and sqr4 are factors likewise, it assigns memory and stores 'undefined' for them, and this is the completion of first stage for example memory creation stage.

###So O/P will look something like 

Execution Context Phase 1 

By and by, in **second stage** for instance code execution stage, it starts going through the whole code line by line. As it encounters var n=2, it designate 2 to 'n'. So far, the value of 'n' was indistinct. For function, there is nothing to execute. As these lines were by then overseen in memory creation stage.

Coming to line 6 for instance **var sqr2 = square(n),** **here functions are fairly not equivalent to another dialect. Another execution setting is made by and large.** Again in this new execution setting, in memory creation stage, we assign memory to num and ans the two factors. Likewise, undefined is placed in them. As of now, in code execution setting, beginning 2 is named to num. Then, var ans = num*num will store 4 in ans. Starting now and into the foreseeable future, get ans gets the control of program back to where this function was conjured from.

Execution Context Phase 2 

Right when return watchword is capable, it returns the control to the called line and moreover the capacity setting is eradicated. Same thing will be reiterated for sqr4 and subsequently after that is done, the worldwide execution setting will be obliterated. So the last chart before deletion would look something like: 

Execution Context Phase 2 

JavaScript directs code execution setting creation and eradication with the help of **Call Stack.** 

##Call Stack 

Call stack is a system to screen its place in script that calls different capacities. 

Call stack monitors everything of execution context. It is generally called **Program Stack, Control Stack, Runtime Stack, Machine stack, Execution Context Stack.**
TASKFORCE WEEK 3
Tags: programming, resilience, ui
Published: 2021-09-19 09:58:10

This week was busy and I learned a lot from it.
Even though it was tough, I learned from those challenges.

The main key takeaways of this week were **Resilience/Stress management** and **Implementation of web applications from UI designs**

I enjoyed the session of stress management and resilience the most.

![resilience image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/od8smxeomm53zml44bck.png)

This session was amazing, I learned that stress management or having resilience is a very important thing to have . 
Stress can lead to burnout and reduce your productivity.

Stress is normal and part of life. Life is full of challenges and those challenges makes us grow back stronger. It's the matter of how you handle those challenges. 

Talking about resilience, It's better to have a [**growth mindset**](https://www.brainpickings.org/2014/01/29/carol-dweck-mindset/) to be resilient. You have to embrace the changes. Things changes and you have adapt yourself to the changes and move on. 

Stress for a long period can lead to depression and that's the worst. Recovering from depression takes a lot of time and is hard. 

There are many tips on how you can avoid stress.
- Self awareness
- Relax :)
- Strategize your work
- Be grateful
- Embrace the changes
- Have a positive mindset
- Accept your best
- Meditation

**UI Implementation**
This also was an amazing part of the week because it boosted my skills in web application implementation from UI. There are some rules to follow. You have to pay attention to details and also organize your project structure.

Concluding I can say, this week was tough and full of many skills to make someone grow. Also remember **"Mens sana in corpore sano"** / "a healthy mind in a healthy body". Remember to manage the stress.
JS Splitting
Tags: javascript
Published: 2021-09-19 09:55:08

Two posts ago I talked about what code splitting was and how you'd do it, and gave an example with CSS. This post I'm going to talk about how to do it in JavaScript.

You can just put all of your scripts into your HTML, but that could get unwieldy. A better way is to have one script linked to your HTML (eg index.js) then import everything else only where it's needed.

We're going to stick with our simple website that has three sections: header, main, footer and we have one JavaScript function per section, none of which depend on each other. Not at all like real life, but easy to understand the example.

You have three files, header.js, main.js and footer.js. In those files you need to export any functions in them that are run from elsewhere. Let's assume that header.js has one function inside it, which is called headerFunction.

First of all you have to export it, so other files can see it. There are two ways of exporting it, a default export or a named export.

## Default export
If it's the only function in a file then the default export is easiest:
```JavaScript
export default function headerFunction() {
  // function does something here
}
```
Although if you're using an arrow function, you can't just put export default in front of it, you have to declare it separately:
```JavaScript
const headerFunction = () => {
  // function does something here
}

export default headerFunction;
```
Then in index.js you have:
```JavaScript
import headerFunction from 'header';

headerFunction();
```

## Named export
You can only have one default export per file, so if you have multiple functions you need to export from one file, instead what you can do are named exports (either all named or you can have one that's default and the rest named). These work the same whether you have an ordinary function or an arrow function.
```JavaScript
export function headerFunction() {
  // function does something here
}
```
```JavaScript
export const headerFunction = () => {
  // function does something here
}
```
So the difference is no word 'default' just the word 'export'.

Then to import a named function you put curly brackets around it:
```JavaScript
import { headerFunction } from 'header';

headerFunction();
```

## Errors
If you're not using a bundler, you'll get errors. After playing around with some solutions to this I found that the easiest thing to do was to install a bundler. If you've never used one before I recommend [Parcel](https://v2.parceljs.org/), since all you need to do is to install it and it just works.
Taskforce [ Week three ]
Tags: programming
Published: 2021-09-19 09:49:45

Greetings mates!

The end of week three is already here! A lot had happend and a lot i learned, so let me get you through it!

Just to cut it short, we had fruitful sessions. starting with soft we had a great session regarding stress and resilience. we as programmers its very likely to get stress from what we face everyday ( Bugs :) this is where we learnt about resilience and how to practice it in order to overcome stress.


In terms of technical sessions, we started the week with an awesome project that involved a two page website from one of my taskforce mate UI/UX designer. proceeding with a dashboard containing eye catching features like a dark theme built with purely React. I also was introduced to a new front end framework called Ant Design! I learned it and i came to find out that it really makes a front end developer's work and easy and a lot faster.

Concluding, This week was very educative and is the actual beginning of the taskforce! see yah next week
Week three as a Task Force
Published: 2021-09-19 08:27:37

Hey Hey Hey!

As we are wrapping up with week three, I'm going to share with you what I encountered throughout this week. It started off with submission of mockups I made from the assignment we were given the previous week to come up with a random project and design mockups for the front-end developers to implement. This was a challenge that I was very happy to take because I learned a lot from it, which also contributed in bettering my design skills.

Later on we learnt about best practices in the design field, where you always have to put yourself in the user's shoes to design the most user friendly platform to better the user experience. This also includes minding the content because it goes hand in hand.
The following sessions were about things we usually go through in our daily lives such as stress management and critical thinking.

In the stress management session I learnt a lot on how to handle stressful situations and how you can manage stress because it is a very inevitable thing. A few ways of managing stress is by giving priority from the thing with highest importance to the least important and to also be organized in whatever you are doing. What marked me the most during this session was the technic of writing a letter to our future self. I think this is something that everyone needs to do because it is motivating when you know exactly what you want in life, it helps you keep going. And to people that believe in the power of manifestation, this would really be of great help.

Lastly, the critical thinking session was very insightful for me because I got to learn that in every situation(mostly in difficult ones), you always have to think out of the box, be open minded to actually try to figure out what is causing a certain problem that you are having.

In conclusion, even though week three was full of many good things, we did not end it on a very good note, that means we have to do better in week four.

Week four, Here I come!!
THE THIRD WEEK IN TASKFORCE 3.0
Published: 2021-09-19 09:18:19

This week was more energetic and busy one, we had to do a lot things in a short period of time, I started the week more relaxed, we played a game where we were required to guide our friends (whose eyes were close) through what i can call like a land of mines.

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

After all this was a helpful game that taught me a lot things!! like you need to truly trust your friend when given a task. because that's when it can be easy for to accomplish any thing in short period of time.

so the week continued we were given UI designs to implement but it wasn't that easy because i had to learn new frameworks to accomplish the work. but thanks to session we had with our facilitator  on stress Management and resilience session.

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

For sure this was a helping lesson needed because it helped me to not give up and prioritize more my tasks.

On friday things didn't go quite well !! because they were sessions i missed but planning to push against on all odds in next weeks.
My experience in bootcamp this last week
Tags: awesomitylab, codeofafrica, taskforce, bootcamp
Published: 2021-09-19 09:18:17

It's the 3rd week of the bootcamp, which makes it the half way of the bootcamp journey. This last week has been a self-learning week and a lot of things have happened this last week. There’s been a lot of coding, and learning.

![Half way of the journey (taskfoce bootcamp)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ar5eux87a2cdobiaoy88.jpg)

I get used to getting things done, asking questions when stuck on something has become my thing!, at this bootcamp, things move faster! and I make sure that I'm always all set. 

I have been able to learn more advanced topics of [Reactjs](https://reactjs.org/), [Antd](https://ant.design/), [firebase](https://firebase.google.com/) and [Redux](https://redux.js.org/) as I had to work on the [LoT](https://lot-dashboard.vercel.app/) project just on my own.

Beside all of these technologies that I got to gain more knowledge about, I also learned more about critical thinking with Olaf.

I have learned how to ask questions by practicing [Five whys](https://en.wikipedia.org/wiki/Five_whys), how to seek feedback, and how to implement them. I’ve also been able to improve on some skills, such as stress management & resilience.

#####Challenges

Even though this week has been intense, I did not experience any challenge. And moving forward, I hope to improve even more on the skills I have acquired during this last week.

Thank you for reading!
Weekly journal for week 3 in Bootcamp
Tags: codeofafrica, awesomitylab, codinglife, happycoding
Published: 2021-09-19 09:14:17

Third week was very tough because this is when actual bootcamp started.


Actual bootcamp started in this third week, everything was very difficult.  
In soft skills we started about stress and resilience, in our software engineering career the most dominating problem is stress, coders need to know about resilience so that they can recover from that stress. 
![](https://media.makeameme.org/created/resilience-yes-i.jpg)

Also we studied about talking to our future self, if everyone in the world can be able to talk to himself in the future, everything will be changed. Talking to our future self is to connect your 3 selves: past, present, future, then you come up with the best ideal solution.

Also we studied Critical Thinking. We usually give solution which comes firs in our mind which is bad because we need to ask ourselves 5 whys in order to understand the root cause of the problem we need to solve.

In coding skills, we started the week with a task of building 2 pages which was hard because we were to deliver them the next day. Also we had to build the 15 dashboards and we delivered them on Friday. so this coding part was very tough, we learned how to use reusable components and using Ant Design which is mostly used in Awesomity and Code Of Africa.
In addition, at the end of week, I was done with those dashboards, so my weekend was good because I learnt new things which are going to help me in these remaining weeks.


In conclusion, Actual bootcamp started this week. I want to complete six weeks journey so that at the end I will be able to do coding with the best soft skills.
React Hooks: useLayoutEffect
Tags: react, reactnative, webdev, 100daysofcode
Published: 2021-09-19 08:42:36

## 1 - Definition

**useLayoutEffect** runs **synchronously** immediately after React has performed all DOM mutations. 

This can be useful if you need to make DOM measurements (like getting the scroll position or other styles for an element) and then make DOM mutations or trigger a synchronous re-render by updating state.

## 2 - Snytax
It looks exactly like useEffect but different use-cases. Here is the syntax for it;

```jsx
useEffect(() => {
  // do side effects
  return () => /* cleanup */
}, [dependency, array]);

useLayoutEffect(() => {
  // do side effects
  return () => /* cleanup */
}, [dependency, array]);
```

## 3 - useEffect vs useLayoutEffect

**useEffect**
(Component > State Changes > Component Renders > Rendered Component is Printed on Screen > useEffect runs)

> useEffect will run after React renders your component and ensures that your effect callback does not block browser painting.


**useLayoutEffect**
(Component > State Changes > Component Renders > useLayoutEffect runs > Rendered Component is Printed on Screen)

> useLayoutEffect runs synchronously immediately after React has performed all DOM mutations.


## 4 - One Possible Example

If your effect is mutating the DOM (via a node ref) and the DOM mutation will change the look of the DOM node between the time that it is rendered and your effect mutates it, then you want to use useLayoutEffect.

Otherwise the user could see a flicker when your DOM mutations take effect. This is pretty much the only time you want to avoid useEffect and use useLayoutEffect instead.

## 5 - Summary

Try use useEffect most of the time, if you are really need to mutate dom directly go take a look similar examples first before applying useLayoutEffect.

- **useLayoutEffect:** If you need to mutate the DOM and/or **do need** to perform measurements
- **useEffect:** If you don't need to interact with the DOM at all (%99.99 of the time you will use this)

## Links
- [useEffect vs useLayoutEffect](https://kentcdodds.com/blog/useeffect-vs-uselayouteffect)
- [React useLayoutEffect](https://reactjs.org/docs/hooks-reference.html#uselayouteffect)
Week 3 of the Task Force
Tags: awesomitylab, codeofafrica, taskforce
Published: 2021-09-19 08:39:36

Hi again! 

Week 3 has come to an end in a not so happy but necessary way, all in all this has been a fruitful week.  

Fast forward we learnt about best practices, My favorite was “Storytelling”, I heard stories are the most common way that humans make sense of the world, I need to make sure my designs connect with it’s users in the most complete possible way. This is what makes the user experience more enjoyable.

The most important though is “Minding the content”, sometimes when designing we tend to use data that is best looking for us, forgetting that the real content the user might input is different and this might mess up the whole designs, so we need to pay attention to it.

The following sessions where more centered to things we use in life. Stress management, Who doesn’t need to know how to cope with it? This session has enlightened me on techniques to use to stay motivated and manage how I react in situations where I am stressed. One good technique I’m thankful for is the “Letter to my future self” this had me thinking twice and I’ll surely remember it always.

![Awesomeness](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0odddti8ciq0zjpm5qmb.jpeg)

Second session was Critical thinking, it was the most fun, with the help of cool exercises we learnt how to think out of the box, analyse certain situations to come up with so many questions that would help you look at it through different angles to come up with best solutions. 

![Out of the box it is](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t1kll6a11p1729xoxnls.png)

Briefly this week was interesting, we learned things we’ll use in our everyday life and this is what makes learning worth it.


See you next week :)