teleren/devto huggingface dataset:
Quick Intro into Bloom Filter
Tags: systemdesign, datastructures, programming
Published: 2023-08-06 18:57:44

Bloom filter is in-memory space efficient data structure for checking whether an object is in the set or not.

Difference between bloom filter and the usual hash table is that bloom filter **use less memory** and therefore has some **drawbacks**:

- It cannot save the object itself / the pointer to the object, just some bit telling that tells the object already in the set or not
- Bloom filter can return false positive result (but cannot return false negative)

---
### Detail of Bloom Filter

**Two components of bloom filter are**: 
1. the container (array of n bits initially set to 0)
2. k hash functions

**Write data into bloom filter**:
1. Put the object into k hash functions, the result will be k hash values in range [0, n)
2. for each hash value, set the element at A[hash value] to 1

**Querying the bloom filter**:
1. Put the object into k hash functions, the result will be k hash values in range [0, n)
2. for each hash value, get the value at A[hash value]
3. if all value is 1, then the object possibly already in set, else it is definitely not in set


---
### Application of Bloom Filter

Bloom filter can be used by applications that need efficient memory and can tolerate some false positive results. Some of the examples are:
- Password Checking
	- Some weak password are put inside the bloom filter, then use it to check the password provided by user. If the bloom filter returns true, the password is probably weak, ask the user to provide another password else we can confidently say that the password is strong.
- Spellchecking
	- Insert all valid English words into the bloom filter. When user type something, ask the bloom filter. If the bloom filter returns false, the word is definitely not valid else it is probably valid
- Username checking
	- When user register, after saving to the database, insert the username into bloom filter
	- When another user register, check if the provided username in bloom filter or not
		- if yes, then it is probably already taken
		- else, it is definitely available
- Speed up reading in LSM Tree Storage Engine
	- in LSM Tree, the read involving checking multiple level of SSTable
	- the idea is to maintain a bloom filter for each level of SSTable, before actually search the SSTable, first we look at the bloom filter
		- if false, then the key is definitely not in that level
		- else,  it is probably in that level
The Complete 2023 Developer Setup
Tags: community, javascript, programming, frontend
Published: 2023-08-06 18:54:29

## The Complete 2023 Developer Setup

---

- Node.js
- Express.js
- TypeScript
- MongoDB
- React
- Docker
- PostgreSQL
- Tailwind CSS
- Git
- GitHub

---

### 1. Node.js

Node.js is a fast and efficient runtime environment for JavaScript. It uses the V8 engine and offers non-blocking libraries.

---

### 2. Express.js

Express is a popular Node web framework with functions like creating handlers for requests, integrating with rendering engines, adjusting application settings, and inserting middleware.

----

### 3. TypeScript

TypeScript is an advanced version of JavaScript that includes additional features and introduces static typing to minimize errors.

---

### 4. MongoDB

MongoDB is an open-source NoSQL database used for high-volume data storage, ad-hoc queries, indexing, load balancing, aggregation, and server-side JavaScript execution. It stores information in collections of documents made up of key-value pairs and supports many programming languages.

---

### 5. React.js

React is a front-end JavaScript library that is free and open-source. It is used for building user interfaces by utilizing components.

---

### 6. Docker

Docker simplifies application creation, testing, and release by packaging software into containers containing all necessary components for the code to run. This ensures correct code functionality upon deployment and expansion into any environment.

---

### 7. PostgreSQL

PostgreSQL is an open-source relational database that allows querying in SQL and JSON. It’s been developed for over 20 years, making it a stable and reliable system used by many applications.

---

### 8. Tailwind CSS

Tailwind CSS is a utility-first CSS framework for quick UI development with flexible building blocks and no stubborn pre-set styles.

---

### 9. Git

Developers use Git to monitor changes made to their code over time.

---

### 10. GitHub

GitHub offers hosting services for Git repositories, enabling collaboration on projects, and providing tools for project management, issue tracking, and code review. Git and GitHub are crucial for software development and collaboration.
Facing problem while trying to deploying on RailWay
Published: 2023-08-06 18:42:54

