teleren/devto huggingface dataset:
Digital Ocean Hackathon: Submission!
Tags: dohackathon
Published: 2021-01-10 17:17:03

## What I built

Minimalist, multilingual personal portfolio.
Built with [Strapi](https://strapi.io/) and [Next.js](https://nextjs.org/), hosted completely on [DigitalOcean App Platform](https://www.digitalocean.com/products/app-platform/).

### Category Submission: 

Personal Site/ Portfolio

### App Link
[tumao.dev](https://tumao.dev)

### Screenshots
![front](https://dev-to-uploads.s3.amazonaws.com/i/shh3xrlyyf0d7y8k84fv.png)
![projects](https://dev-to-uploads.s3.amazonaws.com/i/r0f9f1bai0kd4r1tv6vu.png)
![contact](https://dev-to-uploads.s3.amazonaws.com/i/7tx0smrltcphhnativ7o.png)
   

### Description
Representative, minimalist, easy to manage and great looking portfolio for briefly presenting your projects that anyone can deploy in minutes. Based on Strapi and Next.js. 
With integrated cron runner to execute (not only) wordpress cron jobs.
Currently supported translations are /cs, /en. Switching automatically based on browser preferences.

### Link to Source Code

[Next.js](https://github.com/ondratuma/tumao-portfolio-next)
[Strapi](https://github.com/ondratuma/tumao-portfolio-next)

### Permissive License

[MIT](https://choosealicense.com/licenses/mit/)


## Background

I am a student and freelance developer.

I had static html portfolio, and adding new projects started to get time consuming. 
I was thinking about building new portfolio for quite some time.
So I took this challenge as a sign that I had to build a new one. 

### How I built it 

First, I wrote down the requirements:
- modern looking
- server side rendered
- easy to manage cms
- easy translation
- project filtering

I have experience with React, so naturally, I selected Next.js as front-end.
It is well integrated with i18n for translation and has great static-site generation capabalities.

Next decision was cms. Strapi seemed like pretty obvious choice here.

I utilized DigitalOcean’s App Platform to host the next.js app, as well as strapi backend. Each one residing in it's own project.

Additionally, I am using aws lambda in conjunction with AWS SES to send the contact form submissions to my email.

So basically, everything except the email is hosted on DO.

And everything is working great. 

This was my first experience with DO App Platform.
Before , I would host front-end on Vercel, and strapi on Heroku.
Now, I can have both parts at one place.

The experience with setting up one-click deployments is great. If I had to create the exact same portfolios for my clients, I would definitely give App Platform another shot.

I learned how easy it can be to create reusable projects. I did not thing that it could be that easy for anyone to setup a project. Now you can just click a single button, set few environment variables, and have your own modern portfolio set-up in minutes.


### Additional Resources/Info

I decided to create blank repos before publishing, to prevent the possible leaks of personal data, urls and other string that might have been hardcoded before.
Project0 - Recreate Front End of Google Search
Tags: webdev, cs50, html, css
Published: 2021-01-10 17:11:39

In the previous post of this series, I mentioned about two goals🥅 of this series:
1. Notes taken and take away for lectures
2. Writing of the projects for every assignments

I am gonna eat back my words on the first goal because I found out that the lecture notes of the course is already very good. 
![eats back words](https://media.giphy.com/media/L4Bk0APpOixXIXXwi2/giphy.gif)

### Overview of First Lecture
Thus, this series will dedicated entirely to the writings of the projects. The first lecture is about introduction on HTML and CSS, which covers the followings:
* Basic HTML tags and attributes - head, h1, body, img, a, href, etc. 
* Inline, internal, and external CSS
* Introduction to SCSS

### Overview of the First Project
The project for this first lecture, project #0 is to replicated the front end of google search. Specifically the 3 pages as follows:
1. Main Google search page
2. Google image search page
3. Google advanced search page

It is in this projects that the course introduces the `GET` request. And with that the requirement to bring the user to the actual google search results once the user searches for it. 

There are 7 specifications that much be met which I am expected to record a explanation video with timestamps of every specifications. Thought I will be able to finish project #0 in one day, guess I am a beginner in HTML & CSS after all 🤷‍♂️

From the cover image of this post, you can see my progress so far - only at the incomplete main search page. I am stuck at making the middle main section to take up the whole height of the page. It's midnight now, in the next post gonna work on that and the stretch goal of completing project #0!
Animated Donut with Pygame
Tags: python, pygame, github
Published: 2021-01-10 17:11:33

This code was inspired from the Work of Andy Sloane blog where he posted how he made this animated Donut with C and he Explained exactly how the code works in order to rotate the ASCII donut.
https://www.a1k0n.net/2011/07/20/donut-math.html

Here is my version with Python:
https://github.com/KhaledAchech/Animated-Donut
Greatest Common Divisor and Least Common Multiplier
Tags: notes, go, algorithms, math
Published: 2021-01-10 17:24:19

---
title: Greatest Common Divisor and Least Common Multiplier
published: true
date: 2021-01-10 17:00:00 UTC
tags: Notes,go,algorithm,math
canonical_url: https://clavinjune.dev/en/blogs/greatest-common-divisor-and-least-common-multiplier/
---

![Photo by @roman_lazygeek on Unsplash](https://images.unsplash.com/photo-1453733190371-0a9bedd82893?w=1920)

I only rewrite what was written on my [pastebin](https://pastebin.com/eDNgaM7F)

```go
package main

import "fmt"

func findGCD(a, b int) int {
  if b == 0 {
    return a
  }

  return findGCD(b, a%b)
}

func findLCM(a, b int) int {
  return a * b / findGCD(a, b)
}

func main() {
  fmt.Println(findGCD(25, 100))
  fmt.Println(findLCM(25, 100))
}
```

Thank you for reading!
Never Answer What Your Current Salary Is In An Interview - Here Is Why
Tags: interview, generaladvice, interviewing, jobhunt
Published: 2021-01-10 16:52:06

*"What is your current salary"* is one of the most common questions you'll be asked in an interview. But you should never answer this question and be ready to accept they might not choose you anymore.

Here is what you can do to deal with this question.

## The Reason This Question Is Asked

The reason for this question is pretty simple. Salaries are one of the hugest cost factors for companies, and minimizing those is one of their main goals.

Why should a company pay you 200k if your previous salary was only 120k? Well, that's at least their reasoning. Especially when your previous and future tasks are comparable, why should you magically be worth so much more?

Having a number at hand makes it pretty easy for them to negotiate with you. A little more salary is okay but too much? Nah! If you give them a number, they pretty much got you. They'll be able to determine what to pay you to still be attractive for a job switch, and always have a reason for why they won't pay you more.

## How To Deal With This Question

**Never. Ever. Answer. This. Question. Period.**

And never ever lie about your previous salary. As already said, if you answer this question, they got you, and if they catch you lying, you're done, as well.

**Really: Politely deny answering this question.**

If they still insist on getting an answer because they *"can't go on with the process without an answer"* or whatever they come up with, still deny the answer. Better try to circumvent an answer to this question as best as possible.

Better say something like this:

*"Sorry, I can't talk about my current salary, but in my current job search, I look for jobs with a salary range of $x.y k and $z.a k, and I think that the experience and knowledge I bring with me is well worth this investment."*

And if you haven't talked about a salary range already, feel free to add: *"Does this position provide a salary range that is close to my expectations?"*.

If the company can't accept you not answering: Be ready to drop out of the process!

It's better to get paid what you deserve and could fairly negotiate for than to accept being underpaid greatly because you simply made the mistake of making your current salary transparent.

## Conclusion

This one question is one of the most important ones in an interview, as it can have such a large impact.

In my opinion, it's a huge mistake to ever answer this question as it gives too much power to your potential future employer, and takes away a lot of your own power.

You won't be able to negotiate for what you're really worth after answering it. Circumvention of this question does, however, often work. It may sometimes not, but then ask yourself: *"Is this really a company I want to work for?"*.

## Before You Leave

If you like my content, visit me on [Twitter](https://twitter.com/oliverjumpertz). I regularly post content there. It is basically the platform where you will find my content first before it lands on my blog or somewhere else.
PEP-8
Tags: python, beginners, pep8, summary
Published: 2021-01-10 16:38:54

_Indentation_ 
*Use four spaces for indentation
*Use hanging indentation for big expressions
*If you see a code already using tabs/space stick with tabs or respectively

_Maximum line length_
*79 characters in general
*72 characters for comments

_Blank lines_
* Top-level classes and functions are separated by two lines
*  Method definitions inside classes should be separated by one blank line

_WhiteSpaces in expressions_
*Avoid whitespaces. Example: Should use- x=y instead of x= y

_Imports_
*Always import libraries at the start of your script.
*If you do many imports, you should make sure to state each import on a single line
Example: Use- 
import os
import sys
Instead of 
import os, sys
*You should take into account that there is an order that you need to respect when you're importing libraries. In general, you can follow this order:
Standard library imports.
Related third-party imports.
Local application/library specific imports.

_Absolute imports>Relative imports_

_Ignore wildcard imports_

_Comments_
*Block comments to explain code that is more complex or unfamiliar to others
*Block comments apply to code that follows 
*Block comments are indented at the same level as the code. Each line of a block comment begins with the hashtag # and a single space

* You use inline comments on the same line of a statement, following the code itself. These comments also start with # and a single space.

* You write documentation strings or docstrings at the start of public modules, files, classes, and methods. These type of comments start with """ and end with """

_Module level dunder_
*A module-level dunder like (__all__, __author__, __version__) should be placed at the module main docstring and should be before all the import statements.

_Naming Conventions_
*Module-lowercase
*Class- CapWords
*Functions-lowercase
*Methods-lowercase
*Package-lowercase
*Contstans- UPPERCASE
*Type variables- CapWords

------------------------------------------------------------------



[Reference for this post](https://www.datacamp.com/community/tutorials/pep8-tutorial-python-code)

(I basically made a summary. Didn't add two points i.e about the PEP-8 package and Source file encoding. Do read the link for better understanding)
Technology choices
Tags: dohackathon
Published: 2021-01-10 16:35:45

In the previous post, I discussed how I decided what to build. In this post I would like to discuss more about the technology choices.

I heard about the DigitalOcean Hackathon and immediately decided that it would be the perfect motivation and opportunity to complete building the tool. The first choice I faced was to choose the components, some of the options I came up with are:

### 1. PostgreSQL + Hasura + Frontend (logic stays on frontend)

The schema management would be difficult and would need a separate service to manage users. I would end up with too many moving parts and all the keys and credentials would be exposed in the browser. Not a good choice for multi-user apps

### 2. Database + Serverless functions + Frontend (logic stays in functions)

This would definitely solve the problem of securing the keys and credentials. The number of functions required for CRUD operations would be just too many.

### 3. Database + Serverless functions + Hasura + Frontend (logic stays in functions)

Same as #2, but uses Hasura for CRUD. There's a slight chance of exposing user info stored in the same DB via Hasura.

### 4. A monolithic app which can handle both backend and frontend

This is a very promising option. Just that I didn't know about any good frameworks, so would have to roll my own CSS and the board like structure would be next to impossible to build with vanilla JS.

### 5. REST API server + SPA for frontend

This option felt like a silver bullet when I set-out to build this tool. I had to choose from ExpressJS, Ruby on Rails and Django for building the API, and Angular and React for building the frontend. I chose Django and React as I am more comfortable with them as compared to the other options.

Initially I was very skeptical about completing this project, but soon I was confident enough that I bought a domain name for it. I named it "Rappel". It is a synonym of Abseiling.

> Abseiling, also known as rappelling from French rappeler, 'to recall' or 'to pull through', is a controlled descent off a vertical drop, such as a rock face, using a rope.
> [Abseiling on Wikipedia](https://en.wikipedia.org/wiki/Abseiling)

Cover image: <span>Photo by <a href="https://unsplash.com/@victoriano?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Victoriano Izquierdo</a> on <a href="https://unsplash.com/s/photos/choices?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
LOCAL HACK DAY: BUILD IS IN ONLY 2 1/2 HOURS!!!
Tags: mlh, majorleaguehacking, localhackday
Published: 2021-01-10 16:33:09

Hey everyone! A great new hackathon is starting in just 2 1/2 hours called Local Hack Day: Build! It's a whole week of fun activities! Join in the fun if this seems at all interesting! https://localhackday.mlh.io/build
#12 DevOps Diary: Computer Science and K8s resources
Tags: devops, newsletter, kubernetes, docker
Published: 2021-01-10 16:28:53

Welcome beautiful people! 

I hope you are all doing well. I was really excited to write this week's newsletter and share these amazing resources with you. I hope you like them/find them interesting 😊

Remember, if you discover anything that you would like to share, just message me, [I would love to hear from you.](https://anaisurl.com/contact)

Let's get started ⛳

## Top Kubernetes Learning Resources 📖

- Kubernetes has [several interactive tutorials](https://kubernetes.io/docs/reference/kubectl/cheatsheet/) on their Documentation

Let's stay on the practical resources, these websites provide great example projects to learn Kubernetes:

- [katacoda: Learn Kubernetes using Interactive Browser-Based Scenarios](https://katacoda.com/courses/kubernetes)
- [Kubernetes by example](https://kubernetesbyexample.com/); by Red Hat OpenShift

## Videos🎥

Under the theme "You can learn anything", [I am currently doing #100DaysOfKubernetes](https://www.youtube.com/channel/UCb4mfRT5UWpjoUQRcIE2qOQ?sub_confirmation=1). If you enjoy this newsletter, chances are high that you would get lots of value from my current and upcoming videos. Have a look 😊

## [Have a look at the full newsletter here](https://blog.anaisurl.com/12-devops-diary-computer-science-and-k8s-resources/)
Linked-list cycle (beginner friendly) 
Tags: javascript, algorithms
Published: 2021-01-10 16:26:27

Linked lists are data structures that contain a `head`, and `nodes` with a `.value` and a `.next` property. The next property connects to the following node so they can be traversed in order with the `.next` property.

``` javascript
// a linked list object with a head and node children
const linkedList = { head: {
                            next: {
                                    val: 1,
                                    next: {
                                            val: 2,
                                            next: null  
                                           }
                                   }
                           }   
                    }

```

This leetcode problem asks to find if any of the nodes on a linked list connects to a previous node on the list so it 'cycles' back. 

The arguments to the function are the linked list values e.g. `[1,2,3,4]` and the position where the cycle is present for example: `1` which means the linked list goes back to the node at position index 1 after the final node. When -1 is passed there is no cycle.


``` javascript

const hasCycle = (head) => {
    let seen = []
    
    while(head !== null){
        
        if(seen.includes(head)){ // use includes method of array equivalent of contains to hashset in java
            return true
        }else{
            seen.push(head)
        }
        head = head.next
    }
    return false
};

```
In this solution we check to see if we go back to an earlier node while we traverse the linked list. 

With the help of an array, we store the nodes as we visit them. 

``` Javascript 
let seen = []
//...
// and when visiting them
//...
seen.push(head)
```

We simply use a while loop to traverse the linked list and reset head to `head.next` at the end of the loop. Which allows us to visit the next node on the subsequent iteration. 

```Javascript 
while(head !== null){
//... 
// condition checks
//... 
head = head.next
} 
```

Then use the `.includes` Array method to check if we already visited the current node by checking if it is already present on the `seen` array. 

```javascript
if(seen.includes(head)){ 
            return true
}else{
            seen.push(head)
}
```

Last, if we find the `head` has already been added to the `seen` array we return `true` as the function returns `false` otherwise by default. 

Feel more than welcome to reach out on [LinkedIn](https://www.linkedin.com/in/santiago-salazar-pavajeau/) or [Twitter](https://www.twitter.com/santispavajeau) !
Listas em HTML
Tags: html, braziliandevs, beginners, webdev
Published: 2021-01-10 16:20:20

Olá pessoal, hoje vamos conhecer como utilizar listas e suas variadas formas.

## Lista não ordenada

```html
<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
```

{% jsfiddle https://jsfiddle.net/franciscochaves/ejc0235L result,html %}

## Lista Ordenada

```html
<ol>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>
```

{% jsfiddle https://jsfiddle.net/franciscochaves/1gto32bL result,html %}

Lista ordenada, iniciando a partir do número 6:

```html
<ol start="6">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>
```

{% jsfiddle https://jsfiddle.net/franciscochaves/xbew5gqo result,html %}

Lista ordenada invertida, iniciando a partir do número 15:

```html
<ol reversed start="15">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>
```
{% jsfiddle https://jsfiddle.net/franciscochaves/xvy14kgo result,html %}

Lista ordenada utilizando ordem alfabética e em caixa baixa:

```html
<ol type="a">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>
```

{% jsfiddle https://jsfiddle.net/franciscochaves/db0hjuvq result,html %}

Lista ordenada utilizando ordem alfabética e em caixa alta:

```html
<ol type="A">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>
```

{% jsfiddle https://jsfiddle.net/franciscochaves/dp6z3grt result,html %}

Lista ordenada utilizando sistema numérico romano e em caixa baixa:

```html
<ol type="i">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>
```
{% jsfiddle https://jsfiddle.net/franciscochaves/p5h4oxsw result,html %}

Lista ordenada utilizando sistema numérico romano e em caixa alta:

```html
<ol type="I">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>
```

{% jsfiddle https://jsfiddle.net/franciscochaves/c2mjegnh result,html %}

## Lista dentro de outra lista:

Podemos utilizar listas dentro de outra lista, independente se é ordenada ou não.

```html
<ul>
  <li>item</li>
  <ol>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ol>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
```
{% jsfiddle https://jsfiddle.net/franciscochaves/ky1mb3op result,html %}


## Lista de definição

```html
<dl>
  <dt>Café</dt>
  <dd>Bebida quente</dd>
  <dt>Cerveja</dt>
  <dd>Bebida Alcoólica</dd>
</dl>
```
{% jsfiddle https://jsfiddle.net/franciscochaves/2t9xu18k result,html %}

Pronto pessoal, conhecemos as listas em **HTML**, valeu 😎✌!
Vim Replace Visual Star
Tags: vim, linux, bash
Published: 2021-01-10 16:15:35

---
cover: /static/vim-replace-visual-star-xmas2020.png
cover_image: https://waylonwalker.com//static/vim-replace-visual-star.png
canonical_url: https://waylonwalker.com/vim-replace-visual-star
published: true
status: published
tags:
- vim
- linux
- bash
templateKey: blog-post
title: Vim Replace Visual Star
---

Replacing text based on whats in the current search register is a quite handy tool that I use often.  I believe I picked this tip up from Nic Janetakis, check out his YouTube channel for some amazing vim tips.

{% youtube fP_ckZ30gbs %}

If there is one thing that I Like most about vim it's the ability to hack on it and make it work well for you.

## Replacing text in vim

Vim can often be a bit verbose, but that's ok because we can hack on it, and make our own shortcuts and keybindings.  For instance, finding and replacing text requires using a command at the vim command-line `:`.  Replacing foo with
bar looks like this `:%s/foo/bar/g`, the final g means all of the foos, not just the first one on the line.

## making it better

I have a keybinding in my `init.vim` that will allow me to search for a pattern with the usual `/` character, page through them as normal with `n` and `N`, but when I press `<C-R>` it will populate the replace command for me so that all I need to do is type out the new text.

``` vim
nnoremap <c-r> :%s/<C-R>///g<Left><Left>
```

## Note on the `<C-R>/`

In command mode `:` vim allows you to paste any text from any register into the current command.  The `<C-R>/` will paste the text from the current search register into the command.

`<C-R>` in command mode can paste text from any register, you can see what registers are in use with the `:reg` command.  There are a lot of them and many get populated automatically as you yank text or create macros.


> Also see how to use <C-R> to save macros to key bindings easily

<table><tr><td>
<a class="onelinelink" href="https://waylonwalker.com/save-vim-macro/">
<img style="float: right;" align='right' src="https://waylonwalker.com/static/de331984b5e3d37beacd574593394ca3/630fb/save-vim-macro-xmas2020.png" alt="article cover">
<div class="right">
<h2>Save Vim Macro</h2>
<p class="description" width=500>
If you are like me, you have created a macro or two that is pure glory, and you forget how you made it after a day or so
</p>
<p class="url">
<span class="read-more">read more</span>  waylonwalker.com
</p>
</div>
</a>
</td></tr></table>