teleren/devto huggingface dataset:
Weekly web development resources #123
Tags: weekly, webdev, beginners
Published: 2022-11-09 07:32:34



______

*Sponsored*
##[Bot Eat Brain](https://boteatbrain.com/?utm_source=wweb.dev)
[![Bot Eat Brain](https://wweb.dev/weekly/content/123/boteatbrain.jpg)](https://boteatbrain.com/?utm_source=wweb.dev)
A daily AI newsletter for news and memes. We're your favourite drunk uncle with a PhD in machine learning. 20% jokes, 80% informative, 100% worth your time.

______


##[Clips](https://clips.formidable.dev/)
[![Clips](https://wweb.dev/weekly/content/123/clips.jpg)](https://clips.formidable.dev/)
A cool web application to easily create short screen recordings.

______


##[missing.css](https://missing.style/)
[![missing.css](https://wweb.dev/weekly/content/123/missingcss.jpg)](https://missing.style/)
A CSS library to build common components using plain, semantic HTML.

______


##[playlist.lol](https://playlist.lol/)
[![playlist.lol](https://wweb.dev/weekly/content/123/playlist.jpg)](https://playlist.lol/)
A Spotify playlist that gets updated automatically every day with one of the best 1001 Albums in history.

______


##[Futuristic CSS](https://www.smashingmagazine.com/2022/10/futuristic-css/)
[![Futuristic CSS](https://wweb.dev/weekly/content/123/futuristic-css.jpg)](https://www.smashingmagazine.com/2022/10/futuristic-css/)
An article takes a look at some futuristic CSS features that might one day make their way to the browser.

______


##[Kodemo](https://kodemo.com/)
[![Kodemo](https://wweb.dev/weekly/content/123/kodemo.jpg)](https://kodemo.com/)
A tool for writing more engaging code tutorials, walkthroughs and documentation. 

______


##[Lucia](https://lucia-auth.vercel.app/)
[![Lucia](https://wweb.dev/weekly/content/123/lucia.jpg)](https://lucia-auth.vercel.app/)
A simple yet flexible user and session management library.

______


##[Generative OG images](https://matthewstrom.com/writing/generative-art-og-images)
[![Generative OG images](https://wweb.dev/weekly/content/123/og-images.jpg)](https://matthewstrom.com/writing/generative-art-og-images)
A nice article by Matthew Ström on how to create generative art Open Graph preview images.

______


##[Review Lens](https://reviewlens.io/)
[![Review Lens](https://wweb.dev/weekly/content/123/reviewlens.jpg)](https://reviewlens.io/)
A tool to draw, annotate and comment directly on-top of your web app or website's User Interface.

______


##[Supersonic Plugin](https://github.com/the-illarionov/the-supersonic-plugin-for-scroll-based-animation)
[![Supersonic Plugin](https://wweb.dev/weekly/content/123/supersonic-plugin.jpg)](https://github.com/the-illarionov/the-supersonic-plugin-for-scroll-based-animation)
A customizable 3kb plugin for scroll based animation which animates 1000 elements without lags.

______


##[Boarding](https://josias-r.github.io/boarding.js/)
[![Boarding](https://wweb.dev/weekly/content/123/boarding.jpg)](https://josias-r.github.io/boarding.js/)
A light-weight, no-dependency, vanilla JavaScript library to drive user's focus across the page.

______

To see all the weeklies check: [wweb.dev/weekly](https://wweb.dev/weekly)
901. Leetcode Solution in cpp
Tags: cpp
Published: 2022-11-09 07:23:20

```

class StockSpanner {
 public:
  int next(int price) {
    int span = 1;
    while (!stack.empty() && stack.top().first <= price)
      span += stack.top().second, stack.pop();
    stack.emplace(price, span);
    return span;
  }

 private:
  stack<pair<int, int>> stack;  // (price, span)
};

/**
 * Your StockSpanner object will be instantiated and called as such:
 * StockSpanner* obj = new StockSpanner();
 * int param_1 = obj->next(price);
 */
```
#leetcode
#challenge
Here is the link for the problem:
https://leetcode.com/problems/online-stock-span/
Docker Certified Associate Exam containerized utility
Published: 2022-11-09 07:04:33

[Docker Certified Associate Exam](https://dumpsarena.com/docker-certification/docker-certified-associate/) You will analyze dockers field Networking Model, community drivers, docker Networks, and their sorts. You may also discover ways to isolate bins from a community stack or extrade their DNS configuration. Section 7: You will learn the way bins are organized in a filesystem, docker garage drivers like volumes, bind mounts and temp fs, 1/3 birthday birthday celebration driving force plugins, statistics sharing among bins and extra. Section eight: You will analyze the fundamentals of field orchestration with Docker Swarm, recognize the Swarm structure, installation your swarm Cluster, install a scalable containerized utility [Docker Certified Associate Exam](https://dumpsarena.com/docker-certification/docker-certified-associate/) the use of swarm provider, paintings with overlay networks, and carry out rolling updates. Section 9: You will analyze Swarm s chief election mechanism with Raft consensus and what's a quorum, excessive availability, catastrophe control (recovery), and cluster locking. Section 10: You will find out about Docker Compose YAML documents and Docker Stack. Section eleven: You will installation your personal Kubernetes Engine (MKE) Launchpad (previously Docker Enterprise Edition UCP) cluster, paintings on MKE Dashboard, Operate Swarm on MKE through deploying scalable offerings with out the use of the command line. 

Get 25% Special Discount ……..>>>>>>>>> https://dumpsarena.com/docker-certification/docker-certified-associate/
Introduction & Setup PocketBase
Tags: database, webdev, tutorial, javascript
Published: 2022-11-09 07:00:00

Today we are going to dive into [PocketBase](https://pocketbase.io) and set it up!

- [💡 What's PocketBase?](#whats-pocketbase)
- [🛠️ Setup Pocketbase](#setup-pocketbase)
- [🐳 Setup via docker-compose](#setup-via-docker-compose)

## 💡 What's PocketBase?
**PocketBase** is an open-source **Backend-as-a-service** (BaaS). It offers all necessary needed features like _authentication_, _file storage_, _realtime database_ and _web dashboard_.

PocketBase uses an SQLite Database behind the scene and is written in _Go_. They offer an awesome _JavaScript/Go SDK_ and you can even extend it by using it as a _Go Framework_.

You are able to configure _permission rules_, _OAuth2_, _external file storage (S3)_ and _mail (SMTP)_.

[PocketBase](https://pocketbase.io/)
[PocketBase Demo:](https://pocketbase.io/demo/)

## 🛠️ Setup Pocketbase
The setup of Pocketbase is so easy it takes less than 1 minute to be able to start using it!

### Download & extract
Download the archive from the [documentation](https://pocketbase.io/docs/) that's correct for you operating system. Now move it in the root folder in your project.

![Archive in root folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lex70u962n8uwip2l1ps.png)

Next _extract_ the archive and you should be left with a folder which contains an executable (`pocketbase`).

![Extracted Archive](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5466hrrra02lsuljkm55.png)

### Start Pocketbase
Move into this directory and run the `./pocketbase serve` command. 

```
cd ./<directory

./pocketbase serve
```

![Terminal with commands to start PocketBase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/doeeuptxe55j1z1c708l.png)

And you are all set up! Visit the **Admin UI** page to setup your _admin account_ and start using PocketBase!

## 🐳 Setup via docker-compose
In the favor of many developers there's a way to set it up via Docker as well.

Repo: https://github.com/muchobien/pocketbase-docker

Even easier than above you just add the pocketbase to your `docker-compose.yml` file like that:

```docker
version: "3.7"
services:
  pocketbase:
    image: ghcr.io/muchobien/pocketbase:latest
    container_name: pocketbase
    restart: unless-stopped
    command:
      - --encryptionEnv #optional
      - ENCRYPTION #optional
    environment:
      ENCRYPTION: example #optional
    ports:
      - "8090:8090"
    volumes:
      - /path/to/data:/pb_data
      - /path/to/public:/pb_public #optional
```

After starting your docker stack it automatically installs and sets up _PocketBase_ and you're instantly ready to start working!

**Thanks for reading!**
<a href="https://www.buymeacoffee.com/jannisdev" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-blue.png" alt="Support me" height="20" width="80"></a>
How to Deploy Existing NodeJS Express application as an AWS Lambda Function using Serverless Framework
Tags: node, lambda, aws, serverless
Published: 2022-11-09 06:52:19

There are seven easy steps to deploy your existing NodeJS ExpressJS application as an AWS Lambda Function using Serverless Framework.

## Step 1
Installing Dependencies

```
$ npm init -y
$ npm install --save serverless-http
```

## Step 2
Do not start the server instead export it

```
const serverless = require("serverless-http");
...
...
...
// app.listen(port, () => {
//     console.log(`listening On PORT -> ${port} `);
// });

// Export your Express configuration wrapped into serverless function
module.exports.handler = serverless(app);
```

## Step 3
install and Configure the Serverless Framework

`$ npm install -g serverless`

Prefix the command with sudo if you’re running this command on Linux.

```
$ sls config credentials --provider aws --key <aws_access_key_id> --secret <aws_secret_access_key>
```
## Step 4
Add [serverless.yml](https://www.serverless.com/framework/docs/providers/aws/guide/serverless.yml) file in your project. Follow the [link](https://www.serverless.com/framework/docs/providers/aws/guide/serverless.yml) for more details.

```
service: example-project

provider:
  name: aws
  runtime: nodejs12.x
  stage: dev
  region: us-east-1

  # you can add statements to the Lambda function's IAM Role here
  iamRoleStatements:
    - Effect: "Allow"
      Action:
        - "s3:PutObject"
      Resource:
        - "arn:aws:s3:::${file(config.json):S3_BUCKET_NAME}/*"

functions:
  app:
    handler: index.handler
    events:
      - http: ANY /
      - http: "ANY /{proxy+}"

```

## Step 4
Deploy the project
`$ sls deploy`

## Step 5
We have to follow this step for production environment.
Add the `NODE_ENV` in the `secrets.json`.

```
{
  "NODE_ENV": "production"
}
```

## Step 6
Add a reference for the `secrets.json` in the `serverless.yml`

```
service: example-project

custom: # add these two lines
  secrets: ${file(secrets.json)} # reference the secrets.json file

provider:
  name: aws
  runtime: nodejs12.x
  stage: dev
  region: us-east-1

  # you can add statements to the Lambda function's IAM Role here
  iamRoleStatements:
    - Effect: "Allow"
      Action:
        - "s3:PutObject"
      Resource:
        - "arn:aws:s3:::${file(config.json):S3_BUCKET_NAME}/*"

functions:
  app:
    handler: index.handler
    events:
      - http: ANY /
      - http: "ANY /{proxy+}"
```

## Step 7

That’s it! Delete the `node_modules` and `.serverless` folders from the service and run `npm install` again, but this time with the `--production` flag.

```
$ npm install --production
```
Next 13 - Trying out routes
Tags: nextjs, beginners
Published: 2022-11-09 06:41:47

If you are an avid reader of my blogs, you'll learn that I learn best by trying things out.

This article will look at the new Next 13 ways of routing.

To get started, we first have to install a new Next 13 app, which is created with the following command at the time of writing.

```bash
npx create-next-app@latest --experimental-app
```

## Creating routes

If we open up the project, we already see that inside our `app` directory, we get a `layout.tsx`, and `page.tsx` file.
The layout file is responsible for our layout and the page for our `/` home page.

We can go multiple routes to add a new page, but let's say we want to create the following pages.

- /dashboard/settings
- /dashboard/account

To achieve this, we have to start by creating our dashboard folder. This folder can eventually hold our global dashboard layout.
Create the `settings` and `account` folders in that folder.
And again, inside those, go ahead and create a `page.tsx` for each.

The whole structure will look like this:

- 🗂️ app
  - 🗂️ dashboard
    - 🗂️ settings
      - 📃 page.tsx
    - 🗂️ account
      - 📃 page.tsx

I do like how this makes every component very clear and explanatory of what it does.

Each page will return what it's on for now.
As for the `settings/page.tsx`, we use the following.

```js
export default function SettingsPage() {
  return <h1>This is my settings page</h1>;
}
```

And for the account page:

```js
export default function AccountPage() {
  return <h1>This is my account page</h1>;
}
```

Now, if you run your application with `npm run dev`, we will be able to visit both on:

- `http://localhost:3000/dashboard/settings`
- `http://localhost:3000/dashboard/account`

## Routing groups

Perhaps you like having combined layouts for the settings and account, but you don't want to include the `dashboard` param in the URL.

For this, we can leverage routing groups, which refer to a group of routes that can share a layout but doesn't get added to the URL.

To achieve this, rename `dashboard` to `(dashboard)`.

And now, we can visit our pages on the following URLs.

- `http://localhost:3000/settings`
- `http://localhost:3000/account`

## Conclusion

We can achieve a lot of excellent routing options with the new flows.
They make it super dynamic yet flexible to layout out from here.

In the following article, we'll look at how the layout will look and what will be shared between the pages.

If you are keen, I uploaded the code to [GitHub](https://github.com/rebelchris/next-13/tree/page-options), so you can look over it.

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Technology Adoption Curve
Tags: storybytes, business, technology, complexity
Published: 2022-11-09 05:41:28


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


Being a Driver in the tech industry is all about the moment. Especially in this sector, where change is accelerating and complexity is increasing. There is a peculiar phase in the life cycle of a high-tech product that Moore calls a “chasm.” According to the technology life cycle, there are four key stages: research and development, ascent, maturity, and decline depending on the adoption of high tech products by giving main psychographic groups: innovators, early adopters, early majority, late majority, and laggards, each with a different set of features. You either be up-to-date, or you will join the tech party too late. In fact, one technology to win over the other doesn’t have just to be better; but way more effective. What’s your strategy to be effective and up-to-date?
Laravel 9 Import Export CSV And EXCEL File
Tags: laravel, laravel9, import, csv
Published: 2022-11-09 05:30:00

In this article, we will see laravel 9 import export csv and excel files. We will import data to the database using csv file in laravel 9. 

Using the maatwebsite/excel plugin you can easily import and export csv and excel files in laravel 9 examples. For the laravel 9 import csv and excel file, we will use the import class, for laravel 9 export csv and excel files will use the export class.

Using this example we can easily import, export, and download the csv & excel file from the database using the maatwebsite/excel composer package. 

maatwebsite/excel provides an easy way to import and export csv files in laravel 9. So let's see the import export csv excel file in laravel 9.

How to import and export csv and excel files in laravel 9

```
Step 1: Install Laravel 9 For Import Export CSV and Excel File

Step 2: Setup Database Configuration

Step 3: Install maatwebsite/exel Package

Step 4: Create Dummy Records Using Tinker

Step 5: Create New Route

Step 6: Add Controller

Step 7: Create Import Class

Step 7: Run Import Export CSV and Excel File Project
```
Quality Assurance
Tags: storybytes, qualityassurance, agile, communication
Published: 2022-11-09 05:26:47


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

What is Quality Assurance? A powerful statement that requires in every angle the most attention. The best standard can be assured by having a clear understanding of what the company does deliver to the user’s expectation; or the other way round, what the user expects, which the company does deliver. In an agile manner, every incremental delivery does cover a quality standard that has been assured. Pro-active regular communication between the company and the user does keep the expectations for both sides in check. At Web and App Studio, we do keep maintain a short release cycle in order to be aligned with the standards we set together with our clients. To summaries: Quality-in, Quality-out, both ways.
Helm — Dependencies
Tags: kubernetes, helm, containerapps, packagemanage
Published: 2022-11-09 05:24:06

In helm, one chart can be dependent on another chart. For instance, a `WordPress` application requires a database to start functioning. In helm, we can deploy WordPress as part of the parent chart and `MySQL` or any other required application as a dependency of the parent chart.

Helm charts store their dependencies in ‘charts/’. There are two different ways to add dependency charts to parent charts:

Listing all the dependencies inside the Chart.yaml file and helm will download the dependencies and store them in the ‘charts/’ Directory.

Manually populate the dependency chart inside the ‘charts/’ directory.

## List dependencies inside the Chart.yaml file

Before listing dependencies in the Chart.yaml file, By default Chart.yaml file looks like this :


```
# Chart.yaml
apiVersion: v2
name: webserver
description: A Helm chart for Kubernetes
type: application
version: 0.1.0
appVersion: "1.16.0"
```

Now, let's see how we can populate the dependencies into the Chart.yaml file:


```
dependencies:

- name: mysql
  version: "9.3.4"
  repository: "https://charts.bitnami.com/bitnami"
```
After adding dependencies to the Chart.yaml file :


```
# Chart.yaml

apiVersion: v2
name: webserver
description: A Helm chart for Kubernetes
type: application
version: 0.1.0
appVersion: "1.16.0"
dependencies:
- name: mysql
  version: "9.3.4"
  repository: "https://charts.bitnami.com/bitnami"
```

Using a simple helm command we can pull the chart from the repository defined in the dependencies field:


```
   helm dependency update [CHART] 
>> helm dependency update ~/webserver
```

The above-defined command will generate .webserver/Chart.lock file as well as download all dependencies into the .webserver/charts directory

The `Chart.lock` file lists the exact versions of immediate dependencies and their dependencies and so on.

[Read full article...](https://levelup.gitconnected.com/helm-dependencies-1907facbe410)
AI Relationships
Tags: storybytes, machinelearning, deeplearning, neuralnetworks
Published: 2022-11-09 05:16:06


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

AI can use decision-making and automation powered by machine learning, Artificial Neural Networks and deep learning to increase an organization's efficiency. From predictive modelling to report generation to process automation, artificial intelligence can transform how an organization operates, improving efficiency and accuracy. AI is a more significant concept to develop intelligent machines that simulate human thinking capability and behavior. An ANN can learn how to solve a new problem only by analyzing older examples of the same problem. Last but not least, deep learning is only one more subset of the machine learning field, but it’s mighty. Artificial intelligence has many great applications that are changing the world of technology. While creating an AI system that is generally as intelligent as humans remains a dream, the need of getting clean and enriched data is equally important.
C++ intro for starter 4
Tags: cpp, beginners, tutorial, programming
Published: 2022-11-09 05:11:07

#Assalomu alaykum!

###Bugun biz siz bilan bugungi darsizmizda `Data_type` haqida to'liqroq tanishamiz.

Biz faqat o'tgan darslarimizda `int` va `string` turidagi ma'lumot turlari bilan tanishgan edik va biz bularni yanada ko'proq tanishamiz,
Qani boshladik:)

Unday bo'lsa quyidagi kodga diqqat bilan e'tibor beramiz,

````cpp
  O'zgaruvchilar :
  float=> kasr sonlar uchun
  double=> haqiqiy sonlar uchun
  char=> faqat bitta belgi uchun
  string=> tekst,matn uchun
  bool=> (boolean)> true(1),false(0) 
  int son = 10;
  float son1;
  double son2;
  char belgi;
  string ism;
  bool a;
  string meningIsmimBu = "Abror";
  cout << meningIsmimBu;
```
Yuqorida ko'rishingiz mumkin,sizga barcha turdagi `data_type` havola etdik.

Bundan tashqari biz siz bilan sonlarni yaxlitlash haqida ham qisqacha tanishib o'tamiz.
````cpp
  double a=123.123;
  float b=4.69;
  cout<<round(b);
  cout<<fixed<<setprecision(2)<<a;
 ```
Bu ifodalarda birinchisida `round` bu sonni yaxlitlash uchun ishlatamiz va keyingi o'rindagisi `fixed<<setprecision(2)<<a;`
bu ifoda esa nechta xonagacha yaxlitlash uchun ishlatamiz.
Bu ifodalarni ishlatish uchun `#include<iomanip>` va `#include<iostream>` kutubxonalaridan foydalanishimiz kerakdir.

Bugun shu mavzular haqida gaplashdik.@dawroun 

> _E'tiboringiz uchun rahmat!___
Data Metrics
Tags: storybytes, business, data, success
Published: 2022-11-09 04:58:35


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

It is often a challenge to dive into the data and understand the behavior in this data-rich world. Vanity Metrics might look impressive but lack substance and context. Whereas, Actionable Metrics are used to make data-driven decisions about any optimization. We at Web and App Studio continue our data journey by trying to understand the User’s behavior. Behind every Data point is a Human. Let’ don’t waste time by watching data that makes you feel good but doesn’t tell you anything about your business. Companies that get caught up in vanity metrics can get a false sense of success which can hurt the business in the long run. Invest your time and energy in collecting metrics that help you make valuable decisions.