teleren/devto huggingface dataset:
Velo by Wix: Download your Velo code files to your computer
Tags: velo, wix, javascript
Published: 2022-07-10 15:48:35

_Chrome extensions for downloading Velo code directly from the web editor to your computer._

Here is a Chrome Browser extension that provides a way to download Velo files from the web editor. You can install it in Chrome Web Store:

**[Add to Chrome](https://chrome.google.com/webstore/detail/velo-filesystem/gjmdfafehkeddjhielckakekclainbpn)**

After installing, you should open the Wix editor and turn on dev mode. The extension asks you to pick a folder that the extension could use for saving files.

**Download Velo code**

<video controls="" height="1080" preload="metadata" src="https://d33wubrfki0l68.cloudfront.net/0895db99fa340e0f8d2cb16e93fbb14e8e223fd4/b972d/assets/videos/chrome-extension-example.mp4" type="video/mp4" width="1728"></video>

This extension use [File System Access API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API).

## Posts
- [Type safety your code with JSDoc](https://shoonia.site/type-safety-your-code-with-jsdoc/)
- [Repeated item event handlers v2.0](https://shoonia.site/repeated-item-event-handlers-v2/)
- [Query selector for child elements](https://shoonia.site/velo-query-selector-for-child-elements/)
- [Promise Queue](https://shoonia.site/promise-queue/)
Laravel : Query Comma Separated Column using Eloquent and MySQL find_in_set
Tags: laravel, mysql, eloquent, database
Published: 2022-07-10 15:38:17

# Laravel : Query Comma Separated Column using Eloquent and MySQL find_in_set

## Introduction

It is not uncommon to store comma separated values in a mysql column in a Laravel Project

```
colours : "red,blue,green,yellow,black,white"

users : "77,4,5,688,5454,342,32,332"

tags : "mysql,laravel,css,html"
```

## Querying the Column

MySQL Function [FIND_IN_SET()](https://www.w3schools.com/sql/func_mysql_find_in_set.asp) can be used to query
```php
$search;
ModelName::whereRaw("FIND_IN_SET($search,colours)");

ModelName::whereRaw("FIND_IN_SET($search,users)");

ModelName::whereRaw("FIND_IN_SET($search,tags)");
```

## Querying the Column - With Protection against SQL Injection
```php
$search;
ModelName::whereRaw("FIND_IN_SET(?,colours)",[$search]);

ModelName::whereRaw("FIND_IN_SET(?,users)",[$search]);

ModelName::whereRaw("FIND_IN_SET(?,tags)",[$search]);
```


## As Scopes in the Model
```php
    class ModelName extends Model{
    
    
        public function scopeContainsTag($query,$tag){
            return $query->whereRaw("FIND_IN_SET(?,tags)",[$tag]);
        } 
    }
```

You can call the scope while querying the model from a controller

```php
    public function index(Request $request){
        ModelName::containsTag($request->tag_name)->get();
    }
```

## Note
There are other ways of storing data in a column other than using comma separated,
Read Laravel Documentation [Array & JSON Casting](https://laravel.com/docs/9.x/eloquent-mutators#array-and-json-casting)
Express devs and WHATWG editors have very different ideas about accessing headers.
Tags: javascript, node
Published: 2022-07-10 15:34:00

I did what I thought would be an easy project. Oh, how wrong I was.

I had an ERN (Express/React/Node) app that simply printed the HTTP headers that your browser sent to my server. I thought it would be a simple matter to also show the HTTP headers that your browser _received_ from my server. It turns out that this list of headers is a very different data structure.

To access the headers on an express server, just use _req.headers_. It's a simple object with the expected keys and values.

The Fetch API allows your browser to access HTTP headers via _response.headers_. For example, you could run `fetch('http://example.com/').then(response=>console.log(response.headers))`. The problem is that the Fetch API returns an [iterable](https://javascript.info/iterable) which is very different from Express's simple object.

To render the iterable, I have to use `let headersARR=[];
for (let header of [...response.headers.entries()]) {
            headersArr.push(header);
          }`.

I'm sure that the Express folks and the WHATWG folks have their reasons for handling HTTP headers differently. It just makes things more difficult for us mere developers.

Anyways, you can try my demo at [sean.brunnock.com](https://sean.brunnock.com/PERN/HTTPheaders/) and view the source to see the nuts and bolts and you can visit https://developer.mozilla.org/en-US/docs/Web/API/Headers for lots more info about accessing headers with fetch.
Loop Types in JavaScript
Tags: loop, javascript
Published: 2022-07-10 15:25:25

## In this blog I'll go through different ways of looping in JavaScript with examples:

- while
- forEach
- map
- do while
- for in
- for of
- for

**while Loop**
```
const developers = ['Injamul', 'Saurav', 'Tarek', 'Saiful'];

let developer = 0;

while (developer < developers.length) {
    console.log(developers[developer]);
    developer++;
}

/* Output: 
Injamul
Saurav
Tarek
Saiful
*/  
```

**forEach Loop**
```
const developers = ['Injamul', 'Saurav', 'Tarek', 'Saiful'];

developers.forEach (developer =>{
    console.log(developer);
})

/* Output: 
Injamul
Saurav
Tarek
Saiful
*/  
```

**map Loop**
```
const developers = ['Injamul', 'Saurav', 'Tarek', 'Saiful'];

developers.map (developer =>{
    console.log(developer);
    return developer;
})

/* Output: 
Injamul
Saurav
Tarek
Saiful
*/  
```

**do while Loop**
```
const developers = ['Injamul', 'Saurav', 'Tarek', 'Saiful'];

let developer = 0
do {
    console.log(developers[developer]);
    developer++;
    }

while(developer < developers.length)

/* Output: 
Injamul
Saurav
Tarek
Saiful
*/  
```

**for of Loop**
```
const developers = ['Injamul', 'Saurav', 'Tarek', 'Saiful'];

for (const developer of developers){
    console.log(developer);
    }

/* Output: 
Injamul
Saurav
Tarek
Saiful
*/  
```

**for in Loop** 
```
const developers = {
    1 : 'Injamul', 
    2 : 'Saurav', 
    3 : 'Tarek', 
    4 : 'Saiful'
};

for (const key in developers) {
    console.log(developers[key]);
}

/* Output: 
Injamul
Saurav
Tarek
Saiful
*/  
```

**for Loop**
```
const developers = ['Injamul', 'Saurav', 'Tarek', 'Saiful'];

for (let developer = 0; developer < developers.length; developer++){
    console.log(developers[developer]);
    }

/* Output: 
Injamul
Saurav
Tarek
Saiful
*/  
```
GetStarted New Agian
Tags: html, react, css, github
Published: 2022-07-10 15:03:18


ฉันยังคงสับสนวุ่นวาย 
กับโปรเจ็คแรกของฉันที่ชื่อว่า 

 

## Line Liff

> ก้าวเดินต่อไป
**

## เริ่มกันเลยยย [Liff](https://github.com/line/line-liff-starter)
**
Updated my portfolio
Tags: portfolio, beginners, programming, discuss
Published: 2022-07-10 14:59:41

Yes here i go again. sometimes i dont feel like the new one so i changed it.

![mrepol742.github.io](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyoy823srda3gpecs1ru.png)
 
This update includes performance improvements. So now i removed dns-prefetching and updates some images reducing the list of 3rd party domains. 

I also updated the service workers to make it simple this service worker will cache the site files assets folder which has the bootstraps jquery etc... Thought it won't gonna catch other files like html, js or css files since they usually changed daily or so..

{% embed https://gist.github.com/mrepol742/509d008b4d4a6c2b54f13a9d19ac99b1.js %}

The event.request.destination === image checks if the request file is an image or event.request.url.includes("/assets/") checks if the requested file is located inside the assets folder and event.request.url.includes("https://mrepol742.github.io/") then cache else load over the network. 

This system saves traffic and makes the site loads faster.
Running a service worker is simple as control + c.
{% embed https://gist.github.com/mrepol742/4c480685f146cf42fa381f97d0543f6d.js %}

Asside from it i also updated titles, images etc.. 
If you have time you can check it out at https://mrepol742.github.io/
and also Its Open Source https://github.com/mrepol742/mrepol742.github.io/
The surpising behaviour of Rails' default_scope method
Tags: rails, activerecord
Published: 2022-07-10 14:45:06

---
title: The surpising behaviour of Rails' default_scope method
published: true
description: How default_scope overrides the default value defiend in the migration
tags: rails, activerecord
//cover_image: https://direct_url_to_image.jpg
---

It is very convinient to declare `default_scope` in the Rails models. Specially for something like `deleted_at`. But it has an interesting side effect that has to be kept in mind.

Let's take an example model `Book`with an attribute `approved`.

This is how the column is defined in the migration:
```ruby
t.boolean :approved, null: false, default: false
```

This is how the `default_scope` method is declared in the model:
```ruby
class Book
  default_scope -> { where(approved: true) }
end
```

Whenever a new record is created, the `approved` is going to be `true` for the record even though the migration has the `default` value set as `false`. Let's see it in action:

```ruby
book = Book.new
book.approved # true
```

To conclude, the `default_scope` overrides the default value set at the migration level. That has to be kept in mind while declaring `default_scope` in a model.
Top 10 Celebrities Who Code
Tags: jokes, webdev, programming, discuss
Published: 2022-07-10 14:40:54

Trust me if you want, but here are the ten most famous celebrities who also has a career as developers.

1. **Mr. JavaBean** _(Java developer)_
1. **Brad Git** _(GitOps expert)_
1. **Nathalie Postman** _(Backend developer)_
1. **Matt Daemon** _(OS programmer)_
1. **Kanye Jest** _(Unit tester)_
1. **Taylor Swift** _(iOS developer)_
1. **Json Mraz** _(Fullstack developer)_
1. **Vim Diesel** _(Unix developer)_
1. **Jay-C** _(C developer)_
1. **Miley Cypress** _(E2E tester)_

![Kanye West and Taylor Swift developer meme](https://www.perssondennis.com/images/articles/top-10-celebrities-who-code/top-10-celebrities-who-code-meme.webp)
_Kanye Jest ain't testing Swift code_

Make sure to leave a comment if you can think of another brilliant developer celebrity! Can we reach a top 30 list maybe?

&nbsp;

{% embed https://dev.to/perssondennis %}
Tech Industry is Deep. Find Your Path and Stick With It.
Published: 2022-07-10 14:05:39

This tech industry is so deep. Simply find your path and stick around with it.

You'll be shocked at how much you've grown when you reflect on your progress over the next 12 months.

Hey, let's get to hear about your journey.

if you've just begun your tech journey, tell me, how has it been so far?

To the experienced techies, what advice would you give to anyone just starting in tech?
Mass-Site-Visitor-MSV-(CRACK)
Tags: webdev, programming, javascript, tutorial
Published: 2022-07-10 13:58:59


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uf4pre6e3m850zv8zd79.png)
Mass Site Visitor (MSV) is designed to generate a large amount of traffic to websites of your choice through a list of proxy servers in multithreaded mode. It starts automatic browser sessions in the background on your PC and routes their traffic through a proxy. MSV allows you to customize the behavior of visitors from a simple page visit to complex conditional clicks on any elements of your web page.
My [GitHub](https://github.com/TikTokNinja/Mass-Site-Visitor-MSV-)
Imersão Java Alura abre 30 mil vagas para curso de Java gratuito e online.
Tags: cursogratuito, treinamento, alura, cursosgratuitos
Published: 2022-07-10 14:17:54

---
title: Imersão Java Alura abre 30 mil vagas para curso de Java gratuito e online.
published: true
date: 2022-07-10 13:53:59 UTC
tags: CursoGratuito,Treinamento,Alura,CursosGratuitos
canonical_url: 
---
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nlmls6m3qlhm7xflbydj.png)

A Imersão Java foi feita para você levar seu portfólio para o próximo nível. Em 5 dias você irá desenvolver um projeto do zero em uma das linguagens mais populares do mundo da programação.

As aulas acontecem entre 18 e 23 de julho e são voltadas para pessoas em nível iniciante. Os alunos aprenderão a construir do zero seu primeiro projeto em Java, adicioná-los em seu portfólio e aprimorar o currículo.

Logo na primeira aula você vai construir uma aplicação do zero, consumindo uma API. Você já vai ter seu primeiro projeto para mostrar ao mundo. Em cada aula será realizado novos desafios para te ajudar a explorar as possibilidades do Java e mergulhar mais fundo na linguagem. Você construirá um projeto incrível e completo para adicionar em seu portfólio. Conheça devs assim como você! Tenha um apoio incrível da comunidade e dos instrutores e instrutoras através do nosso canal exclusivo no Discord.

Esta Imersão foi feita para quem tem pouco ou nenhum conhecimento em Java e deseja dar o primeiro passo na carreira.

![](https://guiadeti.com.br/wp-content/uploads/2022/07/imersaojavaalura-guiadeti.png)

## Programação em Java

A programação em Java é uma das mais requisitadas hoje pelo mercado de tecnologia. Basta uma rápida procura nos sites de emprego para encontrar diversas ofertas em todos os  **níveis**  de conhecimento, ou seja, de júnior ao sênior.

O curso da Alura é uma imersão em Java. Isso quer dizer que se você quer entrar para a tecnologia, mas tem medo de não entender nada sobre programação, esse primeiro contato fará toda a diferença.

## O que você vai aprender?

- Descobrir como iniciar sua carreira em Java.
- Construir uma aplicação do zero em Java.
- Entender como melhorar o código para torná-lo mais flexível e fácil de entender.
- Utilizar banco de dados NoSQL.
- Tornar sua aplicação acessível por qualquer pessoa.
- Finalizar um projeto completo para utilizar no portfólio.

## Inscrições até 17/07

**Saiba mais:** [https://www.alura.com.br/imersao-java?version=java2](https://www.alura.com.br/imersao-java?version=java2)

O post [Imersão Java Alura abre 30 mil vagas para curso de Java gratuito e online.](https://guiadeti.com.br/imersao-java-alura-abre-30-mil-vagas-para-curso-de-java-gratuito-e-online/) apareceu primeiro em [Guia de TI](https://guiadeti.com.br).
TypeScript Library
Tags: programming, javascript, typescript
Published: 2022-07-10 13:46:08

I am creating a type script library to be post to the npm repository. So, I am testing its functionally with link to the test project. I am getting an error "ReferenceError: Export is not defined". 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1orj1actv94rjwaartnj.png)
Create a table with multiple features in few minutes
Tags: vue, webdev, productivity, opensource
Published: 2022-07-10 13:24:05

By using `vue3-easy-data-table`, you can create a table with multiple features includes [sorting](https://hc200ok.github.io/vue3-easy-data-table-doc/features/single-field-sorting.html), [paginating](https://hc200ok.github.io/vue3-easy-data-table-doc/features/buttons-pagination.html) and [fixed columns](https://hc200ok.github.io/vue3-easy-data-table-doc/features/fixed-column.html) in few minutes.

### Step 1
Import `vue3-easy-data-table` and `Vue.js 3.x` on CDN via script tags:
```html
<link href="https://unpkg.com/vue3-easy-data-table/dist/style.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.1/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue3-easy-data-table"></script>
```


### Step 2
Use `vue3-easy-data-table`!
Make left side fixed columns by setting `fixed` property to `true` in header items.
Set sortable property `true` in header items to make the corresponding columns sortable.

```html
<div id="app">
  <easy-data-table
    :headers="headers"
    :items="items"
  />
</div>
<script>
  const App = {
    components: {
      EasyDataTable: window['vue3-easy-data-table'],
    },
    data () {
      return {
        headers:[
          { text: "PLAYER", value: "player", fixed: true, width: 200},
          { text: "TEAM", value: "team"},
          { text: "NUMBER", value: "number"},
          { text: "POSITION", value: "position"},
          { text: "HEIGHT", value: "indicator.height"},
          { text: "WEIGHT (lbs)", value: "indicator.weight", sortable: true},
          { text: "LAST ATTENDED", value: "lastAttended", width: 200},
          { text: "COUNTRY", value: "country"},
        ],
        items: [
          { player: "Stephen Curry", team: "GSW", number: 30, position: 'G', indicator: {"height": '6-2', "weight": 185}, lastAttended: "Davidson", country: "USA"},
          { player: "Lebron James", team: "LAL", number: 6, position: 'F', indicator: {"height": '6-9', "weight": 250}, lastAttended: "St. Vincent-St. Mary HS (OH)", country: "USA"},
          { player: "Kevin Durant", team: "BKN", number: 7, position: 'F', indicator: {"height": '6-10', "weight": 240}, lastAttended: "Texas-Austin", country: "USA"},
          { player: "Giannis Antetokounmpo", team: "MIL", number: 34, position: 'F', indicator: {"height": '6-11', "weight": 242}, lastAttended: "Filathlitikos", country: "Greece"},
        ],
      }
    },
  };
  Vue.createApp(App).mount('#app');
</script>
```

### Done!

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


### Demo
[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/via-cdn-d52z48?file=/index.html)


### Document
For more information of `vue3-easy-data-table`, please check the document here: https://hc200ok.github.io/vue3-easy-data-table-doc/
TOP 5 Database for your flutter app!
Tags: flutter, programming, beginners, dart
Published: 2022-07-10 13:17:12

Data is the critical aspect of any online application.💯
.
.
.
To make the Flutter app work efficiently and flawlessly in real-time, it’s important to have a robust Database that can handle millions of records and frequent data updates.
.
.
Flutter has a variety of database management solutions but choosing the right database for your Flutter application completely depends on your app requirements.🤔

If you are looking for some database option to use in your Flutter application, then you have landed on the right post.😃

Here we will cover all the aspects of Flutter database selection, right from the introduction, and database types to the currently available options.✌️

So without wasting further time, let’s get started!👇👇👇

## **1. FIREBASE:**
It is a BaaS app development platform that provides a cloud-hosted backend service such as a real time DB, cloud storage, authentication, crash Reports, machine learning, and remote configurations.

**👉 When to USE?**
It is the best option if you intended to share the data with customers across the world, For apps with limited sorting and filtering requirements, Firebase is the best fit as Firestore can process only 1 million concurrent connection.
.
.
.
## **2. MongoDB:**
MongoDB is the NoSQL schema-less, JSON document database that uses unstructured query language. It is built on the scale-out architecture that allows developers to build business apps faster.

**👉 When to USE?**
MongoDB offers horizontal scalability, so it is best when your business is related to e-Commerce, mobile social networking, and building content management systems.
.
.
.
.
## **3. HIVE:**
HIVE is a super-fast, lightweight, key-value DB written in pure Dart. It is completely native to Dart. It lets you store data as a HiveObject which allows relation between objects.

**👉 When to USE?**
If you are going to use a simple database and don't
want real-time data synchronization and If you want something that works anywhere, Hive integrates easily with Dart. It is best suited for FLUTTER projects that require data storage on the devices and then access it anywhere.
.
.
.
.
## **4. SQFLITE:**
SQfLite is an implementation of SQLite for FLUTTER. It gives you complete control over your app database, queries, and relationships in your hands.

**👉 When to USE?**
Use SQfLite if you need a relational database with full control over the database queries. It is the best option only if you are comfortable writing your own queries and code.
.
.
.

## **5. OBJECTBOX:**
ObjectBox is a superfast, high-performance No-SQL DB with integrated data Sync for decentralized Edge Computing. It provides scalability, Static type checking, and multiplatform support.

**👉 When to USE?**
It is best if you want higher performance in the terms of response time & to want to improve data flow and want to deliver apps faster to the market while reducing the app development cost.
JS Journey
Tags: javascript, programming, webdev
Published: 2022-07-10 13:02:45

I first heard of JavaScript long time ago, but I was not interested till the day I fell in love with programming. It is not long ago since I started learning JavaScript. 
these past days I have learnt a lot in JavaScript, I learnt about  OOP, constructors class and everything, some data structures and also I got introduced to Node and Express framework. I am looking forward to work hard and start to produce something important. 
Plus, create some tutorials instead of watching them.
Contest: Share a Good Plan
Tags: contest, ideas, experiment, create
Published: 2022-07-10 12:43:00

## July Twigflo Creative Challenge

The founders of [Twigflo](https://twigflo.com) are offering a $25 Amazon Gift Certificate to the winner of the best mission diagram shared here in this thread. **Participation is free.**

### How to Enter

Log into [Twigflo](https://twigflo.com) and create a mission diagram which you feel does the following:

- Your mission diagram explains something you feel is important or useful
- You mark the access scope of your diagram as "Public" and paste the URL into a reply of this post. (Marking it public enables other people, including the judges, to view your diagram.)
- Your reply here includes the URL to your shared diagram and an explanation of how you think it may be helpful to someone or how you yourself find it helpful for your needs.

One entry per reply. No more than five entries per person.

### Winner Selection

Replies to this thread must be dated no later than July 31 2022. Winner will be announced in this thread on August 5th 2022.

The [Twigflo](https://twigflo.com) founders will look for the mission diagram that they feel most effectively communicates an important insight that could also help others. Their decision will be final.

## Example Missions

These examples are dry. You can do better! (We are sure of it.)

- [One way to earn an AWS Certification](https://app.twigflo.com/app/mission/6297e55d14fe9f0019b16500)
- [One opinion on healthy habit building](https://app.twigflo.com/app/mission/6297e71b5922c5001bad95d2)
- [Generic partial product roadmap](https://app.twigflo.com/app/mission/6297dadbd3f84500198409c7)
How to start your Cloud Engineering Journey on AWS. 🤖🤖
Tags: aws, cloud, career
Published: 2022-07-10 11:34:00

Cloud engineers 🧑‍💻 have been solving real life problems globally 🌐. This development has led to the increase in high demand for professionals with cloud experience 🧑‍💻. 

So, if you have a desire or you're keenly interested to venture into this particular field or it's your career of interest. Click the below links to start your self paced Digital learning. 

There are no specific timeframe to complete the modules. You can learn and develop your skills # 📝 at your own most preferred time ⏱️.

Here are recommendations:

1. Introduction to Cloud Computing 101 👇
 https://aws.amazon.com/education/awseducate/

2. Cloud Practitioner Essentials.👇
https://explore.skillbuilder.aws/learn/course/external/view/elearning/134/aws-cloud-practitioner-essentials

3. Cloud Quest for Gamers 🎮 👇
https://explore.skillbuilder.aws/learn/course/external/view/elearning/11458/aws-cloud-quest-cloud-practitioner

4. As soon as you have completed the above modules 🎓 . you can now proceed to take this 30minutes course on "job roles in the cloud" 💼 👇
https://explore.skillbuilder.aws/learn/course/external/view/elearning/156/job-roles-in-the-cloud

5. Cloud game development learning plan. 👇

https://go.aws/3WWRmmc


Bonus: For Hands on project. 👇

- https://developers.aws

- https://workshops.aws

- https://skillbuilder.aws

- https://community.aws

- https://studiolab.sagemaker.aws

 Best Wishes on your journey!