teleren/devto huggingface dataset:
Adding tests for my static site generator using Jest
Tags: javascript, testing, beginners
Published: 2021-11-12 17:56:31

## Introduction
Hello everyone, my name is Dustin. Today, I wanted to talk about testing in **nodejs** project. This is literally one of my first time writing tests using Jest library. 

## Reason
Testing is very important when it comes to a good project. Either your project is small or big, testing should always be important and be paid attention as no developers can cover every potential error or bug. When the project grows, more and more code will be added not only by you but other developers, it is very easy to break things. A new added function seems to work perfectly itself but bringing it to the project is another different story as it involves other factors and sometimes it will break other people's code. However, testing will take care of that as it will help developers fully run the project with every edge cases, and even good cases.

## Experience
At the beginning, I didn't think that it would take much of the time as it looks very simple and easy to write. But when I started write the very first one, I was like *what should I test with this code?*

Testing is not way too difficult but it has its own challenges. For example, writing a feature in nodejs just takes 15 mins and 30 lines of code, however, writing testings for that feature will take 2 to 3 times that amount, or more. Testing doesn't require much of researching but a lot of thinking to make sure that I've covered enough cases. More testings can be added later when I discover a case that can break your code. I haven't got a chance to finish my testing code but I'll try my best to add more testings for my project.

As I have around 6 classes, so I'll have 5 to 6 testing files. There's a class that has 2 functions that call an external library, so I don't need to add testings for that class.

However, there' still a few errors with my testing code as it generates some warnings while testing and I have not done with my e2e testing part. 

## How to test
Testing the project is easy and can be done by using `npm test` to run all the tests, or `npm test e2e` to just run end-to-end testing.  

