teleren/devto huggingface dataset:
Rails "Concerns"
Published: 2023-02-12 15:58:06

Rails Concerns: An Effective Solution to Code Reusability in Ruby on Rails

Ruby on Rails is a popular web framework that has been widely used to build various types of web applications. One of its core principles I really appreciate working with ROR is DRY (Don't Repeat Yourself) which encourages developers to write code in a way that is modular and reusable. A Rails concern is a design pattern that helps developers achieve this goal. In this article, we will discuss what Rails concerns are, how to use them, and why they are an effective solution to code reusability.

What are Rails Concerns?

A Rails concern is a module that contains methods and behaviors that are common to several controllers, models or views. These methods and behaviors can be reused across different parts of your application, reducing the amount of code you need to write and making it easier to maintain.

How to Use Rails Concerns?

To create a Rails concern, you need to create a new module in the "app/concerns" directory and include it in the controller, model or view where it will be used. For example, let's say you have a user authentication system in your application and you want to reuse the code in multiple controllers. You can create a new module called "Authentication" and put the authentication code in this module. Then, you can include this module in all the controllers where you want to use the authentication code.

module Authentication
extend ActiveSupport::Concern

included do
before_action :authenticate_user!
end

def authenticate_user!
## Authentication logic
end
end

class ApplicationController < ActionController::Base
include Authentication
end

In this example, the "Authentication" module is included in the ApplicationController, and the "authenticate_user!" method will be called before every action in the ApplicationController.

Why use Rails Concerns?

Code Reusability: Rails concerns allow developers to reuse code across multiple parts of their applications, reducing the amount of code they need to write and making it easier to maintain.

Modular Design: Rails concerns help you keep your code organized and modular. By breaking down your code into smaller, more manageable chunks, you can make changes to one part of your application without affecting the rest.

Better Code Readability: Rails concerns make your code easier to read and understand by encapsulating related functionality in a single module. This makes it easier for other developers to understand how your code works and make changes to it if necessary.

Improved Testability: Rails concerns make your code easier to test by allowing you to test each module separately. This makes it easier to write tests for individual parts of your application and helps you catch bugs earlier in the development process.

In conclusion, Rails concerns are an effective solution to code reusability in Ruby on Rails. They help developers write code that is modular, reusable, and easy to maintain. Whether you're working on a small or large project, Rails concerns can help you write better, cleaner, and more maintainable code.
Meta (Facebook): Ask Me Anything
Tags: webdev, react, career, coding
Published: 2023-02-12 15:47:23

I am an Engineering Manager at Meta (aka Facebook, Instagram, WhatsApp, Oculus)

I have supported and grown a couple of teams here and built producta spanning across all Family of Apps.

I know many engineers here and not only are aspiring to work for Big Tech company like Meta.

I am starting a discussion: Ask Me Anything.

What do you want to know about the hiring and interview process, daily life of an engineer, culture and technology.

Write a comment and I will pick most popular ones and will write an article for. each of those comments.

### Follow Me

Follow me on [#TheEngineeringBolt](https://engineeringbolt.com), [Twitter](https://twitter.com/alexrashkov) and [Linkedin](https://www.linkedin.com/in/alexrashkov) for more Career, Leadership and Growth advice.

<a href="https://engineeringbolt.substack.com/embed" target="_blank">![Subscribe to Engineering Bolt ⚡ Newsletter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3u2srkrj6arwrs0nclfs.png)</a>
Wirelessly Debug Your Code On Pysical Android Device In Flutter
Tags: flutter, mobile, ios, android
Published: 2023-02-12 15:35:20

Debugging your code on a physical device, remains the best way to really feel your app and ensure that you understand the way the app will work on the devices of your users.

But it can also be risky having your phone plugged constantly to your computer's USB port. Some computer USB ports do not really control current flow properly and power surges might damage your phone's charging port. Plus, what if your phone cord is short? or loose and doesn't allow much freedom?

So, you can use wireless debugging and here is how to wirelessly build, run and debug your apps on your physical device. First of all install ADB  (Android Debug Bridge). ADB contains a set of tools to let you debug your app on your device. 

## **INSTALL ADB ON MAC**
 To install ADB on mac, install with Home brew. 

To install Homebrew, open a terminal and run:

`/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)`

After, run the following to install ADB:

`brew install android-platform-tools --cask`

These will take a while. So be patient and have a good network connection. 

INSTALL ADB ON WINDOWS 

Use this [link](https://dl.google.com/android/repository/platform-tools-latest-windows.zip) to download Android SDK platform tools for windows. 
Extract the zip file into a folder that is easily accessible. Something like C:\platform-tools

Now open that folder, and then Shift + right click to open command prompt right in that folder. Or just open command prompt and cd into the platform-tools folder. 

After setting up ADB on your computer. Connect your phone to it by USB and also ensure your phone and computer are on the same network (LAN). Or you could just connect your computer to your phone's network or vice versa or connect both to same router.

Go to your phone's settings, go to about phone and click to view details of your phone. You should find the IP address there. Note it. 

Come back to the terminal. If you are on windows, ensure you are in the ADB directory. If you installed with homebrew on mac , just run the script to start ADB daemon:

```
adb devices
```
You should see a list of devices and yours should be there.

Now run:

```
adb tcpip 5555
```
This restarts the the TCP

Go ahead and run:

```
adb connect <your android phone IP address here>
```
That is it! If its successful, you will see a success message on the terminal and you can go ahead to disconnect your phone. You will notice that the device will still be listed on the flutter's list of valid devices for debugging.

**For Wireless Debugging With iPhone**

Ensure you're running Mac OS 10.12.0 and above
Ensure you are running iOS 11 and above
Ensure you are running Xcode 9
Connect your Mac and iphone to same network

Open Xcode and go to window tab. On the drop-down menu, select _devices and emulators_

Select devices tab and select your devices from connected section.

Choose _connect via network_

You are good to go!

Enjoy!
Setting up Archivebox on Truenas Scale
Tags: tutorial, truenas, homelab, devops
Published: 2023-02-12 15:27:04

I recently got into self-hosting. I've wanted to create a self-hosted web archive and my friend recommended an [Archivebox](https://archivebox.io/), unfortunately TrueCharts doesn't have a chart for it so I had to do it myself. Here's my guide on how to setup Archivebox on Truenas Scale.

## Setting up a Archivebox user

First of all you to setup an Archivebox user. As Archivebox container won't even start as root. Go to _Credentials -> Local Users -> Add_. Create a new user with a username `archivebox` and toggle `Disable Password`

![Creating archivebox user in Truenas Scale](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/brhq91a7fylfzsbhubc9.png)

## Creating an app

To setup Archivebox I you need to use `custom-app` chart from TrueCharts repository.

![Custom-app chart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h7y00jb0913mitw321fc.png)

Change Application name to `Archivebox`. Then set_Container Image -> Container Repository_ to `archivebox/archivebox`, _Container Tag_ to `latest` and _Container Pullpolicy_ to `ifNotPresent`. 

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

Enable All liveness probes. 

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

Then set _Networking and Services -> Main Service Port Configuration_, _Port type_ to `HTTP`, _Target Port_ to `8000` and _Port_ to some random port number like `10967`. 

Service type will depend on your setup.

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

Last of all, the storage. You need to mount 2 paths:
- `/data`
- `/var/spool/cron/crontabs`

For your connivance I recommend to mount `/data` as hostPath and `/var/spool/cron/crontabs` as PVC. As `/data` requires some setup later.

> Update: After using this setup I found that mountung`/var/spool/cron/crontabs` doesn't work as expected - the files are erased and jobs stop.  

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

Set _Pod Security Context -> fsGroup_ to group id of group `archivebox`.

Then click _Save_.

## Post chart setup

### Setup up Archivebox

Go to _System setting -> Shell_ and cd into `/data` path. 

Then run:
```sh
docker run -v $PWD:/data -it archivebox/archivebox init --setup
```
It will setup Archivebox db. After this step, you should be able to access the webui. 

If you cannot do that, make sure, that HostPath directory has correct permissions.

```sh
chown archivebox:archivebox YOUR_DIR
```

### Fixing the scheduler

I've noticed that some of my scheduled runs were failing. To fix them i run these commands inside the container.

Change the owner of `/var/spool/cron/crontabs` to `archivebox`.

```sh
chown -R archivebox:archivebox /var/spool/cron/crontabs
``` 

Then change the user to archivebox.

```sh
su - archivebox
```

Go to `/data` and run:

```sh
archivebox init --setup
```

## References

- https://github.com/ArchiveBox/ArchiveBox/wiki/Docker
input type button vs button
Published: 2023-02-12 15:19:38

The main difference between `<input type="button">` and `<button>` is that the latter allows for more customization and is more flexible.

`<input type="button">` is a self-contained element with limited functionality and styling options, while <button> is a container element that can contain other elements and has more styling options such as using CSS pseudo-elements.

Additionally, `<button>` can have a type attribute other than "button", such as "submit" or "reset", allowing it to be used in a form for submitting or resetting data.

```HTML
<!-- Example using input type button -->
<input type="button" value="Click me" class="btn-primary" style="background-color: blue; color: white;">

<!-- Example using button -->
<button type="submit" class="btn btn-primary" style="background-color: blue; color: white;">
  Click me <span class="icon-arrow"></span>
</button>
```

In this example, the `<input type="button">` element has a value attribute for the button text, a class attribute for styling with the btn-primary class, and a style attribute for setting the background color and text color. It has limited styling options beyond these attributes.

In contrast, the `<button>` element has a type attribute set to "submit" for use in a form, and can contain other elements such as a `<span>` element with a class of `icon-arrow`. It also has a class attribute for styling with the btn and btn-primary classes, and a style attribute for setting the background color and text color. It is more flexible and can be customized further with CSS.
Chatgpt Google Chrome Extension
Tags: chatgpt, opensource, javascript, webdev
Published: 2023-02-12 15:13:21

I made a simple chatgpt extension for Chrome! The extension scrolls to your question when you click its number. It's an open-source project. Check out the demo and feel free to try it out for yourself.

Github Link: https://github.com/ZahidHasan24/chatgpt-scroll-chrome-extension


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qs0omut9xxqty32s6wxg.gif)
A new React form state management library: React Happy Form
Published: 2023-02-12 14:55:33

## Quick Features

- Built on typescript, providing type protection.
- Use hooks to manage your form state and support nested forms.
- Powerful and configurable validation interactions.
- Adapts to various UI, validation libraries.
- No dependencies, very small package size.

Repo: https://github.com/react-earth/react-happy-form

Quick preview: https://react-happy-form.onrender.com

**Looking forward to your star, feedback and suggestions!**
Acerca del feedback...
Tags: feedback, dev, desarrollador, tech
Published: 2023-02-12 14:47:39

_**"Uno como desarrollador nunca sabe qué tan preparado tiene que estar para recibir un feedback de parte de algún miembro del equipo, pero si debe estar listo para resolverlo"**_ - Yo😁

Un desarrollador de software siempre es más optimista de lo que debería ser cuando crea un **Pull Request(PR)**. Pasa que al momento de crearlo, lo hacemos con la convicción de que todo lo que se está enviando a revisión no va a necesitar mejoras de nuestra parte y no esperaríamos que se nos corrija porque tenemos la expectativa de que nuestros cambios sean integrados a la rama **main **y así hacer nuestro respectivo aporte en las mejoras incrementales del proyecto en el que estamos participando.

Sin embargo, ésto no siempre ocurre, de hecho es muchísimo más probable recibir comentarios con detalles para arreglar, a que simplemente se nos apruebe como si todo estuviera perfecto, eso nunca ocurre - Pueden pasar horas, días, hasta semanas!!! antes de que te lo aprueben por el hecho de que aún no arreglas detalles -. De ahí esa frase cliché _"siempre hay cosas por mejorar"_. Porque debemos entender y aceptar que no somos infalibles, que en nuestra industria hay otras personas que tienen conceptos de lenguajes, formas de implementación, sintaxis, frameworks, lo que sea que quieras mencionar y de ahí que en ese momento debemos estar con la suficiente humildad para aceptar que todavía podemos ser mejores.

El feedback no es algo personal y si queremos ser parte de ésta industria en algún momento lo tendremos que enfrentar. No te están diciendo que sos mal desarrollador, no te están diciendo que sos mal profesional, no te dicen "es que vos sos mala persona", nada de eso, todo lo contrario, te están dando la oportunidad de aprender de ellos, del producto, del negocio, de conceptos y explícitamente te están diciendo qué puntos tenés que atacar para mejorar como profesional.

Aún así es muy cierto que esa retroalimentación va directo al ego todos tenemos y nos alcanza a doler un poquito, pero en ese momento cuando sentimos ese dolorcito es cuando debemos hacer uso de nuestra conciencia y aceptar como profesionales que estamos en una industria donde todos tienen algo que aportar y de cada uno los miembros del equipo podemos aprender, de ahí que ser humilde con nuestro conocimiento es un factor clave para entender que cada día viene con una oportunidad para ser mejores no sólo en skills técnicos y de código sino también de habilidades blandas que nos van a permitir entender el contexto, saber hablar, escuchar, participar, reconocer y además persuadir con buenos argumentos que permitan oportunidades de mejora para todos.

Date esa oportunidad de estar abierto al crecimiento, deja de lado ese orgullo egoísta que no te permite ver que hay personas en tu entorno que le pueden sumar a tu vida, cambia esa actitud y seguro que todos podemos seguir una ruta de aprendizaje constante.

[@viistorrr](https://twitter.com/viistorrr)
🌐 [www.viistorrr.com](https://www.viistorrr.com/)
Installing SQLite3 on Windows
Tags: sqlite
Published: 2023-02-12 14:29:30

# Downloading SQLite binary

Go to [sqlite.org/download.html](https://www.sqlite.org/download.html), choose `sqlite-tools-win32-x86-*******.zip` to download.


![sqlite windows binary download links](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f23o7sgqkjrqg9lhjnvk.png)

# Copy binary to installation folder

Create a folder inside `C:\Program Files` named `sqlite`. Extract the downloaded zip and put all three binary files in this folder.


![sqlite binary in windows](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5hcw6xgqkwst0k0wrgmc.png)

# Add path for sqlite binary

Hit `Windows` key and find for `edit the system environment variables` control panel shortcut and open it.

Go to `environment variables`, chose `Path` variable and add `C:\Program Files\sqlite` to the path.


![adding sqlite3 path](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n3tynyxv0veriyd3vfb7.png)

# Verify Installation

Open new command prompt (cmd) and execute this to check sqlite3 version and confirm the installation:

```
sqlite3 --version
```

![sqlite3 --version](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s6mocnz1zrzf880s8b30.png)
Ten Modern Layouts 🚀 [Part 2]
Tags: programming, html, css, layouts
Published: 2023-02-11 23:51:50

This is the second part of the "Ten Modern Layouts"
[If you aren't read the part 1, here you can read it](https://dev.to/ernerdo/ten-modern-layouts-part-1-a3m).

## #4 Pancake Stack: grid-template-rows: auto 1fr auto

This layout is often used for websites and apps.

HTML

```
<div class="parent">
      <header class="blue section" contenteditable>Header</header>
      <main class="coral section" contenteditable>Main</main>
      <footer class="purple section" contenteditable>Footer</footer>
</div>
```
CSS

```
 .parent {
  display: grid;
  height: 100vh;
  grid-template-rows: auto 1fr auto;
}
header {
  background: rgb(235, 108, 127);
  padding: 2rem;
  text-align: center;
}

main {
  background: lightgreen;
  padding: 2rem;
  text-align: center;
}

footer {
  background: rgb(14, 202, 202);
  padding: 2rem;
  text-align: center;
}
```
{% embed https://codesandbox.io/embed/pancake-stack-6t11i5?fontsize=14&hidenavigation=1&theme=dark %}

## #5 Classic Holy Grail Layout: grid-template: auto 1fr auto / auto 1fr auto

It is similar to the previous layout, but now with sidebars
HTML

```
 <header class="pink section">Header</header>
      <div class="left-side blue section" contenteditable>Left Sidebar</div>
      <main class="section coral" contenteditable>Main</main>
      <div class="right-side yellow section" contenteditable>Right Sidebar</div>
      <footer class="green section">Footer</footer>
```
CSS

```
.parent {
  display: grid;
  height: 100vh;
  grid-template: auto 1fr auto / auto 1fr auto;
}

header {
  padding: 2rem;
  background: plum;
  grid-column: 1 / 4;
}

.left-side {
  padding: 2rem;
  background: purple;
  grid-column: 1 / 2;
}

main {
  padding: 2rem;
  background: paleturquoise;
  grid-column: 2 / 3;
}

.right-side {
  padding: 2rem;
  background: papayawhip;
  grid-column: 3 / 4;
}

footer {
  padding: 2rem;
  background: palegreen;
  grid-column: 1 / 4;
}

```
{% embed https://codesandbox.io/embed/classic-holy-grail-layout-m36yj0?fontsize=14&hidenavigation=1&theme=dark %}


## #6 12-Span Grid: grid-template-columns: repeat(12, 1fr)

The next item on our list is a timeless favourite: the 12-column grid. You can easily create grids in CSS using the repeat() function. By specifying repeat(12, 1fr) as the grid template columns, you'll get 12 equal-width columns each taking up 1 fraction unit of the available space.
HTML

```
 <div class="parent">
      <div class="span-12">Span 12</div>
      <div class="span-6">Span 6</div>
      <div class="span-4">Span 4</div>
      <div class="span-2">Span 2</div>
    </div>
```
CSS

```
.parent {
  display: grid;
  height: 100vh;
  grid-template-columns: repeat(12, 1fr);
}
.span-12 {
  background: lightpink;
  grid-column: 1 / 13;
}

.span-6 {
  background: lightblue;
  grid-column: 1 / 7;
}

.span-4 {
  background: coral;
  grid-column: 4 / 9;
}

.span-2 {
  background: yellow;
  grid-column: 3 / 5;
}


```
{% embed https://codesandbox.io/embed/12-span-grid-mv3kc4?fontsize=14&hidenavigation=1&theme=dark %}
Approach to testing and improving QA
Published: 2023-02-12 13:25:25

## 1. Identify the goals of the QA system
 
It is important to have a clear understanding of what the QA system is intended to do and what types of questions it should be able to handle. This will help guide the development and testing of the system.

## 2. Develop a set of test cases

Create a diverse set of test cases that are representative of the types of questions that the QA system will encounter on the website. These test cases should cover a wide range of question types and complexity.

## 3. Implement the QA system
 Once the test cases have been developed, implement the QA system on the website. This may involve integrating the system with the website's backend and frontend, as well as any other necessary components.

## 4. Evaluate the system
Use the test cases to evaluate the performance of the QA system. This can involve both human evaluation and automatic evaluation using metrics such as accuracy, speed, and the ability to handle a wide range of question types and complexity.

## 5. Identify and address any issues
 If the system's performance does not meet the desired criteria, identify the areas that need improvement and take steps to address them. This may involve fine-tuning the model, adding additional training data, or modifying the system's architecture.

## 6. Continuously monitor and improve the system
 To ensure that the QA system continues to perform well, it is important to regularly monitor its performance and make updates and improvements as needed. This can involve repeating the testing and improvement process on a regular basis.
tsParticles 2.9.2 Released
Tags: javascript, typescript, webdev, showdev
Published: 2023-02-12 13:06:24

## tsParticles 2.9.3 Changelog

### Bug Fixes

- Fixed some plugins, they weren't loading correctly the options

--

### Confetti Website

Starting from `2.9.0` there are two new bundle for easier configurations:

- `confetti`, the demos are available [here](https://confetti.js.org/more.html), readme [here](https://github.com/matteobruni/tsparticles/tree/main/bundles/confetti#readme)
- `fireworks`, a demo website is not ready yet, but the readme contains all the options needed [here](https://github.com/matteobruni/tsparticles/tree/main/bundles/fireworks#readme)

--

## v3.0

Probably this will be the last `v2.x` version, except some bug fixes needed before `v3.0` will be released.

You can read more about the upcoming `v3.0` in the post linked below

{% link https://dev.to/tsparticles/preparing-tsparticles-v3-5bai %}

--

## Social links

- [Discord](https://discord.gg/hACwv45Hme)
- [Slack](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI)
- [WhatsApp](https://chat.whatsapp.com/KQyHc9UEbRc2qlqNQR2J5c)
- [Telegram](https://t.me/tsparticles)
- [Reddit](https://www.reddit.com/r/tsParticles/)

---

{% github matteobruni/tsparticles %}