teleren/devto huggingface dataset:
All In One, NextJs Blog Template🏠
Tags: beginners, nextjs, opensource, showdev
Published: 2022-08-04 03:25:00


# Introducing Projects 😃

> Visit [Next Your Home Guide](https://next-your-home-guide.vercel.app), built with this template!


## Inspiration 🧐

I always think that writing is the best practice to fully absorb knowledge. But it was always difficult to make writing a habit. In order to make good writing habits, I thought making the best environment for writing is first. 

After a long time of effort, I was able to create the blog environment that I wanted.

> Easy to start, Reliable, Rich Feature and Fast Blog!

## Demo of project 🎉

![dark-theme main page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/38n9hp9qnhvj5x2c3kbk.png)

![dark-theme mobile page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8j2taw8kosfp5792516z.png)

I'm very happy about result of blog 🙂

## Goal of project ✅

### Tech 🛠

1. Create a blog that anyone who's experienced development can start regardless of their skills.
2. Performance and Maintenance.
3. Add the features that are not supported on existing writing platforms.

### Design 🏛

1. Taking off the consistent design that pursues simplicity and create different feelings.
2. Content-Focused design
3. Separates profiles into their own pages.
4. Reduce fatigue by improving text access through pagination and reducing vertical scrolls.
5. Categories, Series, and Tag based navigation.
6. Easy to navigate posts
7. Selectable Colors
8. Familiar blogging UX

## How it was built ⚙️

1. language 📜: `typescript` 
2. framework 📦: `NextJs`
3. styling 💅: `styled-components`
4. markup 📒: `mdx`

## Rich Feature List 🏖

1. `Light`/`Dark` mode full support
2. Integrate Profile with full feature of `mdx`
3. Table of content on `desktop`/`mobile`
4. Image optimization with `next/image`
5. Automatic image size support for `static`/`external`
6. Automatic pagination
7. Recover scroll position when navigating to previous page
8. Analyze visitors with `Google Analytics`! Run it on the `partytown🎉` thread and get the performance [(partytown 🔎)](https://partytown.builder.io)
9. Support `sitemap`, `rss` generation on build
10. Math `katex` support (optional)
11. Automatic post refreshing in `dev` mode
12. Specific `error` informations about blog posts
13. Decent `code` block with code copy `button`

etc...


# How to Start? 🙌

Visit [GitHub repo](https://github.com/danpacho/next-your-home) or Click the [Next your home guide](https://next-your-home-guide.vercel.app) to start your writing journey!

I wrote down the kind explanation from start to finish!

# Thank you for reading! 

I hope it is useful for the blog starter😃
Renovação de Matrícula 2022.2
Tags: ifba, matricula, renovacao
Published: 2022-08-04 03:23:28

Já está disponível a renovação de matrícula para o semestre de 2022.2 para os cursos subsequentes e superiores do IFBA de Vitória da Conquista-BA. Ela estará diponível entre os dias 04 e 07 de agosto de 2022 e para realização basta acessar a plataforma do [SUAP](https://suap.ifba.edu.br/) clicar em "faça sua matrícula online". O sistema solicitará uma atualização dos dados cadastrais antes da matrícula.
Caso queira consultar a lista de matérias disponíveis para este semestre, basta a acessar a [Lista de Horários 2022.2](https://docs.google.com/spreadsheets/d/1CSP2PIXjvxz45IFtlpKIbj4RK0xkyS4ZUdChLXO20jc/edit#gid=2115886481).
¿Por qué los errores de software se denominan "bugs"?
Published: 2022-08-04 03:10:00

El uso del término "bug" para describir problemas con el software es ahora común y se utiliza tanto en contextos técnicos como no técnicos. ¿Cuáles son los orígenes del término?, ¿Se refiere a un insecto real?, Comprobemos algunos hechos históricos.

Thomas Edison
=============

El término "bug" en el software se deriva del término en Inglés para referirse a un insecto. El primer uso registrado del término "bug" para describir un problema con una máquina fue en 1878, cuando Thomas Edison lo utilizó para describir un problema con uno de sus fonógrafos.

Radioingeniería
===============

El término "bug" también se utilizó para describir problemas con dispositivos mecánicos en los primeros días de la radio. En un artículo publicado en las Actas del Instituto de Ingenieros de Radio en junio de 1920, E. J. Stone describió un problema con un receptor causado por un "bicho" en el cableado.

**Grace Hopper**
================

En 1946, cuando Hopper trabajaba en el ordenador electromecánico **`Harvard Mark II`**, los operadores rastrearon un error a una polilla atrapada en un relé, acuñando el término "*bug".* Este bug fue cuidadosamente retirado y pegado en el libro de registro. Este cuaderno de bitácora, con la polilla adherida, forma parte de la colección del Museo Nacional de Historia Americana del Smithsonian.

![Página original del registro del Mark II.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0kuujld01ewufbqcmcuj.jpg)

**John McCarthy**
=================

En un artículo publicado en el Boletín del Centro de Computación de la Universidad de Harvard en octubre de 1947, John McCarthy, el padre de la inteligencia artificial, describió un problema con un programa informático como un "bug".

Esperamos que estos hechos históricos le recuerden que la terminología del software es interesante porque está en constante cambio y evolución. A medida que se crea nuevo software, nace nueva terminología.

Lee esta publicación en Art Of Code: https://es.artofcode.tech/por-que-los-errores-de-software-se-denominan-bugs/
Knowing Which approach to take to Complete a Task...Keeping track of Similar Functionality
Tags: javascript, css
Published: 2022-08-04 02:52:00

Hello everyone!

One of the things that makes it hard to truly master any language/functionality is the fact there are usually multiple ways to accomplish any given task. 

Call me old-fashioned, but when I learn, I like to know all the different ways to accomplish the same task so that I can choose the best way for a situation. The problem is, in coding, presenting all those ways at the same time is confusing and overwhelming to the coder. Thus, you get different approaches in a piecemeal, often random fashion. And you typically only get the syntax, and not necessarily the logic, behind each approach.

It can be confusing to remember all the different ways you might choose, so unfortunately you fall into patterns of using only a few ways you're comfortable with - even though there may be newer or more efficient ways to do the task. Many times this happens because you have no organized listing of those different ways.

I've finally reached the point where I feel I can handle the full list of some kinds of tasks, at least in vanilla JS...like looping.

So I'm now on the lookout for articles which compile **in one spot **such multiple methods for various tasks. Thus, I'm building out a reference library that minimizes my search time. Below are links that I've found so far. Hope this helps you out!

CSS Centering: **How to Center a Div with CSS – 10 Different Ways**
https://www.freecodecamp.org/news/how-to-center-a-div-with-css-10-different-ways/

Javascript: 
1. **15 Common Operations on Arrays in JavaScript (Cheatsheet)**
https://dmitripavlutin.com/operations-on-arrays-javascript/

2.**All you need to know about arrays in JavaScript** (Thank you, MAYANK TYAGI)
https://dev.to/tmayank860/all-you-need-to-know-about-arrays-in-javascript-1nb7

3. **Learn JavaScript Loops 101**
https://blog.teamtreehouse.com/javascript-loops-101

4. **The Comprehensive List of JavaScript String Methods (Part 1)**
https://betterprogramming.pub/full-list-of-javascript-string-methods-part-1-ddad113de018

5. **The Comprehensive List of JavaScript String Methods (Part 2)**
https://levelup.gitconnected.com/full-list-of-javascript-string-methods-part-2-259b70ccc7e7
Information Architecture in UX Design
Published: 2022-08-04 02:47:54

In this 4-minute article is an introduction to Information Architecture.

**Information architecture** is the science of organizing information in digital products. 

This is a crucial step in design , you don't want to give users a hard-time navigating your application or website, because there are studies showing most users bounce off a page in less than 10 seconds that don't seem relevant.

![Graph of user retention in Website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y7k7a42d489kr8567ulk.png)

So what are the steps to better information architecture?

An Understanding in Cognitive psychology is a great foundation. **Cognitive psychology** studies the mental activities and perceptions that influence us. 

A core factor information architects use to organize information within their products.

Simply put _the mind is an information processor_ on its own and with cognitive psychology there are a lot of factors that to that influence what we do. 

Here are a few factors:

##Mental Models
Mental Models are assumptions people have in their minds before they interact with a product.A clear translation would be,Information Architects placing information where a user is likely to find it.

This proves useful especially for call to action buttons. Sometimes our designs can hinder a user from accessing information , no matter how pleasant the UI is.

##Cognitive Load 
What is 234 multiplied with 443? Yeah, That's cognitive load.

Some products have too much going on, information displayed in overloads, Bright and contrasting colors are used or four different sets of typography.

This is Cognitive load, the brainpower to be used to process 
information. Having a minimalist design is powerful in communicating to users.

Using cognitive psychology information architects spend their time designing the content structure around users.

The Duties of an Information Architect includes:

- **Conducting User Interviews** - to ask questions related to product designing, what the user likes and dislikes. A user is generally one of the many personas your building for.

- **Card sorting and tree testing sessions** - seeing how different users are able to categorize information.

- **Contextual inquiries** - UX architects observe how users interact with real life products.

- Content inventory, content grouping and content audits - which is what a good understanding of the content that the product offers.

- **Taxonomies and Labeling** - is classifying items based on similarities.

- **Prototyping** - Information architects also create simple , low-fidelity prototypes to demonstrate the hierarchy of information and navigation.

### Conclusion
A summary of Information Architecture is that it allows great content to be displayed in with easy accessibility, this is the backbone in any Application or Website.
CSS Battle: #12 - Wiggly Moustache
Tags: css, webdev, beginners, tutorial
Published: 2022-08-04 02:32:35



In this article, I will solve a [Wiggly Moustache](https://cssbattle.dev/play/12) CSS Challenge on [CSS Battle](https://cssbattle.dev). Let's look at the problem first.

## Problem 

We need to create the following container by using CSS Properties only:
![Wiggly Moustache](https://cssbattle.dev/targets/12.png)

## Solution

So now look at the Solution and how we are going to achieve this. 

{% youtube https://youtu.be/aPAFEA5QQ9c %}

### HTML


```html
<p l>
<p m>  
<p r>  
<p d>  
```

- `<p l>` : For left Semicircle
- `<p m>` : For Center Semicircle
- `<p r>` : For Right Semicircle
- `<p d>` : For Circular Dots

### CSS

Now let's style the containers. 

```css
body {
  margin: 0;
  background: #f5d6b4;
}
p {
  position: fixed;
}

[l], [m], [r] {
  width: 60;
  height: 30;
  border: 20px solid #d86f45;
  border-radius: 0 0 1in 1in;
  border-top: 0;
  bottom: 85;
}
[l] { left: 70 }
[r] { right: 70 }
[m] {
  transform: scaleY(-1);
  bottom: 135;
  left: 150;
}
[d] {
  width: 20;
  height: 20;
  background: #d86f45;
  border-radius: 1in;
  left: 70;
  bottom: 124;
  box-shadow: 240px 0 #d86f45;
}
```

>*Note: In CSS Battle you can use `100` instead of `100px`. You don't need to define `px` in CSS. However, if you are using `rem` or `%`, you need to pass them separately. That's why in the above CSS code there are no units mostly. For more info [visit here](https://cssbattle.dev/tips)*

>*Minify the code or CSS by using any [CSS Minifier](https://www.minifier.org/). It helps you to reduce the characters in the code which will increase the score.*

**Minified Version:**
```
<p l><p m><p r><p d><style>body{margin:0;background:#F5D6B4}p{position:fixed}[l],[m],[r]{width:60;height:30;border:20px solid #D86F45;border-radius:0 0 1in 1in;border-top:0;bottom:85}[l]{left:70}[r]{right:70}[m]{transform:scaleY(-1);bottom:135;left:150}[d]{width:20;height:20;background:#D86F45;border-radius:1in;left:70;bottom:124;box-shadow:240px 0 #D86F45}
```

### Wrapping up
There are many ways to solve this. You can share your approach in the comments. If you like this then don't forget to ❤️ it. And I'll see you in the next article. See you soon.
How To Choose a Good Course ?
Published: 2022-08-04 01:37:00

While It is Known that we Are Living in the Age Of "Online-Learning" and Information Age , There is still a Lack and Shortage or Good Resources for Real Learning , So Without too much Talking here is my Tips : 

**1-Avoid Courses With Big Titles : **

- Yes , Any Course that will Teach you in 24 Minutes Or will Teach you to be a "Guru" will end you up with Depression and False info about How the Learning Process Goes ! 

**2-Avoid Creators Who Create Courses about Everything : **

- Yes , I saw Many Creators Make Courses about anything and Everything , Imagine Someone Who is teaching German and Italian and French and All Babel Languages ! 
This Type of People Mainly take this Courses Thing as a source of "Passive and Easy to Earn income " 

**3-Watch intro and try to Make an Investigation like an FBI agent : **

- And Don't forget to read the Negative reviews about it  .

**4-Read Reviews and Search , But don't trust : **

- Since many are there just as affiliate links or a Cheap advertisement . 

**5-Try to Get a New Fresh One But not always : **

- Many of the Best Courses i have taken were really Old "But Gold" , And Because they were great i gained good info and understanding to keep up with newer parts "For example Angela Yu Flutter Course Is Old , but It was so Great that i could overcome obstacles that i found " But In bad Courses Once you Get stuck you will find out how shallow info you got ! 
Thanks for Reading :)
Run YARD as RSpec
Tags: ruby, rspec, yard
Published: 2022-08-04 01:45:51

---
title: Run YARD as RSpec
published: true
tags: 
    - ruby
    - rspec
    - yard
---

Let me introduce [yardspec](https://github.com/r7kamura/yardspec) in this article.

yardspec is a Ruby gem that supports executing YARD documentation `@example`s as RSpec examples.

```ruby
module Foo
  class Bar
    # @example returns "baz"
    #   expect(Foo::Bar.new.baz).to eq('baz')
    #
    # @example returns "bazbaz" for count 2
    #   expect(Foo::Bar.new.baz(count: 2)).to eq('bazbaz')
    #
    # @return [String]
    def baz(count: 1)
      'baz' * count
    end
  end
end
```

It interprets the documentation examples above as the following RSpec examples:

```ruby
RSpec.describe 'Foo::Bar#baz' do
  it 'returns "baz"' do
    expect(Foo::Bar.new.baz).to eq('baz')
  end

  it 'returns "bazbaz" for count 2' do
    expect(Foo::Bar.new.baz(count: 2)).to eq('bazbaz')
  end
end
```

and running RSpec as follows will automatically test them.

```
$ bundle exec rspec

Foo::Bar#baz
  returns "baz"
  returns "bazbaz" for count 2

Finished in 0.00129 seconds (files took 0.087 seconds to load)
2 examples, 0 failures
```

As you may have noticed, this is the doctest concept from Rust, Python, Elixir, etc, dropped into RSpec and YARD for Ruby.

It is often helpful to include example code in your documentation and demonstrate the results of executing them. But it is important to ensure that the documentation stays up-to-date with the code.

That is the purpose for which yardspec was created. By writing example code that actually works, users can read it with confidence and try it out for themselves.

## Further reading

- https://github.com/r7kamura/yardspec
    - yardspec source code
- https://www.rubydoc.info/gems/yard/file/docs/Tags.md#example
    - YARD `@example` tag
- https://doc.rust-lang.org/rustdoc/write-documentation/documentation-tests.html
    - Rust doctest
Javascript Tagalog - Arrays
Tags: javascript, tagalog, array, filipino
Published: 2022-08-04 01:36:26

**Ano ngaba ang "Array" sa javascript?**

Ang mga array ay parang collection lang ng mga iba't ibang klase ng values or expression, as in yun lang talaga ibig sabihin ng array dina kailangan mag overthink.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oqoa0huuhffgmyv2a1ql.PNG)
pag tinignan mo ng maayos tong pic nato mas maiintindihan mo

---

**Pano kunin mga values sa array?**
pwede mo kunin mga values ng array using indexes na nag s-start sa [0]

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

so if gusto mo i store yung value lalagay molang is
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5k8wjxa4l82r3xyt9mzx.PNG)

Maraming pwedeng gawin sa array and isa sa mga importanteng data structures ng programming in general, eto lang yung mga basics. kung gusto mo matuto pa eto yung mas in depth documentation

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

---

More tagalog Javascript Resources:
https://javascript-in-tagalog.netlify.app
Keep trying until you get it
Tags: beginners, sass, css, codenewbie
Published: 2022-08-04 01:25:35

I felt the need to come here and make a post because the most incredible breakthrough just happened for me. I started building my first portfolio project(only HTML & SASS) about three weeks ago. 

I did my basic reset and made a basic animation nav bar in the first hour, so I was flying pretty high. Then I ran into a set-back using flex-box for the hero section. The h1, and paragraph in the first column were shrunk vertically and it frustrated me to no end. I thought this would be a quick 5 minute fix.

I went over my flex-box course thinking it had to do with a property I was mis-using, tried everything I could think of over the last three weeks. Tonight I saw that I had the line-height set to 1.2rem for h1 elements instead of just 1.2. Fixed it right up and now the landing page is almost complete. 

It was immensely frustrating, but even more rewarding.
Never give up.
[Desafio] - Comunicação In-Process
Published: 2022-08-03 22:56:29

> Conteúdo original [nesse tweet](https://twitter.com/zanfranceschi/status/1554963628616400898)

---

Ei dev,

A gente tá acostumado a trabalhar com comunicação inter-process (entre processos via http/tcp, p. ex.). E comunicação in-process (ou inter-threads), você manja?

Independente da sua resposta, quero ver se você tem coragem de aceitar esse desafio! 🤭

cc @sseraphini

↓

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

---

A lógica do desafio é simples e são duas partes:

1. Crie um endpoint que receba uma requisição qualquer, enfileire essa requisição numa fila em memória por exemplo, e retorne um HTTP 202/Accepted.

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

---

2. Na segunda parte, crie um componente (objeto, função, etc.) que ouça as requisições nessa mesma fila (um singleton talvez?) e faça algum processamento. O processamento é o de menos – o importante é a comunicação ser in-process.

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

---

O desafio aqui é usar o mesmo processo, explorar alguns cenários e possibilidades com a comunicação in-process, tá?

Se você preferir, pode usar comunicação in-process via loopback também (o famoso localhost). Suave?

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

---

E é esse o desafio!

Se você curtiu, dá aquela força, vai? Comenta, dá um retweet no primeiro tweet, like...

Ah, e se você for da hora mesmo, cria um repositório no git e compartilha com a gente a sua solução!

Valeu demais pela moral! ❤️
10 most common git errors, and how to fix them
Tags: git, beginners
Published: 2022-08-04 00:38:00


**Here's an unrequested golden tip: pratice git everyday!**

## 1. I need to undone my pushed commit on local

Solution: 

If you have not pushed your commit yet, you can simply undo it by resetting your HEAD to the previous commit:

`git reset HEAD~
`
If you have already pushed your commit, you can undo it by reverting to the previous commit:

`git revert HEAD
`
## 2. I accidentally committed something to the wrong branch

Solution:

You can either reset your HEAD to the previous commit or Cherry-pick the commit from the wrong branch and apply it to the correct branch.

## 3. I made a mistake in my last commit

Solution:

You can either `reset` your HEAD to the previous commit or `amend` your last commit with the correct changes.


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

## 4. I accidentally deleted a file

Solution:

You can either `reset` your HEAD to the previous commit or use `git checkout` to restore the deleted file from the last commit.

## 5. I accidentally deleted a branch

Solution:

You can use `git checkout` to create a new branch with the same commits as the deleted branch.

## 6. I accidentally erase a file from my branch

Solution:

If you have not pushed your branch yet, you can simply restore the file from the last commit.

If you have already pushed your branch, you can either `reset` your HEAD to the previous commit or use `git checkout` to restore the file from the last commit.

## 7. I want to merge two branches, but I don't want to commit all the changes

Solution:

You can use `git cherry-pick` to pick the commits you want to merge from one branch to another.

[Learn more about cherry-pick here](https://git-scm.com/docs/git-cherry-pick)

## 8. I want to rebase my branch, but I don't want to lose my changes

Solution:

You can use `git stash` to save your changes, rebase your branch, and then apply your changes with `git stash pop`.

## 9. I want to rebase my branch, but I don't want to conflict with other branches

Solution:

You can use `git rebase -i` to interactively rebase your branch and resolve any conflicts before pushing your changes.

## 10. I want to reset my branch, but I don't want to lose my changes

Solution:

You can use `git stash` to save your changes, reset your branch, and then apply your changes with git stash pop.
S1E02: Kubernetes Networking Series
Tags: kubernetes, networking
Published: 2022-08-04 00:30:00

Sharing below the video edition of the [article](https://sanjimoh.medium.com/kubernetes-secret-recipe-8d03892b27ae) around the Pause Container!

Hope you find this as useful as the original article!

{% youtube _zaXlOr2oI4 %}
S1E01: Kubernetes Networking Series
Tags: kubernetes, networking
Published: 2022-08-04 00:28:00

Sharing below the video edition of the [article](https://sanjimoh.medium.com/demystifying-kubernetes-{% embed  %}networking-episode-1-ca5605a97f87) around the Linux network namespace!

Hope you find this as useful as the original article!

{% youtube MwzOdqO0Pbg %}