teleren/devto huggingface dataset:
Web Developer Coding Challenge Platform
Tags: webdev, techtips, beginners, programming
Published: 2022-10-09 19:59:56

####   Original Tweet From  [@ajaysharma_dev](https://twitter.com/ajaysharma_dev)
{% embed https://twitter.com/ajaysharma_dev/status/1578596012133945345 %}


Thread🧵 ![Twitter Image 0](https://pbs.twimg.com/media/FehMtNwXoAIlxTT.jpg) 

1️⃣ Codewell✨

🔗 {% embed https://www.codewell.cc/ %}

2️⃣ CSSBattle✨

🔗 {% embed https://cssbattle.dev/ %} 

3️⃣ HackerRank✨

🔗 {% embed https://www.hackerrank.com/ %}

4️⃣ LeetCode✨

🔗 {% embed https://leetcode.com/ %} 

5️⃣ Codeforces✨

🔗 {% embed https://codeforces.com/ %}

6️⃣ Treehouse✨

🔗 [https://teamtreehouse.com/](https://teamtreehouse.com/)

7️⃣ CodePen Challenges✨

🔗 [https://codepen.io/challenges](https://codepen.io/challenges)

8️⃣ Coderbyte✨

🔗 {% embed https://coderbyte.com/ %} 

9️⃣ Frontend Mentor✨

🔗 {% embed https://www.frontendmentor.io/ %}

🔟 Javascript30✨

🔗  {% embed https://javascript30.com/ %}


If you enjoyed reading this thread, please do the following: 
1. Like the thread❤️
2. Retweet the first tweet.🔃
3. Follow me and enable notifications: ✅
[@ajaysharma_dev](https://twitter.com/ajaysharma_dev)
Thank you for reading all the way through. 



Click [Here](https://www.knowledge-twitter.com/?utm_source=dev.to)  For More Posts Like This [https://www.knowledge-twitter.com](https://www.knowledge-twitter.com/?utm_source=dev.to)
How To Install Flowbite Tailwind In React
Tags: tailwindcss, react, typescript, webdev
Published: 2022-10-09 19:51:52

In this section we will install & setup flowbite tailwind in react using vite tool. This tutorial will walk you through the installation and configuration process of Flowbite Tailwind in React. Flowbite contains a lot of components like Card, Button, Alerts and much more.

### Create React Project Using Vite 
Install react vite via npm:
```sh
npm create vite@latest
```
Select react.
```react
✔ Project name: … flowbite-react
? Select a framework: › - Use arrow-keys. Return to submit.
  vanilla
  vue
❯  react
  preact
  lit
  svelte
```
Next choose typescript.
```react
✔ Select a framework: › React
? Select a variant: › - Use arrow-keys. Return to submit.
  JavaScript
❯  TypeScript
```

Move to project and install & run npm:
```react
cd flowbite-react
npm install
npm run dev
```

### Install Tailwind CSS in React
```react
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

_tailwind.config.js or tailwind.config.cjs_
```react
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```
_index.css_
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
### Install Flowbite Tailwind CSS in React
To install Tailwind Flowbite in React, run the following command in your terminal:
```react
npm i flowbite flowbite-react
```

Next, you need to add it as a plugin inside your tailwind.config.js or tailwind.config.cjs file . The Process is easy: open your config file and add the line below:

_tailwind.config.js or tailwind.config.cjs_
```react
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    'node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}'
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('flowbite/plugin')
  ],
}
```
Test Flowbite React Components

_src/App.tsx_
```react
import { Card } from 'flowbite-react';
import React from 'react';

function App() {
  return (
    <div className="h-screen flex justify-center items-center flex-col">
      <h1 className="text-2xl font-bold text-blue-600 mb-8 border-b-4 border-purple-600">
        Install Vite + React + Flowbite
      </h1>
      <div className="max-w-sm">
        <Card imgSrc="https://flowbite.com/docs/images/blog/image-1.jpg">
          <h5 className="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
            Install & setup flowbite in react js
          </h5>
          <p className="font-normal text-gray-700 dark:text-gray-400">
            Here are the biggest enterprise technology acquisitions of 2021 so
            far, in reverse chronological order.
          </p>
        </Card>
      </div>
    </div>
  );
}

export default App;
```

![tailwind flowbite components card  in reactjs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/avhqbtcobwroq5or0fgm.png)
Vue3 Dynamic Refs
Tags: vue, javascript, beginners
Published: 2022-10-09 19:41:53

## Scenario
Imagine you have multiple clickable fields which have icons. You want to focus the input field no matter where you click in the parent element.

### Problem
Depending on where you click, the `$event.target` changes. This means that you either have to use a clever way to find the intended target or take an elegant approach.

## Vue2 Solution
The most elegant approach is to define a ref and access the ref corresponding to the element being clicked.

In Vue2 this would look like the following.

```vue
<template>
  <div @click="clickMe('f1')">
    <input ref="f1" />
    <Icon/>
  </div>
  <div @click="clickMe('f2')">
    <input ref="f2" />
    <Icon/>
  </div>
  <div @click="clickMe('f3')">
     <input ref="f3" />
     <Icon/>
  </div>
</template>

<script>
 export default {
   methods: {
     clickMe(refId) {
       var input = this.$refs[refId]
       input?.focus()
     }
   }
 }
</script>
```

---

## Vue3 Problem
If you are using Vue3 composition API, you'll notice achieving this behavior is not super obvious. 

Methods no longer have access to an object which holds all the refs defined in a component. So you may end up settling for a less elegant solution. However, you don't have to.

## Vue3 Solution
The solution is simple. Use an object where the property values are refs. Then you could update your template to something like the following.
```vue
<script setup>
import { ref } from 'vue';

const inputs = {
    f1: ref(),
    f2: ref(),
    f3: ref(),
}

function clickMe(refId) {
  var input = inputs[refId]?.value
  input?.focus()
}
</script>

<template>
  <div @click="clickMe('f1')">
    <input :ref="inputs.f1" />
    <Icon/>
  </div>
  <div @click="clickMe('f2')">
    <input :ref="inputs.f2" />
    <Icon/>
  </div>
  <div @click="clickMe('f3')">
     <input :ref="inputs.f3" />
     <Icon/>
  </div>
</template>
```

## Bonus: A Better Way to Define the Refs
Instead of writing ref over and over. You could write a method to define refs from an array. Since I'm using Lodash, I did something like this.

```js
function defineRefs(refs) {
  return _.chain(refs).keyBy().mapValues(ref).value();
}
```

Now I can rewrite my `inputs` definition like this:
```vue
<script setup>

import { defineRefs } from '@/helpers'

const inputs = defineRefs(['f1', 'f2', 'f3'])

//...
</script>
```

## Conclusion
Instead of using an event target to focus an element, you can use dynamic refs. Doing so allows you to reuse event handlers.
TA88
Published: 2022-10-09 19:37:46

TA88 - Thương hiệu lâu năm trong lĩnh vực Nhà cái. Thông tin người chơi được bảo mật an toàn 100%. Hỗ Trợ Khách hàng nhanh chóng cùng Kho Game Cá cược đa dạng từ Bóng Đá, Bắn Cá, Nổ hủ đến Baccarat, Xóc Dĩa, Esports...Ta88.blog là website chính thức của TA88 #ta88 #ta88blog #ta88dotblog

https://ta88.blog/
https://hub.docker.com/u/ta88blog

https://www.deviantart.com/ta88blog

https://profile.ameba.jp/ameba/ta88blog/

https://roundme.com/@ta88blog/about

https://wefunder.com/ta883

https://app.lookbook.nu/ta88blog

https://zoimas.com//profile/ta88blog/about

https://confengine.com/user/ta88blog

https://www.trainsim.com/vbts/member.php?584195-ta88blog

https://trello.com/w/ta882

https://ta88blog.livejournal.com/profile

https://weheartit.com/ta88blog

https://android.libhunt.com/u/ta88blog

https://forum.singaporeexpats.com/memberlist.php?mode=viewprofile&u=472962

https://artmight.com/user/profile/761893

https://angel.co/u/ta-88-2

https://www.indiegogo.com/individuals/30526978

https://www.kickstarter.com/profile/ta88blog/about

https://kustomcoachwerks.com/Forums/users/ta88blog/

https://jsfiddle.net/ta88blog/zctvLs64/

https://pastelink.net/0qzbat52

https://www.hebergementweb.org/members/ta88blog.310327/

https://www.gametabs.net/user/437533

https://www.question2answer.org/qa/user/ta88blog

https://www.veoh.com/users/ta88blog

https://forum.kryptronic.com/profile.php?section=essentials&id=192068

https://www.watchfaces.be/forums/users/ta88blog

https://www.couchsurfing.com/people/ta-88-1

https://www.1forexforum.com/members/ta88blog/

https://gifyu.com/ta88blog

https://writeablog.net/ta88blog/gioi-thieu-ta88

https://www.hackathon.io/ta88blog

https://www.noteflight.com/profile/5738376013062cf7c5bfc7b42a05dadcde272b41

https://timeswriter.com/members/ta88blog/profile/

https://dogforum.co.uk/members/ta88blog.114621/

https://www.techrum.vn/members/ta88blog.223924/#about

http://www.print3dforum.com/member.php/33786-ta88blog
Code with the power of Metal in Swift with AsyncGraphics
Tags: swift, metal, async, graphics
Published: 2022-10-09 19:37:21

[AsyncGraphics](https://github.com/heestand-xyz/AsyncGraphics) is a new Swift package I'm building for working with graphics in an async way. The core type is simply just called [`Graphic`](http://async.graphics/documentation/asyncgraphics/graphic) and it's like an image, tho backed by a `MTLTexture` and it comes with a lot of effects that can be applied.

The [documentation](http://async.graphics/documentation/AsyncGraphics) is made with DocC and contains articles about setting up a [live camera feed](http://async.graphics/documentation/asyncgraphics/livecamera) and [editing video](http://async.graphics/documentation/asyncgraphics/videoediting).

In AsyncGraphics you can create [gradients](http://async.graphics/documentation/asyncgraphics/graphic/gradient(direction:stops:position:scale:offset:extend:gamma:resolution:options:)), [noise](http://async.graphics/documentation/asyncgraphics/graphic/noise(offset:depth:scale:octaves:seed:resolution:options:)), and more content. Then you can [blend](http://async.graphics/documentation/asyncgraphics/graphic/blended(with:blendingmode:placement:options:)) with various [blending modes](http://async.graphics/documentation/asyncgraphics/blendingmode), make an graphic [monochrome](http://async.graphics/documentation/asyncgraphics/graphic/monochrome()), [blur](http://async.graphics/documentation/asyncgraphics/graphic/blurred(radius:)) a graphic and even [chroma key](http://async.graphics/documentation/asyncgraphics/graphic/chromakey(color:parameters:options:)) out a green screen.

There is also the option to write high level [metal](http://async.graphics/documentation/asyncgraphics/graphic/metal(code:resolution:options:)) code in AsyncGraphics. No need to setup a pipeline.

AsyncGraphics is a work in progress project and there is more features to come!
[Api marketplace_Appetizer] SNS Review Event🎉
Tags: api, marketplace, appetizer, apimarketplace
Published: 2022-10-09 19:23:55


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

🔽Watch our branding video on Youtube🔽
[https://youtu.be/nm_7cPwtY5w](https://youtu.be/nm_7cPwtY5w)
🔽Watch our branding video on Facebook🔽
[https://fb.watch/fXthPVF7cf/](https://fb.watch/fXthPVF7cf/)

Hello!
We are an API Marketplace hosted by the Ministry of SMEs and Startups, Korea Foundation for Cooperation of Large & Small Business, Rural Affairs, and organised by NAVER Cloud and Korea Software Industry Association to help amazing API companies in Korea who have SaaS API to march onwards into the Global market.

We have prepared an event in the hopes of reaching more people and inviting more users to the API Marketplace, 'Appetizer'!

Join us, won't you?

Duration : October 4th ~ October 14th

How to join
1. Go to one of the link above and hit the like button
2. Leave a comment that has 
   **‘your name + email address + one line review of our video’**
3. Subscribe to our channel
4. **Of the people who completed #2 & #3**, 3 will be picked at random and we will let you know via e-mail. (after the 3rd week of October)

People who are chosen will be given a prize valued at 100k Korean won.


We hope to see you there and we can't wait to deliver your prize!🤩

**※ Reminder : We only count the comments on Youtube and Facebook posts ※**


#APPETIZER_KOR #API #MARKETPLACE #APPETIZER #APIMARKETPLACE #NAVERCLOUD #KOSA
Melhores sites gratuitos para aprender programação
Tags: aprender, webdev, cursos, beginners
Published: 2022-10-09 19:14:59

Na internet você pode encontrar diversos cursos gratuitos, artigos e documentações disponíveis para serem consumidos a qualquer momento, sem pagar nada.

Todos os sites listados nesse artigo já foram usados por mim, por isso, garanto que possuem um bom método de ensino.

Se você quer **aprender a programar** mas não quer comprar nenhum curso, vou te apresentar **3 sites para aprender a programar de graça**.

## Curso em Vídeo

O [Curso em Vídeo](https://cursoemvideo.com) com certeza é o site que a maioria dos programadores conhece. Foi lá onde milhares de desenvolvedores tiveram seu primeiro contato com programação, justamente por ser explicado de forma simples e direta.

Aqui estão algumas características do **Curso em Vídeo**:

- Diversos cursos de linguagens, banco de dados e outros;
- Curso organizado em módulos e vídeos de alta qualidade;
- Teste de conhecimento no final do curso;
- Certificado de conclusão pago.

## Digital Innovation One

Diferente do **Curso em Vídeo**, a [DIO (Digital Innovation One)](https://dio.me) apresenta um leque maior de cursos, não focando apenas em linguagens, mas também oferecendo cursos de frameworks, cloud, design e outros. Uma grande vantagem dessa plataforma é que ela oferece diversos **Bootcamps** gratuitos para seus usuários.

As principais características da DIO são:

- Certificado de conclusão gratuito;
- Teste de conhecimento no final do curso;
- Maior número de cursos;
- Bootcamps gratuitos.

## Fundação Bradesco (Escola Virtual)

A [Fundação Bradesco](https://www.ev.org.br) é uma escola virtual que apresenta diversos cursos, _não apenas focados em tecnologia_, mas possui uma **grande variedade** de cursos sobre esse assunto. 

Algumas características da **Fundação Bradesco** são:

- Cursos básicos, direcionados a iniciantes;
- Teste de conhecimento no final do curso;
- Certificado de conclusão gratuito;
- Cursos disponíveis apenas em formato de texto.

## Conclusão

Estudando nestes sites, você com certeza conseguirá uma boa base de linguagens, frameworks, banco de dados ou qualquer outra tecnologia, sendo necessário apenas **esforço e dedicação**.

Te vejo no próximo artigo, dev! 🖖👾
Mastering React useRef: Advanced Techniques and Practical Demo
Tags: react, tutorial, webdev, javascript
Published: 2022-10-09 18:50:36

## Overview
I noticed many people enjoy testing their typing speed, so I decided to create a fun side project inspired by monkeytype.com. After a few days of work, I’m excited to introduce 'kindaTyping' (thanks to my younger brother for the name). This app builds on monkeytype.com with some cool new features.

## Technologies Used
ReactJS for the framework
TailwindCSS for styling

## What's New?
In kindaTyping, you must type each word correctly before moving on. This feature helps you practice tricky words more effectively.

##What's Next?
The project is still in beta. If you'd like to contribute, just DM me on Twitter. [twitter](https://twitter.com/Derickzihalirw5)

**monkeytype**
![monkeytype](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/33m3apu4h1u0ddykln8x.png)
**kindatyping**
![kindatyping](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9wbu2izta59vtwhnt2x2.png)

## Demo
feel free to test the live demo here [demo](https://kindatyping.vercel.app/)

Leave your feedback in the comments or reach out to me on [twitter](https://twitter.com/Derickzihalirw5)

happy coding 👋
Go to framework in 2022 remix.run
Tags: remix, react, javascript, html
Published: 2022-10-09 18:03:33

My Go to framework to build websites in 2022 https://remix.run/

People are gonna love using your stuff.

100% performance score. works without javascript

Features:
1. Nested Routes
2. loads data in parallel on the server and sends a fully formed HTML document
3. Route Error Boundaries keep the happy path happy.
4. actions + loader (Super cool 👏🏻)


![pagespeed insights](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/la47wmt79rc84z3ho8hz.png)
Anything You Want - Notes and Summary
Tags: productivity, books, startup
Published: 2022-10-09 17:34:43

## What is a business

- A world where you control all the laws. So do you, don't just accept what other people do in there business and copy.
- If people react positively to the idea go ahead otherwise don't pursue it. You'll be fighting an uphill battle.
- Every decision should be based on what is best for the customers. Ask your customers and they'll let you know what’s the best course of action.
- Start small, don't worry about being big. It is not worth it anyway. Enjoy the process and put in your 100%.

## Ideas, Execution, and Expansion

![Idea and Execution](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p9gt57pe2zxpe3bm5kbn.png)

- Ideas are just multipliers to execution
- It is better to have multiple small customers than have big sharks tailoring your company according to their needs. Don't try to get big customers. Don't let the client be your boss, it is your business after all.
- Plan and plan for everything.
    - “OK, make a plan that requires only $1,000. Go!”
    - “Now make a plan for ten times as many customers. Go!”
    - “Now do it without a website. Go!”
    - “Now make all your initial assumptions wrong, and have it work anyway. Go!”
    - “Now show how you would franchise it. Go!”

You can’t pretend there’s only one way to do it. Your first idea is just one of many options. No business goes as planned, so make ten radically different plans. Same thing with your current path in life: 

- Now you’re living in New York City, obsessed with success. Go!
- Now you’re a free spirit, backpacking around Thailand. Go!
- Now you’re a confident extrovert and everyone loves you. Go!
- Now you’re married and your kids are your life. Go!
- Now you spend a few years in relative seclusion, reading and walking. Go!

## Delegate but don't abdicate

- Trust, but verify
ANNOUNCEMENT - Joomla! 4.x Web Services Api Code Examples Solving Common Scenarios
Tags: blog
Published: 2022-11-12 18:19:15

---
title: ANNOUNCEMENT - Joomla! 4.x Web Services Api Code Examples Solving Common Scenarios
published: true
date: 2022-10-09 17:23:45 UTC
tags: Blog
canonical_url: https://alexandree.io/blog-joomla-specialist/j4x-api-examples
---

For ready-to-use, commented, short Joomla! Web Services Api code solving common use cases, here is [the repo](https://github.com/alexandreelise/j4x-api-examples "Joomla! 4.x Web Services Api Code Examples Common Scenarios"):  
  

If you are a Joomla! developer or want to become a Joomla! developer there is a new resource for you [The Official New Joomla! Manual](https://github.com/joomla/Manual.git)

If you are eager to learn more about Joomla! Web Services and want to play around with them using ready to use short examples, sample code and experiments [this repo](https://github.com/alexandreelise/j4x-api-examples "Joomla! 4.x Web Services Api Code Examples Common Scenarios") is for you. The examples are intentionally short with comments and for common scenarios and use cases. So even a non-developer could follow along.

If this code is useful to you, spread the Joomla! love and give it a star on GitHub: [Star](https://github.com/alexandreelise/j4x-api-examples)
Débuter avec Angular 14: #7 Les composants: comment les pimper
Tags: angular, typescript, javascript, frontend
Published: 2022-10-09 16:40:09

---
title: Débuter avec Angular 14: #7 Les composants: comment les pimper
published: true
description: C'est cool de créer des composants mais s'ils affichent tout le temps la meme chose, on est d'accords qu'ils seront ennuyeux à mourir
tags: angular, typescript, javascript, frontend
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

C'est cool de créer des composants mais s'ils affichent tout le temps la meme chose, on est d'accords qu'ils seront ennuyeux à mourir

## Les props a.k.a @Input()
C'est un terme qui n'est pas lié à Angular mais qu'on entend plus souvent chez des frameworks comme React, Vue, Svelte (enfin presque tous les frameworks appellent ca comme ca)

En Angular, on les app.

Les props permettent tout commes les parametres d'une fonction, d'injecter des variables qui pouront ensuite etre utilisés pour calculer par exemple (dans le cadre d'une fonction) et plus encore (afficher, dans le cadre d'une composant)


Pour permettre au composant `DishCard` d'afficher un nom de plat par exemple

```ts
// dish-card.component.ts
import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-dish-card',
  templateUrl: './dish-card.component.html',
  styleUrls: ['./dish-card.component.css'],
})
export class DishCardComponent implements OnInit {
  @Input() name: string = '';

  constructor() {}

  ngOnInit(): void {}
}
``` 

```html
<!-- app.component.html -->
<app-dish-card name="hey"></app-dish-card>
```
What happens when you type google.com and press Enter?
Tags: webdev, devops, programming
Published: 2022-10-09 16:39:53

As developers we all work with the web at different layers of the stack, but we rarely ever think about what actually happens when a user types in a URL in their browser and presses enter. There is so much that is abstracted away during web development, which is great, but I was interested in what goes on behind the scenes. So today, I'll be sharing with you a very simplified process of how a request cycle may works.

The first thing that happens after a user types in a *URL* and presses enter, is the browser tries to translate the *URL* into an *IP* address. The thing is, web servers communicate using IP addresses instead of strings, so instead of "google.com", the browser and server communicate with an IP address like "192.168.8.108". 

## But how does the browser translate URLS to IP addresses
It first asks the OS if it knows the current host, this is what happens when you type in localhost:3000 for your react project for example. The browser asks the OS if it knows the host "localhost" which the OS replies with the URL, 127.0.0.1. You can add more hosts on your machine by editing /etc/hosts file. But if the OS and the browser cache don't contain the the IP address for that URL, the browser asks the resolver(usually your ISP) for that DNS entry and then translates the URL into an IP address.

## What happens after you found the IP address for the server?
Well, now the browser sends an HTTP GET request to the previously found IP address. Then since google has enormous amount of traffic, they obviously don't just have a single server, they have a huge amount servers all around the world. So when we send a GET request to the IP address we get, the load balancer finds a server with the least amount of load through its algorithm to send the request to a server.

## Well the server received the request, now what?
Well once the server receives a request, the web server(the application that runs on a physical server and accepts the request) is normally configured to do a specific action when a request is sent to a route. In our scenario, the web server might just return an index html page where we normally type our search query. But in another case, the web server might query the database and send us that data or a million other things you might think of as a developer.

## Conclusion
Well, that was my very simplified explanation of how a web request works. Hopefully you didn't find my explanation to be incredibly stupid:) Have a good one!