teleren/devto huggingface dataset:
So you Want to use Active Record?
Tags: ruby, beginners
Published: 2022-03-23 20:53:44

So you are getting into ruby and you come across this "Active Record" you have no idea what it is or what it does. Luckily it's quite easy!

**"What is Active Record?"** Well, in it's simplest term, it is an ORM (Object Relational Mapping), It can make fetching and representing data easier, while not making us write our own custom ORMs.

"That's cool, but **what is an ORM?"** Object Relational Mapping, AKA ORM, is a technique that connects objects of an application to tables in a relational database management system, Using this, we can store and retrieve properties and relationships of the objects without writing SQL statements directly.

Active Record closely follows the standard ORM model, which is...

- Tables map to classes
- Rows map to objects
- Columns map to object attributes

Lets see how we can make associations between models, Lets say you have two files, song.rb and genre.rb, they would look like so...

```
class Song < ActiveRecord::Base
end
```
and

```
class Genre < ActiveRecord::Base
end
```
We can connect these models through association, which of there are three.

1. **one-to-one**- When one item has exactly one of another item
2. **one-to-many**- When one item can be a member of many other items
3. **many-to-many**- When multiple items are related to one or more other items

You can indicate these by adding the declarations to your models: has_one, has many, belongs_to, and has_and_belongs_to_many.

Now lets see what relationships we should establish in the data system, and change up the code to look like...

```
class Song < ActiveRecord::Base
   belongs_to :genre
end
```
and

```
class Genre < ActiveRecord::Base
   has_many :Songs
end
```
This now indicates the relationship between song and genre, we used belongs_to in song because one song can belong to a single genre, and then we used has_many in genre, because one genre can have multiple songs. Now these two models are connected by the relationship we provided them and we can then us them accordingly.

In conclusion, Active Record is an ORM, which is a way to retrieve and store data in the database without writing SQLs. Active Record supports three different associations, one-to-one, one-to-many, and many-to-many and we can use those to connect the models to be used together.
Vue 2.x + Vite + Tailwind CSS + Javascript
Tags: javascript, vue, tailwindcss, vite
Published: 2022-03-23 20:32:09


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

👋 Hello developers, 

I have created boilerplate github template repo, which is on vite, vue 2.x, tailwind css and pure javascript. 

I know many of us already switched to vue 3.0 but still for some one who still want to use readymade set up with vite and tailwind here is the repo link - [https://github.com/mayank30/vite-tailwind-vue2](https://github.com/mayank30/vite-tailwind-vue2)

Feel free to create PR to enhance the project. 

Thank you so much :)
Web Storage APIs - LocalStorage and SessionStorage
Tags: frontend, javascript, localstorage, webdev
Published: 2022-03-23 20:31:12



## Web Storage APIs

Over the next few articles I'll be writing about Web Storage API that allow you to store application data not in a database you control but inside the users browser.  The main three options are.