[The project can be found here](https://github.com/tuanthanh2067/cv-ssg)
Flowbite - open source component library built with Tailwind CSS
Tags: showdev, opensource, tailwindcss, webdev
Published: 2021-11-12 17:50:35

Hello DEV community 👋

I just wanted to let you know that I helped build an [open source component library](https://github.com/themesberg/flowbite) built with the utility classes from Tailwind CSS.

![Flowbite Github repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/91gqecaupx5lgwbgmf5b.png)

I believe that it's an important and useful project for those have been using Tailwind CSS as it can give you a pretty solid foundation when you want to build websites.

I love the utility classes from Tailwind CSS, but the lack of components makes building websites a bit slower in some ways compared to Bootstrap or Bulma.

With Flowbite you get the best of two worlds: flexibility of using the utility classes but also a set of components to quickly get started.

The project is open source under the MIT license and you can [check it out on Github](https://github.com/themesberg/flowbite).

If you appreciate the project, a lucky star would be very welcome! 🤗
The only Media Queries Cheatsheet you'll need
Tags: css, beginners, javascript, programming
Published: 2021-11-12 17:40:05

You learnt about media queries but now you're thinking how do I implement them, there are so many devices that it's practically impossible for someone to write media queries for each and every device.

There is a common observation that a certain type of device has a particular range and we can easily implement media queries in this range rather than making it device specific.

Let's take a look into what these groups are

## 1️⃣ Mobile Devices

The general width of any mobile device ranges from 320px-480px, 

you can set the minimum to be 320px and max to be 480px. This is how I like to write breakpoints for my media queries
![Mobile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0w67m76myzo57nrc7imc.png)

## 2️⃣ iPads and Tablets

The general width of any tablets ranges from 481px-768px, 

There are cases when the tablet is being used in landscape mode instead of portrait mode, but that dimensions are covered by laptop breakpoints

This is how I write breakpoints
 ![iPads](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ocx6ifk3siasykiwt8t.png)

## 3️⃣ Laptops

The general width of any laptop ranges from 769px-1024px, 

This is how I write breakpoints
 ![Laptop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kjdr3um5g2h5bibyabfa.png)

## 4️⃣ Desktops and Larger Screens

The general width of any laptop ranges from 1025px-1200px, 

This is how I write breakpoints
 ![Desktop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8gpb5b1hlih85m3xj5pc.png)

## 5️⃣ Desktops and Larger Screens

The general width of any laptop ranges from 1025px-1200px, 

This is how I write breakpoints
 ![Extra large](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5wxmm8agolwvpugxf73y.png)

### TL;DR

- Mobile Devices (320-480px)
- Tablets (481-768px)
- Laptops (769-1024px)
- Desktops (1025px- 1200px)
- TVs (1200px and further)

Thank you for reading this blog post. Do leave your reviews in the replies, I would love to hear them 🧡
Tips to improve your django skills - part 1
Tags: django, programming, python, beginners
Published: 2021-11-12 17:40:05

## makemigrations and then sqlmigrate

I only now discovered sqlmigrate and regret not having known about it    before. sqlmigrate prints the SQL for your migrations, so run a fast    sqlmigrate after creating a new migration. Very often, you will see    that this migration is not performing any SQL migrations; for    example, if you change a field, you will frequently get the following    sqlmigrate output:

    BEGIN;  
    --  
    -- Alter field name on player  
    --  
    COMMIT;
    
I recommend giving it a shot if you want to learn more about Django migration. You'll quickly figure out which modifications have an impact on your database and which don't. As a consequence, learning SQL on the go is always a good idea.

##  Use time zone and stop using date.today()

Most users don't worry about time zone at the start of a project, so they're content to use datetime.datetime.now() and datetime.date.today() . However, you may eventually encounter strange errors in which certain computations appear to be off by two hours or even a day.

I know what it's like to attempt to correct all these errors by making all your thousands of now() and today() calls time zone aware, because I've had to do it twice for larger applications. You'll most likely have to do them one at a time, and you'll always run into difficulties where adding a time zone later is difficult.

This is readily avoided by just using time zones all of the time. Especially because Django is so wonderful at supporting it. So, don't be frightened, and just support time zones, even if you believe you don't need them. Add the setting USE TZ = True and then always call django.utils.timezone.now() or django.utils.timezone.now().date.

More information about Django's time zones can be found [here](https://docs.djangoproject.com/en/dev/topics/i18n/timezones/):

##  Adding forms to views. py
It is advised that you put all of your forms in a separate `forms.py` file, however since forms are merely a method of styling a view, it makes more sense to put each form at the top of its view. You will be working on the view and the form at the same time, so if your `models.py` becomes too cluttered, you may transfer some of your models into a second model file. That's true, your models don't all have to be in the same file.

This configuration enables you to work on both your form and your view at the same time.

## Closing notes 
Thank you for spending the time to read my blog post! I hope these three tips have aided you in improving your Django work. Please let me know in the comments below whether you found these strategies useful or if you've discovered even better solutions, since I'm really interested in your feedback!

follow me on [github](https://github.com/Snehal0203) and [twitter](https://mobile.twitter.com/SnehalAdbol)
What exactly is IPFS?
Tags: web3, beginners, tutorial, discuss
Published: 2021-11-12 17:37:02

InterPlanetary File System (IPFS) is a term used to describe a peer-to-peer (p2p) distributed file-sharing system for storing and accessing data.

IPFS is one of a few projects that are part of the Protocol Labs Organization, which was also founded by Benet. Inter-Planetary Linked Data (IPLD) and Filecoin are two Protocol Labs projects that are closely related to IPFS. The IPLD data model is a data model for distributed data structures such as blockchains. This model makes it simple to store and access blockchain data via IPFS. Users who store data on IPFS will be rewarded with Filecoin.

### How does IPFS work?

Let's imagine you just uploaded some content to IPFS. That content will then be split up into small pieces of data, the data is then given a certain unique fingerprint called a cryptographic hash.

When multiple people upload the same content to IPFS, it will only be created once and that makes the network very efficient.

Also when you need to look up content to view or download on IPFS you don't need to remember the hash assigned to that content, every content on IPFS can be found using Inter-Planetary Naming System (IPNS), a human-readable decentralized naming system for IPFS.

### Why use IPFS?

The internet as it is today is built on technologies like Hypertext Transfer Protocol (HTTP), Domain Name System (DNS), and the way it works is by looking up IP addresses and forwarding the content from the IP address, This is called location-based addressing.

When a user searches for a website, let's say [amazon.com](http://amazon.com) for instance the user is trusting that whatever is located at that server to be the content that they want and that could be a problem because theirs nothing stopping the content from changing without the user doing anything about it.

Another problem is that when there's only one source of content it creates constriction and centralization. On the contrary, IPFS uses content-based addressing. So when a user is requesting a piece of data it retrieves the content and not the location of that content which is more efficient. This really makes the web a lot more robust and protected.

### Conclusion

Software developers are currently moving to decentralized data networks as a way to build new models around data ownership and to develop a better internet.

This article is just an introduction to IPFS, there's still a lot to know about this wonderful technology. If you want to know more you can check out their [website](https://ipfs.io/).
Introdução ao desenvolvimento de layouts em iOS
Tags: ios, autolayout, swiftui, layout
Published: 2021-11-12 17:29:13

Olá, mundo!

Dizem que para começar uma nova linguagem de programação você sempre precisa imprimir o "olá, mundo!" para ser bom nessa linguagem. Então, esse é o meu olá mundo de posts aqui na plataforma e na comunidade de iOS como um todo.

O foco dos meus posts vai ser em português para difundir ainda mais o assunto aqui no Brasil.

Essa semana eu fiz uma apresentação onde trabalho sobre as diferentes formas que temos para criar layouts em iOS. Podemos fazer através de:

- Storyboards
- XIBs
- ViewCode
- SwiftUI

Vale notar que Storyboards, XIBs e ViewCode utilizam **AutoLayout** para construir as telas (fazem uso de constraints para tal) e SwiftUI é uma outra forma diferente construir telas.

## Storyboards

![Descrição de Storyboards](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/abd8czvizpjoh2p3d01s.jpeg)

Aqui tem um exemplo de como é a Storyboard no Xcode

![Exemplo de Storyboards](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qixbi0xlnq4015ruzcub.jpeg)

## XIBs

![Descrição de XIBs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cx428nz0j54fnjgxq8oi.jpeg)

Aqui tem um exemplo de como é a XIB no Xcode, note que é bem semelhante ao Storyboard

![Exemplo de XIBs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3g06uc0cvea51ndgu92f.jpeg)
 
## ViewCode

![Descrição de ViewCode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ku0g1vh5b4k4rts7haf.jpeg)

As Storyboards e XIBs são, na verdade, arquivos XML gigantes com várias definições e atributos, mas que quando abertos no Xcode são "convertidos" para uma interface amigável.

Diferente desses dois tipos de criação de tela, o outro que temos é o ViewCode, ele recebe esse nome pois não precisamos utilizar nenhuma referência visual da tela. Os desenvolvedores devem escrever todo o código da tela em Swift, tal qual como o exemplo abaixo.

![Exemplo de ViewCode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2t57s1p82oix7i73w531.jpeg)
 
## SwiftUI

![Descrição de SwiftUI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zim4wixd3te307u7an9q.jpeg)

Para o SwiftUI acrescentei um ponto negativo _temporário_ que que se dá por conta da tecnologia ser nova e ainda existir diversos iPhones antigos sem suporte ao iOS 13 ou um mais recente. Como a tendência desse cenário é cada vez menor, eu considero esse um ponto negativo temporário.

![Descrição de SwiftUI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ct23r1ukt55yvg90gyj.jpeg)
 
SwiftUI possui uma sintaxe bem mais simples na hora da criação das telas além de contar com um recurso de _Preview_ que renderiza a tela em "tempo real".

![Exemplo de SwiftUI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t9pbf3pbin4be4b9em8r.jpeg)
 
Por hoje é isso pessoal, mas aproveito e deixo aqui um link para um guia bem introdutório ao mundo iOS com alguns recursos que acho interessante para quem está começando.

[Guia sobre desenvolvimento no mundo iOS](https://igorgcustodio.notion.site/Por-onde-come-ar-em-iOS-d807b7e717e54fa59a6042f211d7718e)
The journey has begun
Tags: cybersecurity, beginners, career, security
Published: 2021-11-12 17:26:45

Finally, I've decided to start studying to build a *new career*.
As we all know, the future will be online. With the growing of metaverses, cryptocurrencies bla bla bla and so on, will be fundamental mastering the internet if you want to survive along the following years. This is the reason I chose to restart again, learning a complete new topic to me: Cybersecurity. 
I'm a professional character animator with a growing interest in tech stuff. I always defined myself as a 'tweaker' and now it's time to move onto a new page.

Ethical Hacking, I'm coming.

Bonobo
proxy with wget 
Published: 2021-11-12 17:09:20

https://askubuntu.com/questions/346649/how-do-i-force-wget-to-use-a-proxy-server-without-modifying-system-files

https://www.thegeekdiary.com/how-to-use-wget-to-download-file-via-proxy/

### follow:
Without modifying your system files at /etc/wgetrc you could create a file at your home directory ~/.wgetrc. It will enable you to modify wget settings locally at user level. Now write the following at ~/.wgetrc to use wget behind a proxy server:
```
use_proxy = on
http_proxy =  http://username:password@proxy.server.address:port/
https_proxy =  http://username:password@proxy.server.address:port/
ftp_proxy =  http://username:password@proxy.server.address:port/
```
If you do not have proxy username and password just write the proxy-address and port everywhere like,
```
http_proxy =  http://proxy.server.address:port/
```
example :
```
export http_proxy=http://110.232.67.44:55443/
export https_proxy=http://110.232.67.44:55443/
export ftp_proxy=http://110.232.67.44:55443/
```
for checking the environement variables you can do :
```
env | grep proxy 

```

This should work. I am assuming you already have proxy settings for all other applications.
How do you like to learn a new language?
Tags: discuss, programming, writing
Published: 2021-11-12 17:07:00

I have noticed there are a couple of different approaches to teaching a new language through online courses:

* **"Traditional"** - each section covers a language feature with some small exercises at the end, similar in flow to college courses.
* **Small Focused Projects** - learn a language feature with a small, focused project that highlights that feature.  Each project is small, and distinct.
* **Large project** - Learn the language by building a large project that incorporates and highlights features throughout.  At the end, you will have something closer to a "real world" application

What do you prefer and why?  If I missed a type that you prefer let me know in the comments!
What was your win this week?
Tags: discuss, weeklyretro
Published: 2021-11-12 16:08:40

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

Hey there! 


Looking back on this past week, what was something you were proud of accomplishing?

All wins count — big or small 🎉

Examples of 'wins' include:

- Starting a new project
- Fixing a tricky bug
- Playing with an adorable pet... or whatever else might spark joy ❤️ 

---

Congrats on your wins! Excuse me while I slide into the weekend. 

![Panda Cub going down a slide](https://media.giphy.com/media/cAhGmJPBqsXAlDTYHi/giphy.gif)
Rails 7 introduces a new debugging gem
Tags: ruby, rails, byebug, debug
Published: 2021-11-12 16:05:13


We commonly use [byebug](https://github.com/deivid-rodriguez/byebug) for debugging our code which is an easy-to-use, feature-rich ruby debugger. This gem is introduced in Rails 5.  It offers features like `Stepping`, `Breaking`, `Evaluating` and `Tracking`.

We can easily control the execution of a program and the debug inspector for call stack navigation. It allows us to control and the execution flow.

We can found this [documentation](https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-byebug-gem) for installing byebug with ruby's most popular framework ruby on rails which was marged in this [pull request](https://github.com/rails/rails/pull/14646)

But Rails 7 is replacing byebug with ruby's own gem [debug](https://github.com/ruby/debug) which was merged in this [pull request](https://github.com/rails/rails/pull/43187) on Sep 8, 2021.

[debug](https://github.com/ruby/debug) is Ruby's debug mechanism which will be included in Ruby 3.1 version.

So, to adjust Rails with Ruby `debug` has been introduced in Rails 7.

Let's compare some example of debugging with `byebug` and new `debug` gem.

### Before
Let's assume we have a controller named `UserController`. Inside any Rails application, we can call the debugger by calling the `byebug` method.

```
# app/controllers/user_controller.rb

class UserController < ApplicationController
  def index
    name = "Hasan Tanbir"
    byebug # Call to debugger
    country = "Bangladesh"
  end
end
```
Invoked debugger results will be:

```
    [1, 7] in app/controllers/user_controller.rb
    1: class UserController < ApplicationController
    2:   def index
    3:     name = "Hasan Tanbir"
    4:     byebug # Call to debugger
=>  5:    country = "Bangladesh"
    6:   end
    7: end

  (byebug) name # variable call
  "Hasan Tanbir"
```
### After
When we use `debug` in Rails 7, we will have to use `binding.break` method instead of `byebug` method.

```
# app/controllers/user_controller.rb

class UserController < ApplicationController
  def index
    name = "Hasan Tanbir"
    binding.break # Call to debugger
    country = "Bangladesh"
  end
end
```
Invoked debugger results will be:

```
    [1, 7] in app/controllers/user_controller.rb
    1: class UserController < ApplicationController
    2:   def index
    3:     name = "Hasan Tanbir"
    4:     byebug # Call to debugger
=>  5:    country = "Bangladesh"
    6:   end
    7: end
>#0 UserController#index at ~/demo_app/app/controllers/user_controller.rb:5 

  (rdbg) name # variable call
  "Hasan Tanbir"
```
You can check out the [pull request](https://github.com/rails/rails/pull/43187) for more details and for commands or features of [Ruby/debug](https://github.com/ruby/debug).
Can we build a ReactJS Custom Hooks Repo?
Tags: react, javascript, opensource, webdev
Published: 2021-11-12 16:29:01

It has been a while since I made a post and I wanted to comeback with this.

I saw a recent post that talked about react custom hooks.
And I decided why not make a community repo that all people can contribute to.

I want to see your amazing ideas for custom react hooks.

here is the link to the repo: [Repo](https://github.com/ahmedgaafer/react-custom-hooks)

and here is how to contribute [Here](https://github.com/ahmedgaafer/react-custom-hooks/blob/master/CONTRIBUTING.md)


I am excited to see your contributions
Github Actions, env file creation, docker silliness
Tags: docker, npm
Published: 2021-11-12 16:20:32

To push on a branch you want to target, make a workflow yml file and include:
```
on: 
  push:
    branches: [prod]
```

You can add an env file to your build when you deploy via Github Actions and still protect the data in your Secrets.  
First take your .env file and put in secrets with any name(here it is ENV_FILE).
Then add this to your workflow.yml in the build area:
```
      - name: Make envfile
        uses: SpicyPizza/create-envfile@v1
        with:
          envkey_DEBUG: false
          envkey_SECRET_KEY: ${{ secrets.ENV_FILE }}
          file_name: .env
```

If in the course you get this error:
```
Got permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Post http://%2Fvar%2Frun%2Fdocker.sock/v1.24/build?
```

Try these:
```
sudo groupadd docker
sudo usermod -aG docker ${USER}
sudo chmod 666 /var/run/docker.sock
```