teleren/devto huggingface dataset:
Journey Journal
Tags: git, github, gitlab, osdc
Published: 2023-02-07 17:33:01

|OSDC Series|
| --- |
|[Thus The New Journey Begins](https://dev.to/silent_mobius/thus-the-new-journey-begins-18kp)|
|[Journey Of Thousand Pages](https://dev.to/silent_mobius/journey-of-thousand-pages-152k)|
|  [Journey Journal](https://dev.to/silent_mobius/journey-journal-3dm1) |

Welcome back dear reader. Let me remind you that I am Silent-Mobius, also known as Alex M. Schapelle, your faithful narrator. 
As you might remember, I have applied to short journey of sort, whose main orchestrator  is @szabgab, under a code name of [#OSCD](https://osdc.code-maven.com/osdc-2023-01-public/).
Despite the fact the journey is still under its first steps, I've been willing to remember it with any possible tool I can have under my utility belt.
That is why I've decided, to use [#git](https://git-scm.com).
Git is a free and open source distributed __version control system__ designed to handle everything from small to very large projects with speed and efficiency. 

## Hold Thy Memoirs 
On personal note, one thing that is needed to be remembered is `code`. Although in age of #chatGPT3, code might not be the most required, and that is why [Lord Emperor of Human Kind has forbid to use it](https://wh40k.lexicanum.com/wiki/Abominable_Intelligence), we still need to save the parts of code.

## Tools are Eternal 

Tool named __git__ is the one that we use, and the binary can be downloaded on any *nix system with systems package installer:
```sh
apt-get/dnf/yum/brew install -y git # choose one of apt-get/dnf/yum/brew
```
In case of Windows OS, one may get it from [git](https://git-scm.com) web-site.


## Know Your CISC

Every tool has its Computing Instruction Set Commands (#CISC)
and __git__ is not exception. Below is a typical commands set that one might start working with __git__:

```sh
mkdir -p ~/Projects/adeptus-ridiculus
cd ~/Projects/adeptus-ridiculus
echo '# This is homage to Adeptus-Ridiculus' >  README.md
git init --initial-branch=main
git config --global user.name silent-mobius
git config --global user.email alex@mobiusdevteam.com
git add .
git commit -m "adding README file"
git remote add origin https://gitlab.com/silent-mobius/adeptus-ridiculus.git 
git push -u origin main
```

## Use With Routine 

When ever one uses __git__ there is usually a routine to go through. In case routine updates, main three commands are in action:
```sh
git add . # adding all changed files
git commit -m "adding comment" # staging and adding commenting the changes
git push # pushing the staged files to remote repository
```

## Conclusion

Remember your memoirs of code with __git__ in the easy way. To get deep understanding with __git__, you can with [official docs](https://git-scm.com/doc) or at [VAioLabs.io](https://www.vaiolabs.io/slides/version)
Test Driven Development
Tags: webdev, beginners, rails, testing
Published: 2023-02-07 17:26:32

Test Driven Development (TDD), aka red, green, refactor. I have spent the last year creating projects using this method and these are my big takeaways.

**TDD takes some getting used to.** When I was first learning to code I was struggling to not only understand how the code worked but why it worked the way it did. If you're a rails dev you are probably very familiar with `binding.pry`. I was the Pry King always picking a part my code line by line and testing to see how it worked, what variables I had access to, just trying to see what I could see in the code. 

But once I learned to use both of those tools together, I felt so much more direct in my code. I was able to organize my code so much better and adhere to the single responsibility principle (SRP).

It is so satisfying to write a test, run it, write the code, run it and watching the tests turn from red to green. It honestly makes me so happy. 

TLDR - TDD makes coding more effective and intentional. Helps with the clarity and readability of the code. Exhibits developer empathy and is great for documentation. Definitely worth learning how to do.
inheritance ruby
Published: 2023-02-07 17:24:05

```rb
class Publication 
    attr_accessor :publisher
end

class Magazine < Publication
    attr_accessor :editor 
end

mag = Magazine.new 
mag.publisher = "David A. Black"
mag.editor = "Joe Smith"
puts "Mag published by #{mag.publisher}, and edited by #{mag.editor}."
```

```rb
class Person 
    def species 
        "Homo sapiens"
    end
end

class Rubyist < Person

end

david = Rubyist.new

puts david.species
```
Loops in Solidity
Tags: web3, solidity, ethereum, blockchain
Published: 2023-02-07 17:12:09

>Loops are used when we want to perform an action repetitively. They make our code more organized and manageable.

Loops are well-known in any programming language. It would not be necessary to cover what they are and how to use them. There are already 200 explanations on Google about the topic (with code snippets!).

Instead, we will look at how loops are used in smart contracts and Solidity.

When writing a smart contract, you may come across a situation in which you must repeat a process over and over again. This is known as repetitive processing. You would need to write loop statements in such scenarios to limit the number of lines of code.

Solidity provides support for all of the necessary loops to reduce the load of program development.

##Solidity Loops

![Loops](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5jhrlscbksodrpjtrpcx.jpg)

##Cons of Loops

It is important to note that the EVM is bound by a block gas limit, and one of the determinants that make users want to interact with your contracts is the gas cost associated with them.

Loops (depending on how they are used) make this existing problem even more challenging. Several factors make it difficult to estimate the gas required for a given project:

- There is a lack of clarity regarding the boundaries.

- Many side effects are introduced when they are used (such as updating states or performing external calls).

- As the name suggests, they are used with data structures that can grow (such as mappings, arrays, etc.)

Due to this, if the boundaries of a Solidity function are unclear, a loop can result in the Solidity function using a lot of gas, or even worse, running the Solidity function forever, which in the context of the EVM translates to "run until it reaches the block gas limit".


For more content, follow me on - https://linktr.ee/shlokkumar2303
attr method
Published: 2023-02-07 16:56:43

```rb 
class Ticket 
    def initialize(venue, date)
        @venue = venue 
        @date = date
    end

    def price=(amount) # write attr
        @price = amount 
    end

    def venue # read attr
        @venue
    end

    def date # read attr 
        @date
    end

    def price # read attr
        @price 
    end
end

thicket = Ticket.new("Hall Town", "01/01/2023")
thicket.price=(100)

puts thicket.venue
puts thicket.date
puts thicket.price
```

After

```rb
class Ticket 

    attr_reader :venue, :date, :price

    def initialize(venue, date)
        @venue = venue 
        @date = date
    end

    def price=(amount) # write attr
        @price = amount 
    end
end

thicket = Ticket.new("Hall Town", "01/01/2023")
thicket.price=(100)

puts thicket.venue
puts thicket.date
puts thicket.price
```

attr_writer

```rb
class Ticket 

    attr_reader :venue, :date, :price

    attr_writer :price

    def initialize(venue, date)
        @venue = venue 
        @date = date
    end
end

thicket = Ticket.new("Hall Town", "01/01/2023")
thicket.price=(100)

puts thicket.venue
puts thicket.date
puts thicket.price
```

attr_accessor
```rb
class Ticket 

    attr_reader :venue, :date

    attr_accessor :price # price has attr_reader and attr_writer together

    def initialize(venue, date)
        @venue = venue 
        @date = date
    end
end

thicket = Ticket.new("Hall Town", "01/01/2023")
thicket.price=(100)

puts thicket.venue
puts thicket.date
puts thicket.price
```
O papel das APIs no desenvolvimento
Tags: webdev, api
Published: 2023-02-07 16:45:58


A API (Application Program Interface, ou Interface de programação de aplicações) no mundo da programação tem um papel fundamental na construção e comunicação das aplicações, atuando praticamente de ponta a ponta no processo de construção.
Dessa maneira, grande parte das operações realizadas sejam de Autenticação ou de operações de CRUD( Create, Read, Update e Delete), passam pela comunicação direta com uma API. Mas o que essa sigla tem de tão importante nesse processo de construção?

Como foi citado acima, a API participa diretamente da comunicação e da solicitação de recursos de uma aplicação, dessa forma, vamos explorar com mais detalhes através das imagens abaixo:

**![Image 01](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u1b8wqcvhlv8gwn2zqp2.png)

Na imagem 01, nos temos três papeis importantes, sendo:
- API - Entrega recursos ou realiza as operações solicitadas
- Website - Atua entre o usuário e a API
- Usuário ou cliente - Solicitante direto de recursos.
Dito isso, é possível identificar através da imagem que a API tem o papel de "falar" uma língua comum entre o servidor que armazena o recurso e o lado do cliente que solicita esse recurso, atuando como uma espécie de tradutor para ambos os lados.

**![Image 02](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yquliy2r32srbcpemoz5.png)

Na imagem 02, traz um exemplo do que seria um Website montado com base nos dados que estão presentes em uma API específica, ou seja, as informações desse site são dispostas através do seu carregamento, seguindo três passos:
1° Assim que o site é aberto, uma solicitação de recursos é enviada para API, para que ela entregue os dados solicitados.
2° Depois de solicitado a API vai em busca desses dados, para entregá-los
3° Depois de entregues, o site é montado com base nesses dados que próvem da API.

Ou seja, a API está presente em todo o processo de construção de uma aplicação, atuando na busca, na entrega, na modificação e até mesmo na montagem dos dados, fazendo com que os programadores e as aplicações, consigam usufruir de diversas fontes de dados e principalmente do seu core, que é proporcionar uma comunicação entre o lado do cliente e o lado do servidor.
Entendendo Módulos em JavaScript
Tags: javascript, beginners
Published: 2023-02-07 16:41:51

Imagine que utilizando um código para gerar um aplicativo de listas com nomes, você precise "chamar" uma outra tela que irá guardar o raciocínio de adicção e exclusão das listagens. Como fazer isso, quando ele está separado em outro arquivo? Para isso, fazemos o uso de Módulos. Veremos o que eles são e exemplos de como são utilizados.

Uma das novidades que surgiu na atualização EcmaScript6 foi a criação dos módulos.

Um módulo é apenas um arquivo. Um script é um módulo. Tão simples como isso.

Os módulos podem carregar uns aos outros e usar diretivas especiais exporte importpara trocar funcionalidade, chamar funções de um módulo de outro. Eles são uma forma de organizar o código em pequenas partes reutilizáveis e encapsuladas.

Exemplo: 


```
// 📁 sayHi.js
export function sayHi(user) {
  alert(`Hello, ${user}!`);
}
```


Há duas formas principais de se trabalhar com módulos em JavaScript: CommonJS e ECMAScript Modules (ES Modules).

**CommonJS -**

O CommonJS é um padrão que foi criado para ser usado no desenvolvimento de aplicações server-side com Node.js

```
// arquivo "module1.js"
const message = "Este é um exemplo de módulo CommonJS";

module.exports = message;

// arquivo "app.js"
const message = require("./module1");

console.log(message);
```

**ECMAScript Modules**

Já o Ecma módulo, é utilizado no JavaScript para a maior parte dos navegadores, o foco desse artigo.

```
// arquivo "module2.js"
export const message = "Este é um exemplo de módulo ES Modules";

// arquivo "app.js"
import { message } from "./module2";

console.log(message);
```


Com isso, vimos que os módulos em JavaScript são uma ótima maneira de organizar o código em pequenas partes reutilizáveis e mantê-lo limpo e fácil de gerenciar. Além disso, eles permitem que você importe e exporte facilmente funções, objetos e valores entre arquivos, tornando o desenvolvimento mais fácil e eficiente. Se você ainda não está usando módulos em seu código, é uma boa ideia começar a fazê-lo agora.
python pdf to jpeg GUI
Published: 2023-02-07 16:35:19

from tkinter import *
from tkinter import ttk
from tkinter import filedialog
import pypdfium2 as pdfium

root = Tk()
root.title('King PDF')
root.geometry('500x300+600+300')
root.config(bg='#F4F6F6')
root.resizable(0,0)
root.columnconfigure(0,weight=1)#set all content in center.


def save_file():
global save_image
save_image = filedialog.asksaveasfilename(filetypes=[('JPEG files','*.JPEG')])


def select_file():
global openpdf
openpdf = filedialog.askopenfilenames(initialdir = "/",
filetypes = [('pdf files','*.pdf')])


def PDFTOJPEG():
pdf = pdfium.PdfDocument(save_file)
n_pages = len(pdf)
for page_number in range(n_pages):
page = pdf.get_page(page_number)
pil_image = page.render_topil(

scale = 300/72,  # 600dpi resolution
greyscale=False,
optimise_mode=pdfium.OptimiseMode.NONE,
    )
pil_image.save(f"image_{page_number+1}.JPEG", quality=100)

#######################################
#Knowing that I want combo boxes to change quality as well like this
#scale = 300/72,  # 600dpi resolution
#scale = 600/72,  # 600dpi resolution
#scale = 900/72,  # 600dpi resolution
#scale = 1000/72,  # 600dpi resolution

#btn select_file
btnopenpdf = Button(root, text='Choose File',activebackground='#2b99be',borderwidth=1,width=15,bd=0,font=('Arial' ,15 , 'bold'),bg = '#248aa2',fg = '#2b99be',cursor='hand2',command=select_file)
btnopenpdf.place(x=270, y=150)
btnopenpdf.config(background='#abdbe3')


btnsavepdf = Button(root, text='Choose Save',activebackground='#CA6F1E',borderwidth=1,width=15,bd=0,font=('Arial' ,15 , 'bold'),bg = '#248aa2',fg = '#CA6F1E',cursor='hand2',command=save_file)
btnsavepdf.place(x=90, y=150)
btnsavepdf.config(background='#eab676')

#btnConvert
btnConvert = Button(root, text='Start Convert',activebackground='#16A085',borderwidth=1,width=15,bd=0,font=('Arial' ,15 , 'bold'),bg = '#248aa2',fg = '#16A085',cursor='hand2',command=PDFTOJPEG)
btnConvert.place(x=170, y=200)
btnConvert.config(background='#9FE2BF')

root.mainloop()
Let's Get Moving!
Tags: webdev, rails, beginners, jobhunt
Published: 2023-02-07 16:30:05

I have made it! Completed my bootcamp and feel really well versed in Rails. Now it is on to the next stage of my master plan...the job hunt!

Now I'm not going to lie. I am absolutely terrified about the rejections that are inevitable. But I am really excited about all the connections that I am going to make. 

#### What the heck is the game plan?!
So far I am going on HackerRank and on Turing to keep my skills up and building projects. I actually landed my first contract job yesterday and am so excited to build my first paid backend!

Next I am going to work on my networking and really trying to find the jobs that suit me. I want to find a company the is looking for a developer like me to come a long.

I am really excited for this next phase in my career!
GraphQL Hive - Improvements in Schema Registry
Tags: graphql, graphqlhive
Published: 2023-02-07 16:20:41

> This article was published on Monday, February 6, 2023 by [Kamil Kisiela](https://twitter.com/kamilkisiela) @ [The Guild Blog](https://the-guild.dev/)

We are excited to announce the implementation of a new and improved schema registry model. This new
model is designed to provide you with a **more optimized workflow** and an **improved user
experience**.

It is important to note that access to **the old schema registry model will be discontinued in a few
months' time**. We strongly recommend that you switch to the modern model as soon as possible to
take advantage of its many benefits.

<Callout type="info">The steps to switch can be found in the settings of your project.</Callout>

In comparison to the old model, the new model has superior defaults, follows best practices, and has
a streamlined workflow. A comparison table available in the settings of your projects will help you
understand the differences between the two models.

![](https://the-guild.dev/blog-assets/graphql-hive/improvements-in-schema-registry/upgrade-project-sample.png "A preview of the \"Upgrade Project\" section in settings")

One of the most notable improvements in the new model is the **availability of the delete feature**.
With the modern model, you can now delete a schema from the registry with ease. This is a feature
that was not available in the old model.

In conclusion, we are confident that the new schema registry model will provide you with a more
efficient and effective workflow. If you have any questions or concerns about the transition, please
do not hesitate to reach out to us. We are here to assist you every step of the way.
The best way to grown up in Web Development
Published: 2023-02-07 16:15:05

It is very common after finish several intensive course as well as bootcamp believe ourselves ready to begin our laboral carrier as a web developer, sometimes it is possible but the most times we found with the merciless reality we barely that we have the basics knowledge to achieve.

By the previous reasons described and another more it arrive us the question, If i have already finish the necessary courses and/or get the context what is the next thing to get that first job?

The answer my friends is simple, build personal projects with the technologies you have learned.


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

In my personal experience i started with the basics (Html, CSS, JavaScrip, PHP and JQuery), i build some things with these technologies such as: Forms to save employee information, statics web pages and more.

Beyond this i started to know-how about bundle and on that meaning I got a lot of context about the WebPack tool, thanks to that and that another learned previously (Html, CSS, PHP and JavaScript) I could build my first project that manage statics as well as save and render information from a MySQL DataBase this project is [Autos Bello](https://autosbellodealer.com/)


Actually i Have added such knowledge with the most know Library to build User Interfaces (UI) with JavaScript [ReactJs](https://reactjs.org/) with this I could build another project which was about a company who sell agricultural products, [Ekofarming](https://ekofarming.net/)

With this little summary that have been my experience in the continuos learning process there are more than evidences that for to keep growing up the answer is Building Personal Projects, currently i am developing until now, the biggest open source project with my current abilities i could build, in which i am using these technologies and/or tools.

- [ExpresJs](https://ekofarming.net/)
- [Ant Design](https://ant.design/)
- [NodeJs](https://nodejs.org/)

I invite you to see more of my works in my [GitHub profile](https://github.com/pcabreram1234).
How to update object key in useState
Tags: javascript, usestate, nextjs
Published: 2023-02-07 16:09:00

To update an object key in the state select the key and assign its value to that state

```
    onClick={(e) =>
            setBooks((prev) => ({
              ...prev,
              physics: e.target.value,
            }))
          }
```
[read more](https://frontendzone.com/blog/how-to-set-object-key-in-usestate-react-state-hook-with-the-object-and-array)
The truth about CSS selector performance
Tags: link, devtools, edge, performance
Published: 2023-08-21 21:01:18

---
title: The truth about CSS selector performance
published: true
date: 2023-02-07 15:59:35 UTC
tags: Link,DevTools,edge,performance
canonical_url: https://css-tricks.com/the-truth-about-css-selector-performance/
---

Geez, leave it to [Patrick Brosset to talk CSS performance](https://blogs.windows.com/msedgedev/2023/01/17/the-truth-about-css-selector-performance/) in the most approachable and practical way possible. Not that CSS is always [what’s gunking up the speed](https://csswizardry.com/2022/09/critical-css-not-so-fast/), or even the lowest hanging fruit when it comes to improving performance.

But _if_ you’re looking for gains on the CSS side of things, Patrick has a nice way of sniffing out your most expensive selectors using Edge DevTools:

- Crack open DevTools.
- Head to the Performance Tab.
- Make sure you have the “Enable advanced rendering instrumentation” option enabled. This tripped me up in the process.
- Record a page load.
- Open up the “Bottom-Up” tab in the report.
- Check out your the size of your recalculated styles.

![DevTools with Performance tab open and a summary of events.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2023/01/Screenshot-2023-01-24-at-9.32.16-AM.png?resize=2334%2C1600&ssl=1)

From here, click on one of the Recalculated Style events in the Main waterfall view and you’ll get a new “Selector Stats” tab. Look at all that gooey goodness!

![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2023/01/Screenshot-2023-01-24-at-9.37.15-AM.png?resize=2334%2C1728&ssl=1)

Now you see all of the selectors that were processed and they can be sorted by how long they took, how many times they matched, the number of matching attempts, and something called “fast reject count” which [I learned](https://microsoftedge.github.io/DevTools/explainers/StyleTracing/explainer.html) is the number of elements that were easy and quick to eliminate from matching.

A lot of insights here if CSS is really the bottleneck that needs investigating. But read Patrick’s full post over on the Microsoft Edge Blog because he goes much deeper into the why’s and how’s, and walks through an entire case study.

[To Shared Link](https://blogs.windows.com/msedgedev/2023/01/17/the-truth-about-css-selector-performance/) — [Permalink on CSS-Tricks](https://css-tricks.com/the-truth-about-css-selector-performance/)

* * *

<small><a rel="nofollow" href="https://css-tricks.com/the-truth-about-css-selector-performance/">The truth about CSS selector performance</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</small>