- [LocalStorage/SessionStorage](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API)
- [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API)
- [Web SQL](https://www.geeksforgeeks.org/what-is-web-sql/)

## LocalStorage & SessionStorage

This is a synchronous key/value store. With the Web Storage API you can store a string under any key you want. You can either store it perpetually in LocalStorage or until the user closes the browser with SessionStorage.

One typical pattern is to store JSON strings to store a lot of data under one key. In the below example we store some basic site settings in localStorage.

```js
// object that represents site settings
const settings = {
  mode: "dark",
  primaryColor: "black",
  secondaryColor: "white"
}

// turn the object into a JSON string
const settingsAsJSON = JSON.stringify(settings)

// save the string into localStorage
window.localStorage.setItem("settings", settingsAsJSON)
```
If I wanted to load these settings if they exist when the page loads I could do something like this.

```js
// default settings
let settings = {
  mode: "light",
  primaryColor: "white",
  secondaryColor: "black"
}

// retrieve the string from localStorage
const loadedJSONSettings = window.localStorage.getItem("settings)

// check if there actually was any data, if so, parse the json
if (loadedJSONSettings){
  // since there is data, parse the JSON
  settings = JSON.parse(loadedJSONSettings)
  // below any code to update the dom based on these settings
  // ...
}

```

If later on we want to clear the data it is as simple as:

```js
window.localStorage.removeItem("settings")
```

If we only want to store the data until the user closes the browser we would just replace `localStorage` with `sessionStorage`. Some things to keep in mind.

- You can see what is stored for a particulate page by going to the `application` section of dev tools in the browser.

- Web Storage is synchronous so using it for large data and operations can block the main thread (make your code slow).

## Next Time

Next time we'll explore IndexedDB which provides an asynchronous document storage in the browser.
How agile is your project?
Tags: agile, scrum, devops, software
Published: 2022-03-23 20:25:54

Hallo DEV Community,

in the context of my PhD I develop an instrument to measure the agility level of a software project and I am conducting an international study with the aim to validate it!
I would appreciate very much if you could  support me by participating in the survey: https://ww2.unipark.de/uc/PhD/1d1a/

The questionary is a bit long but please still try to go up till the end!

Thank you very much!
Vincent
Microservices at First !
Tags: microservices, node, backenddev
Published: 2022-03-23 20:23:01


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/35ps53o2ik3918k6se7m.jpeg)
Hey There !
let's talk about microservices. 

**Basic principles:**

- Microservices serve only one specific solution to the given problem. For an example, we can retrieve all the list of top 10 movies from the backend of our streaming app.

- It can be deployed completely on independent system which do not necessarily have any relation with main system.

- It always communicate over http methods.

**Umm, Benefits ?**

- New Developers do not need to understand whole application and can focus on main assigned area.

- These services can be developed by independent team according to the requirements.

- No programming language barrier for developing microservices. You can choose best language according to need.

- Bingo ! if one specific service goes down, take a deep breath your application won't get affected by this failure. 

**Whoah ! Drawbacks !!**

- Hard to Monitor end-to-end development 

- Dependency problems if one microservice depend on other when it is time to roll back changes. 

- Hard to test 

- All complexity now bear by network layer as it communicates via network protocols.
Welcome Thread - v168
Tags: welcome
Published: 2022-03-23 20:09:33

---
title: Welcome Thread - v168
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
canonical_url: 
---

![Ladybug in a flower saying "Hey"](https://media.giphy.com/media/3o7aCUQ7TsQ3cndExq/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
Vaga para Fullstack - Startup rampando!
Published: 2022-03-23 20:08:48

Bom dia, sou o Roberto!  Investidor Anjo e fundador da startup www.meegu.com.br. Passamos da fase de MVP e busco um Dev Fullstack com boa experiência em Node, JS, Nest e Mysql, com pelo menos 2 anos de experiência profissional.  Aqui é para trabalhar direto com os fundadores e deixar um legado, estamos em fase captação, ou seja, a hora entrar é essa!  Interessados, me add no linkedin e manda msg https://www.linkedin.com/in/roberto-valverde-aa681546/


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/13sn2jm2ov9c94qjtzl2.jpeg)
redux toolkit
Tags: javascript, redux, react
Published: 2022-03-23 20:04:57

in this post we will know how usefull redux toolkit is and what it prings to the table 

-first lets configure redux store for the counter app the old way 
-then lets fire some actions 
-then i will write the same code with the toolkit 

**here is my redux setup with the old way**

```

import { createStore } from "redux";

const initialState = {
  counter: 0,
};

// actions
export const INCREMENT = "INCREMENT";
export const DECREMENT = "DECREMENT";
export const RESET = "RESET";

// counter reducer
const counterReducer = (state = initialState, action) => {
  if (action.type === INCREMENT) {
    return {
      counter: state.counter + 1,
    };
  }
  if (action.type === DECREMENT) {
    return {
      counter: state.counter - 1,
    };
  }
  if (action.type === RESET) {
    return {
      counter: 0,
    };
  }

  return state;
};

// ccounter store
const store = createStore(counterReducer);
export default store;

//here we fire diffrent actions 
// increment
dispatch({type: INCREMENT})

// decrement
dispatch({type: DECREMENT})

// reset
dispatch({type: RESET})
```
**and here is the same approach with redux toolkit** 

