teleren/devto huggingface dataset:
Refactoring LENNAH SSG
Tags: opensource, cpp
Published: 2021-10-15 03:08:01

This week we learned about refactoring and combining commits using Git. As I have mentioned in my first blog about LENNAH, I wanted to make my SSG in C++ because I wanted to practice my C++. Our projects were meant to be pretty rough around the edges and messy to begin with so we would have a lot to improve on. So I figured using C++ would be perfect for that. And indeed it has given me a lot of code to refactor. 

When I originally started off with this project I didn't have many separate files, everything was done under a single cpp file. So I had a lot of code I would need to split, because it was becoming extremely crowded in my single cpp file. It also had a lot of features added from my classmate Andrew, who added to my repo with config file support last week. If you want to see what he did here's a link to his [blog post](https://dev.to/drew5494/drafting-my-first-pull-request-7gg).

First thing I need to do was update and add some of my function descriptions in the code comments. There were a few descriptions missing from some of the features both Gus and Andrew previously added that I touched upon. I also had to update the naming for my readTxt() function because it now also can read .md files so I changed it to readFile(). Then I extracted a function to delete and create an output folder because I noticed that this was done twice in the code. Additionally, I had to update some console outputs for the config file support feature Andrew added.

Once the code clean up and adding of comments was done, it was time for me to split my code and create header files for my classes and functions. This was the hardest step for my refactoring because I had to completely restructure my code. However, once it was done my code became a lot easier to read and also by doing this I was able to simplify some code that was actually repeated by removing the repeated instance completely.

After I tested everything I was able to do an interactive rebase in Git to merge all my commits together. This was a really neat feature that allowed me to keep my actions/changes organized and it was super easy to do! If you want to take a look at my rebased commit you can find it [here](https://github.com/joshuali7536/LennahSSG/commit/fcb95d90da4c90eb54450112c625def0a21598e8). While it looks like a lot was changed it was a lot more manageable because in reality it was a bunch of separate changes. This feature is great to make the commit history look a lot cleaner because I know I am someone who always tends to miss a few things here and there so the tiny commits tend to pile up. Now I don't have to feel as bad when I notice a small thing that needs changing, I can just rebase the commits!

Well anyways thanks for reading, and as always, take care!
Free Airtable-to-PostgreSQL migration tool – launched
Tags: discuss, airtable, showdev, technology
Published: 2021-11-09 10:19:31

Hi everyone!
Me and my team at UI Bakery have released a free tool allowing you to migrate Airtable data to a PostgreSQL database. 
No more Airtable limitations! Follow 3 simple steps:
1. Connect your Airtable database. 
2. Connect PostgreSQL. 
3. Click “Move”.
No tool lock-in. You’re free to go once the migration is finished. 

Check the tool & upvote here: https://www.producthunt.com/posts/airtable-to-postgresql-migration-tool :fire:
Machine learning flavours
Tags: watercooler
Published: 2021-11-09 10:16:23

Machine learning is useful only if you have the right data and have questions to ask that it might be able to answer. Machine learning algorithms find patterns in data but cannot do useful things magically.

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

One of the most common techniques in traditional machine learning is called supervised learning. We want to look at data, understand the patterns and relationships among the data, and predict the results if we are given new examples of different data in the same format.

Regression involves drawing a line through a set of data points to most closely fit the overall shape of the data. Regression can be used for applications such as finding trends between marketing initiatives and sales, or determining rent like in the next example.

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

A simple example of supervised learning: [https://rhurbans.com/machine-learning-intuition/](https://rhurbans.com/machine-learning-intuition/)

Classification aims to predict categories of examples based on their features. Can we determine whether something is a car or a truck based on its number of wheels, weight, and top speed?

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

Unsupervised learning involves finding underlying patterns in data that may be difficult to find by inspecting the data manually. Unsupervised learning is useful for clustering data that have similar features and uncovering features that are important in the relationships.

On an e-commerce site, for example, products might be grouped based on customer purchase behavior. If many customers purchase soap, sponges, and towels together, it is likely that more customers would want that combination of products.

Reinforcement learning is inspired by behavioral psychology and operates by rewarding or punishing an algorithm based on its actions in an environment. It has similarities to supervised learning and unsupervised learning, as well as many differences.

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

If you're interested in more details about ML algorithms, see Grokking AI Algorithms with Manning Publications: [http://bit.ly/gaia-book](http://bit.ly/gaia-book), consider following me - [@RishalHurbans](https://twitter.com/RishalHurbans), or join my mailing list for infrequent knowledge drops: [https://rhurbans.com/subscribe](https://rhurbans.com/subscribe).
Analyzing Kenya Power Planned Interruption Data
Tags: javascript, tutorial, datascience, webdev
Published: 2021-11-09 10:07:58

### Background

Kenya Power(KPLC) is the main power distributor and retails electricity to customers throughout Kenya.
KPLC posts daily planned outages on their official care account [KenyaPowerCare](https://twitter.com/KenyaPower_Care).

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4zf5lc7lq8lev3jhveju.png" alt="KPLC scheduled power interruption" title="KPLC scheduled power interruption" style="zoom: 50%;" />

The planned interruption schedules are posted in image format and include :

- The Region
- The Area
- Date & Time
- Locations within the area

### Purpose of the Project

The main inspirations for this project is:

1. To be able to visualize and understand which parts of the country get more power interruptions than others.
2. To be able to understand trends and patterns which KPLC use for their interruption schedules.
3. To possibly automate the process of notifying citizens (via SMS/Email) about planned outages in there areas as soon as they are posted on the KenyaPowerCare Twitter.

### Project Outline

The project is going to be a series and will go from scraping the planned interruption images from Twitter to analyzing and visualizing this data.

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/glxon5adjp2pv1br3x7j.png" alt="project flow diagram" title="Project flow" style="zoom: 50%;" />

The steps I am going to take to achieve all this include;

1. Scraping the images from [KenyaPowerCare](https://twitter.com/KenyaPower_Care) using this Twitter Image Downloader I built [Twitter Image Downloader](https://github.com/Kimkykie/twitter-image-downloader)
2. Extract Text from the images and converting them to txt file using [Tesseract.js](https://tesseract.projectnaptha.com/)
3. Cleaning, manipulating and analysing the extracted data using [Pandas](https://pandas.pydata.org/).
4. Visualizing the data on a map.
5. Automating the process.

In the next article I am going to take you through the process of building my Twitter Image Downloader.
Fullstack GraphQL starter kit Fall-2021 update
Tags: javascript, react, node, go
Published: 2021-11-09 10:02:58

Hi Dev.to community, I am excited to share the Fall-2021 major update which brings new things to the starter kit.

<b>Changelog<b/>

- Backend is now [available in Go](https://github.com/karanpratapsingh/fullstack-starterkit/tree/master/backend-go)! :partying_face:
- [Docker](https://www.docker.com/) support for development!
- Update Node version to `14.18.0`
- Update CI steps for better tests and build

_Full changelog/PR is available [here](https://github.com/karanpratapsingh/fullstack-starterkit/pull/61)_


Github: https://github.com/karanpratapsingh/fullstack-starterkit

What do you think? Feedback is always welcome!

Happy coding :tada:
An Algorithm to Translate Vanity Phone Numbers
Tags: java, codenewbie, tutorial, 100daysofcode
Published: 2021-11-09 02:07:48

---
title: An Algorithm to Translate Vanity Phone Numbers
published: true
description: An Algorithm to Translate Vanity Phone Numbers
tags: Java, codenewbie, tutorial, 100daysofcode
//cover_image: https://direct_url_to_image.jpg
---

## Background

How would you translate a vanity phone number like `1 800 RED CROSS` to its actual phone number: `1-800-733-2767`?

If you're dialing the number on a phone ☎️, you just find the letters on the keypad and press the corresponding numbers. However, writing a program to translate a vanity number requires an algorithm.

## Data

The input data to this algorithm  is a vanity phone number. It can take many forms:

```bash
1 800 RED CROSS
1-800-RED-CROSS
1-800-Red-Cross
1800REDCROS
1.800.RED.CROS
800-RED-cross
800REDCROS
```

## Assumptions

With the data in mind, let's make some basic assumptions about the algorithm:

* The input data is a string.
* The string must be at least 10 characters long, which is a 10-digit number without separators.
* The string may include all valid characters.

## Algorithm

There are many different ways to write this algorithm. But the basic approach is:

1. Accept a vanity phone number as an input string.
1. If the string length is less than 10, output an error message and quit the program.
1. Convert the string to be all _uppercase_.
1. For each character in the string:

  * If the character is in the range `A`-`Z`, translate it to its corresponding keypad number and output the number.
  * If the character is _not_ in the range `A`-`Z`, output the character.

## Java Implementation

Here are some tips for implementing this algorithm in Java ☕️:

* The `toUpperCase()` function returns an uppercase version of a string.
* The `charAt()` function [accesses a specific character](https://dev.to/realedwintorres/how-to-java-charat-string-function-1dig) in a string.
* A `for` loop can work nicely with `charAt()` to access each character of the string, in order.
* One way to translate a letter from `A`-`Z` to its corresponding keypad number is to use a `switch` statement, where each case is a letter from `A`-`Z`.

There are many ways to implement an algorithm to translate vanity phone numbers to real phone numbers. The first step is to develop the algorithm itself. Consider the input data, assumptions, processing logic, and output. Developing the algorithm *first* makes coding the solution easier.

Now it’s your turn. Can you code the solution? 👩‍💻🧑‍💻

Thanks for reading.

Follow me on Twitter [`@realEdwinTorres`](https://twitter.com/realEdwinTorres) for more programming tips. 😀
📷 New Luos feature: "Gate discovering"
Tags: luos, opensource, embedded, python
Published: 2021-11-09 09:41:40

📷 feature: "Gate discovering"

Some of you struggle to find a device Gate over USB or IP. We add a feature to gate that allows you to list all the gates available on your embedded system, directly from the opensource Luos Python library Pyluos.

→ https://docs.luos.io/docs/tools/gate/

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0basokn4ijxut18hgzf0.png)
Rate Limit specific URLs using Nginx
Tags: nginx, webdev, devops, security
Published: 2021-11-09 09:31:15

---
title: Rate Limit specific URLs using Nginx
published: true
description: How to protect your site by rate limiting specific URLs in Nginx
tags: nginx, webdev, devops, security
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tjrvai6g7skqestqea1r.jpg
---

## Why rate limit?

Rate limiting is a simple way of stopping users (hopefully just the bad ones!) from accessing more of your sites resources than you would like.

I will show you a simple way to rate limit specific URLs by using Nginx.

## Video Walkthrough

The written instructions are below, but here is a quick video walkthrough showing how to apply rate limiting in Nginx.

{% youtube ZWjyhkvBfFA %}

## How to add rate limiting in nginx

At the top of you nginx file, you can define a map like so:


    limit_req_zone $binary_remote_addr_map zone=mylimit:10m rate=5r/s;
    limit_req_status 429;

    map $request_uri $binary_remote_addr_map {
        default "";
        ~^/what-is-new.html $binary_remote_addr;
        ~^/another-url-to-rate-limit.html $binary_remote_addr;
    }

Then within your location block, add:

    limit_req zone=mylimit;

And that's it! Now only webpages matching the $request_uri will have rate limiting applied. This is handy when you have all of your request being routed through a single place, but you only want to have specific pages on your site rate limited.
Day 54-55/100 Project: A Robot
Tags: 100daysofcode, programming, challenge, motivation
Published: 2021-11-09 09:18:06

"[...] the question of whether Machines Can Think [...] is about as relevant as the question of whether Submarines Can Swim."

– Edsger Dijkstra, The Threats to Computing Science

![Robot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/edphyq9xyb9jrvwa4wcf.png)
Best Visual Studio Code Themes
Tags: vscode, themes, programming, webdev
Published: 2021-11-09 09:15:10

VS Code probably has the best community, and they have a lots of editor customization options. Here are a few of my favourite VS Code themes.

### SynthWave ’84 (this one is the best)
Do you remember that endless summer back in ’84? Cruising down the ocean-highway with the top down, the wind in our hair and heads buzzing with neon dreams? No, I don’t remember it either, but with this experimental theme, we can go there.


![Screenshot 2021-08-21 at 6.07.03 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629549429033/-Qs5iRwAAP.png)

 [Download SynthWave '84](https://marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode) 
I have disabled the glow effect but you can enable it if you want to.

### Shades of Purple
I also like shades of purple, Shades of the purple theme is built with several shades of purple and a few contrast colors to make things pop. This also makes SOP a very good theme for teaching, presenting,
![Screenshot 2021-08-21 at 6.08.03 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629549487521/XDwEjHJdA.png)
 [Download Shades of Purple](https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple) 

### Horizon Theme 
it is the beautiful warm dual theme for Visual Studio Code, it comes in dark mode as well, but the light mode looks much better.

![Screenshot 2021-08-21 at 6.12.29 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629549753589/alF41eu27.png)
 [Download Horizon Theme](https://marketplace.visualstudio.com/items?itemName=jolaleye.horizon-theme-vscode) 

### Atom Dark One Theme 
VSCode Theme based on Atom's One Dark theme. Best rated One Dark theme port in the marketplace, features full Workbench theming.

![Screenshot 2021-08-21 at 6.12.50 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629549775051/WuMTlOm_S.png)

 [Download Atom Dark One](https://marketplace.visualstudio.com/items?itemName=akamud.vscode-theme-onedark)
What is Semantic HTML?
Tags: html, webdev, web3, tutorial
Published: 2021-11-09 09:12:28

### What is  Semantic HTML?

* Semantic HTML is a coding style where elements which we use actually have some meaning. Semantic simply put means a logic that has an actual meaning hence comes the name: Semantic HTML, an HTML which is a logic and also has a meaning.

* This practice is good for Search Engine Optimization (SEO)

* it is also good for accessibility, especially for visually impaired people who rely on browser speech, screen readers to interpret page content clearly.
**Here is how a non-semantic HTML looks like:**

![IMG_0135.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1636103009387/8eTJPGf0R.jpeg)



**here is how a semantic HTML looks like**

![IMG_0136.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1636103034458/R43hLkp7H.jpeg)
--------
**Remember:** 
* to write semantic HTML, avoid using div tags everywhere, instead use elements like header, nav, section, article, aside, footer. 

*  all these elements are built with a specific purpose - they are good for SEO too.

*In Simple Words:*

non-semantic elements: `<div>` and `<span>` tells nothing about its content.

Semantic Elements: `<form>`, `<table> `and `<article>` -> clearly defines its content.


if you want any help with the Semantic HTML or any other query then please contact me on my Twitter
Dynamic sendgrid template for multiple items!
Tags: html, design, beginners
Published: 2021-11-09 09:07:40

Ever wondered how to add multiple items in sendgrid template ?
For example you need to notify your platform users about list of courses available. Since the number of courses are dynamic you cannot create a static template for it.
Lets take an example of Grocery list template
![sendgrid template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vc0n53muoa5nucgbz58q.png)

The list of items is dynamic.
```javascript
{
   "items" : [
      {
        "name" : "onion",
        "quantity": 5,
      },
      {
        "name" : "potato",
        "quantity": 5,
      },
      {
        "name" : "chilli",
        "quantity": 5,
      }

   ]
}
```
Inorder to iterate over the items of the nested array, sendgrid gives handlebar capbilities. Example code
```html
{{#if items}}
  <h2 style="margin:10px 10px">Grocery items !</h2>
  {{#each items}}
    <div style="border:1px solid black;min-width:300px;min-height:50px;padding:10px 10px;margin:10px 10px">
        Got to buy {{this.name}}
    </div>
    
  {{/each}}
{{/if}}
```
You can include the similar code to iterate over items and produce a good marketing email templates.
Media Queries Simplified
Tags: html, javascript, css, frontend
Published: 2021-11-09 09:07:22

Media queries were introduced in CSS3 and it uses `@media` rule to include CSS when certain conditions are true.

Media Queries allows you to target any platform you want and write specific styles for that platform, for example, you can change the layout of CSS for a mobile platform where the user opens the app in the mobile platform, this is also called responsive styles because it is responding to different devices differently. 

## for example:


this is the example of the webpage which has a screen size of 1200px: 


![@media query 1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636269510301/M21XPL9Ex.png)

when we are going to change the screen size of this to 500px screen size using this code below:

```
// if the browser window is smaller than 300px, the color of the font will be changed to red.

@media only screen and (max-width: 500px) {
body{
	color:red;
}
}
``` 
it is going to look like this:

![@media query 2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636269672509/bWuTKuxoq.png)
-------------
## Media Query Breakpoints
these are some of the breakpoints for different devices:

*Extra Small Phones*

```
@media only screen and (max-width: 600px) {
}
``` 
*Portrait Tablets and large Phones *

```
@media only screen and (min-width: 600px){

}
``` 
* Landscape Tablets*
```
@media only screen and (min-width: 768px){
}
``` 

*Laptops and Desktop*
```
@media only screen and (min-width: 992px){
}
``` 

* Large Laptops and Desktops *


```
@media only screen and (min-width: 1200px){
}
```
CSS Positions Simplified

Tags: css, html, javascript, frontend
Published: 2021-11-09 09:04:21

CSS positions property can help you set the position of the element in the HTML. it is a very useful property and often quite confusing for beginners so I tried to make things easy today!

** let's look at the different types of position properties in CSS.
**
1. static
2. relative
3. absolute
4. fixed

### Static

- it is the default for every element
- it means that the element will flow into the page as it normally would.
- use it to remove the forcefully applied position to the element.

![static.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1635923426295/glIrhCK-Y.png)


### relative

- it helps us to change the location of the element relative to itself.
- for example:


```
<div class = "relative"> </div>

//CSS 

.relative{
		position: relative;
		top: 10px;
		left: 10px;
}
``` 

![relative.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1635923417231/Y-JSREl4P.png)



### absolute

- this lets you place the element exactly where you want to put it.
- this changes the element according to its parent's element, and when there is no parent element, then it is going to change position according to the HTML element.

```
<div class = "absolute"> </div>

//CSS 

.relative{
		position: absolute;
		top: 10px;
		left: 10px;
}
``` 

![absolute.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1635923486143/u4GP08c-W.png)


### fixed

- position is going to fix even if you are going to scroll the webpage
- it is useful for fixed headers and footers

```
<div class="myDiv"></div>

.fixed{
	position: fixed;
}
``` 

![fixed.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1635923521387/Cqnue5kh4.png)


-------------
if you want any help with the positions of CSS or any other query then please contact me on my [Twitter](https://twitter.com/justansub)
Writing HTML while considering Web Accessibility
Tags: html, a11y, webaccessibility, web
Published: 2021-11-08 16:41:56

I haven't really thought about web accessibility before but I've been hearing quite a lot about it lately. I realised that I didn't consider it at all when I was writing html before. So, I'd like to learn more about it and I think I should consider more about it when I am writing code.

####Here are a few things I've learnt so far!
#Writing HTML with accessibility in mind.

- Do not use <strong><code>&lt;br&gt;</code></strong> because screen reader might stop from where it's located and wouldn't read what's after.
- Reason that <strong><code>&lt;flex-order&gt;</code></strong> is not used a lot: Screen reader would read things by the order written in html but wouldn't consider what's been changed in CSS(even if the order's changed in CSS)
- when hiding element on the browser, <strong><code>display:none</code></strong> is not recommended. Screen reader would not read if it's written as <code>display:none</code></strong>.
- Give headings in the sections or where they are needed even if they are not on the page visually so that screen reader can read them.(You can hide them in the CSS.)

#How to hide text while considering web accessibility.
```html
 <h1 class="sr-only">Movie information</h1>
```
```css
.sr-only {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px; /* screen reader might not read if it's set to 0px */
  height: 1px;
}
```
#Other ways to hide text

```css
.text1 {
text-indent: -1000px;
}

.text2 {
 position: absolute;
 left: -10000px;
 width: 1px;
 height: 1px;
 overflow: hidden;
}

.text3 {
 position: absolute;
 width: 1px;
 height: 1px;
 overflow: hidden;
 clip: rect(1px, 1px, 1px, 1px);
}

.ally-hidden {
 overflow: hidden;
 position: absolute;
 clip: rect(0, 0, 0, 0);
 width: 1px;
 height: 1px;
 margin: -1px;
 border: 0;
 padding: 0;
}

```