teleren/devto huggingface dataset:
When centering text is more difficult than you think!
Tags: css, webdev, discuss, design
Published: 2022-08-23 01:38:00

Imagine you're an experienced web developer 👨‍💻 and someone asks you to _center_ a text inside a box. _"Not like I didn't do that a 1 Mio times in my life"_ you say and continue. Rule after rule is being added by you to the css file, and finally you look at the result. Something is off, the text isn't just a little bit too low. In fact, the text in the button is also too low, it was never really centered. You apply, just like a pro would do, EVERY css rule that has "align" in the name and set it to "center" aaaand doesn't work,

That wouldn't happen to you? Well, go ahead, logout and check the _Log in_ and _Create account_ button from [dev.to](dev.to). Did you notice that the space above is larger than the one below? It is off by a pixel.

Here you can count them 😉:
![Picture of the create account button with bad vertical text alignment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8e11g3fcxr1853td24sg.png)

Now I don't dare to say that it was by accident in the case of dev.to, and I will go ahead, saying it is _by design_ like that. But why could that be the case on other websites?

Well, the cause of the issue is _vertical metric_ (or rather its poor values), which as the name implies, is there to vertically align the font. If that metric is off, your alignment will be trash. "Only unknown, cheap fonts are affected" I hear you say, to which I can only answer: **No!**

Just to give you an example: One of them is **Open Sans**, which according to Google Fonts is used by 130,000,000 websites and the second most used font from Google Fonts... which means 130,000,000 Websites have wrong text alignment 😅


_Cheers_


Edit #1:
The vertical offset is most likely intentionally by the creator(s) for most fonts. However, I think it would be better if all of them would be centered by default and manually offset by software, e.g. using css-rules.

