teleren/devto huggingface dataset:
Weekly web development resources #124
Tags: weekly, webdev, beginners, javascript
Published: 2022-11-16 06:56:33



______

*Sponsored*
##[Indie Worldwide](https://indieworldwide.com/?utm_source=wweb.dev)
[![Indie Worldwide](https://wweb.dev/weekly/content/124/indieworldwide.jpg)](https://indieworldwide.com/?utm_source=wweb.dev)
The friendliest online community of bootstrapped startup founders. Get 1-1 introductions every week to other founders with similar interests and revenue.

______


##[nfty.sh](https://ntfy.sh/)
[![nfty.sh](https://wweb.dev/weekly/content/124/nfty.jpg)](https://ntfy.sh/)
An open-source notification service to send push notifications to your phone or desktop via PUT/POST.

______


##[Katana](https://github.com/projectdiscovery/katana)
[![Katana](https://wweb.dev/weekly/content/124/katana.jpg)](https://github.com/projectdiscovery/katana)
A next-generation crawling and spidering framework. 

______


##[TanStack Router](https://tanstack.com/router/v1)
[![TanStack Router](https://wweb.dev/weekly/content/124/tanstack-router.jpg)](https://tanstack.com/router/v1)
A typesafe router with search-param APIs and built-in caching, built for JS/TS, React, Preact, Solid, Vue and Svelte.

______


##[Online Image Compressor](https://graygrids.com/tools/image-compressor)
[![Online Image Compressor](https://wweb.dev/weekly/content/124/image-compressor.jpg)](https://graygrids.com/tools/image-compressor)
A browser-based  image compressor, that makes it super easy to compress your JPG or PNG images at a fast speed.

______


##[Postcard](https://postcard.page/)
[![Postcard](https://wweb.dev/weekly/content/124/postcard.jpg)](https://postcard.page/)
A SaaS to create a simple personal website including an email newsletter. 

______


##[Marten](https://martenframework.com/)
[![Marten](https://wweb.dev/weekly/content/124/marten.jpg)](https://martenframework.com/)
A Crystal Web framework that enables pragmatic development and rapid prototyping.

______


##[Starter Tab](https://startertab.com/)
[![Starter Tab](https://wweb.dev/weekly/content/124/startertab.jpg)](https://startertab.com/)
A customizable website to replace your 'New Tab' homepage.

______


##[ Tailwind Sites](https://tailwindsites.com/)
[![ Tailwind Sites](https://wweb.dev/weekly/content/124/tailwindtemplates.jpg)](https://tailwindsites.com/)
A website with free Tailwind CSS site templates for your next project.

______


##[JSON Crack](https://jsoncrack.com/)
[![JSON Crack](https://wweb.dev/weekly/content/124/jsoncrack.jpg)](https://jsoncrack.com/)
A website to seamlessly visualize your JSON data instantly into graphs.

______


##[Edit Video](https://edit.video/)
[![Edit Video](https://wweb.dev/weekly/content/124/edit-video.jpg)](https://edit.video/)
A great tool for free online video editing in your browser.

______

To see all the weeklies check: [wweb.dev/weekly](https://wweb.dev/weekly)
How to Install Laravel 9 on windows 10
Tags: laravel, php
Published: 2022-11-16 06:51:15

How to Install Laravel 9 on windows 10

In this video, we will learn how to install laravel 9 on windows 10 using the xampp server. First of All, you need to have a xampp server or you can download and install that, and then you need to download and install composer. Once you download and install xampp and composer, then you will be able to install laravel.

So, first of all, you need to open the cmd command, inside there, you need to select the path where you've installed the xampp server. Usually, developers install xampp on the C driver. If you have installed xampp on C drive.

Then you need to find the xampp folder inside the folder has htdoc folder. You need to get the htdoc folder path and go back to your cmd command, inside there you need to select the path like cd xampp/htdoc.

Once you enter inside the do directory, then you need to write the command to install the laravel latest version. 

Inside the video tutorial, you will learn step by step installation of laravel and also you will open  laravel project with different ways.

Hope you like the video, thanks.

{% embed https://www.youtube.com/watch?v=3EC9WFagbYE %}
Find out the quality of your CSS code
Tags: webdev, css
Published: 2022-11-16 06:50:33

Last year I wrote [an article about tools for auditing CSS](https://css-tricks.com/tools-for-auditing-css/). If you are a CSS lover, I bet you have heard some of those.

But did you know there is a tool called CSS Code Quality that is free to use and gives your CSS a score?

## About the tool

[CSS Code Quality](https://www.projectwallace.com/css-code-quality) is a tool made by Bart Veneman. As [Bart says in his blog post](https://www.projectwallace.com/blog/new-online-css-code-quality-analyzer), “think @____lighthouse, but for CSS specifically.”

## How it works

After you submit either your URL or CSS code, you get the scores for the following:

- maintainability,
- complexity, and
- performance.

The maximum score is 100. Like the Lighthouse tool, your code is doing great if you get the green scores.


![Screenshot of CSS Code Quality scores for MDN site.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xh6a31hhwoj2u822r2db.png)

_I wouldn’t mind seeing a legend telling you that 100 points are the maximum, though._

## Score breakdown

For every test that fails, your score gets lower. You can see the results for each test in the score breakdown.

There are twenty different tests at the time of writing, from checking the usage of `@import` in your code to checking the number of declarations in a single ruleset.

If your code passes the test, the test will be marked green. Otherwise, if your code didn’t pass the test, the test will be marked orange or red, depending on how badly the code broke the test.

For example, the MDN site gets a red score for the “Avoid many Declarations in a single RuleSet” test because there is a ruleset with 106 declarations (!!). Similarly, the MDN site gets an orange score for “More than most common Selector Complexity” because 38.9% of selector complexities are more complex than most common.

![Screenshot of CSS Code Quality score breakdown for MDN site.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dptcdug2d8frcg5cwgim.png)

It would be great if you could see these test fails highlighted in your CSS code somehow, but this information is helpful as it is already.

You could even download the results as a JSON file for future reference.

## Conclusion

Writing **good** CSS is hard. At least now we could get a sense of how good or bad we are at it. So check [CSS Code Quality](https://www.projectwallace.com/css-code-quality) today and improve your CSS!

[#RespectCSS](https://twitter.com/search?q=%23RespectCSS&src=typed_query)
AWS IAM - Roles Anywhere
Tags: aws, cloud, devops, security
Published: 2022-11-15 19:09:00

**Anotações sobre o AWS IAM Roles Anywhere para ajudar na preparação das certificações AWS.**

Até o momento as anotações são para as certificações abaixo:

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

- [Link oficial](https://docs.aws.amazon.com/pt_br/rolesanywhere/latest/userguide/introduction.html)

##**Definição do fornecedor**
_Você pode usar o AWS IAM Roles Anywhere para obter credenciais de segurança temporárias no IAM para cargas de trabalho como servidores, contêineres e aplicativos executados fora da AWS._

---

##**Anotações gerais**

- Utiliza certificados digitais - x.509
- Tem que criar um certificado pelo Trust Anchors
- A role que será utilizada tem que ter a permissão para ser utilizada pelo Role Anywhere, no Trusted 
- Ele é regional, mas o IAM em sí Não
- Recurso no On-Premisse que acessa uma credencial temporária para acessar o recursos da AWS
- Substitui utilização de Access Key e Secret Key
Create a Responsive Pricing Table in HTML and CSS
Tags: html, css, javascript
Published: 2022-11-16 06:35:14

in this tutorial, we will learn How to Create a Responsive Pricing Table in HTML and CSS. Pricing tables are used to display the packages, most web hosting companies use pricing tables to display the content.

Also, you display any content inside the pricing table. So, I'm going to teach You How to use HTML and CSS3 to design a simple and clean Pricing table.

hope this tutorial is helpful and beneficial for you.


{% embed https://www.youtube.com/watch?v=KURAwK5nhaE %}
【PHP】How to get index number when using "foreach"?
Tags: php
Published: 2022-11-16 06:18:04

How do you get index number of array while iterating it with "foreach"?

Eventually, you need to create an variable for 
index number to use in foreach.

Here is an example.
```
//Array of menu and price (eg. $5 for 1 Big Mac)
$menu_price=a["Big Mac"=>5,"Chicken Nuggets"=>3,"Egg McMuffin"=>2];

//Array of number of orders for each menu (eg. 10 Big 
Macs are ordered.)
$number_of_orders=[10,8,6];

//Variable for index number
$i=0;

//Calculate the total price
function calculate($price,$number){
  return $price*$number;
}

foreach($menu_price as $menu=>$price){
  echo "{$number_of_orders[$i]} {$menu} cost $"
.calculate($price,$number_of_orders[$i]).".";
  echo "<br/>";
  $i++;
}
```

What you will get is as below.

```
10 Big Mac cost $50.
8 Chicken Nuggets cost $24.
6 Egg McMuffin cost $12
```
Top 5 React Boilerplates to Know in 2023
Tags: react, javascript, opensource, typescript
Published: 2022-11-16 06:15:11

Hi Devs , Hope you are doing well in development , Today I'm going to tell you top 5 react starter which makes your development more fast and reliable.

If you are beginner don't take much stress about it . It needs basic react concept to learn so lets start. :)

# Top 5 React Boilerplates:

1)Create React App
2)React Boilerplate
3)Gatsby
4)React Starter Kit
5)Razzle

* 1 Create React App : 

[Create React App](https://github.com/facebook/create-react-app) is simple and basic to start the react app it includes webpack and much more it supports RTL and multilingual channel .


* 2 [React Boilerplate](https://github.com/react-boilerplate/react-boilerplate) is a reliable and well-designed boilerplate in the Javascript UI Libraries, with 28.2k ratings on GitHub. The super-rich component and font base, together with Redux, Mocha, Redux-Saga, Jest, React Router, PostCSS, and reselect are all included. They support SEO indexing. Concentrating on app development and performance is more than enough.


* 3  Gatsby
[ Gatsby](https://github.com/gatsbyjs/gatsby) is open-source framework based on React.Professional developers can efficiently design maintainable, highly effective, content-rich websites with the help of Gatsby.It produces a whole new web of possibilities by combining the control and scalability of dynamically displayed websites with the quickness of static-site production.


* 4 React Starter Kit
[React Starter Kit](https://github.com/kriasoft/react-starter-kit)
The React library, which has 20.6k stars, served as the foundation for Kriasoft's isomorphic starter kit. Modern web development tools including Node.js, Express, GraphQL, Babel, PostCSS, Webpack, and Browsersync are used by React Starter Kit


* 5 Razzle
[Razzle](https://github.com/jaredpalmer/razzle) 
Razzle uses this method to operate with a variety of frameworks, including Angular, Preact, Vue, Svelte, and not just React. While your app is running, just type rs in the console and press Enter to restart your server.


happy coding :)
ERROR: JkWorkersFile only allowed once, 2022-06-04
Tags: apache2, eorrs
Published: 2022-11-16 04:52:53

1. apache2 실행시 

> JkWorkersFile only allowed once
 오류 발생

```
× apache2.service - The Apache HTTP Server
     Loaded: loaded (/lib/systemd/system/apache2.service; enabled; vendor preset: enabled)
     Active: failed (Result: exit-code) since Sat 2022-06-04 11:16:41 UTC; 18s ago
       Docs: https://httpd.apache.org/docs/2.4/
    Process: 20059 ExecStart=/usr/sbin/apachectl start (code=exited, status=1/FAILURE)
        CPU: 35ms

Jun 04 11:16:40 test systemd[1]: Starting The Apache HTTP Server...
Jun 04 11:16:41 test apachectl[20062]: AH00526: Syntax error on line 23 of /etc/apache2/mods-enabled/jk.conf:
Jun 04 11:16:41 test apachectl[20062]: JkWorkersFile only allowed once
Jun 04 11:16:41 test apachectl[20059]: Action 'start' failed.
Jun 04 11:16:41 test apachectl[20059]: The Apache error log may have more information.
Jun 04 11:16:41 test systemd[1]: apache2.service: Control process exited, code=exited, status=1/FAILURE
Jun 04 11:16:41 test systemd[1]: apache2.service: Failed with result 'exit-code'.
Jun 04 11:16:41 test systemd[1]: Failed to start The Apache HTTP Server.
```
 

2. 해결방안

```
vi /etc/apache2/mods-enabled/jk.conf

# /etc/apache2/mods-enabled/jk.conf 에서 주석처리
# JkWorkersFile /etc/libapache2-mod-jk/workers.properties
```



참조 : _[재미나게 사는법?: apache tomcat 연동 (mod_jk) (madpro84.blogspot.com)](http://madpro84.blogspot.com/2015/04/apache-tomcat-modjk.html)_
Bootstrap 5 Sidebar
Published: 2022-11-16 06:01:31

The [Bootstrap 5 Sidebar](https://bbbootstrap.com/snippets/bootstrap-5-sidebar-menu-toggle-button-34132202) is a new feature for Bootstrap 4 that provides a consistency in the way that sidebars are displayed. The sidebar is now more fluid, as it can be positioned at the top, bottom, or right-hand side of your website.

The Bootstrap sidebar is a space for your content that's right there when you need it. It's a place where you can display information and content without having to focus on it, and it's designed to help you create an attractive and responsive website.


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

You can use the sidebar anywhere on your site—whether it's in the header, footer, or anywhere else in between—and add any of the following elements:

-	Links: Use a tags to link directly to other pages or posts on your site.

-	Text: Use <h2> and <h3> tags for bold text, <p> tags for paragraphs of text, and so on.

-	Images: Add images from srcset attribute with sizes from medium up to xlxs . You can also use media queries to target different devices based on screen size or orientation.

This is a great way to add a sidebar to your website.

The sidebar is a great way to provide more information about yourself, your company or product, or just to break up the main content area of your site.

Bootstrap is a CSS framework that gives you the tools to create beautiful, responsive websites with ease. Here you can find [Bootstrap 5 sidebars](https://bbbootstrap.com/tags/sidebar-menu)
Visual Studio Code - Spring Boot, 2022-11-16
Tags: springboot, vscode, setting
Published: 2022-11-16 05:57:27

1. java : 최소 8, 11 이상(2022-09부터 17이상)
vscode

2. 설치해야 할 확장팩 : 
1) Java Extension Pack - Microsoft: https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-pack
2) Spring Boot Extension Pack - Pivotal: https://marketplace.visualstudio.com/items?itemName=Pivotal.vscode-boot-dev-pack
3) Lombok Annotations Support for VS Code :
https://marketplace.visualstudio.com/items?itemName=GabrielBB.vscode-lombok

3. 스프링 프로젝트 생성
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pu788oue8sor21sypt7t.PNG)
1) https://start.spring.io/
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zwnjy9d5ejez839xm11d.png)
2) vscode에서 만들기
F1 -> Spring Initializr 입력 -> 버전 선택 -> 언어 선택 -> 이름 결정 -> 원하는 포맷선택 -> java 버전선택 -> 추가할 의존성 선택
Next 13 - Journey so far
Tags: nextjs, webdev, beginners
Published: 2022-11-16 05:51:55

Many of the side things in Next 13 are still developing, and the docs are still being created. I wanted to stop our journey here for a while.

We had a great introduction to the new routing and layouts in Next 13.

## Journey so far

I'd like to share my experience with my vision of the new Next and how I experienced it.

And to be frankly honest, I'm super hyped. I love that they when for a close-to-native development.
And that we get more of island architecture.

This allows us to minimize the output to the client and make our components smaller and more individually responsible.

There are quite a few question marks as well on how certain things should work according to their best practices, and I hope we get some answers and guidance on those soon.

## Expectations

I'm keen to see some more intertwined actions via hooks.
For instance, data needs input from another component (filtering a list).

Or more guidance on mutating data via updates, for instance.

You can expect some more articles on that soon.

I also expect to keep seeing more and more optimizations on the front-end side.
We recently saw the font package being added, which is one great step forward.
It's very likely to see embeds or videos as one of the next ones.

## What would you like to see?

With that, I want to ask you what you would like to see covered or built into Next 13.

I would love to hear and discuss this with you all.

You can reach out on Twitter or if you received the newsletter by responding to that. ❤️

### 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)
How to Create an Accordion Using HTML CSS and JavaScript
Tags: html, css, javascript
Published: 2022-11-16 05:40:52

How to Create an Accordion Using HTML CSS and JavaScript

in this video tutorial, we will learn How to Create an Accordion Using HTML CSS, and JavaScript. Basically, It's a simple project that I've made with the help of HTML CSS and Also a little bit of JavaScript.

So, I'm going to share with you how you can use HTML, CSS, and JavaScript to make an accordion, It's a very helpful project that is used inside the website to display the question with answers.

There is a lot of websites using Accordion to display the questions and also answers, So, you can use it inside the project as well.

So, in this tutorial, you will learn step-by-step usage of HTML CSS and Also JavaScript to make an accordion. hope this tutorial is helpful and beneficial for you.

{% embed https://www.youtube.com/watch?v=7JbvEEICreg %}
Blockers & Editor
Tags: godot, gamedev
Published: 2022-11-16 05:35:22

Added the blocker ability and a simple level selector. There was a bunch of behind-the-scenes work to clean up my scenes/nodes and get things localized enough in each level so that different levels can load without all the old objects still hanging around.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0231a2uqvgjznuh4bden.gif)

Not pictured is the level designer/editor that started. Once it is done, I'll use this tool to generate the textures for each room, add 3d props and layout each building/level. Hopefully this makes it much easier to build lots of engaging levels quickly. The level designer will be pretty crude, built in HTML/PHP/JavaScript.. but that's all I'll need to get the job done, hopefully! Now that I'm thinking about the designer, I may also add a "student" designer to build the sprites for each school (level grouping) to keep things fresh  as the player advances through the game.
Role And Permission In Laravel 9 Tutorial
Tags: laravel, laravel9, role, permission
Published: 2022-11-16 05:30:00

In this article, we will see role and permission in the laravel 9 tutorial. here we will see the laravel 9 user role and permission. we are using spatie GitHub package for roles and permissions in the laravel 9 application. This package can be used with Laravel 6.0 or higher. Spatie role permission composer package provides a way to create ACL in laravel 9. Also, this package allows you to manage user permissions and roles in a database.

Check out the Official GitHub spatie/laravel-permission package.

So, let's see how to set user roles and permission in laravel 9.

Spatie Roles And Permissions In Laravel 9

```
Step 1: Install Laravel 9 For The User Role And Permission Tutorial

Step 2: Create Authentication Using Laravel 9

Step 3: Install spatie/laravel-permission Packages 

Step 4: Create Product Migration

Step 5: Create Models

Step 6: Add Middleware

Step 7: Create Routes

Step 8: Add Controllers

Step 9: Create Blade File

Step 10: Create Seeder For Permissions and AdminUser
```
AWS IAM - Identity Center(Antigo SSO)
Published: 2022-11-15 19:08:53

**Anotações sobre o AWS IAM Identity Center para ajudar na preparação das certificações AWS.**

Até o momento as anotações são para as certificações abaixo:

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

- [Link oficial](https://aws.amazon.com/pt/iam/identity-center/)
- [FAQ](https://aws.amazon.com/pt/iam/identity-center/faqs/)

---
##**Definição do fornecedor**
_O AWS IAM Identity Center (sucessor do AWS Single Sign-On) ajuda você a criar ou conectar com segurança as identidades da força de trabalho e gerenciar o acesso delas de maneira centralizada em contas e aplicações da AWS._

---

##**Anotações gerais**

- Login em múltiplas contas
- **Session duration padrão p/ AWS CLI - 1 hora**
- Pré Requisito ter o AWS Organizations habilitado
- Suporta soluções de terceiros - SAML 2.0 e SCIM 2.0
- Não veem habilitado por padrão
- Após a configuração são 40 a 50 min para sync dos usuários e grupos
- Pode ser automatizado por script (_https://github.com/aws-samples/aws-iam-identity-center-sync-script_)
- **Identity Source - Idendity Center Directory por padrão (_outras opções AD, External Idp_)**
- SAML p/ LDAP
---
##**AWS CLI no SSO##
[Documentação oficial](https://docs.aws.amazon.com/pt_br/cli/latest/userguide/cli-configure-sso.html)

- `aws sso login --profile xxxx`
- Arquivo de configuração - `~/.aws/config`

---
##**Termos chaves**

- **Federation**
- **Identity Broker** - Intermediário, conecta vários providers 
- **Identity Store** - Serviços como AD, Facebook, Google e etc.
- **Identities **- Usuários


---
##**Protocolo SCIM**

- Automação de sincronismo de identidades
- Protocolo SCIM - Não sincroniza Senha e MFA

---

##**Integrado com**

- AD On Premises
- AWS Organizations
- Business app - Dropbox, Slack, Office 365
- Custom App

---
##**Autenticação federada da AWS com serviços de federação do Active Directory (AD FS)**
[Documentação oficial](https://aws.amazon.com/pt/blogs/security/aws-federated-authentication-with-active-directory-federation-services-ad-fs/)

- ADFS Federation
- Configure Role
- Configure Active Directory Federation 


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


---

##**IAM Identity Center + Azure AD**
[Documentação oficial](https://docs.aws.amazon.com/pt_br/singlesignon/latest/userguide/azure-ad-idp.html)



---
##**Referências**

- [AWS Single Sign-On (AWS SSO) agora está no AWS IAM Identity Center](https://aws.amazon.com/pt/about-aws/whats-new/2022/07/aws-single-sign-on-aws-sso-now-aws-iam-identity-center/)
- [Tutorial: Integração do SSO do Azure AD ao AWS Single-Account Access](https://learn.microsoft.com/pt-br/azure/active-directory/saas-apps/amazon-web-service-tutorial)
- [AWS IAM Identity Center (Successor to AWS SSO) Overview Demo | Amazon Web Services](https://www.youtube.com/watch?v=4yJp5-jGGNk)
react & node.js & npm 설치, 2022-08-16
Tags: npm, react, node, setting
Published: 2022-11-16 05:27:23

1. 본인의 버전에 맞춰서 설치

```
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
```
 

```
sudo apt-get install -y nodejs
sudo apt install npm
```
 

```
node -v
npm -v
```
 

_참조 : https://i5i5.tistory.com/285_