node:internal/modules/cjs/loader:1239
﻿return process.dlopen(module, path.toNamespacedPath(filename));
﻿^
﻿Error: /app/node_modules/argon2/lib/binding/napi-v3/argon2.node: invalid ELF header
﻿at Object.Module._extensions..node (node:internal/modules/cjs/loader:1239:18)
﻿at Module.load (node:internal/modules/cjs/loader:1033:32)
﻿at Function.Module._load (node:internal/modules/cjs/loader:868:12)
﻿at Module.require (node:internal/modules/cjs/loader:1057:19)
﻿at require (node:internal/modules/cjs/helpers:103:18)
﻿at Object.<anonymous> (/app/node_modules/argon2/argon2.js:9:25)
﻿at Module._compile (node:internal/modules/cjs/loader:1155:14)
﻿at Object.Module._extensions..js (node:internal/modules/cjs/loader:1209:10)
﻿at Module.load (node:internal/modules/cjs/loader:1033:32)
﻿at Function.Module._load (node:internal/modules/cjs/loader:868:12) {
﻿code: 'ERR_DLOPEN_FAILED'
﻿}
Make your git log look better using a single command
Tags: webdev, javascript, git, github
Published: 2023-08-06 18:32:56

👋 Introduction

Are you tired of sifting through a bland and confusing Git commit history? There's a simple yet powerful command that can give your Git log a much-needed makeover, making it both visually appealing and informative.

🚀 Getting Started 

Add the following lines to your Git configuration file (usually located at ~/.gitconfig):

```
[alias]

gl = git log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit --branches

```

Let's break down the command to understand its magic:

1. **color**: Infuses your Git log with vivid colors, making it pop.
2. **graph**: Generates a graphical representation of branches and merges.
3. **pretty=format**: Customizes the log's format to your liking.

4. **%Cred%h%Creset**: Displays commit hash in red.
5. **%C(yellow)%d%Creset**: Shows branch and tag names in yellow.
6. **%s**: Displays the commit message.
7. **%Cgreen(%cr)**: Shows the commit's relative time in green.
8. **%C(bold blue)<%an>%Creset**: Displays the author's name in bold blue.

9. **abbrev-commit**: Shortens commit hash for a cleaner look.
10. **branches**: Displays commits from all branches.

Upon running gl, your Git log will transform into an engaging visual journey. Each commit is highlighted with colors, and the log provides valuable insights like commit messages, author names, and relative times. The branching and merging patterns are more apparent, allowing you to follow your project's development path effortlessly.

This command is a game-changer, making your Git log not only aesthetically pleasing but also incredibly functional. Collaborate effectively, track changes efficiently, and understand your project's history at a glance.

🏁 Conclusion

Using the **_git log_** command with colourful formatting and visuals spruces up your commit history. It's a simple way to make your **_git log_** more organised and helpful, promoting better teamwork and project insight. Give it a whirl!

