teleren/devto huggingface dataset:
Web site checklist - for developers
Tags: web, developer, checklist
Published: 2022-06-02 18:08:56

---
title: Web site checklist - for developers
published: true
description: A checklist of stuff to handle as a web developer
tags: web,developer,checklist
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mbtm48i7d3nur1v98m1b.jpg
---

There is a rich landscape of tools, frameworks and CMSes that greatly increase your productivity when building a web site. So when a path is selected, a design is implemented - there are just a few more things to consider to finalize your great accomplishment.

☑️ images should be minimized and delivered in best possible format (webp)
☑️ images should be resized to match actual size and be lazy loaded
☑️ make sure site is cached in best way
☑️ server should serve http/2 (or http/3)
☑️ add http caching so that files are cached in the browser
☑️ sitemap should exist - and added to Google Search console
☑️ robot should be able to crawl site
☑️ meta description should exist on pages
☑️ links and buttons should be clickable without mouse
☑️ buttons with no text should have aria-label
☑️ header-tags should be in order
☑️ symantic html with main, nav, section and so on
☑️ images have describing alt texts
☑️ user should be able to tab through all interactive elements
☑️ input fields should have labels
☑️ make sure cache (including JavaScript and CSS files) is invalidated on deploy or content update
☑️ if there is an existing site that are being updated, add redirects from old URLs to new
☑️ analytics should be implemented
☑️ no cookies should be saved before user consent
☑️ sharing in social media should include editable title, description and image
☑️ browsers used by the majority or your users should be supported and tested
☑️ created 404 page
☑️ add a descriptive readme file - another developer should easily be able to get the project up and running with the information
☑️ branching workflow in git should be documented in readme file
☑️ any environment specific settings should exist in a .env file (an .env.example file should be added to git)
☑️ use addons/plugins/extensions that debug memory and database usage locally
☑️ add error reporting for frontend and backend in production
☑️ document any password or key in a password manager
☑️ linting of the code should be configured and forced by other developers (though git workflows or deployment)

Cool, now we are done!
Find Numbers with Even Number of Digits
Tags: leetcode, dsa, theabbie
Published: 2022-06-02 18:00:46

Given an array `nums` of integers, return how many of them contain an **even number** of digits.

**Example 1:**

**Input:** nums = \[12,345,2,6,7896\]
**Output:** 2
**Explanation:** 
12 contains 2 digits (even number of digits). 
345 contains 3 digits (odd number of digits). 
2 contains 1 digit (odd number of digits). 
6 contains 1 digit (odd number of digits). 
7896 contains 4 digits (even number of digits). 
Therefore only 12 and 7896 contain an even number of digits.

**Example 2:**

**Input:** nums = \[555,901,482,1771\]
**Output:** 1 
**Explanation:** 
Only 1771 contains an even number of digits.

**Constraints:**

*   `1 <= nums.length <= 500`
*   `1 <= nums[i] <= 105`

**SOLUTION:**

    import math
    
    class Solution:
        def findNumbers(self, nums: List[int]) -> int:
            ctr = 0
            for num in nums:
                if int(math.log10(num)) & 1:
                    ctr += 1
            return ctr
Falsy and Truthy in JavaScript
Tags: javascript, programming, beginners
Published: 2022-06-02 17:46:39

