teleren/devto huggingface dataset:
Pagination: The cursed feature
Published: 2021-09-19 00:07:43

I just wanted to start by saying: pagination isn't an easy problem. At a first naive glance from a product perspective it looks easy. Most devs who haven't implemented it before would probably give a rough estimate of 1-2 days max. In theory, if everything under the hood is implemented nicely that's probably about right.

When a dev first goes away to research how they are going to do pagination, the first thing they are going to find is stack overflow articles full of people arguing how they should be implemented. Cursor based / index based, the product owner doesn't care, they just want a nice pretty little widget that lets them scroll through multiple pages of results.

This is where tech debt rears it's ugly head. For any codebase that isn't brand new, there is going to be mounds of tech debt with regards to how data is stored in the underlying database. Even when using a framework like Laravel or Symfony, it's likely that out of the box pagination solutions aren't going to work due to the amount of crap that has been piled on top of models to make them work.

Then comes the issue of multiple consumers. The web front-end might not be the only consumer of the API. Mobile apps might also be consuming the same API. Mobile UI/UX works differently than web, they might already have come up with a solution like infinite scrolling / lazy loading which already uses the existing endpoints. They might also have a local storage which they use to the app works offline.

At this point everyone involved starts to blame the dev who is trying their best to implement this and satisfy everyone's requirements without breaking existing functionality. If the dev is lucky, they will have other devs they can bounce ideas off and try to put into words why pagination is a harder problem than it looks. It requires changes at multiple levels of the stack, as well as negotiation with multiple stakeholders. If your project has a lot of tech debt, this is where it will show.

When you asked to get implement pagination, please show this to your product owner and proceed with caution. Possibly start looking for a new job on the side just in case. More than one project i've worked on has had people quit over this cursed feature.
Join me for a free live session: DevOps Careers Q&A
Tags: devops, career, qna
Published: 2021-09-19 13:14:46

---
title: Join me for a free live session: DevOps Careers Q&A
published: true
date: 2021-09-19 00:00:00 UTC
tags: devops,careers,qna
canonical_url: https://jhall.io/archive/2021/09/19/join-me-for-a-free-live-session-devops-careers-qa/
---

Do you have DevOps-related career questions?

- What should I study?
- How can I transition into a DevOps-related role?
- How do I keep my skills current?
- What certifications are most relevant?
- How should I prepare for an interview?
- What should I look for in a DevOps-related job?
- And anything else…

September 23, I’ll be doing a free, live video Q&A session all about DevOps Careers. The session starts at 17:00 CET (Europe) / 8:00 AM Pacific Time (US).