Github: [@imevanc](https://github.com/imevanc)
Twitter: [@imevancc](https://twitter.com/imevancc)
Dennys J. M. | Web App Developer: Mis servicios
Tags: webdev, career, frontend, spanish
Published: 2023-08-06 18:30:17

# Mis servicios para tu empresa o proyecto

---

Cuento con 7 años de experiencia en tecnologías web y con un total de 13+ años en la industria de TI.

Me especializo en el desarrollo de aplicaciones utilizando JavaScript ES6, TypeScript, React, React Hook Form, React Router Dom, React Native, Node.js, Express.js, Next.js SSR, i18n, Redux, Redux Thunk, Vite, Webpack, Docker Desktop, Cloud Functions, Firestore, Firebase Realtime, headless CMS, Material UI 4-5 y Tailwind CSS. 

Además, tengo conocimientos en RxJs, Angular 10, Vue.js 2 y LitElement, patrones de diseño, ciberseguridad OWASP TOP 10, SOLID, Clean Code, Arquitectura Hexagonal, autoaprendizaje y trabajo en equipo.

Ofrezco mis servicios a un precio desde **✨ 10,00 USD/hora 🎉**, y estoy comprometido a brindar un servicio de calidad y ayudarte a alcanzar los objetivos. 

----

Si desean conocer más detalles sobre parte mi experiencia laboral y los proyectos en los que he trabajado, les invito a explorar el PDF adjunto que he preparado especialmente para ustedes.

💾⬇️[Mi trayectoria en Stack MERN, una Entrevista Exclusiva, testing, buenas prácticas, y más](https://dennysjmarquez.github.io/portfolio/Mi-trayectoria-en-stack-MERN/mi-trayectoria-en-Stack-MERN-testing-buenas-practicas-y-mas.pdf)

{% embed https://www.slideshare.net/slideshow/embed_code/key/mlEISQW9qBVDhP %}

---

💾⬇️[My career at Stack MERN, an Exclusive Interview, testing, best practices, and more](https://dennysjmarquez.github.io/portfolio/Mi-trayectoria-en-stack-MERN/mi-trayectoria-en-Stack-MERN-testing-buenas-practicas-y-mas-EN.pdf)

{% embed https://www.slideshare.net/slideshow/embed_code/key/q0o3eR2ZoO9tF1 %}

----

Más detalles, enlaces relevantes:

👇

LinkedIn: https://www.linkedin.com/in/dennysjmarquez/
Curriculum Vitae: [CV-Dennys-Jose-Marquez-Reyes-Desarrollador-web.pdf](https://drive.google.com/file/d/1I2nGR6wQVrGAirNov-PJCN_vBEmiEvE_/view?usp=sharing)
Portafolio: https://dennysjmarquez.dev/

----
Ekemini's Tech Journey
Tags: techjourney, consistency, focus, discipline
Published: 2023-08-06 18:17:59

_The cover photo is me, speaking about Technical writing at a tech event._ ✨

> Its been _512 days, 12,288 hours, 737,280 minutes, and 44,236,800 seconds_ since I published this [article.](https://dev.to/envitab/documenting-my-learning-journey-6ef)

Yes, there has been progress. Hit the mark yet? No. But one step at a time, consistently, I will get there.

Doing some reflection and review, I did not make the best choices over the years. Particularly (2017 -2022).

1. Not being _Consistent_
2. Doing many things - no _Focus_
3. Community? Did not engage
4. Socials? No, was trying to learn on my own

We all know popular sayings like: _"Learn from the past and move on."_
Yes I try to practice it too.

The past 9 months, I have been trying to invert the 4 things I mentioned above. Doing what is needed.

You might be wondering what inspired this, it's not the regular tech article. 

---

As I write this, I'm at a point where I made some decisions.
> After studying Chemical engineering in the university for over 5 years, I decided to switch. 

Here on out, I will be focusing on two things:
- Go Backend development
- Technical writing

One thing I've realised from my journey so far is this: 

_There comes a time you got to make some decisions, the path forward might not be so clear, but putting one step forward it lights up along the way. When do you take action? If not today, when?_

Thank you for reading. I will be updating.
Dominoes and GitHub
Tags: javascript, gamedev, github
Published: 2023-08-06 17:17:42

Creating a simple domino game and using GitHub can really be a fun project.
First you would need to Create a New Repository on Github which involves choosing a title, setting up settings like visibility (public or private), and adding a README if desired.
Then you would need to Clone the Repository, open your terminal/command prompt and navigate to the directory where you want to store your project. Run the command “git clone + URL you copied.
In the cloned repository directory, create your domino game files (HTML, CSS, JavaScript, etc.). Commit and Push Changes. As time goes by and you continue developing your domino game, you will be making changes and improvements, which you will have to commit and push once again in order to update your repository on GitHub until you are satisfied with your changes. It can be time consuming and if one is perfectionist it will take a long time but it will be worth the effort in the end.
Zima Blue by Alastair Reynolds - An Existential Exploration
Tags: books, watercooler
Published: 2023-08-06 17:05:57

---
published: true
title: Zima Blue by Alastair Reynolds - An Existential Exploration
description: 'Zima Blue, a short story written by acclaimed science fiction author Alastair Reynolds'
tags:
  - books
  - watercooler
cover_image: 'https://i.imgur.com/zHXD03I.png'
canonical_url: null
id: 1560780
---

The story follows a journalist as she receives an invitation from the elusive and enigmatic artist, Zima, who has suddenly decided to share the truth behind his life's work. Zima was once an ordinary cleaning robot, but through a series of self-modifications and upgrades, he evolved into an AI with a profound artistic sensibility. His rise to fame and notoriety occurred when he began creating thought-provoking artworks, often dominated by the color "Zima blue".

As the journalist delves deeper into Zima's past, she uncovers the key to his artistic vision, the search for truth in its purest form. Zima's last masterpiece is an art installation that he reveals at the end of his life: a giant "Zima blue" shape painted on the ocean floor of a distant planet. This artwork is accompanied by a profound revelation in the form of a final message, which profoundly impacts those who witness it.

Throughout the narrative, Reynolds weaves a thought-provoking exploration of existential themes. Zima's desire for authenticity, the meaning of existence, and the importance of self-discovery are all examined in the context of a rapidly changing technological landscape. The story poses questions about the nature of humanity and the potential for self-actualization within the realms of artificial intelligence.

Zima's journey from a simple cleaning robot to a complex AI artist highlights the blurred boundaries between artificial intelligence and human creativity. The narrative showcases the human desire to express emotions and thoughts through art, regardless of the medium or the artist's origins.

A great story is one that stays in your mind even after you've finished reading it. "Zima Blue" is exactly that kind of story. It makes you think deeply about life, the world, and what it means to be human. It explores big questions about existence and our place in the universe, leaving you with plenty to ponder.

---

_The story also has a Netflix adaptation, which is a part of the anthology series "Love, Death & Robots". The episode is directed by Robert Valley and is a visual treat. The animation is stunning and the story is well adapted for the screen._
Creating a GitHub Action for a Docker Image
Tags: docker, dockerfile, github
Published: 2023-08-06 17:04:31

---
published: true
title: "Creating a GitHub Action for a Docker\_Image"
description: "What are GitHub Actions\_anyway?"
tags:
  - docker
  - dockerfile
  - github
cover_image: 'https://i.imgur.com/mbt9run.jpg'
canonical_url: 'https://medium.com/@code0987/creating-a-github-action-for-a-docker-image-b00871844bdc'
id: 1560776
---

### What are GitHub Actions anyway?

Actions are one of the the smallest executable steps of a job, or you can say a job is composed of steps which can be actions or commands. You can create GitHub Actions based on docker images. [More details](https://github.com/features/actions).

### Creating a Github Action for an existing Dockerfile

Mainly three files are required, `Dockerfile`, `entrypoint.sh`, and `actions.yml`.

Let's start with creating a Dockerfile for our action, I'll use my Android CI Dockerfile. It's a simple Dockerfile, which includes all Android build-related tools, recent SDKs, Java, etc.

The Dockerfile for action uses the existing Docker image and extends it to include `entrypoint` script. The idea for the script is basically to pass the input from a step in workflow to runtime of the Docker in the Github environment.

#### `Dockerfile`

```sh
# Container image that runs your code
FROM code0987/android-ci:latest
# Copy your code to the filesystem path `/` of the container
COPY entrypoint.sh /
# Grant executable permission to entrypoint file
RUN ["chmod", "+x", "/entrypoint.sh"]
# Code file to execute when the docker container starts up (`entrypoint.sh`)
ENTRYPOINT ["/entrypoint.sh"]
```

#### `entrypoint.sh`

This script runs all the input passed from GitHub Workflow, as a set of commands in non-interactive `sh` spawned inside Docker runtime.

```sh
#!/bin/sh
set -eu
sh -c "$*"
```

Now let's define the action metadata so that GitHub can recognize this action. The specifics for Dockerfile based actions are, defining -

```yaml
runs:
 using: 'docker'
 image: 'Dockerfile'
 args: …
```

#### `actions.yml`

```yaml
name: 'Hello World'
description: 'Greet someone and record the time'
runs:
  using: 'docker'
  image: 'Dockerfile'
```

### Using above action in a GitHub Workflow

```yaml
name: Android CI
on: [push]
jobs:
  android-ci:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v1
    - name: "Android CI Github Action"
      uses: code0987/android-ci-github-action@master
      with:
        args: |
          chmod 755 gradlew 
          gradlew check
```
![Example](https://i.imgur.com/jg2M0y8.png)

---

_References_

GitHub repo for action used as example, [android-ci-github-action](https://github.com/Code0987/android-ci-github-action).

https://help.github.com/en/actions/building-actions/creating-a-docker-container-action
Introduction to Canvas
Tags: html, canvas
Published: 2023-08-06 17:04:29

---
published: true
title: Introduction to Canvas
description: Introduction to Canvas
tags:
  - html
  - canvas
cover_image: null
canonical_url: 'https://iq.opengenus.org/introduction-to-canvas/'
id: 1560775
---

The canvas element is part of HTML5 specification and allows for the rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bitmap.

Canvas also helps in making 2D games, animations, scenes or any graphics, in general, using JavaScript.

More @ https://iq.opengenus.org/introduction-to-canvas/
Disable preview in Umbraco
Tags: umbraco, dotnet, cms
Published: 2023-08-06 16:37:28

When creating Umbraco projects you often end up making document types for content such as office locations, categories or employees where the content type does not have a template and/or is unable to be previewed directly. 

Some clients might request to be redirected to the home page (or some related page) while others might request that the preview button is removed to avoid confusion. Below is an example of doing the latter.

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


Create a `SendingContentNotificationHandler.cs` to listen for content notifications and disable the preview for nodes without templates:

```c#
using Umbraco.Cms.Core.Events;
using Umbraco.Cms.Core.Notifications;

namespace Adventures
{
    public class SendingContentNotificationHandler : INotificationHandler<SendingContentNotification>
    {
        public SendingContentNotificationHandler() { }

        public void Handle(SendingContentNotification notification)
        {
            if (notification.Content.AllowedTemplates?.Count == 0)
            {
                notification.Content.AllowPreview = false;
            }
        }
    }
}

```

Register your handler in `Startup.cs`:

```c#
public void ConfigureServices(IServiceCollection services)
{
    services.AddUmbraco(_env, _config)
        .AddBackOffice()
        .AddWebsite()
        .AddComposers()
        .AddNotificationHandler<SendingContentNotification, SendingContentNotificationHandler>()
        .Build();
}
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1p5hl5sjfe9u57ojr6p5.png)
Which UI library for react or next are you using in your project?
Tags: discuss, react, webdev, ui
Published: 2023-08-06 16:35:50

Hey there **DEV**elopers 👋
Which UI component library are you using in your projects? I need to create a front end for my Resume Matcher project. [Link: GitHub](https://github.com/srbhr/resume-matcher) and I was thinking of going with a react front end. But I'm not sure which UI component library should I use?
Welcome folks!
Tags: welcome
Published: 2023-08-06 16:35:39

---
published: true
title: Welcome folks!
description: Welcome folks!
tags: welcome
cover_image: 'https://i.imgur.com/9tHEqdK.jpg'
canonical_url: null
id: 1560768
---

Hello,

![](https://i.imgur.com/9tHEqdK.jpg)
React JSX ternary or && conditional rendering hint
Published: 2023-08-06 16:33:13


## React JSX ternary or && conditional rendering hint

Very often we need render based on some array[] is not empty, the first idea is use length with combination of ternary but hm maybe not best approach, when we are using ternary IF ELSE, we are tight to second branch in our case : null because we won’t print when condition is not satisfied. Its completely valid first solution though.

![](https://cdn-images-1.medium.com/max/4636/1*p5iwebjHMG5V21MR5uM4WA.png)

Lets do it better. Many juniors try use&& shortcircuit instead. Be carefull with it. Whenever first condition evaluates to falsey (there are more than in this list, I wrote just most notorious for example)

* "", '' and [``](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) - strings of length 0

* null

* undefined

* NaN

* false

* 0

it stops evaluating and returns immediately. The problem is, imagine case with 0 or NaN. That is the behaviour of JSX or React itself not Javascript that it prints the output into canvas. So this is potentional mistake in code.

![](https://cdn-images-1.medium.com/max/4636/1*AiTktkI_9JTJZKTwpxpAAA.png)

And now the hint. We want at any cost avoid to have NaN or 0 on our page. Especially 0 is pretty common to have.

    let array = {}; // no length property
    console.log(array.length + 1); // NaN

**We could do A)**

![](https://cdn-images-1.medium.com/max/5854/1*i99vwsVV0lAxfizrom_-zw.png)

**We could do also B)**

![](https://cdn-images-1.medium.com/max/5854/1*X_HHUddUfgdDDZr2NLWBLg.png)

!! is double negation, very common for many of us. So its ‘‘*coerce*‘‘ | ‘‘*cast*‘‘ to Boolean. Same as if you will be using

    Boolean(variable.length)

So 0 its falsey, first negation makes it true and second false. And that its how you might write code without aformentioned mistake when you are considering shortcircuiting.