[leading-trim](https://drafts.csswg.org/css-inline-3/#leading-trim)

Edit #2:
Above I said that all 130,000,000 websites are affected by it, but that would only be the case if all of them actually tried to vertically center at least one piece of text using that font.
Hello devs, Get readyyyyyy let's go through the struggles of OOP together
Published: 2022-08-23 01:49:58

I want to start with the relationship between an object and its class. I'm breaking it down for the layman who hasn't even touched the keyboard to understand. Consider a class of 50 students. All the students have the same set of attributes of name,age,and height. If I want a student from the class, we call a student out of the class with the 'new' directive to indicate that the student is part of the class and shares the attributes with other members of the class.
Kojo is a student of a physics class. All the students study 8 subjects. If I want to assess Kojo from the physics class, I will call Kojo who's an 'object' to assess his him by his subjects. If you want the values of Kojo's subject, you can call them Kojo's math, Kojo's English, Kojo's science, Kojo's sociology. That's where the object referencing comes into play. Object-> (class variable) or Object.(class variable). So Kojo->math or Kojo.math
Object class relationships seen on the eyes of the general. 

#OOP #PHP #C
Admitting Something Embarrassing
Tags: javascript, webdev, beginners, programming
Published: 2022-08-23 01:43:00

## I think a large part of being a beginner at something is owning your mistakes and being able to laugh at yourself. 


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

### I find myself studying and reviewing almost too much at times and it is almost counter productive. So much so that during week 1 of my bootcamp, I forgot what a [parameter](https://developer.mozilla.org/en-US/docs/Glossary/Parameter) in a function was.
Understanding GenStage back-pressure mechanism
Tags: computerscience, architecture, programming, elixir
Published: 2022-08-23 01:37:00

## Introduction

Back-pressure is a technique utilized to prevent an application or a piece of software of using more resources than there are available on a given infrastructure.

[GenStage](https://hexdocs.pm/gen_stage/GenStage.html) is an Elixir library to build complex processes divided by steps (or stages) that share data between them. This is the core behaviour used on [Broadway](https://hexdocs.pm/broadway/introduction.html), a multi-stage data ingestion backed on message queue systems such as Kafka, RabbitMQ and others.

## The problem

Suppose you've built a news sharing system which is composed of three main components:
- **Data ingestor (A):** constantly searches and downloads tweets that contains hashtags of interest, such as #computerscience, #architecture and #programming.
- **Republisher (B):** takes a tweet content, renders it on several different formats (HTML, Markdown, PDF and so on) and then publishes on different platforms.
- **Reporter (C):** writes to database the timestamps of each publishing and also exports metrics to be analyzed on the future.

![System configuration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kezoyjiyhsq0bigpq88q.png)
 
The process being executed on component A is simple and takes only a single request to be done: a GET on Twitter's API. For this action we will account an imaginary measurement of **1N** amount of energy to get done.

Now that a tweet content is retrieved and delivered to component B, a more complex process starts: it is required to transform the data acquired on several different formats and then make several other requests to external services (which may or not fail, timeout or take several more amount of time than usual). For this step then we will account **10N** amount of energy taken.

Component C executes a simpler process as well since it only does a write operation on database and then create telemetry data that will be polled later. That's **2N** amount of energy on our example.

As you can imagine, this scenario is problematic because component A generates input for component B on a speed ratio that it can't absorb, and that generates a overflow on B's execution queue.

![System overflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m65fd4xz2bis7yht4xz2.png)

## The solution

GenStage strategy to apply back-pressure is to invert the flow direction from the producer to the consumer and so consumers now control the velocity and amount of data transmitted.

![Back-pressured system](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/91fu1mipwq3nq5282ng1.png) 

Component C starts with its execution queue empty and then asks Component B (which is a consumer-producer) to produce a piece of data.

Component B which also has it's execution queue empty now asks Component A to produce a piece of data and only then the Tweeter API is called!

The amount of data produced is back-pressured so no queues gets overflowed and that's how you have a healthy workflow on Elixir using GenStages.
Learning the Basics of DEV
Tags: javascript, webdev, programming, beginners
Published: 2022-08-23 01:28:00

###It has just occurred to me that these posts should be written in Markdown
#considering I have only just started to use Markdown this morning, I think it's fair to make a short list of things that I think are cool within it. 
* its definitely cool how this little star creates an unordered list.
2. However that can only get you so far. Often I'll have to create an ordered list.
* <u>Sometimes, certain situations even call for extra inflection via underlining.</u>
3. I may only know the basics of Markdown but luckily I still have _plenty_ of time to _learn_.
My First Post on DEV!
Tags: webdev, beginners, programming
Published: 2022-08-23 01:16:00

Hello World!
Today, August 22nd 2022 is the beginning of my blogging journey. I have been studying the art, science and passion that is computer coding for 14 days now. My first impressions? Holy moly how on earth will I ever understand what is happening. As long as I continue to work at it, it wont be long before I have conquered this new skill.
"Agile" isn't about delivering every sprint
Tags: feedback, agile, scrum, sprints
Published: 2022-10-23 16:33:01

---
title: "Agile" isn't about delivering every sprint
published: true
date: 2022-08-23 00:00:00 UTC
tags: feedback,agile,scrum,sprints
canonical_url: https://jhall.io/archive/2022/08/23/agile-isnt-about-delivering-every-sprint/
cover_image: https://jhall.io/images/bn-bald-man-plugging-ears.jpg
---

I was recently having a conversation with someone who was asking if their team could be considered “agile.” As evidence to support the claim, they said “The team delivers working software every sprint.”

Of course, delivering frequently is usually a good thing. But is it enough to claim “agility?”

Of course not!

Agility is the ability to move quickly, or to adapt to change.

To truly claim agility, the team must constantly receive and incorporate feedback into their work and planning. Frequently delivering software is not sufficient. Although, it probably _is_ necessary, to allow for feedback.

To make the point as blunt as I can:

- Frequently delivering software that nobody uses isn’t agile.
- Frequently delivering software that doesn’t work isn’t agile.
- Frequently delivering software, but not considering feedback on how to improve, isn’t agile.

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
Chrome插件开发 - 集成tailwind
Published: 2023-08-13 02:18:50

---
title: Chrome插件开发 - 集成tailwind
published: true
date: 2022-08-23 00:00:00 UTC
tags: 
canonical_url: https://manon.icu/blog/translate/build-chrome-extensions/add-tailwind
---

在上一篇文章[【New Tab】](https://manon.icu/blog/translate/build-chrome-extensions/new-tab)学习了创建第一个标签。

这篇文章学习集成[tailwind](https://tailwindcss.com/docs/installation)

## 安装依赖

```bash
#初始化node项目
npm init -y

#安装parcel和tailwind
npm i parcel tailwindcss

#安装Parcel静态资源复制和postcss
npm i -D parcel-reporter-static-files-copy postcss-cli
```

## 迁移静态资源

在根目录创建`static`文件夹，移动`manifest.json`和`icons`文件到`static`

创建`.parcelrc`

```json
{
  "extends": ["@parcel/config-default"],
  "reporters": ["parcel-reporter-static-files-copy"]
}
```

## 集成 tailwind

在根目录创建`.postcssrc.json`

```json
{
  "plugins": {
    "tailwindcss": {}
  }
}
```

执行`npx tailwind init`，tailwind 将会自动创建`taiwind.config.js`

```js
module.exports = {
  content: ['*.html'],
  theme: {
    extend: {}
  },
  variants: {
    extend: {}
  },
  plugins: []
}
```

打开`css/style.css`替换所有

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

## 修改 package.json

```json
{
  "scripts": {
    "prebuild": "rm -rf dist .parcel-cache",
    "watch": "parcel watch new-tab.html",
    "build": "parcel build new-tab.html"
  }
}
```

执行`npm run build`，与之前不同的是，chrome 插件加载已解压文件的时候选择`dist`

[【Source Code】](https://github.com/rebelchris/new-tab-extension/tree/tailwind)
Day 619 : Come Back Around
Tags: hiphop, code, coding, lifelongdev
Published: 2022-08-22 23:55:42

_liner notes_:
- Saturday : Stayed up late Friday! I watched "She Hulk" and an episode of "Dr. Stone". I also did some Japanese studying. Got up a little late on Saturday. Went to the station. Had a great time. I even got the show done and uploaded a little earlier than normal. The recording of this week's show is at https://kNOwBETTERHIPHOP.com

![Radio show episode image of a photo of a Vincent, Alabama police car outside a red brick police building with grass growing high underneath it with the words Aug 20th 2022 Stumpy's](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/02h1vtcllqemqrswgnri.jpg)

- Sunday : Had a pretty productive day. In addition to the regular stuff, I was able to add a QR code to a side project. Also figured out get a webcam hooked up to my phone through an app. I think that can help out with a project I created. Still need to work through it more.

- Professional : Had a good start to the week. Cleaned up some code from a sample demo application and wrote up some documentation. Booked my flight and hotel for an upcoming trip. Responded to some folks. Had a meeting. Yeah, pretty good day.

- Personal : So, I can not find this camera I had anywhere! So I ordered another one and this package came with a case so hopefully I won't lose this one. I'm sure I'll find it so it'll be okay to have two. I got a new case for my phone that doesn't do what it said it would do, so I put in a refund for that. Luckily I also ordered a duplicate of the old case to use.

![A desert landscape of Canyonlands Nat'l Park, UT, USA with a large leave-less tree at night under a sky full of stars](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8kkx7g40weh89oei65x2.jpg)

Looking forward to playing with the webcam, now that I can hook it up to the phone. There's a pro version of the app and if I can get it to work the way I want, I'll purchase it. So yeah, going to come back around with my side project now that I can use the new webcam. Going to see if everything will just work with the new camera. I also want to study some Japanese.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube JRPIX-VhW5A %}
Data Science Dependencies
Tags: datascience, python, programming
Published: 2022-08-22 22:46:51

These are prerequisites to begin pursuing data science. install all of these packages on your computers. You may also get the most recent version of each item.
**Below are dependencies.**
  - python=3.8.3
  - pip=20.1.1
  - eli5=0.10.1
  - folium=0.11.0
  - jupyter=1.0.0
  - matplotlib==3.3.0
  - missingno=0.4.2
  - numpy=1.19.1
  - pandas=1.0.5
  - pandas-profiling=2.8.0
  - pandera=0.4.4
  - scikit-learn=0.23.1
  - scipy=1.5.0
  - seaborn=0.10.1
  - shap=0.35.0
  - sqlalchemy=1.3.18
  - voila=0.1.21
  - pip:
    - discover-feature-relationships==1.0.3
    - quilt==2.9.15
    - yellowbrick==1.1
Tasks automation for social media only
Tags: twitter, socialmedia, automation
Published: 2022-08-22 22:43:00

Hello all

I’m working on a web app prototype:

A set of useful and automated tasks/workflows for social media only. They will be configured by you and executed when an event is triggered. 

Examples:
 
Event: If I’m on holidays,
Action: Then, Automatically update my twitter profile banner.

Event: If I’m on holidays
Condition: And a follower DM me, 
Action: Then, Send my auto response message.

Event: If ~my tweet "xxxx"~ reaches ~X likes~
Action: Then, Tweet this ~message~.


I know Zappier gives some of theses triggers but there are not social media oriented at all. (ie. only 8 triggers exist for twitter)

Is this something you might be interested of ?
Do you have any ideas on what triggers you would like me to create?
I have an error when I want to save to the redux state. A non-serializable value.
Tags: help, react, redux, javascript
Published: 2022-08-22 22:31:55

I have an error when I want to save to the redux state.

 A non-serializable value was detected in action, in the path: payload. picture. Value: FileList {0: File, length: 1}

Take a look at the logic that dispatched this action: {type: 'books/addToListOfBooks', payload: {…}}

```
<input
          type="file"
          {...register('picture', {
            validate: {
              lessThan10MB: (files) =>
                files[0]?.size < 1024 * 1024 || 'Max 1MB',
              acceptedFormats: (files) => {
                const pictureType = files[0]?.name
                  .toLowerCase()
                  .split('.')
                  .pop()
                return (
                  ['jpeg', 'png', 'gif'].includes(pictureType) ||
                  'Only PNG, JPEG e GIF'
                )
              },
            },
```
GIT - multi user
Tags: git, ssh, contribution, multiuser
Published: 2022-08-22 20:03:00


## Abstract

When we work on different projects, sometimes we have different git providers (e.q. GitHub, GitLab, Gitea,...).
Also it is possible that we need to use different users for our contribution.
This is obiously possible using git with **https**.
Because **ssh** is considered more secure in context of **git** you need to manage several ssh keys.

It is possible to specify the key you need. For example

```bash
GIT_SSH_COMMAND='ssh -i private_key_file -o IdentitiesOnly=yes' git clone user@host:repo.git
```

As you can see this is not super convenient.
There is an easier way using an ssh config file.

## Theory

You are able to configure **ssh** with a file **~/.ssh/config**.
**Remark** If interested you are able to find all available configration parameters [here][ssh-config]
You are able to set the identity related to the host with the following parameters

```txt
Host <host>:<port>
  HostName <host>
  Port <port>
  IdentityFile <path_to_id_file>
```

- Host: add a name for the host
  - HostName: The domain, e.q. github.com, gitlab.com, ...
  - IdentityFile: absolute path to the specific private ssh cert
  - Port [OPTIONAL]: just use if you have your own git provider service running

## example

### setup

Get somehow 2 users in 2 different git providers (e.q. GitHub, GitLab,...).
Now lets create 2 different (public/private) ssh key pairs.

```bash
ssh-keygen -t rsa -N "" -C "<first_user_mail>" -f '~/.ssh/id_rsa_first'
ssh-keygen -t rsa -N "" -C "<second_user_mail>" -f '~/.ssh/id_rsa_second'
```

To be able to ssh into the git provider, you need to add the private keys to your git provider settings.

```bash
cat ~/.ssh/id_rsa_first.pub
cat ~/.ssh/id_rsa_second.pub
```

This step is dependent on your git provider.

Now we want to configure git ssh to use those files related to the git provider.

```bash
touch ~/.ssh/config
```

add the following content to the file.
The hostname is dependent to the git provider.

```ssh
# user 1
Host <first_git_provider>
  HostName <hostname_1>
  IdentityFile ~/.ssh/id_rsa_first

# user 2
Host <second_git_provider>
  HostName <hostname_2>
  IdentityFile ~/.ssh/id_rsa_second
```

to **~/.ssh/config**

### test

Now we are set to test the settings.
Lets first create 2 repositories. One in each git provider.

Now lets clone the repositories. `cd` in a directory of your choice.

```bash
git clone <ssh_clone_url_1>
git clone <ssh_clone_url_2>
```

We want to clone the repositories.
Yay it works :rocket:

As you can see when that the right user is auto selected :rocket:

[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/A0A4EKB66)

[ssh-config]: https://linux.die.net/man/5/ssh_config
Online Meetup: Learn How to Process a List With a Helper Flow in 25 Minutes
Tags: nocode, webinar, okta, workflows
Published: 2022-08-25 18:57:56

---
title: Online Meetup: Learn How to Process a List With a Helper Flow in 25 Minutes
published: true
date: 2022-08-25 05:31:32 UTC
tags: nocode, webinar, okta, workflows
canonical_url: https://maxkatz.net/2022/08/22/online-meetup-learn-how-to-process-a-list-with-a-helper-flow-in-25-minutes/
---

Join another Okta Workflows online meetup ✨

[![Workflows main flow and helper flow](https://katzmax.files.wordpress.com/2022/08/workflows_howto_helperflow_mainflow_mapping.png?w=782)](https://katzmax.files.wordpress.com/2022/08/workflows_howto_helperflow_mainflow_mapping.png)
<figcaption>Workflows main flow and helper flow</figcaption>

**⭐What is this**

Join this (fun) no-slides online meetup to learn how to process a list using a helper flows in [Okta Workflows](https://www.okta.com/platform/workflows/) in 25 minutes. 

**🚀 When and register**

- When: **Wednesday, August 31, 9 a.m. PT**
- I want to attend: [register now](https://www.crowdcast.io/e/oktaworkflows_learn-how-to-process-a-list-with-a-helper-flow)

**🎓What you will learn**

You will learn step-by-step how to build a flow that uses a helper flow to process a list: 

- How to use a List For-Each card to process a list
- How to use the streaming option to process a list

And, stick around to get your questions answered. This is a no slides session (well, maybe just one or two at the beginning)

**👷🏻Who should attend**

Everyone is welcome of course, but if you want to know, these folks should attend:

- Folks who are new to Workflows!
- Folks who want to learn about No-Code, workflows and automation
- IT Administrators, Integration Architects
- Product Manager, Developers, Marketing Operations and Technology Leads
- DevOps Engineers and Security Engineers

**🎙Speaker**

- Max Katz, Workflows Community Advocate

**🎥 Previous online meetups**

Looking for previous online meetups recordings? Go to our YouTube channel to [watch all previous events](https://youtube.com/playlist?list=PLIid085fSVdvyK8F4xuk49EchBPmAVNHG).
Security Test REST APIs in Minutes for Free
Tags: api, security, testing, lowcode
Published: 2022-08-22 21:04:00


EthicalCheck is a **free and automated API security test service**.

Since our launch a few months ago, we learned **one-third of tested public-facing REST APIs have vulnerabilities** that automated bots can easily exploit. EthicalCheck is a free web app that instantly detects vulnerabilities in REST APIs without coding. 


How to get started

1. Go to the https://EthicalCheck.dev

2. **API**: Enter OpenAPI/Swagger URL and your email in the input fields provided and click the scan button.

3. **Processing**: Once your request is submitted. The EthicalCheck engine creates a map of all your API endpoints. It then automatically writes security tests covering the OWASP API #2. Finally, it runs the tests against your API. All tests are non-intrusive, and they only look for broken authentication issues.

4. **Report**: You'll receive an enterprise-grade App/API penetration test report. The test report meets SOC 2 and similar compliance mandates.

5. **Bugs**: The test report includes all the tested endpoints, coverage lists, exceptions, and vulnerabilities/bugs. Vulnerabilities are automatically triaged for you, which means every vulnerability has a severity, CVSS score, endpoint information, OWASP tag, etc., saving you time and resources. 


![Result view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ee2850mods6mtmuyozud.png)

**Try a Sample REST APIs:**

Check our sample API on the https://ethicalcheck.dev home page. 
This sample API is a banking API with features like accounts, transactions, and more. It's an excellent API to learn how to detect authentication and authorization security bugs.
Caesar Cipher and JavaScript
Tags: javascript, tutorial, beginners, tip
Published: 2022-08-22 22:09:00

### What is Caesar Cipher?
> In cryptography, a Caesar cipher, also known as Caesar's cipher, the shift cipher, Caesar's code or Caesar shift, is one of the simplest and most widely known encryption techniques. It is a type of substitution cipher in which each letter in the plaintext is replaced by a letter some fixed number of positions down the alphabet. For example, with a left shift of 3, D would be replaced by A, E would become B, and so on. The method is named after Julius Caesar, who used it in his private correspondence.

---

### Code
```javascript
const caesarCipher = (str, shift) => {
  const letters = 'abcdefghijklmnopqrstuvwxyz'.split('');
  let res = '';

  for (let i = 0; i < str.length; i++) {
    const char = str[i];
    const ind = letters.indexOf(char);

    if (ind === -1) {
      res += char;
      continue;
    }

    const encodedIndex = (ind + shift) % 26;
    res += letters[encodedIndex];
  }

  return res;
};
```

---

### Mocha Test

```javascript
mocha.setup('bdd');
const { assert } = chai;

describe('caesarCipher()', () => {
  it('Shifting Letters Successfully', () => {
    assert.equal(caesarCipher('c', -2), 'a');
    assert.equal(caesarCipher('abcd', 1), 'bcde');
    assert.equal(caesarCipher('yz', 1), 'za');
    assert.equal(caesarCipher('abcd', 100), 'wxyz');
  });
  it("Doesn't shift non-alphabetic Characters", () => {
    assert.equal(caesarCipher('gurer ner 9 qbtf!', 13), 'there are 9 dogs!');
  });
});

mocha.run();
```