This session is free, but there is limited space, so [**reserve your spot now!**](https://www.crowdcast.io/e/tiny-devops-qa-focus-on/register)

[![](https://jhall.io/archive/images/qna-careers.jpg)](https://www.crowdcast.io/e/tiny-devops-qa-focus-on/register)

Have other suggestions for Q&A session topics? I’ll be doing other Q&A sessions, so [hit me up](https://jhall.io/contact) and let me know what you’d like to discuss for a future session.

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
Which HTML element tag can be used to represent and show sections or standalone content to the user?
Tags: html
Published: 2021-09-19 00:00:00

---
  title: Which HTML element tag can be used to represent and show sections or standalone content to the user?
  published: true
  tags: HTML5
  date: Sun Sep 19 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/html-element-tag-to-represent-show-sections-standalone-content-user
  cover_image: https://melvingeorge.me/_next/static/images/main-136b40027b839b951d87e7a7e605fbb5.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/html-element-tag-to-represent-show-sections-standalone-content-user)
  
**The best HTML element to represent and show sections or standalone content to the user is the `section` HTML element tag.**

The `section` HTML element tag can be written like this,

```html
<!DOCTYPE html>
<!-- Usage of the 'section' HTML element tag -->
<html>
  <body>
    <!-- 'section' HTML element tag  -->
    <section>
      <h3>This is a heading</h3>
      <p>Hello World! This is a small paragraph.</p>
    </section>
  </body>
</html>
```

### Important points to note:

- The `section` HTML element tag is used to add a particular section and standalone content of text or content in a website.
- It should be used as a last resort if any other HTML element tags other than the `section` HTML element tag cannot satisfy the needs of the content.
- The `section` HTML element tags are considered as generic HTML element tag.
- It is better to add `heading` tags (`h1` - `h6` tags) inside every `section` HTML element tags to distinguish them from one another. It is recommended for the semantic flow of the document.
- You could also have `section` tags without heading tags in some cases where a general heading may not be required like to hold a bunch of action buttons or links for a specific content but still regarded as a separate section. It is always recommended to add a CSS hidden `heading` tag inside the `section` tag to make it accessible to people who are using assistive technologies like screen readers, etc.

Some common use cases for the `section` HTML element tags are to hold:

- Standalone content
- Contents or text which cannot be satisfied with other HTML element tags like the `article`, `aside`, `p`, etc. but still requires a separate standalone area.

See the above code live in [JSBin](https://jsbin.com/yikixedicu/2/edit?html,output).

That's all 😃!

### Feel free to share if you found this useful 😃.

---
Bagels
Tags: python, programming, gamedev, functional
Published: 2021-09-18 22:53:06

```python
# bagels.py
#   Bagels is a deductive logic game where you must guess a number based on clues
# by: Scott Gordon

import random

NUM_DIGITS = 3
MAX_GUESSES = 10


def main():
    print("***** Welcome to Bagels, A Deductive Logic Game. *****")
    print(f'''I am thinking of a {NUM_DIGITS}-digit number with no repeated digits.

Try to guess what it is. Here are some clues:
When I say:     That means:
    Pico          One digit is correct but in the wrong position.
    Fermi         One digit is correct and in the right position.
    Bagels        No digit is correct.
    
For example, if the secret number was 248 and your guess was 843, the
clues would be Fermi Pico.''')

    while True:
        secret_num = get_secret_num()
        print('I have thought up a number.')
        print(f' You have {MAX_GUESSES} guesses to get it.')

        num_guesses = 1
        while num_guesses <= MAX_GUESSES:
            guess = ''
            while len(guess) != NUM_DIGITS or not guess.isdecimal():
                print(f'Guess #{num_guesses}')
                guess = input('> ')

            clues = get_clues(guess, secret_num)
            print(clues)
            num_guesses += 1

            if guess == secret_num:
                break
            if num_guesses > MAX_GUESSES:
                print('You ran out of guesses.')
                print(f'The answer was {secret_num}')

        print('Do you want to play again? (yes or no)')
        if not input('> ').lower().startswith('y'):
            break
    print('Thanks for playing!')


def get_secret_num():
    """Returns a string made up of NUM_DIGITS unique random digits."""
    numbers = list('0123456789')
    random.shuffle(numbers)

    secret_num = ''
    for i in range(NUM_DIGITS):
        secret_num += str(numbers[i])
    return secret_num


def get_clues(guess, secret_num):
    """Returns a string with the pico, fermi, bagels clues for a guess
    and secret number pair."""
    if guess == secret_num:
        return 'You got it'

    clues = []

    for i in range(len(guess)):
        if guess[i] == secret_num[i]:
            clues.append('Fermi')
        elif guess[i] in secret_num:
            clues.append('Pico')
    if len(clues) == 0:
        return 'Bagels'
    else:
        clues.sort()
        return ' '.join(clues)


if __name__ == '__main__':
    main()
```
Photo by <a href="https://unsplash.com/@dianealkier?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Diane Alkier</a> on <a href="https://unsplash.com/s/photos/bagels?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Are You Bored Of Converting "px" to "em" Using A Calculator, SASS Will Solve The Problem
Tags: css, html, webdev, beginners
Published: 2021-09-18 21:56:48


Hi, I'm [Aya Bouchiha](developer.aya.b@gmail), today, I decided to share with you the solution of converting "px" to "rem" or 'em' using a calculator because using It, will distract you to focus more in your work, and will let you waste a considerable amount of time, especially if the project is so big or your computer is slow.


![Aya Bouchiha](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jfbefrmssinn6d6m3mxt.png)

## What's px?

+ **px**: is an absolute unit for measuring.

## What's them?

+ **em**: is a relative unit to the font-size of its parent, used for measuring, It is equal to 16px.
 
## px vs em vs rem

+ [Sizing in CSS: px vs em vs rem by Chiamaka Ikeanyi](https://chiamakaikeanyi.dev/sizing-in-css-px-vs-em-vs-rem/)

## Converting px to em
by default:
`1em = 16px`
`pxValue = emValue * 16` 
`emValue = pxValue / 16`

## Should I Use A Calculator For Converting px to em?

+ If you are familiar with scss, the answer is no, no, and no! so how?

## Creating A Function For Converting px to em

### index.scss
```scss
@function to-em($val-px){
    @return ($val-px / 16) + em;
}
```
## Testing Our Function
### index.scss
```scss
// index.scss

// px => em
@function to-em($val-px){
    @return ($val-px / 16) + em;
}

h1 {
    font-size:to-em(24);
}
div {
    height: to-em(200);
    width: to-em(400);
}
```

## Result

### index.css

```css
h1 {
  font-size: 1.5em;
}

div {
  height: 12.5em;
  width: 25em;
}
```

Have an amazing day!
Get MATIC From ETH
Tags: ethereum, polygon, matic, swap
Published: 2021-09-18 21:52:57

Recently I deployed the smart contract for **[my new NFT project](https://australopithecus.hdks.org/)** on the **Polygon** network.  


I naturally paid a little bit MATIC when deploying,  but I struggled a little bit **how to get MATIC** before doing that.  
So I'll describe about that.

## 1. Get ETH somewhere

You can buy it on cryptocurrency exchanges (e.g., **Binance**, **Coinbase**, etc...). 

## 2. Configure MetaMask for Polygon Mainnet

Because you're reading thie article, **MetaMask** would have alread been installed on your browser or device. If not, you can install it [here](https://metamask.io/).  

After that, add **Polygon Network** on MetaMask as described on [the Matic official docs](https://docs.matic.network/docs/develop/metamask/config-polygon-on-metamask/).

## 3. Bridge your ETH onto Polygon Network

To convert your **ETH** to Polygon-compatible **WETH**, go to **[Polygon Bridge](https://wallet.polygon.technology/bridge)** and connect your wallet to **Polygon Mainnet** in there.  

And enter amount of **Ether** that you want to bridge to **Polyon**.

![screenshot_polygonbridge](https://blog.hdks.org/images/Get-MATIC-From-ETH/screenshot_polygonbridge.png)  

After entering, click **`Transfer`** button. At this point, you need to pay gas fee (**ETH**). It costs very high, but I believe that your passion for **MATIC** is greater than it.  

It will take some time to complete. In the meantime, relax with a cup of coffee and watch Youtube.

When complete, visit [Polygon Web Wallet](https://wallet.polygon.technology/wallet/) to confirm that your ETH has moved to `Ether(PoS-WETH)` as below:

![screenshot_polygonwallet](https://blog.hdks.org/images/Get-MATIC-From-ETH/screenshot_polygonwallet.png)

## 4. Get a free MATIC for swapping

A small amount of MATIC is required in advance to swap ETH to MATIC, but I think people who deal with MATIC for the first time don't have MATIC, so you need to get a free MATIC in **[Matic Supply](https://matic.supply/)** for faucet. You can get **0.0005 MATIC** - enough for swapping - here. Sometimes you cannot receive it correctly but in that case,  try a few times.

![screenshot_maticsupply](https://blog.hdks.org/images/Get-MATIC-From-ETH/screenshot_maticsupply.png)

## 5. Swap ETH to MATIC

After getting a small amount of MATIC, all you have to do is converting your **ETH to MATIC**.

For that, go to [QuickSwap](https://quickswap.exchange/) and connect your wallet to **Polygon Mainnet**.  

![screenshot_quickswap](https://blog.hdks.org/images/Get-MATIC-From-ETH/screenshot_quickswap.png)  

Enter the amount of ETH that you want to swap, then click **Swap** button.

## 6. Complete

Open **MetaMask** and connect to **Polygon Mainnet**.

If the balance of **MATIC** has been increased, you're successful.
How To Do System Performance Testing
Tags: webdev, tutorial, testing, programming
Published: 2021-09-18 20:48:42

## What Is Meant By System Performance 🧐
It's usually described by scalability and usability. However, there are two more important criteria that we should consider systems' performance and the method to test it.

---

### What are Those Criteria 👀
- **Throughput**
	- The rate at which a system can process information.
- **Latency**
	- The duration between the initiation of an action and its result.

Those two together represent the system's responsiveness, even though they are not necessarily related.

---

## How To Test The Performance 🤨
From the previous two criteria we can see that measuring throughput and latency and comparing them against some values we see fit is basically our testing process.

### It's not that simple though. Why 😲
We have so many variables that can affect our system performance test.
- The test network traffic (if it's run on the organization's network).
- The OS status (is it performing some home cleaning process?)
- The run environment status (is the JVM performing garbage collection?)

---

## How To Do It Then? 💁‍♂️
We need to take two things into consideration in order to perform informative performance tests.

### 1.  Control the variables ⚙️
- We should have a dedicated testing environment which is a clone of our production environment.
- We should control the processes of this environment.
	- Network traffic.
	- Garbage collection, etc..
	

### 2. Test the performance of our performance tests ⚖️
Wait, What? why do you want to test your test?

Well, if the test is slow to start and initiate that would affect the actual code performance measurements and we would have failing tests for code that is actually fast.

How to make sure that our tests are fast enough in order not to make our actual code test fail?
- We should test the code using stub methods that do the bare minimum.
	- Return hard coded values for example.
- Then, if the test passes (meets the throughput and latency requirements) do we insert and test the actual code.

---
### This post was mainly derived from Dave Farley's [How To Test Software Performance](https://www.youtube.com/watch?v=7koEc8iX7AM&t=13s) YouTube video 🙏🏾
Zenity And How to use it ❓
Tags: linux, bash, code, cli
Published: 2021-09-18 20:42:58

Zenity is simple yet useful tool in Linux by which we can make pop on-screen using various commands .

You can read the zenity manual by using 
```
man zenity
```

the command in the terminal your screen will look something like the below picture !

![img](https://media-exp1.licdn.com/dms/image/C5612AQGEhLKyusLbeg/article-inline_image-shrink_1000_1488/0/1631989791639?e=1637193600&v=beta&t=mdQ2j00k2a12yDbk5RaBc6Y-SkNgnJsmT_9WhvoJIlw)

### We have to use the below syntax to use the zenity commands !
```
zenity --[Command]
```

### How to pop out something on-screen using Zenity ?🤔
We can do this using
```
zenity --info --text=<text>
```
![img2](https://media-exp1.licdn.com/dms/image/C5612AQGxL6GaTDnTMg/article-inline_image-shrink_1000_1488/0/1631990850659?e=1637193600&v=beta&t=pwpxpPbpMr0TRC4VQlR4SU6L3DkAWXkr6kzApeBODX8)

### What if we want to change the title of the pop-out ?😁
Now ,we will use the title command
```
zenity --info --title=<title_text>
```
![img3](https://media-exp1.licdn.com/dms/image/C5612AQHUY6xKqZNV8A/article-inline_image-shrink_1000_1488/0/1631991455998?e=1637193600&v=beta&t=oyC-ID5nIeO4YpYP9WauWUjHpgj1sRq0y-t7EsRUwfw)

### How to take input ?

By using the
```
zenity --entry 
```
![img4](https://media-exp1.licdn.com/dms/image/C5612AQEVu67wk_mG5Q/article-inline_image-shrink_1000_1488/0/1631992601970?e=1637193600&v=beta&t=6l-bIoeEFsDUDakdecbrUgj-8XSjiWxTy5UxLLAj9NM)

### Let's add title and info text to the pop out !
we are gonna use the --entry,--title, and --text command to do this
```
zenity --title="Title" \
--entry --text="Text is changed !" 
```
![img5](https://media-exp1.licdn.com/dms/image/C5612AQFy-skGvPutkw/article-inline_image-shrink_1000_1488/0/1631993213528?e=1637193600&v=beta&t=PQr01jTjjWvntWPKha5OB2TyFELtnyGB03bdfemMIZc)

With the help of the zenity we can create notifications we can use various commands to create beautiful popouts,notification we can change the colour of text and etc .

More useful commands from the
```
zenity --help
```

![img6](https://media-exp1.licdn.com/dms/image/C5612AQE2i1hYpl5VVg/article-inline_image-shrink_1500_2232/0/1631993629015?e=1637193600&v=beta&t=r_Tc1YXC3e9buTb9IN8cmhZc8BMlYBUFBZFh_BNTgmk)

To know more about zenity just explore the zenity : )

> zenity --info --text="Hope you like my work : )"
Tricks for Learning Vim Quickly
Tags: vim, linux
Published: 2021-09-18 20:34:38

Vim is very powerful and fast editor, on the other hand it's so powerful that some people might prefer not to use it. It's available on every machine, even through an SSH connection and bindings can be used in any popular IDE. 

If you’re learning Vim, there are two mistakes you can make:
The first is to jump right in. The second is to avoid doing anything.

The correct approach is to learn Vim incrementally. Learn one trick at a time, then practice it until it’s second nature.

Here are tricks that will help you learn Vim quickly.

**Practice**

Practice makes perfect. Vim works differently than you are used to. You can practice online using [vim.is](https://vim.is), which makes you learn vim keybindings very quickly.

I recommend learning vim first before using it, because it works so different than say notepad. But the advantage is higher productivity, moving around the text quickly, recording and replaying keystrokes and lots more.

**Enable vim keybindings**

There are extensions for your web browser like [Vimium](https://vimium.github.io/). Get used to the vi-like keybindings by surfing the web. There's also [qutebrowser](https://qutebrowser.org/). Qutebrowser is a Chromium fork but uses Vi-like key bindings.

**Enable vi keybindings in bash**

Write the command to enable vi keybindings in bash. You can then use the vi keybindings inside your commands.

```bash
set -o vi
```

Then you can use keys like `b`, `w`, `5w` and all the other vi keybindings you use inside the commands.

**Enable vi keybindings in other apps**

There are [many applications](https://www.reddit.com/r/vim/comments/3tluqr/my_list_of_applications_with_vi_keybindings/) which support vi keybindings. Some notable ones are ranger, vifm, feh. 

For Windows users, you can enable vim keybindings in visual studio, word, outlook using [viemu](http://www.viemu.com/). 

**Quick tricks**

To open a file, type the command `vim file`. To quit vim, press `ZQ`. To edit a file, press `i` or `insert`. To return to command mode, press the `esc` key. Press `:w` to save the file.
How do you guys handle the feeling "to be the BEST"?!
Tags: discuss, productivity
Published: 2021-09-18 20:02:07

Let's be honest we all have had a longing to be the best among our peers at some point of time in our lives!

From what I have experienced over the years is the actions that follow after this feeling just drain my mind and body. And the irony is, it doesn't make you more productive too.

One solution to such feeling that I have adopted is "AFFIRMATIONS", positive ones of course :) I keep myself reminding the fact, "Life's rule is SIMPLE(NOT easy): Be the number 1 to yourself!"

Meditating every day helps too🧘‍♂️ 
I am curious to know what strategies, you guys apply?

PS: Some of you might say why don't you post this on QUORA instead! but as I am an aspiring DEV, why NOT here only ;)
My 5 Favorites VS Code Themes
Tags: vscode, beginners, codenewbie
Published: 2021-09-18 19:30:53

## [The Best Theme](https://marketplace.visualstudio.com/items?itemName=kohlbachjan.the-best-theme)

![thebesttheme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g430l7mwmbetmc18ne53.PNG) 

## [Dracula](https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula)

 ![dracula](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ojdhqr9ezprn9sbl92y5.PNG)
 
## [Github Theme](https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme)

![githubDark](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nn15c9zaxwqs48wn5cu1.PNG)

## [Night OWL](https://marketplace.visualstudio.com/items?itemName=sdras.night-owl)

![nightOwl](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m47mtpzqb8br9dwaohc5.PNG)

## [Shades Of Purple](https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple)

![Shades Of Purple](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ac7xa82xg70a9as78tyw.PNG)
 


- [Aya Bouchiha](developer.aya.b@gmail.com)


## Suggested Posts
+ [part 1: (5 cool CSS cool properties)](https://dev.to/ayabouchiha/5-cool-css-properties-part-1-nkg/)
+ [part 2: (5 cool CSS cool properties)](https://dev.to/ayabouchiha/part-2-5-cool-css-properties-bdl)
+ [57 Essential HTML Tags To Know As A Beginner](https://dev.to/ayabouchiha/57-essential-html-tags-to-know-as-a-beginnert-1f3f)
+ [part-1: 5 HTML Tags That Almost Nobody Knows](https://dev.to/ayabouchiha/5-html-tags-that-almost-nobody-knows-5p5)
+ [Part-2: 5 HTML Tags That Almost Nobody Knows](https://dev.to/ayabouchiha/part-2-5-html-tags-that-almost-nobody-knows-nj8)


Have a nice day!
TicTacToe in Python3 Terminal
Tags: python, codenewbie, git, programming
Published: 2021-09-18 19:08:26

Hey there. So i recently started working with Python. This is my first project with it after a week of adapting to the base syntax. 

It's a standard TicTacToe game in the terminal. Nothing fancy, literally just the basics. 

If you have any pointers or tips for future projects I'd be glad to take part of them. Have a good!

Github: https://github.com/Woggys/TicTacToe.git