teleren/devto huggingface dataset:
Top 3 Casts of the Week #2
Tags: webdev, beginners, elixir, typescript
Published: 2022-03-18 17:19:25

It's that time of the week again where we feature the top 3 Casts we're loving each week on [CodeCast](codecast.io). We're lucky to have some really incredible people making content on our site and are really excited to share the content we have for you this week. So let's jump straight into it.

## TypeScript Essentials: Functions by [@shahzaibkamal](https://www.codecast.io/users/shahzaibkamal)

![TypeScript Cover](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dxdobqe07s22uh2yx209.png)

Shahzaib has created his first-ever [course on TypeScript](https://www.codecast.io/series/80-typescript-essentials-understand-functions-objects), focusing on Objects and Functions. In the second video of the Series, he dives deep into working with functions in TypeScript! Be sure to [follow him](https://www.codecast.io/users/shahzaibkamal) to stay up to date with his latest content.

Find the video here: https://www.codecast.io/casts/NVlpReM15ay7-typescript-essentials-functions-objects-functions 😌

## Understanding CSS Specificity by [@hiroshiisobe](https://www.codecast.io/users/hiroshiisobe)

![Specificity Cover](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pl20qmv44hzjolaaz7yw.png)

Hiroshi has created a fantastic video all about working with specificity in CSS. Specificity is by far the most important aspect to wrap your head around in CSS, as it can absolutely break your code (or your will 🤪) if you don't have a good understanding of it! Luckily, this video will help you stay on the right track. Be sure to [follow him](https://www.codecast.io/users/hiroshiisobe) to keep an eye out for any more upcoming content!

Find the video here: https://www.codecast.io/casts/nKDLqbJe51y3-take-control-of-css-by-understanding-specificity- 🙌🏻

## Maps, Structs & Keyword Lists in Elixir by [@tam](https://www.codecast.io/users/tam)

![Elixir Cover](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/26ra2cr6bidux514m088.png)

Tam is the founder of CodeCast and is extremely passionate about Elixir. He actually created an entire [Intro to Elixir](https://www.codecast.io/series/58-intro-to-elixir) course on CodeCast with over 7 hours of content! In this video, he covers the concepts of maps, structs, and keyword lists in Elixir, and offers up practice work at the end of the tutorial so you can really master the concept. Be sure to [follow him](https://www.codecast.io/users/tam) on CodeCast to stay up to date with his latest videos and courses.

Find the video here: https://www.codecast.io/casts/O6V5d2anQNRX-intro-to-elixir-lesson-nine-maps-structs-and-keyword-lists 🫶🏻

We hope you love this weeks content as much as we do. Be sure to create a [free CodeCast account](codecast.io/signup) to show our creators some love, or perhaps create some content of your own to get a chance at being featured.
5 cool Programming links
Tags: perl, programming
Published: 2022-03-18 17:17:25

#### 1. [Big list of HTTP static server one-liners](https://gist.github.com/willurd/5720255)
#### 2. [Cloud providers performance comparison](http://blogs.perl.org/users/dimitrios_kechagias/2022/03/cloud-provider-performance-comparison-gcp-aws-azure-perl.html)
#### 3. [MarkdownSite](https://markdownsite.com/)
#### 4. [On being indispensable](https://www.sofuckingagile.com/blog/on-being-indispensable)
#### 5. [Hacker type](https://hackertyper.net/)

Enjoy! :grin:
Resume Generation with Python
Tags: python, programming, tutorial, job
Published: 2022-03-18 17:03:57

#Let's Create The Resume That Lands Your Next Job!
Join us as we use the power of Python to [generate an eye-catching resume](https://www.iceorfire.com/post/resume-generation-with-python). You'll stand out from the pack and get that interview!

# Support Me
If you find these tutorials helpful, please consider [buying me a coffee](https://www.buymeacoffee.com/z4F8QVS6w). Thanks!
Vercel
Published: 2022-03-18 16:28:24

## What is Vercel?

Vercel is an excellent platform for frontend frameworks, combining development when focus on end-user performances. It can collect all the needed code into a single file, making developers easier to track errors and make changes to make maintenance easier. Each time we created a Vercel business site, it's developed instantly. In this case, we have excess to it all the time. Vercel helps us work easier and efficiently and it doesn't cost money!

## Get start

1. Create a [Vercel account](https://vercel.com/ )
2. Fork [this repo](https://github.com/heyMP/ist-vercel-demo) and clone it. 
3. Create a new `.env` file and add the content:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aud0f1u9pdvq4jwu2ub4.png)
4. In the Vercel application, you need to import your repo


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

5. When you configure your project, type `dist` in the output directory.


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

6. When you done, you can see the Vercel site and when you click it, it directly takes you to the [website](https://ist-vercel-demo-gold.vercel.app/).


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

### 11ty
Compared with CI/CD pipeline approaches, Vercel is so quick and convenient. I was able to develop a 11y website so easy with just installed Vercel in the repo with code `npm i -g vercel` and add this project to Vercel. [Hello-world-11ty website.](https://11ty-two.vercel.app/)

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

My Vercel GitHub [link](https://github.com/smm7530/ist-vercel-demo)
Why is the development of Robotics in the world so slow?
Tags: embeddedsystem, edge, opensource, robot
Published: 2022-03-18 16:13:05

Please tell us your opinion in the comments!
⏩ https://www.luos.io/blog/how-to-make-embedded-systems-skyrocket

We will talk about Edge and Embedded systems to understand the difficulty of apprehending the real world for #technology, the importance of reviewing the development method towards a horizontal and collaborative organization, and finally, measuring the need to develop more adaptable and dynamic technological projects.

[![How to make Embedded systems skyrocket?](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b02dyo1hw52dn3ig11vw.png)](https://www.luos.io/blog/how-to-make-embedded-systems-skyrocket)
⏰ How to measure frontend performance?
Published: 2022-03-18 15:59:40

- Chrome dev tools
- [PageSpeed Insight](https://pagespeed.web.dev/)
- [Web page test](https://www.webpagetest.org/)

## 📕 Chrome dev tools
on browser right click -> inspect.
maybe you have used already it before, it's useful to measure performance as well actually

### 1️⃣ Setting disable cache
What is cache? I wrote about cache by banana
{% link https://dev.to/kaziusan/cache-banana-on-your-desk-react-performance-with-react-query-5ghb %}
![network](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g819letuij2ch2uj7cjx.png)
 
### 2️⃣ Reload
ctrl(cmd on Mac) + r

### 3️⃣ Check Network
![inspect bottom](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6be4qcx94s0vvfqsj9m9.png)
 
- Finish
How long it takes to show this page

- DOMContentLoaded
reading and parsing HTML file time (not CSS, images)

- Load
Finish loading time completely

- Requests
number of downloaded files

- Transferred
Sum of all downloaded files

⭐ If transferred value is like dozens of MB or hundreds of MB, you should reduce files.


### 4️⃣ Check server's speed
click **waterfall** of some file, then modal will be appeared
![waterfall](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5o8tpexu84kwa0f5evbl.png)
**TTBB**(not PPAP) is important, it means **Time To First Byte**.
-> Time to get first Byte from server, so less is better.
-> large number of TTBB = server or Network is slow

(Here I omit explanations of other panels like Memory,Performance because it will be so complicated in your brain)

## 📕 PageSpeed Insight
```
🤷‍♀️ client - Kaziu sensei, score of our website is 62 in PageSpeed Insight... 
could you do something?
😎 me - Yes sir!
```
Basically start of conversation with client is like that, so it's important what is PageSpeed Insight.

▼ You can get score of performance
I will write solutions in other article
![page speed insight](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hxs9nn6noc0t3d7rcemo.png)
 
▼ reasons
![opportunity](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/93z7vk2owu4zocttovo0.png)
 
## 📕 Web page test
it's like pagespeed insight, but differences are
* Choose location and network status and so on

    -> measure on cloud environment

* Video clip of problem part

    -> it's easy to get clearly which part should I fix
* Share url of test result

    ->If you have client, it's easy to communicate 

and more options exists, so I recommend you to use it 👍
🏋 "RAIL", Important way of thinking about frontend performance
Tags: javascript, beginners, frontend, performance
Published: 2022-03-18 15:56:09

## 😎 Don't guess, measure !
❌ This is the reason why this website is slow !! I know it!
✅ Well... I'm gonna just measure, drinking coffee

But after measuring performance, maybe you would think like that
> 😑 Hey, I measured... but I don't have goal! 1second? 2second? What is criterion??

😎 Ok I give you basic performance criterion, tadaaam **[RAIL](https://docs.google.com/presentation/d/13AJe2Ip4etqA8qylrva7bEgu1_hAvsq_VQiVOAxwdcI/present?slide=id.p19)**
😑 Ruby on rails?
😎 No, there is no relationship with it at all, RAIL is based **"Response, Animation, Idle, Load"**

| Content | criterion time |
| --------- |:---------:|
| Response | 100ms |
| Animation | 16ms |
| Idle | 50ms |
| Load | 1000ms |

### ⭐ Response
some action should response less than 100ms, after user inputs something
```
Click! ----- less than 100ms -----> open modal
```

### ⭐ Animation
Animation(video) is just collection of a lot of images actually. So it's important to know how many images there is in "A second"
[Referenece video](https://www.youtube.com/watch?v=tSkRT0ku5tc)

| content | number of images in a second|
| --------- |:---------:|
| TV | 30 |
| Movie | 24 |
| Game | 60 |
| **PC** | 60 |

Now Let's do super easy math
```
1s - 60images
↓
16ms - 1image
```
This is the reason why animation should finish less than 16ms

By the way this unit of **How many images there is in a second** is called **FPS(Frames per seconds)**, so animation on PC is 60fps

▼ for example, configuration of [chartjs-plugin-streaming](https://nagix.github.io/chartjs-plugin-streaming/latest/guide/data-feed-models.html#pull-model-polling-based-synchronous), there is "frameRate"
![chat.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uazlmlsqma2reqg7epn2.png)
 

### ⭐ Idle
After loading contents, looks like browser doesn't do anything, but still do something like getting data from API by XHR or lazy load images. These actions should be less than 50ms
```
😀 click Url!
↓
😀 finish rendering and we see something on browser!
😭 wait, Im browser, I need to load images that I didn't on purpose at first
↓
↓ (50ms)
↓
😭 Ok I've done it! I don't use main thread finally!
😀 ohh I can handle now on browser now!!
```

### ⭐ Load
loading time of webpage contents
```
I wanna see dev.io! click url!
↓
↓ (1 second)
↓
I see dev.io contents on browser and handle something as well!
```
actually it's not necessary to load all contents at first. 
Important thing is that loading contents in which user see on browser.

![first view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rri0jgckwo62i5o39pjl.png)
 

---
→ Next article "then how to measure them??"
Cloud Resume Challenge COMPLETE
Tags: beginners, javascript, html
Published: 2022-03-18 15:50:05

I completed the Cloud Resume Challenge after about 2 or 3 weeks of configuration.

It was a very interesting and enlightening experience to learn about all sorts of different technology.

Resume: https://cfresume.com/
GitHub: https://github.com/cfraser17/cfraser-crs

Overall, this was a enlightening experience. I learned a lot from various sources, scavenger hunted for information, and applied those solutions to get my results. This is only the first step in the journey however, as there is so much more to learn. 

## **Frontend**
The deployment of the frontend came rather naturally. I did use someone else's HTML and CSS and edited slightly. I think the end result looks nice but it could be refined. 

Deploying the frontend was more straightforward. AWS has good doc, and I used some Udemy courses I had to fill in the steps. I initially set everything up through the GUI but then did a restart through AWS SAM.

## **Backend**
The backend confused the hell out of me. Python, Javascript, API's, Lambda? To be frank, the book Forrest sells did give me a good path to take, but the code was very open ended. Thankfully, I had a good mentor to walk me through and the people on the CRS Discord also gave hints on what functions and methods to use. 

## **CI/CD and IAC**
It was at this point I had restarted my project to learn the more IaC portion of this. I used Lou's Open Up The Cloud guide for most of this.

https://www.youtube.com/playlist?list=PLEk97Q5Nj5oesA1WNk7DzaUpZUnCsQFVQ

It was very useful and enlightening. It was cool to be able to upload all my files via commands with AWS-Vault and GIT. Note to self though, I will find a way to get this to work with a Linux VM. I had to go through so many hoops just to get these commands to work with Windows. 

## **Next steps**

The main reason I took this challenge and what sold me on it was this excerpt from the website.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m5wifwwf9zuuujgl1len.png)

There were times I was ready to pull my head out as to why something didn't work as it should, or why I couldn't figure out how to get this code to work. DynamoDB still confuses me and there's a 450 page guide on it. There were times I spent 4 hours or so with no work to show and it was demotivating and frustrating.

However, I was stimulated. When you get into a flow, sometimes it feels like you can't stop. When I was setting up the CI/CD, I had spent 4 hours trying to get Cypress to work on GitHub Actions. One complaint I do have is that some doc on tech can be a little hard to read and follow. It wasn't until I found a random dev.to blog of someone setting up in a step by step manner that got me going. Kudos to @dwwhalen 

I do have much more to learn. My next step to study and take the RHCSA, then I may continue with my AWS certs. I'm going to continue to try to grow in this path but if another opportunity does show up, I may jump ship. At least I have the knowledge now that this is something I do find stimulating.
tsParticles 1.42.3 Released
Tags: webdev, showdev, javascript, typescript
Published: 2022-03-18 15:45:00

# tsParticles 1.42.3 Changelog

## Bug Fixes

- Removed a forgotten console.log, closes #3551 
- Fixed flashing issue with resize method, closes #3523 and #3074
- Fixed sea anemone preset, removed a useless option
- Canvas now is cleared just before new drawings

---

{% github matteobruni/tsparticles %}
Membuat Custom Helper Codeigniter 4
Tags: webdev, tutorial, php, codeigniter
Published: 2022-03-18 15:29:42

Helper biasa digunakan untuk mencegah kode yang berulang-ulang di controller dan view kita.Helper berlandaskan kepada metode [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself).Fungsi di Helper bisa dipanggil di controller maupun view.

Langsung saja ke tahap pembuatan custom helper.

##### Membuat Custom Helper

Buat di folder **app/Helpers/** file bernama **my_helper.php** ,namanya bebas terserah kita.
Misalnya kita isi dengan fungsi yang pasti sering digunakan yaitu format rupiah.Langsung saja isi Helper dengan kode dibawah.

```php
<?php
function format_rupiah($angka){
  $rupiah=number_format($angka,0,',','.');
  return $rupiah;
}
?>
```
#### Menggunakan Custom Helper

Ada dua cara memanggil helper pertama secara global dan manual  di masing-masing controller.

##### Memanggil Secara Global

Buka file **app/Controllers/BaseController.php** lalu cari bagian ini

```php
protected $helpers = [];
```

Ubah menjadi

```php
protected $helpers = ['my_helper'];
```

**my_helper** merupakan nama file helper yang kita buat tadi.

##### Memanggil Secara Manual

Buka file controller letakkan di fungsi mana kita akan memanggilnya

```php
helper(['my_helper']);
```

##### Menggunakan Fungsi Helper

Untuk menggunakannya kita tinggal memanggil seperti kode dibawah ini baik di controller ataupun di view

```php
echo format_rupiah(10000);
```

Sekian tutorial kali ini.Selamat Belajar
How the which Command works on Linux
Tags: linux, bash, codenewbie, beginners
Published: 2022-03-18 15:28:25

When we are running servers, or even our local computer, different applications may install the same piece of software multiple times. For example, it is not uncommon to accidentally have two versions of Node.JS installed on a server or computer.

In the example where we have multiple versions of Node.JS, it can be confusing which versions are running, or which will be used when we run the node command in a terminal window.

If we want to know the origins of a command, we can use the which command to find where it is installed. The which command has the following syntax, `[x]`, `[y]` and `[z]` are what we want to check:

```
which [x] [y] [z]
```

## How to use the which command on Linux or Mac
Lets use our Node.JS example to start with. If we want to know which Node.JS is being used, we can simply type the following:

```
which node
```

This will then return something like this:

```
/root/.nvm/versions/node/v14.15.1/bin/node
```

## Checking multiple commands with the which command on Linux or Mac
If we want to check the location of multiple commands on Linux or Mac, we can use the usual which syntax, but just separate each item we want to check with a space.

For example, the below text checks both node, and postfix:

```
which node postfix
```

And for me, it returns this:

```
/root/.nvm/versions/node/v14.15.1/bin/node
/usr/sbin/postfix
```
Maxsus belgilar | C++ boshlang'ich
Tags: beginners, uzbek, dasturlash, cpp
Published: 2022-03-18 15:25:37

## `string` va maxsus belgilar

Avvalgi postimizda yozganimizdek, C++ tilida tekstlar `string` deb ataladi va qo'shtirnoq `" "` orasida yoziladi.

```cpp
cout << "Salom dunyo!" << endl;
```

### 1️⃣ `\` - escape character
- ushbu belgi **string**/tekst ichida maxsus komandalar/belgilar yozish uchun ishlatiladi.

**string** ichida yozish mumkin bo'lmagan ba'zi belgilar mavjud. Masalan: `U "zo'r" bola.` deb chop etish uchun C++ da `"U "zo'r" bola."` deb yozish xatolik beradi. Bunga sabab **string** ichida **"** belgisi ishlatisa, **string** tugaganini anglatadi.

**string** ichida shunga o'xshash ta'qiqlangan belgilarni yozish uchun **`\`** ishlatiladi.

```cpp
cout << "U \"zo'r\" bola." << endl;

------------natija-------------
U "zo'r" bola.
```

`\` belgisini o'zini chop etish uchun nima qilamiz 🤔?
> `\\` qilib yoziladi

```cpp
cout << "Bugun \\ belgisini asl kuchini ko'rdik!" << endl;

------------natija-------------
Bugun \ belgisini asl kuchini ko'rdik!
```

### 2️⃣ `\n` - yangi qator
- ushbu maxsus belgi **string** register ichiga yozilsa, shu `string`ni chop etishda **\n** bor joydan boshlab keyingi qator o'tib ketadi.


```cpp
cout << "Salom\ndunyo" << endl;

------------natija-------------
Salom
dunyo
```

### 3️⃣ `\t`- TAB
- `string` ichiga yozilganda tekst ichiga TAB bo'sh joy chop etadi

```cpp
cout << "olma\tanor\tbexi" << endl;

------------natija-------------
olma   anor   bexi
```

### 4️⃣ `\b`- backspace
- oxirgi chop etilgan belgini o'chiradi

```cpp
cout << "Salom\b" << endl;

------------natija-------------
Salo
```

### 5️⃣ `\r`- *carriage return*
- chop etilayotgan qatorda kursorni qator boshiga olib keladi. Yana chop etishda davom etilsa avval yozilgan tekstlarni o'chirib ustiga yozib yuboradi

```cpp
cout << "Github 'vashshe' malades 🌟\rIlmhub" << endl;

------------natija-------------
Ilmhub 'vashshe' malades 🌟
```

## Topshiriqlar 🎖

1. Qiyudagi kod nima chop etadi?
```cpp
cout << "bexi\ranor\rolma\b" << endl;
```

2. Quyidagi `string`ni C++ da chop eting.
```
\    /\
 )  ( ')
(  /  )
 \(__)|
```
Testing dynamic file uploads with Laravel
Published: 2022-06-04 21:12:41

---
title: Testing dynamic file uploads with Laravel
published: true
date: 2022-03-18 15:17:00 UTC
tags: 
canonical_url: https://dcblog.dev/testing-dynamic-file-uploads-with-laravel
---

When working with file uploads where the file name is generated, how do you know what the file name is and then test it exists in a test.

First in a controller doing a file upload with a store call which will store the file into a files folder in the public disk, if you don't need to specify the desk the leave off the second param.

```

$path = $request->file('name')->store(
    'files',
    'public'
);

//when no disk is required

$path = $request->file('name')->store('files');
```

Now this method would return the **$path** as its return.

Then In a test use the storage fake which tells Laravel to fake a file upload

```

Storage::fake('files');
```

To fake an upload you can use:

```

UploadedFile::fake()->image('avatar.jpg')
```

 To assert the file exists you can check the file in storage:

```

Storage::assertExists('files/avator.jpg');
```

But if the file is stored dynamically you won't know the file name in which case you will need to look inside the response from the test. The response is not **JSON** but a **test response**. In order to covert this to json use  **decodeResponseJson** on the response. Then you can use json as normal.

Putting it all together:

```

test('can upload file', function () {

    Storage::fake('files');

    $response = post('api/v1/file', [
        'name' => UploadedFile::fake()->image('avatar.jpg'),
    ])
        ->assertStatus(201)
        ->assertSessionHasNoErrors();

    $path = $response->decodeResponseJson()['data']['path'];

    Storage::assertExists($path);
});
```
A way to translate sql scripts to a different dialect
Tags: sql, sqlserver, hsqldb, jooq
Published: 2022-03-18 15:13:36

One application i'm responsible is running on a sql server database but most of the integration tests are running against a hsql in memory database. For a bigger integration test i had the need to convert some sql scripts. While researching i found this wonderful tool. Im not affiliated with them in any way. I'm writing this more as a note to myself. I want to investigate it more. 

The left textfield is for your input sql and the right textfield is for your translated output. 

Enjoy: 

https://www.jooq.org/translate/
Building a React.js, Next.js Magento 2 PWA with GraphCommerce
Tags: react, nextjs, typescript, magento
Published: 2022-03-18 15:08:19



[GraphCommerce](https://www.graphcommerce.org/) is a front-end framework used for building headless Magento e-commerce storefronts in React.js.

**Dependencies**

- Install and use node 14: `nvm install 14 && nvm use 14`
- Install yarn: `npm install --global yarn`

---

## Getting started




**Installation**

1. `git clone git@github.com:graphcommerce-org/graphcommerce.git`
2. `mkdir my-project`
3. `cp -R graphcommerce/examples/magento-graphcms/. my-project`
4. `cd my-project`
5. `cp -R .env.example .env`
6. `rm CHANGELOG.md && touch CHANGELOG.md`
7. `rm -rf node_modules && rm -rf .next`

Edit /package.json. Delete `"scripts": {...}` and rename `scripts_local` to
`scripts`:

**Start the development environment**

- `yarn` Install the dependencies
- `yarn codegen` Converts all .graphql files to typescript files
- `yarn dev` Run the app

Visit the development environment running at http://localhost:3000

That's it! GraphCommerce includes Magento-specific React components, pages, and utilities for building a high-end Magento PWA storefront.

👉 To connect to your own Magento backend, refer to the [GraphCommerce installation instructions](https://www.graphcommerce.org/docs/getting-started/create)