```

import { configureStore, createSlice } from "@reduxjs/toolkit";
// initial state
const initialState = {
  counter: 0,
};

const counterSlice = createSlice({
  name: "counter",
  initialState: initialState,
  // here we replaced the reducer with this helper function which gives us ability to mutate the state directly 
  reducers: {
    increment(state) {
      state.counter++;
    },
    decrement(state) {
      state.counter--;
    },
    reset(state) {
      state.counter = 0;
    },
    increase(state) {
      state.counter = state.counter + action.payload;
    },
  },
});

// actions to be used from inside the component later to make changes to our state 
export const counterActions = counterSlice.actions;

const store = configureStore({
  reducer: counterSlice.reducer,
});

export default store;

//increment
counterActions.increment()

//decrement
counterActions.decrement()

//reset
counterActions.reset()

// and if you asking of course you can pass data (payload) 
like this 

for example as a parameter becase we still have access to the action payload
counterActions.increase(5)
```
quik recap what we has accomplished so far 
-we made a simple counter with react and redux with two ways 
-the first way we used the old way of redux and it's a little confusing and complex to configure at first
-so here comes redux toolkit to solve this problm 
-the mean reason for using toolkit is to simplify redux configuration 
-here i am not talking about the pros and cons of using both methods a i prefered to just explain the diffrent in a practical way

hope you enjoy it 
;)
How to get all previous items of an array in js from a certain value
Tags: javascript, webdev, tutorial, beginners
Published: 2022-03-23 19:36:36

We can use two array methods to help us get the previous items from an array:

1. Array.indexOf()
2. Array.slice()

### Array.indexOf()

We use it to get the index of an item in an array. In our case, we want to get the index of the current item. Returns -1 if the item is not found.

### Array.slice()

We use it to get a part of an array. In our case, we want to get the previous items from the current item. Returns an empty array if the item is not found.

Example:

```js
const cars = ['Ford', 'Chevy', 'Honda', 'Toyota'];
const currentCar = 'Honda';
const index = cars.indexOf(currentCar); // two
const previousCars = cars.slice(0, index); // ['Ford', 'Chevy']
```