{% embed https://www.youtube.com/embed/J3CTnNtsi_w %}
_See this and many other articles at [lucaspaganini.com](lucaspaganini.com)_

## Falsy

Falsy values are values that are considered `false` when encountered in a boolean context. That means values that become `false` if you try to convert them to a `boolean`.

```ts
Boolean('');
//=> false

Boolean(0);
//=> false

Boolean(null);
//=> false
```

The list grows over time, but currently, those are the falsy values in JavaScript:

1. `false`
2. `0` `-0` `0n` representations of zero
3. ```` `""` `''` empty string
4. `null`
5. `undefined`
6. `NaN` not a number
7. `document.all` possibly

> NOTE: `document.all` can also be falsy in a very specific edge case.

```markdown
**document.all**
Objects are falsy if and only if they have the [[IsHTMLDDA]] internal slot.
That slot only exists in 'document.all' and cannot be set using JavaScript.
```

## Truthy

Truthy values are the opposite. They are values that are considered `true` when encountered in a boolean context.

```ts
Boolean('abc');
//=> true

Boolean(1);
//=> true

Boolean([]);
//=> true
```

All values that are not falsy, are truthy.

## Conclusion

References are in the references.

<p>We release web development tutorials every two weeks. Consider <app-newsletter-modal-trigger>subscribing</app-newsletter-modal-trigger> if you're interested in that.</p>

Have a great day, and I'll see you soon!

## References

1. [Truthy definition on MDN](https://developer.mozilla.org/en-US/docs/Glossary/Truthy)
2. [Falsy definition on MDN](https://developer.mozilla.org/en-US/docs/Glossary/Falsy)
3. [`document.all` edge case on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/all#conversion_to_boolean)
Have you ever used .NET 6 Minimal API in any real scenario?
Tags: discuss, minimalapis, dotnet, career
Published: 2022-06-02 17:43:33

Minimal APIs are great for making quick tutorials, but in a real scenario, would they be that efficient?

Currently, I work on systems with .NET Framework, .NET Core 3.1, and .NET 5 and I haven't had the opportunity to use them in a real scenario yet.

Have you ever had it? Share your experience!

Cover photo:
Cadillac InnerSpace Concept Car 2022 - Credits: media.cadillac.com
Despliega tu aplicación NodeJS o Typescript con PM2
Tags: javascript, typescript, devops, node
Published: 2022-06-02 17:39:27

## ¿Qué es PM2?

PM2 es un **gestor de procesos** que te ayuda a gestionar y mantener tu aplicación en línea y con Github Actions podremos desplegar nuestra aplicación totalmente gratis y manera sencilla.

Uniendo estas dos herramientas crearemos una pipeline con la cual desplegaremos nuestra aplicación. Para ello, tendremos que configurar nuestro repositorio con los siguientes pasos:

1. Creamos la carpeta _github/workflows_
2. Dentro generaremos el archivo action.yml (El nombre no tiene importancia). A continuación, dejaré una muestra de una action en la que comprobamos primero nuestro código con la ejecución de unos test unitarios, y si hemos tenido éxito desplegaremos nuestro código en el servidor.
3. Lo más seguro es que tengamos que generar unos secrets en Github para no comprometer información vulnerable como pueden ser usuario o contraseñas.

```yml
name: Test & Deploy
  push:
    branches:
      - main
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - run: npm install
      - run: npm run test
  deploy:
    needs: test
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Deploy app
        uses: victorargento/pm2-deployment@main
        with:
          remote-path: "/deployment/api"
          host: 12.34.56.78
          username: ${{ secrets.prod-user }}
          port: 2080
          password: ${{ secrets.prod-password }}
          pm2-id: "api"
          build : "true"
```

## PM2 Deployment
La action que utilizamos para desplegar es un fork de [Node VPS Deployment](https://github.com/marketplace/actions/node-vps-deployment), a la cual he añadido funcionalidades para que se pueda hacer una build de Typescript y utilice reload en vez de restart.

Emplear **reload** en vez de **restart** en una aplicación que es un servidor web, es mucho mejor, ya que **restart** es una forma más agresiva de reiniciar nuestra aplicación. Aquí puedes consultar más información acerca de [ello](https://stackoverflow.com/questions/44883269/what-is-the-difference-between-pm2-restart-and-pm2-reload#:~:text=The%20difference%20is%20documented%20here,at%20least%20one%20process%20running.).

Puedes darle una estrella a mi proyecto [aquí](https://github.com/victorargento/pm2-deployment) ✌.
Join me in the #100DaysOfWeb3 challenge
Tags: web3, 100daysofcode, challenge
Published: 2022-06-02 17:37:18

Alexander Kallaway created the #100DaysOfCode challenge to encourage people to learn to code on a regular basis. As part of the challenge, you must devote one hour per day to learning to code and share your progress on Twitter. This challenge was a huge success. More information about this challenge can be found [here](https://www.freecodecamp.org/news/the-crazy-history-of-the-100daysofcode-challenge-and-why-you-should-try-it-for-2018-6c89a76e298d/).
It doesn't stop there; people gradually began to create their own challenges, such as #100DaysOfUIUX, #100DaysOfPython, #100DaysOfCSS, and many others. #100DaysOfWeb3 is one of those challenges.

## Join me in the challenge
I'm going to approach this challenge a little differently. Rather than sharing my daily progress, I will share the topics I learn in the form of tweets or threads on a daily basis. So please follow me on Twitter - [@rakesh_at_tweet](https://twitter.com/rakesh_at_tweet). I'm publicly committing to this challenge for the next 100 days (which may or may not be consecutive) and will make sure you learn something new every day.

{% embed https://twitter.com/rakesh_at_tweet/status/1533695133283397632?s=20&t=M1BWYfdebUGKYpsv5hv04A %}

## The Plan
If you also want to do this along with me here's my small research work.

### Prerequisites
- Basic Frontend knowledge - HTML, CSS, and JavaScript (React will be helpful)
- REST API

| Days                  | Topic             |
| --------------------- | ----------------- |
| Day 1 - 14 (2 weeks)  | Blockchain basics |
| Day 15 - 34 (19 days) | Solidity          |
| Day 35 - 44 (9 days)  | Hardhat           |
| Day 45 - 49 (4 days)  | Web3.js           |
| Day 50 - 54 (4 days)  | IFPS / Filecoin   |
| Day 55 - Day 100      | Not planned yet   |

### Join communities
Communities are great places to learn and build together. Some of the web3 communities I know.

- [buildspace](https://buildspace.so/)
- [Odyssey dao](https://www.odysseydao.com/)
- [WhiteboardCrypto](https://whiteboardcrypto.com/)

---

Let's get started 💫
Minimum Insertion Steps to Make a String Palindrome
Tags: leetcode, dsa, theabbie
Published: 2022-06-02 17:30:37

Given a string `s`. In one step you can insert any character at any index of the string.

Return _the minimum number of steps_ to make `s` palindrome.

A **Palindrome String** is one that reads the same backward as well as forward.

**Example 1:**

**Input:** s = "zzazz"
**Output:** 0
**Explanation:** The string "zzazz" is already palindrome we don't need any insertions.

**Example 2:**

**Input:** s = "mbadm"
**Output:** 2
**Explanation:** String can be "mbdadbm" or "mdbabdm".

**Example 3:**

**Input:** s = "leetcode"
**Output:** 5
**Explanation:** Inserting 5 characters the string becomes "leetcodocteel".

**Constraints:**

*   `1 <= s.length <= 500`
*   `s` consists of lowercase English letters.

**SOLUTION:**

    class Solution:
        def minIns(self, s, i, j):
            if i == j:
                return 0
            if i == j - 1:
                if s[i] == s[j]:
                    return 0
                return 1
            if (i, j) in self.cache:
                return self.cache[(i, j)]
            if s[i] == s[j]:
                curr = self.minIns(s, i + 1, j - 1)
                self.cache[(i, j)] = curr
                return curr
            else:
                curr = 1 + min(self.minIns(s, i + 1, j), self.minIns(s, i, j - 1))
                self.cache[(i, j)] = curr
                return curr
            
        def minInsertions(self, s: str) -> int:
            self.cache = {}
            return self.minIns(s, 0, len(s) - 1)
Vite Server Proxy
Tags: vue3, vite
Published: 2022-06-02 17:24:35

I configured the proxy like this in vite.config.js. I ran `npm run dev`. It works. The endpoint returns the data. Below is the image of vite.config.js
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xgeuj5z5tpk8aasu898g.png)
 
Now the problem is when i build this application using `npm run build`. It creates dist and when i run this dist with `npx serve dist`. Application runs but when hitting the endpoint it gives error.Below are the screenshots. Even when username and password is sent, the payload is still empty

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

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o71rz1j3uzs8t126v3g5.png)
VIDEO: How to run a performance review for developers
Published: 2022-06-02 17:17:40

Most detailed step-by-step guide on how to run a performance review for developers

[START your 1st review with Ace](https://www.getace.io/?utm_source=devto&utm_campaign=main_page)

[SKILL MATRICES for 100+ tech roles (FREE)](https://www.getace.io/templates?utm_source=devto&utm_campaign=skill_matrix_promo#skill-matrix) 

[1-ON-1 TEMPLATES (FREE)](https://www.getace.io/templates?utm_source=devto&utm_campaign=templates_promo#1-to-1-meeting)
Digging down for isSuccess() in bad API response
Published: 2022-06-02 17:13:40

Nothing frustrating than a bad design api, what if you have such api 
``` json
{
status : "Success",
message : "",
x : {},
y:10
}
```
as the sample above x can be changed from api to another and some time there is other key along side.
what I want to say every response has status and message but we don't know what it has alongside with it, that task here is to know that if the response came with success or failed,
you can deserialize each response to its object and then check

`xResponse.success = "Success"`

for each type, that bad and I dont want to do that each time,
I want

`xResposne.isSuccess()`

there is two solution:
first one is base class and make every response class extend it 
```kotlin
open class BaseResponse {
    @SerializedName("Status")
    val status: String = "Failures"
    @SerializedName("Message")
    val message: String = ""
}
fun BaseResponse.isSuccessful(): Boolean {
    if (status == "Success") {
        return true
    }
    return false
}
```
and then

```kotlin
data class ArticlesResponse(
    @SerializedName("news")
    val news: ArrayList<New>,
    @SerializedName("pageCount")
    val pageCount: Int,
):BaseResponse()
```

I don't like this solution because every new response class has to extend this base response, this extra for every response.
solution number two is reflection, because we know that every response class has a status property we can use that knowledge to create method that do reflection.
don't forget to add the reflection library
``implementation "org.jetbrains.kotlin:kotlin-reflect:1.6.21"``
then the actual work
```kotlin
fun Any.isSuccess(): Boolean {
    val clazz = this.javaClass.kotlin
    clazz.memberProperties.forEach {
        if (it.name == "status") {
            val status = it.get(this)
            return status == "Success"
        }
    }
    return false
}
```
and that is it, the problem with this solution is you get isSuccess() extension method on every class
Day-100 Training At Ryaz
Tags: webdev, beginners, programming, discuss
Published: 2022-06-02 17:01:52

- Date:2/06/2022
- Day:Thursday

Today, I started at about 10:30 am as I was in progress to complete the bidding project so today I started with the left over task firstly I started with filling up all the upcoming of project and firstly I tried to deploy this node app on netlify and but was unable to do it as it shows some errors but after this I tried with Heroku app so, I was successful in that so, I hosted this website successfully i.e https://online-bidding-system-651.herokuapp.com and after this I started with editing the various things so, that css can be improved and I look more enhanced so, this way my day ended up and I got to learn many new things.
Minimum Moves to Reach Target Score
Tags: leetcode, dsa, theabbie
Published: 2022-06-02 17:00:58

You are playing a game with integers. You start with the integer `1` and you want to reach the integer `target`.

In one move, you can either:

*   **Increment** the current integer by one (i.e., `x = x + 1`).
*   **Double** the current integer (i.e., `x = 2 * x`).

You can use the **increment** operation **any** number of times, however, you can only use the **double** operation **at most** `maxDoubles` times.

Given the two integers `target` and `maxDoubles`, return _the minimum number of moves needed to reach_ `target` _starting with_ `1`.

**Example 1:**

**Input:** target = 5, maxDoubles = 0
**Output:** 4
**Explanation:** Keep incrementing by 1 until you reach target.

**Example 2:**

**Input:** target = 19, maxDoubles = 2
**Output:** 7
**Explanation:** Initially, x = 1
Increment 3 times so x = 4
Double once so x = 8
Increment once so x = 9
Double again so x = 18
Increment once so x = 19

**Example 3:**

**Input:** target = 10, maxDoubles = 4
**Output:** 4
**Explanation:** Initially, x = 1
Increment once so x = 2
Double once so x = 4
Increment once so x = 5
Double again so x = 10

**Constraints:**

*   `1 <= target <= 109`
*   `0 <= maxDoubles <= 100`

**SOLUTION:**

    class Solution:
        def minMoves(self, target: int, maxDoubles: int) -> int:
            n = 0
            while target > 1 and maxDoubles > 0:
                n += 1 + target % 2
                target = target // 2
                maxDoubles -= 1
            return n + target - 1
Alert Using Same Key-Card Three or More Times in a One Hour Period
Tags: leetcode, dsa, theabbie
Published: 2022-06-02 16:30:41

LeetCode company workers use key-cards to unlock office doors. Each time a worker uses their key-card, the security system saves the worker's name and the time when it was used. The system emits an **alert** if any worker uses the key-card **three or more times** in a one-hour period.

You are given a list of strings `keyName` and `keyTime` where `[keyName[i], keyTime[i]]` corresponds to a person's name and the time when their key-card was used **in a** **single day**.

Access times are given in the **24-hour time format "HH:MM"**, such as `"23:51"` and `"09:49"`.

Return a _list of unique worker names who received an alert for frequent keycard use_. Sort the names in **ascending order alphabetically**.

Notice that `"10:00"` - `"11:00"` is considered to be within a one-hour period, while `"22:51"` - `"23:52"` is not considered to be within a one-hour period.

**Example 1:**

**Input:** keyName = \["daniel","daniel","daniel","luis","luis","luis","luis"\], keyTime = \["10:00","10:40","11:00","09:00","11:00","13:00","15:00"\]
**Output:** \["daniel"\]
**Explanation:** "daniel" used the keycard 3 times in a one-hour period ("10:00","10:40", "11:00").

**Example 2:**

**Input:** keyName = \["alice","alice","alice","bob","bob","bob","bob"\], keyTime = \["12:01","12:00","18:00","21:00","21:20","21:30","23:00"\]
**Output:** \["bob"\]
**Explanation:** "bob" used the keycard 3 times in a one-hour period ("21:00","21:20", "21:30").

**Constraints:**

*   `1 <= keyName.length, keyTime.length <= 105`
*   `keyName.length == keyTime.length`
*   `keyTime[i]` is in the format **"HH:MM"**.
*   `[keyName[i], keyTime[i]]` is **unique**.
*   `1 <= keyName[i].length <= 10`
*   `keyName[i] contains only lowercase English letters.`

**SOLUTION:**

    import bisect
    
    class Solution:
        def alertNames(self, keyName: List[str], keyTime: List[str]) -> List[str]:
            n = len(keyName)
            checkins = {}
            for i in range(n):
                name = keyName[i]
                time = keyTime[i]
                time = tuple(int(k) for k in time.split(":"))
                if name in checkins:
                    bisect.insort(checkins[name], time)
                else:
                    checkins[name] = [time]
            op = []
            names = sorted(checkins.keys())
            for name in names:
                m = len(checkins[name])
                alert = False
                for i in range(m):
                    curr = checkins[name][i]
                    j = bisect.bisect_right(checkins[name], (curr[0] + 1, curr[1]))
                    if j - i >= 3:
                        alert = True
                        break
                if alert:
                    op.append(name)
            return op
How to be Productive - The 3 steps
Published: 2022-06-02 16:17:30

_So this is a step by step list for me I want to share with you guys on how to be productive and do things instead of just always think about doing them:_

**1. Phone. Enable Airplane mode and put phone away from you. At least 2 meters should be between you and your phone if you want to be productive**

**2. Put your mind of. Hear some relaxing music or so to get down and be focused. For about 1-3 minutes**

**3. Count from 1 to 3 and start!**

Good luck! You can do it!
Not Just Binary
Tags: inclusion, diversity, opensource
Published: 2022-06-02 16:15:17

0s and 1s work great for our computers, but our world has much more to offer.

The month of June is not just another summer month, but the month of pride. The month to celebrate love in all forms, spread joy and move towards being more diverse and inclusive. 🌈

## History of the movement

Pride Month is celebrated each year in the month of June to honor the [1969 Stonewall Uprising in Manhattan](https://guides.loc.gov/lgbtq-studies/stonewall-era). Initially the last Sunday of June was celebrated as "Gay Pride Day", and it soon grew to encompass a month-long series of events. We have celebrations throughout the month to support and foster the community. Memorials are held during this month for those members of the community who have been lost to hate crimes or HIV/AIDS. The purpose of the Pride Month is to recognize the impact that the LGBTQIA+ have had on history locally, nationally, and internationally.

## What are we doing?

Even though there are laws and initiatives protecting the LGBTQIA+ rights and helping the community grow, we are still far from making everybody feel welcomed. As an early-stage startup, our goal is to break the biases, fight for what is right and build an ecosystem that is safe and welcoming to everyone. This Pride Month, we thought of adding a little color to our [swag store](https://store.appwrite.io/search?q=pride&options%5Bprefix%5D=last)! Every purchase made goes to organizations that are nurturing and supporting the LGBTQIA+ community.

## Ending notes

This initiative is only aimed to contribute to the upliftment of the LGBTQIA+ community. We hope to spread some smiles and colors to your laptop and wardrobe with our awesome limited edition swag. 🦄

P.S - If you lead/know organizations that are all-inclusive and would love some help from us, please direct them to us.