teleren/devto huggingface dataset:
lodash - package Laravel
Tags: laravel, php, webdev, programming
Published: 2022-03-26 14:05:17

I found a great package in the framework of laravel and it is by default in the framework and indeed we use a lot of its functions without our knowledge of this package called lodash, so today I wanted to share its docs with you to benefit from it as much as possible.

- https://lodash.com/docs/4.17.15

- https://github.com/lodash/lodash

I hope you enjoyed with me and I adore you who search for everything new.
Semiconductor crisis: how to minimize the impact?
Tags: embedded, luos, semicondutor, edge
Published: 2022-03-26 14:02:58

Semiconductor crisis: Understand causes, impact, and possibilities to minimize this shortage. Why is there a shortage of semiconductor chips? Is the #semiconductor shortage getting better? Read now our article 👨🏽‍💻

[https://www.luos.io/blog/semiconductor-crisis-how-to-minimize-the-impact](https://www.luos.io/blog/semiconductor-crisis-how-to-minimize-the-impact)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vv9ptqm6i2waq9yar90s.png)
How to Parse a CSV File in 4 Lines of PHP?
Tags: csv, php, file, tutorial
Published: 2022-03-26 14:02:43

CSV is a standard format to integrate data in applications; when doing so, we often have to import data based on this format. PHP comes with native functions to open a file and parse CSV rows.

Let's take the file `classic-composers.csv` and its content as an example:
```
"First name","Last name","Born","Died"
"Carl Philipp Emanuel","Bach","8 March 1714", "14 December 1788"
"Johann","Stamitz","18 June 1717","27 March 1757"
"Joseph","Haydn","31 March 1732","31 May 1809"
"Johann","Christian Bach","September 5, 1735","January 1, 1782"
```

We can also look at it as a table:

|First name|Last name|Born|Died|
|:---------|:--------|:---|:--|
|Carl Philipp Emanuel|Bach|8 March 1714|14 December 1788|
|Johann|Stamitz|18 June 1717|27 March 1757|
|Joseph|Haydn|31 March 1732|31 May 1809|
|Johann|Christian Bach|September 5, 1735|January 1, 1782|

We can parse and display each line using 4 simple lines of PHP code:
```php
// open the file in read mode
$file = fopen('data/classic-composers.csv', "r"); 
// browse each csv line
while (($row = fgetcsv($file)) !== false) {
  // print the line content
 var_dump($row);
}
// close the file
fclose($handle);
```

Here is the output of the execution:
```php
array(4) {
  [0]=>
  string(10) "First name"
  [1]=>
  string(9) "Last name"
  [2]=>
  string(4) "Born"
  [3]=>
  string(4) "Died"
}
array(4) {
  [0]=>
  string(20) "Carl Philipp Emanuel"
  [1]=>
  string(4) "Bach"
  [2]=>
  string(12) "8 March 1714"
  [3]=>
  string(16) "14 December 1788"
}
// and more lines
```

That's it for this simple example using native functions!🚀

If you want to go further with CSV manipulation in PHP, you can explore this comprehensive guide on [reading and writing CSV files in PHP](https://www.nidup.io/blog/manipulate-csv-files-in-php). It explores modern libraries to parse CSV, explain how to read a one million-line CSV file using a minimum of memory, and share advanced tips and tricks.💡
Focusing on Design - UX UI
Tags: ux, uiweekly, design
Published: 2022-03-26 13:43:29

## Table of Contents
1. [Books](#books)
2. [Challenges](#challenges)
3. [Color Palette Sites](#color-paletees)

### Books
#### 1. [Learn how to design better UI for your web and mobile products](https://uiadrian.gumroad.com/l/How-to-design-better)

#### 2. [What the F*ck Is UX Design?](https://www.rubencespedes.net/ebooks/WTF_is_UX_Design-Ebook-By-Ruben-Cespedes.pdf)

#### 3. [The Ultimate UI Design Roadmap](https://michaelfilipiuk.gumroad.com/l/ui-roadmap)

#### 4. [UI/UX Best Practices](https://georgemoller.gumroad.com/l/MAVqE)

#### 5. [Business Thinking for Designers](https://www.designbetter.co/business-thinking-for-designers)

#### 6. [The Basics of User Experience Design](https://www.interaction-design.org/ebook)

#### 7. [The What, How, & Why of Design Systems](https://xd.adobe.com/ideas/principles/design-systems/andrea-hock-design-systems-what-how-why/)

#### 8. [Design Engineering Handbook](https://www.designbetter.co/design-engineering-handbook)

#### 9. [The Shape of Design](https://www.lapabooks.com/book/the-shape-of-design/)

#### 10. [Why Do We Interface?](https://www.lapa.ninja/book/whydoweinterface/)

Have others to add to the list? Leave them in the comments below

### Challenges
#### 1. [UX Challenges](https://uxtools.co/challenges/)

#### 2. [UpLabs Challenges](uplabs.com/challenges)

#### 3. [DailyUI](dailyui.co/)

#### 4. [Level Up Your Design Skills](uxchallenge.co/)

#### 5. [UI Coach](uicoach.io/)

#### 6. [HackDesign](https://hackdesign.org/)

#### 7. [Sharpen Design](https://sharpen.design/)

#### 8. [A Product Design Challenge](https://drawerrr.com/challenge)

Have others to add to the list? Leave them in the comments below

### Color Palettes
#### 1. [WebGradients](https://webgradients.com/)

#### 2. [Grabient](https://www.grabient.com/)

#### 3. [Gradienta](https://gradienta.io/)

#### 4. [Cone for iPhone](https://cone.app/)

#### 5. [Palettte](https://palettte.app/)

#### 6. [Material Design Palette Generator](https://materialpalettes.com/)

#### 7. [Polarite - AI assisted Color Scheme Generator](https://www.polarite.app/)

#### 8. [Leonardo](https://leonardocolor.io/?colorKeys=%236fa7ff&base=ffffff&ratios=3%2C4.5&mode=CAM02)

#### 9. [Colormind - uses deep learning](http://colormind.io/)

### Conclusion
There are so many helpful resources out there these days. Always grateful, always learning.

Happy coding!
How to use module alias in React js with typescript (`CRA`)
Published: 2022-03-26 13:33:31


![Thumbnail](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d3t6wqe3payajgozh0mv.png)

#### TLDR,
<!-- ![Thumbnail](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ngcfzstm57m83miwqnuh.png)
-->

First you need to create React application using Create React App (CRA)
```sh
$ npx create-react-app testing-alias --template typescript
# Or 
$ yarn create react-app testing-alias --template typescript
```

Next Well add an override to the default webpack
We'll use `craco` to run our application instead of `react-scripts`
You'll also need `craco-alias` to resolve the alias paths

```sh
$ npm i craco
$ npm i -D craco-alias
#Or
$ yarn add craco
$ yarn add -D craco-alias
```
<!--
-Once craco is installed, Create a `craco.cofig.js`
-Then install `tsconfig-paths-webpack-plugin` for loading the typescript paths
+ We'll setup c
```sh
$ yarn add tsconfig-paths-webpack-plugin
#Or
$ npm i tsconfig-paths-webpack-plugin
```
Add the folling to your `craco.config.js`
```js
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

module.exports = {
  webpack: {
    plugins: [new TsconfigPathsPlugin()],
  },
};
```
-->
Create a file named `craco.config.js` and add the following code.
```ts
const CracoAlias = require("craco-alias");

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: "tsconfig",
        baseUrl: "./src",
        tsConfigPath: "./tsconfig.paths.json",
      },
    },
  ],
};


```
Create a new file named`tsconfig.paths.json` and add the following
```json
{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["./components/*"],
      "@pages/*": ["./pages/*"],
      "@api/*": ["./api/*"],
      "@base/*": ["./*"]
    }
  }
}

```
Then in your `tsconfig.json` add this line 

```ts
{
  "compilerOptions": {
    ...
  },
  "extends": "./tsconfig.paths.json",
  "include": ["src"]
}
```
<!--![Directory structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gpwzedwuivpyefg4athm.png)
![AppNav component in the `@components` directory](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/861mj06w95n2k8m6rx96.png)
-->
> My directory structure

![Directory structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0m3fjwqhumro6ip9f07l.png)

Finally modify your `package.json`
```json
 "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  }
```
In the `App.{js|ts}` you import the given component and the run your application using `yarn start` or `npm start`

In conclusion we've learnt to add module aliasing to our react js packages using absolute imports. It's easier this way given the growth of your application may have and also having similar names in either pages or components conflict is avoided. It's easier this way since you don't need to `eject` your react app

Thanks to reading
How to use module alias in React js (`CRA`)
Published: 2022-03-26 13:32:21

#### TLDR,
![Thumbnail](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ngcfzstm57m83miwqnuh.png)

First you need to create React applicatin using Create React App (CRA)
```sh
$ npx create-react-app testing-alias --template typescript
# Or 
$ yarn create react-app testing-alias --template typescript
```

Next Well add an override to the default webpack
We'll use `craco` to run our application instead of `react-scripts`
```sh
$ npm i craco
#Or
$ yarn add craco
```
Once craco is installed, Create a `craco.cofig.js`
Then install `tsconfig-paths-webpack-plugin` for loading the typescript paths
```sh
$ yarn add tsconfig-paths-webpack-plugin
#Or
$ npm i tsconfig-paths-webpack-plugin
```
Add the folling to your `craco.config.js`
```js
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

module.exports = {
  webpack: {
    plugins: [new TsconfigPathsPlugin()],
  },
};
```

Add the following to your `tsconfig.json`
```json
{
 "compilerOptions":{
    "baseUrl": "./src",
    "paths": {
      "@component/*": ["./src/@components/*"],
      "@pages/*": ["./src/@pages/*"],
      "@utils/*": ["./src/@utils/*"],
      "@hooks/*": ["./src/@hooks/*"],
      "@app:state/*": ["./src/state/*"]
    }
  },
  "include": ["src"]
}

```
Then in your `tsconfig.json` add the following to match our directory structure
```
```
![Directory structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gpwzedwuivpyefg4athm.png)
![AppNav component in the `@components` directory](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/861mj06w95n2k8m6rx96.png)

Finally modify your `package.json`
```json
 "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  }
```
In the `App.{js|ts}` you import the given component and the run your application using `yarn start` or `npm start`

In conclusion we've learnt to add module aliasing to our react js packages ging absolute imports. It's easier this way given the growth of your application may have and also having similar names in either pages or components conflict is avoided. It's easier this way since you don't need to `eject` your react app

Thanks to reading
Artificial Intelligence Books To Read
Published: 2022-03-26 13:13:55

[Artificial Intelligence(AI)](https://bookishwisdom.com/artificial-intelligence-books/) is one of the booming technologies. People are moving to this field rapidly to be a part of future technological or economic development.

Learning AI can be tricky, but books always pay off. Starting with a book is always one of the best option one could have. So what are the best books to learn AI in 2021? Here are the top 5 books you should definitely check out if you are interested in AI.

###1. Artificial Intelligence – A Modern Approach (3rd Edition) by Stuart Russell, Peter Norvig

Perhaps, it is one the best book ever in AI. It gives an overview of Artificial Intelligence with a number of things like Problem solving in AI; Knowledge, reasoning, planning, Understanding AI in the real world.

It is a much beginner-friendly book and a less technical book. If you are just starting out it is a great choice and one of the best books for artificial intelligence as well.

###2. Life 3.0 by Max Tegmark

This book is about the most recent AI point of view to investigate the following period of human life.

This book helps you to understand the future of Artificial Intelligence, t’s impact overall on t can be possible with AI.

###3. Fundamentals of Machine Learning for Predictive Data Analytics by John D. Kelleher, Brian Mac Namee,Aoife D’Arcy

This book talks about the basics of machine learning which is a field in Artificial Intelligence.

The book talks about four approaches to machine learning: information-based learning, similarity-based learning, probability-based learning, and error-based learning. Each of these approaches is introduced by a beginner-friendly explanation + non-technical explanation.

###4. Machine Learning for Dummies by Lucca Massaron

It discloses how Day to day exercises are controlled by Machine Learning Explores Python, R,and how to perform design situated assignments and information examination. Clarifies Coding in R utilizing R studio

###5. Artificial Intelligence Basics by Tom Taulli

In this book, om Taulli explains Machine Learning, Deep Learning, Natural Language Processing, Robotics, and more. his book is written from a very non-technical perspective. Anybody who does not have any idea about Artificial intelligence can get start with this book.

## Conclusion
Books always help to give a certain boost. But it is always a good idea to check for other resources in this modern era. You can check a lot of courses and tutorials online. Do not forget to check online material, make sure to utilize the internet.
Storing variables with useRef ?
Tags: react, discuss, codequality
Published: 2022-03-26 12:54:52

React [useRef](https://reactjs.org/docs/hooks-reference.html#useref) is a hook used to reference html elements (commonly inputs). 

If we read the `useRef` definition from React docs: 
> useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). **The returned object will persist for the full lifetime of the component**.

So by reading above we can use `useRef` to persist variables throughout the lifetime of our app.

```jsx
function App() {
	const greeting = useRef("hello world")
	
	// 	mutating the object
	ref.current = "goodbye world"
} 
```

## Why not use a plain variable ?
The problem with variables is that they get re-initialized every time when you refresh the page or the component gets re-rendered

## What about useState ? 
Sure the state is persisted But the difference is when you update the state the component gets re-rendered.

## What are the use cases ?

The only time i've found a use case for `useRef` is when i was building an infinite scroll component, 

When the user reaches the end of the page the component fetches more data based on a page token (it represent the current page). The page token need to be updated on every subsequent request to match the next page. This is where i found `useRef` suitable for the job. 

That's why i started this disscussion, What is your opinion on using `useRef` for storing variables ? Did you use it to solve a problem ?
All you need to know about AWS Snowball for Data Transfer
Tags: beginners, aws, devops, tutorial
Published: 2022-03-26 12:47:21

This is a service by AWS to securely transfer large amounts of data to and from Amazon s3. Sizes of data can that require this service can range from terabyte to petabyte. The snowball service comes in the form of a storage device either of 50 TB or 80 TB depending on the region the organization is in.
The reason an organization may opt for this service is the speed involved in transferring data to and from the AWS S3. AWS Snowball is highly noted for transferring large amounts at a high-speed rate.
All data transferred through this medium are encrypted with 256-bit encryption keys generated from AWS key management service. Wondering if your data with this storage medium could get lost? Don't because there is end-to-end tracking using an E-link shipping label which makes it possible for the snowball to land at your doorstep. Tracking of the device can be done using AWS SNS (simple notification service) with text messages.
 
**Features of AWS Snowball**
1. Fast data transfer
2. Snowball Clustering
3. GPU Storage
4. Block Support 
5. Data Encryption

AWS Snowball can also be used in the following instances;
**Content Distribution** - that is if you want to share content or data with others without worrying about breaches
**Tactical Edge Computing** - AWS snowball have powerful computing, flexible storage, security, and ruggedization which helps federal teams focus on their work
**Machine Learning** - Snowball allows you to deploy and run machine learning models, such as document classification and image bulling.
How is information architecture significant for websites?
Tags: design, webdev
Published: 2022-03-26 12:33:28

<p>The significance of a well-constructed IA or information architecture is immense for a website. IA is a fundamental aspect of websites that concentrates on organizing information or content into a logical architecture. It is crucial as it offers the user a friendly navigation system to locate and process the information they require. It also makes sure that they spend less time and effort looking for information they want.</p>
<p>Every website owner considers IA and the below elements.</p>
<ul>
<li>Search systems</li>
<li>Organization schemes or structures</li>
<li>Navigation systems</li>
<li>Labeling systems and tags</li>
</ul>
<p>So, you can see that information architecture helps a <strong><a href="https://dev.to/manojsworld/why-creative-website-designs-are-crucial-for-every-website-5ea9">website</a></strong> in many ways. Besides, many reasons make it a popular choice among web developers and website owners. So, let us look at those reasons to know their significance.</p>
<ul>
<li>Information Architecture works as a blueprint of projects to offer better clarity. It allows a web developer to provide more precise estimates to project leaders, product owners, and customers. Not only this, but it displays how deep the UX is.&nbsp;</li>
<li>As you know, IA is all about logically organizing content. Thus, it efficiently locates content groupings and unused areas, decision-congestion, and intuitive control. It also isolates the required content from the redundant. It is helpful for an existing site that has a lot of content.</li>
<li>A completed IA resembles a spreadsheet with rows and columns of information. Anyone can access it without any hindrance and make adjustments accordingly. That is why this flexibility and user-friendliness are prominent reasons behind its popularity.</li>
</ul>
<p>So, these are the reasons making IA a significant thing for websites. Thus, take help from a <a href="https://www.webomindapps.com/web-designing-company-bangalore.html">web designing company</a> and use IA for your business.</p>
How to build NFT Marketplace website using HTML CSS JS
Tags: css, tutorial, javascript, beginners
Published: 2022-03-26 12:31:54

{% youtube f_jQvRUaffo %}

How to build nft marketplace website using HTML CSS JavaScript

In this video, I will show you how to create (mobile-first responsive) nft marketplace.

[Live Website](https://codewithsadee.github.io/naft-nft_marketplace)
[Github Repo](https://github.com/codewithsadee/naft-nft_marketplace)

---

HI 👋
I'm Sadee (webdev)
In this channel I make videos about Complete Responsive website.
You can checkout my channel 👇

📺 My Channel : [codewithsadee](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g)
🔔 Subscribe : [subscribe now](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g?sub_confirmation=1)
🕐 New Videos Every Week

---

🔗 Essential links
-----------------------------
[Starter file](https://drive.google.com/file/d/1rwB19SzJVpGNr92S-zLpqdhZquRGic1y/view?usp=sharing)
[Font - Roboto](https://fonts.google.com/specimen/Roboto?query=roboto)
[Icon](https://ionic.io/ionicons)

---

⏱️ Timestamps
-----------------------------
0:00 - Demo
3:16 - File sturcture
3:46 - Initial html
5:13 - Css custom property
6:34 - Reset
10:19 - Header
19:39 - Hero section
28:38 - New product section
46:42 - About section
56:01 - Explore product section
59:42 - Top seller section
1:14:21 - Footer
1:34:19 - Media queries

---

💜 Like - Follow & Subscribe Me
-----------------------------
Twitter : https://twitter.com/codewithsadee
Github : https://github.com/codewithsadee
YouTube : [codewithsadee](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g)
Buy Me A Coffee : https://www.buymeacoffee.com/codewithsadee
Patreon : https://www.patreon.com/codewithsadee

---

[![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kn6vwn4mulhsx6o69is.png)](https://www.buymeacoffee.com/codewithsadee)
Dev.to misses Open Source definition
Tags: opensource
Published: 2022-03-26 11:58:57

I just joined Dev.to. As usual, I look for things related to Free/Libre software. I realized there is a tag for **OpenSource** and if I try to make a see tag page for **FreeSoftware**, it redirects me to OpenSource. That is OK I try to understand it, but quickly something very wrong took my attention: the definition provided for the tag was wrong!

![Wrong definition of Open Source on Dev.to](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z1lgzl3hj9c9oo9frgeq.png)
 

Open Source came to provide an alternative term to avoid confusion over the meaning of Free Software (free as in freedom, not free beer). Despite having clear [official definition](https://opensource.org/docs/osd), many people take open-source literally as software with publicly available code. Providing the source code is the second of the 10 conditions for software to be considered as Open Source one. I do strongly suggest going through the definition and reading all the 10 criteria.

Here my question is why does a platform like dev.to send such a wrong message about Open Source definition? I try to contact admins and I hope to see change.

---

_Mostafa Ahangarha © 2022 under CC BY-SA_
[Solved]Unable to write to wp-config.php file on linux ubuntu
Tags: wordpress, php, linux
Published: 2022-03-26 11:54:03

"Unable to write to wp-config.php" is usually a problem you get when installing wordpress on a linux environment. In my case, I wanted to install wordpress locally on linux with the the xampp apache server.

The error is related to the default linux unauthorised read and write or file permissions for that folder where you have your wordpress. 


This is a quick solution to fix this issue
On your terminal run the following: 
`cd` into your `htdocs` where you have your `xampp` installtion
```php
cd /opt/lampp
```
Next, change the user username and grouwp ownership from the default root:root to your own username and group
```javascript 
sudo chown -R yourusername:yourusername /opt/lampp/htdocs
```
Note: _remember to replace "yourusername" in the command above with your own username and group. Most of the time, the username and usergroup is same words. e.g jovialcore:jovialcore_

Next, change the htdocs folder and all files persmissons to read and write by running the following command :

```php
 chmod -R 777 htdocs

```

That's all. 
Reference: https://stackoverflow.com/questions/43558542/give-user-permissions-to-htdocs-in-ubuntu

I'm on [Twitter](https://twitter.com/jovial_core)
[Linked too](https://www.linkedin.com/in/chidiebere-chukwudi-49a982182/)