You can find more information about slice and indexOf type in the Mdn web docs. - [Mdn Docs - slice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice#try_it) and [Mdn Docs - indexOf](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf#try_it)

Thanks for reading this article.
If you liked this article, please vote and comment.
Follow me on [Twitter](https://twitter.com/_ianfelix)
Beginner with a VS2022 Question
Tags: beginners, csharp, programming
Published: 2022-03-23 19:21:42

Hello all,

my name is Peter, i am 62 years old, come from germany and my english is not the best ;-)
A few months ago i was beginning with C#, i use the IDE VS2022, install with the german language pac. In the IDE are the menus all in german (you can see it on the screenshot green highlighted), but when the IDE show me helptext for a method (yellow highlighted in the picture), then this text is in english.

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

Can i change this text to german or is this text only available in english?

Friendly regards
Peter
Free session on JavaScript apps on Kubernetes
Tags: javascript, kubernetes, docker, java
Published: 2022-03-23 19:13:36

Hey folks

On **March 24 at 10 AM PT / 1 PM ET** we will have a free tech session to show how you can **easily deploy and manage your JavaScript apps on Kubernetes**. 

The following topics will be covered:

- Building a developer-friend pipeline to deploy your JavaScript application

- Monitoring, managing, and alerting for your applications

- Manage access and communication to your application and in-between services.

- Breakthrough the dependency on the DevOps team to manage your apps through a self-service model.

[You can sign up here:](https://devrel.shipa.io/kubernetes-for-javascript-developers)
Acra. Features: Data leakage detection
Tags: cryptography, security, database, riskmanagement
Published: 2022-03-23 19:09:17

Data encryption is a passive security control, it works well in combination with active controls that scan the data flow and analyse the system's behaviour. We equipped Acra with several techniques to detect unauthorised behavior and effectively respond to it. Let’s explore them in more detail.

> *[Use Acra Community Edition for free] (https://github.com/cossacklabs/acra). Check out [Acra Enterprise Edition] (https://www.cossacklabs.com/acra/#pricing) tailored for solutions with high security requirements.*

##7️⃣ Data leakage detection
###Poison records/Honeytokens 

Acra provides [intrusion detection] (https://docs.cossacklabs.com/acra/security-controls/intrusion-detection/) capabilities using poison records (aka honeytokens).

Acra puts special data blobs in database tables that look like regular encrypted records, but their content is different (“poison”). Once they’re requested through Acra, Acra understands that it is not a typical record, raises security alarms and halts decryption. 

Poison records are records specifically designed to sit quietly in the database and not be queried by legitimate users under normal circumstances. Nice to your database, fierce to intruders :)

![Poison records. Acra by Cossack Labs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1zls2jr9mwnru9u41yaz.png)

Intruders, malicious applications, or SQL injections don’t know which records are poison, and if they read more data than they should, i.e. using SELECT * requests, then poison records appear in the database response and trigger Acra.

###Arbitrary patterns

Acra can be used as conventional DLP for the database, making sure that chosen patterns or data blocks never pass Acra without an alarm.

For more technical details you can check out other blog posts related poison records:
- [Poison Records In Acra—Database Honeypots For Intrusion Detection] (https://www.cossacklabs.com/blog/acra-poison-records.html)
- [Explain Like I’m Five: Poison Records (Honeypots for Database Tables)] (https://hackernoon.com/poison-records-acra-eli5-d78250ef94f)

With poison records and arbitrary patterns implemented, you give your valuables another strong level of protection. Use them in combination with other Acra features and you will always know if someone is trying to steal your data.
Test
Published: 2022-03-23 19:08:42

![Image descri

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xvye8hj8mxqtd4rkkc5z.png)ption](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/brn2twjz86lbbzyhvala.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/10zwtw63i5w7yoi7751d.png)
Concluindo o segundo projeto do desafio Jornada DEV
Tags: html, css, beginners, challenge
Published: 2022-03-23 18:49:42

#Comfort Food

Depois de longos dias quebrando a cabeça, colocando em prática o que aprendi no Curso em Vídeo, finalizei a primeira parte do segundo desafio! A ideia principal era criar uma página de receitas, com interatividade e leveza. Você pode acessar todo o processo de criação [aqui](https://github.com/bysunshinearts/comfort-food) no repositório do GitHub, e o design do projeto no [Figma](https://www.figma.com/community/file/1083187918688289123)!

Para a segunda parte, ficou faltando a interatividade dos botões e responsividade (que é a parte que estou tendo mais dificuldade), longe de está perfeito mas tive grande aprendizados com esse projeto. 

###Aqui vai algumas imagens de como ficou esse resultado:

***
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dunvjgsdf7dczoojk0u3.png)
*Header*
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7j1o90ikpe03l3r2tcmm.png)
*Main*
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/begrtbph2z993kj5hlgi.png)
*Sidebar*
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmca5cb28pl6kbx4sidp.png)
*Footer*

***


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

***
**Muito Obrigada a quem acompanhou até aqui!!**
Interested in learning more about Commercial Open Source? There’s a Forem for that.
Tags: opensource, meta, forem, startup
Published: 2022-03-23 18:46:38

---

series: Forem Community Highlights

---

DEV is an instance of [Forem](http://forem.com/): open source community software that we distribute to anyone who wants to build a similar space. We run Forems like [CodeNewbie](https://community.codenewbie.org) and [Forem.dev](https://forem.dev) ourselves, and others use it for spaces like [Wasm Builders](https://www.wasm.builders/) and [MetaPunk](https://www.metapunk.to/).

{% embed https://github.com/forem/forem no-readme %}

Forem is also the name of our company. We distribute our code for free and we charge our early partners for hosting Forem as our core longterm business model. We consider this a strong, value-add way to model a company. There are brand new commercial open source companies starting all the time with public companies like Elastic, MongoDB, GitLab, etc. blazing the trail.

**If you are interested in going deeper into the world of commercial open source**, or perhaps starting your own company that operates in this fashion, I want to highlight a space to explore further:

### [>> Click here to explore COSS Community](https://www.coss.community/): A Forem Devoted to Commercial Open Source.

***

COSS Community is operated by [OSS Capital](https://oss.capital/), which is one of the early backers of Forem. The main pulse of content right now is a [weekly newsletter](https://www.coss.community/cossweekly) — but anyone is now welcome to take part as a reader or author.

If you really want to keep up with this world, COSS Community is the way.

**👉 [Explore top posts so far on COSS Community](https://www.coss.community/top/infinity/)**

***

One last thing. You’ll notice **"Sign up with Forem"** as an option alongside GitHub and email. This is a service we now offer to most seamlessly navigate the ecosystem and manage your identity. We want you to be able to bring your full self without having to bring your full data, so making this distributed ecosystem as straightforward as possible in the long run is really important. Create a [Forem account](https://account.forem.com/) and connect it with your DEV account [via your settings](https://dev.to/settings). 🙂

Happy coding!
Introducing Codewranglrz 🤠
Tags: nft, blockchain, web3, beginners
Published: 2022-03-23 18:11:47

We at CodeCast are thrilled to announce our new exploratory project, [Codewranglrz](https://www.codewranglrz.xyz/). Anyone in the development world right now is very aware of how large the buzz around web3 is. It’s seemingly impossible to log onto social media without seeing talks of cryptocurrency, blockchains, or NFTs. As a team, we are extremely passionate about anyone being able to learn development. We strive to stay updated with what people are interested in learning and quickly realized that this space has a lot of information.

Wrapping your brain around web3 is no small undertaking. As we dove into learning, we decided we needed to directly insert ourselves into the NFT world. We believe strongly in “learning by doing”, so we decided that’s exactly what we were going to do.

Thus, Codewranglrz came to be. As a team, we began learning different aspects of creating an NFT collection. From generating unique ideas, to writing Solidity contracts, to building a community - we’ve tried to tackle it all.

While Codewranglrz is a result of our own learning experience, it also aims to sit in the web3 space as a way for everyone else to learn. We began by creating [CodeBadges](https://www.codewranglrz.xyz/codebadges), an NFT collection of 100 virtual laptop stickers.


![ezgif.com-gif-maker.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1647982521924/t0UqJt2qF.gif)

After releasing this trial collection, we quickly discovered how giant this space actually is and how easy it is to get lost in the void. This collection served as a ticket into the web3 world but ultimately provided us with a lot of information on what not to do. While the sticker collection remains close to our heart as our first venture, we decided to move to a different collection to expand our abilities, and test our newfound knowledge.

This brings us to our brand new collection of 10,000 ghost NFTs, which we adorably named [Boos!](https://www.codewranglrz.xyz/boos). The goal of this collection was to make our NFTs more valuable to our community by finally doing something with what we’ve been learning. Through this collection, we will be revealing its connection to educational material, while we continue learning everything we can. It also doesn't hurt that they're adorable to look at. 

![Meet Hex.](https://cdn.hashnode.com/res/hashnode/image/upload/v1647982543693/4BETX8MAF.png)

In the upcoming days, we’ll be releasing information about the collection that includes:

- our decision to work on the polygon blockchain
- how we added utility to our tokens that work for our CodeCast audience
- tutorials and learning material surrounding web3  
- information about the official launch of our Boos! collection
‍

We have lots of exciting announcements coming up, so be sure to follow [CodeCast](https://linktr.ee/codecastapp) and [Codewranglrz](https://msha.ke/codewranglrz/) on social media to stay updated!
Escape Sequence Characters in JavaScript
Tags: javascript, webdev, beginners, programming
Published: 2022-03-23 18:05:04


## Escape Sequence Characters

Escape Sequence Characters, as the name suggests, is used to escape a particular sequence or to display special characters. They can also be used withing strings.

- \' Single quote
- \" Double Quoted
- \\ Backslash
- \b backspace
- \f form feed
- \n newline
- \r carriage return
- \t horizontal tabulator
- \v vertical tabulator

> Hope you learned something useful today! Peace Out ✌️