teleren/devto huggingface dataset:
Free landing pages for your GitHub Projects
Tags: opensource
Published: 2021-05-12 22:54:54

---
title: Free landing pages for your GitHub Projects
published: true
description: I'm building a tool to help engineers around the world and need your feedback
tags: opensource
cover_image: https://www.gitpages.app/social.png
---

Hi!

My name is Dave Boyne and I've been doing some open source work for a bit now, and every time I create some projects I tend to create a nice landing page (to showcase the idea in creative ways).

I enjoy creating landing pages and started to write a small tool that generates landing pages in seconds.

I want to offer this tool to all open-source projects in the world.

## How it works

1. Create a gitpage.yml in your project
2. Visit gitpages.app with your repo in the url
3. Awesome landing page built!

I personally find it useful to have a tool like this, and I was wondering what others thought? I have a proof of concept working and have a few people signed up for early access.

I was wondering if there was anyone out there that could provide some thoughts or feedback? Is this something you think people could find useful?

More information can be found here: https://gitpages.app

Example Videos

- https://www.youtube.com/watch?v=9vN4wQnEcC8
- https://www.youtube.com/watch?v=caUdKsRWPNU&t=22s

Would love to hear your thoughts!

Thanks
- Dave
Want a cool new theme for VS CODE?
Tags: webdev, weeklyui, theme, discuss
Published: 2021-05-13 01:10:52

Hey there,

I'm just creating a simple short post for this, if you want to try a new theme I created and let me know what your thoughts are, that would be wonderful.

[Theme](https://marketplace.visualstudio.com/items?itemName=Wegrix.wegrix)
Make sure you leave having taught your interviewer something (100 Bytes Of Wisdom: Day 51)
Tags: career, journey, advice
Published: 2021-05-13 00:54:24

---
title: Make sure you leave having taught your interviewer something (100 Bytes Of Wisdom: Day 51)
published: true
description: Bytes of Wisdom is a new project by Sam Jarman that brings together snippets of advice for software engineers
tags: career, journey, advice
//cover_image: https://direct_url_to_image.jpg
---

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/92fvlozu1l1fejcxwvru.png)

Being an impressive candidate is achievable in many ways, but one way to impress and stand out is to teach something to your interviewer. Perhaps it's a niche technique, an obscure library function or a neat CSS trick. Either way, be casual and just take a moment to point it out and see if they knew it. Interviews are just conversations, and one of the tenants of a great conversation is that both people benefit. So keep that in mind for your next interview.

Heads up: As with any terse bit of advice, there will be exceptions of course, and subtleties and nuance that can't possibly be captured in a Byte of Wisdom. This has been what I've experienced, I'd love to hear yours in the comments too!

You can catch up with all the other bytes at http://bytesofwisdom.com/
Como começar em programação
Published: 2021-05-13 00:44:43

# Entenda o conceito de algoritmos

Algoritmo é uma sequência finita de instruções claramente definidas, que tem como objetivo executar uma tarefa. Esse conceito vai te acompanhar durante toda a sua jornada em programação.

Esse, por exemplo, é um algoritmo para estudos:

```
Abrir livro
Ler capítulo 5
Resolver exercícios
Tirar dúvidas
```

<hr>

# Aprenda Lógica e Estrutura de Dados

Esses são mais dois dos conceitos mais básicos e importantes no universo da programação. Dominando esses conceitos, você terá muito mais facilidade em aprender qualquer linguagem de programação.

## Lógica de Programação

É como os computadores tomam decisões, testando se dados combinados a operadores lógicos geram o resultado esperado.

## Estrutura de Dados

Esse conceito representa as várias formas nas quais um programa pode organizar dados, como filas e pilhas.

<hr>

# Escolha uma linguagem de programação

Se eu posso recomendar duas boas linguagens para iniciantes, são Javascript e Python. Essas duas linguagens são relativamente fáceis e contam com comunidades gigantescas, além de vários cursos.

<hr>

# Respeite o processo

Programação é um tema muito abrangente e as tecnologias estão mudando a todo momento. O aprendizado é demorado, mas vai te trazer ótimos resultados.

<hr>

# Não se subestime

Se você tiver dificuldades em algum momento, não desista. Isso acontece com todos. Até mesmo com programadores experientes.
How to start at programming
Tags: brazil, english, programming, beginners
Published: 2021-05-13 00:44:05

# Understand the concept of algorithms

Algorithm is a finite sequence of clearly defined instructions, which has as goal to execute a task. This concept will carry you during all your journey in programming.

This, for example, is an algorithm for studying:

```
Open book
Read chapter 5
Solve exercises
Ask questions
```

<hr>

# Learn Logic and Data Structure

Those are two more of the most basic and important concepts in the universe of programming. Mastering those concepts, you will have much more ease learning any programming language.

## Programming Logic

This is how the computers make decisions, testing if data combined to logical operators generate the wanted result.

## Data Structure

This concept represents the many ways that a program can organize data, like queues or stacks.

<hr>

# Choose a programming language

If I may recommend two good languages for beginners, those are Javascript and Python. Those two languages are relatively easy and have huge communities, besides a variety of courses.

<hr>

# Respect the process

Programming is a very broad subject and technologies are changing all the time. Learning is a lengthy process, but it will give you great results.

<hr>

# Don't underestimate yourself

If you have difficulties at any moment, don't give up. That happens to everybody. Even with experienced programmers.
The F Word
Tags: discuss, career
Published: 2021-05-13 00:32:07

"Honesty in small things is not a small thing"

When I read this Danish saying today I thought about the importance, not always properly given, of feedback in our daily lives.

As a Brazillian, culturally we are a people who are very concerned about the way we speak, about the different interpretations our words may have, and because of this we are not always direct and sincere. This connects with another sentence I read on the same topic.

"In most companies, the most valuable feedback is never given"

Have you ever stopped to think about how your career could be in a different spot if you had received proper feedback at that right time? Or if you had been open enough to at least consider the feedback you received that you just ignored?

Share here in the comments what feedback you wish you had received in the past, or the one you ignored and today consider a mistake.

Who knows, maybe someone reading this is in a similar moment as you were before! 😉
GUI for Laravel Valet?
Tags: laravel, valet, phpmon, webdev
Published: 2021-05-13 00:15:18

You heard it right, now you can have GUI for [Laravel Valet](https://laravel.com/docs/8.x/valet) to perform all the actions that you can do using the command line and much more.

[Nico Verbruggen](https://twitter.com/nicoverbruggen) has created an amazing lightweight macOS menubar app called [PHP Monitor](https://github.com/nicoverbruggen/phpmon) to effortlessly manage PHP and [Valet](https://laravel.com/docs/8.x/valet) services. It provides a GUI to manage PHP versions, locate config files, stop & start Valet services and shows helpful information about your setup. As you can see in the following screenshot as the final result.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pav5tolq20m54mdy4pcg.png)

Before installing this app, you need to have [Laravel Valet](https://laravel.com/docs/8.x/valet) installed.

####Following are the steps:

* Run the following commands to install [PHP Monitor](https://github.com/nicoverbruggen/phpmon)
```bash
brew tap nicoverbruggen/homebrew-cask
brew install --cask phpmon
```
You should see the following output for `brew tap nicoverbruggen/homebrew-cask`:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/erzdtox0ukmttlkpdggv.png)
and following for `brew install --cask phpmon`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mtaly5w6dwafycugnmcf.png)

* Open the [PHP Monitor](https://github.com/nicoverbruggen/phpmon) app
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pffsgvp4k0i94moemrqt.png)

* Click Open for the security warning window
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gx9kgzdeyem7r941anca.png)

* If you get a message like the following
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i6wy72n5och6j5fv5qb6.png)
 then run `sudo valet trust`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q67mef9zmoddh35t0w2k.png)

* If you still get the message: **PHP Monitor cannot start**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qfhp2m9635dcukuaukkt.png)
then run `brew upgrade phpmon`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ej18os1zj00y5d5jwrwz.png)

* If still not working then run `composer global update` and `valet install`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dlmpgqz1er3ilvnyuwru.png)

* Now, you should be able to see a new icon on your menubar and when you click on it you should see the result like the following:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q65o5l9wxlxogilyusri.png)

For more depth information about the app and any additional troubleshooting, please visit [PHP Monitor](https://github.com/nicoverbruggen/phpmon) and if you like the app then don't forget to star the repository.

###### References
* https://github.com/nicoverbruggen/phpmon
* https://laravel-news.com/php-monitor-app
A DevOps role by any other name...
Tags: career, jobtitle, devops
Published: 2021-05-14 20:06:23

---
title: A DevOps role by any other name...
published: true
date: 2021-05-13 00:00:00 UTC
tags: career,jobtitle,devops
canonical_url: https://jhall.io/archive/2021/05/13/a-devops-role-by-any-other-name.../
---

In one of my DevOps groups yesterday, somebody was telling the story that they were recently recruiting for a new engineering role. For two weeks, they went with zero applications for their “Delivery Engineer” role.

Then they changed the job title on the listing _and nothing else_ to “DevOps Engineer” and received 25 applications over the weekend.

While [I don’t like the job title](https://jhall.io/archive/2021/02/11/devops-is-just-cooperation/) of “DevOps Engineer”, these results, though only anecdotal, are hard to ignore.

Can we get these same results without without conflating DevOps and operations this way, though?

I suspect we can. Simply “DevOps Delivery Engineer” ought to avoid the misconception that DevOps is a technical discipline, and makes it clear that it’s an adjective describing the way in which the Delivery Engineer is expected to work.

What do you think?

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
Advantages of using Bulma CSS framework
Tags: css, materialui, stylingframework
Published: 2021-05-12 21:28:25

Reusable styling is extremely helpful for developers that want to focus on their program logic while providing a pleasing interface to the end-user. While Material UI is a popular styling framework that offers a great array of styled-components. Here is why I often lean towards using Bulma CSS Framework.


##Smaller package size
Since Bulma is a pure CSS/SCSS styling framework, the total file size is much smaller compared to other styling frameworks that included Javascript for functionality.

Here is a comparison of the total package size for different styling frameworks.
`Bulma 1.3 MB` entire project file 
`bulma.css.min 204 KB` the minified filed used in production

`material-ui-next 48 MB`



##Customization
When it comes to customizing styles, less work is needed when using Bulma.

customizing a primary style color on Bulma 
```SCSS
$purple: #3f51b5;
$primary: $purple;
```

customizing a primary style color on Maerial UI 
```javascript
import { createMuiTheme } from '@material-ui/core/styles';
import purple from '@material-ui/core/colors/purple';
import green from '@material-ui/core/colors/green';

const theme = createMuiTheme({
  palette: {
    primary: {
      main: purple[500],
    }
  }
})


function App() {
  return (
    <React.StrictMode>
      <ThemeProvider theme={theme}>
        <LandingPage />
      </ThemeProvider>
    </React.StrictMode>,
  );
}
```

##Awesome helper classes
With styling frameworks that are not purely SCSS/CSS like Material UI, you will need to import the component from wherever they are stored in your project.

But with pure CSS/SCSS styling frameworks you can style your HTML elements by simply adding a class attribute.
```javascript
<button class="button">Button</button>
```

What if I want to add margin to the top and bottom of my HTML element? I simply add a `my-3` to my class attribute!
```javascript
<button class="button my-3">Button</button>
```

The best thing about Bulma is that it will work on any front-end project environment because its pure CSS. Personally, it doesn't feel natural to use a programming language to customize CSS styling quite often, especially when doing so requires 20 times more typing compare to if I just edit the CSS directly. Even if you are not confident with CSS I recommend giving Bulma a try, the styles are great, and the [documentation](https://bulma.io/documentation/) is awesome!
Destructuring Assignment
Published: 2021-05-12 23:44:15

This past week I was going over destructuring in JS.  It's still a bit foggy to me but I think I have more of a grasp on it than I did when I first started my review. I'll share some of what I learned. Before we begin let's create an array to use as an example as we destructure.

let yuna = ["Valefor", "Ifrit", "Ixion", "Shiva", "Bahumaut"
]

Here we have the summoner Yuna with her all of her aeons to take with her in the final fight placed into the array. Yuna has the possibility to assign a variable(give a nickname) to her favorite aeon that's inside the array. How could she do that specifically for her favorite aeon. She could use destructuring on an array to assign the variable. Let's see that in action:

```
const yuna = ["Valefor", "Ifrit", "Ixion", "Shiva", "Bahumaut"];

const [favorite] = yuna
console.log(favorite)
//console will log Valefor

```

Amazing right? That was clean and the other aeons don't know a thing about it. So exactly happened? It seems like a pretty confusing variable assignment at first glance but this code is the same  if it was written as:

```
const yuna = ["Valefor", "Ifrit", "Ixion", "Shiva", "Bahumaut"];

const favorite = yuna[0]
console.log(favorite)
//console will log Valefor

```

Could we destructure even further into the array? We can.

```
const yuna = ["Valefor", "Ifrit", "Ixion", "Shiva", "Bahumaut"];

const [favorite, scariest] = yuna
console.log(favorite, scariest)
//console will log Valefor,Ifrit

```

Which would be the same as writing:
```
const yuna = ["Valefor", "Ifrit", "Ixion", "Shiva", "Bahumaut"];

const favorite = yuna[0]
const scariest = yuna[1]
console.log(favorite,scariest)
//console will log Valefor, Ifrit

```


Simple right? Code like this could clean up alot of variable assignments within the script. The rabbit hole of destructuring goes deep. My plan is to next practice with destructuring objects. I'll report back my findings.
Cleaner Flutter Vol. 8: Implementing contracts
Tags: dart, flutter, clean, architecture
Published: 2021-05-12 21:48:43

---
title: Cleaner Flutter Vol. 8: Implementing contracts
published: true
description: Paying some debts
tags: dart, flutter, clean, architecture
cover_image: https://images.unsplash.com/photo-1529160104159-7a5937a4a0a0
---
> ⚠️ This article was deprecated. ⚠️
>
> Check out the updated full article on my personal [blog](https://marcossevilla.dev/cleaner-flutter-vol-8).

You can find even more and keep in contact with me on my socials:

- [GitHub](https://github.com/marcossevilla)
- [LinkedIn](https://www.linkedin.com/in/marcossevilla)
- [Twitch](https://www.twitch.tv/noscopedevs)
- [Twitter](https://twitter.com/MarcosJSevilla)
- [YouTube](https://www.youtube.com/noscopedevs)
Cleaner Flutter Vol. 7: Where the data comes from
Tags: dart, flutter, clean, architecture
Published: 2021-05-12 21:48:28

---
title: Cleaner Flutter Vol. 7: Where the data comes from
published: true
description: Seriously, where the heck does it come from?
tags: dart, flutter, clean, architecture
cover_image: https://images.unsplash.com/photo-1488229297570-58520851e868
---

> ⚠️ This article was deprecated. ⚠️
>
> Check out the updated full article on my personal [blog](https://marcossevilla.dev/cleaner-flutter-vol-7).

You can find even more and keep in contact with me on my socials:

- [GitHub](https://github.com/marcossevilla)
- [LinkedIn](https://www.linkedin.com/in/marcossevilla)
- [Twitch](https://www.twitch.tv/noscopedevs)
- [Twitter](https://twitter.com/MarcosJSevilla)
- [YouTube](https://www.youtube.com/noscopedevs)
Cómo obtener el color que esta debajo del cursor del mouse en C#
Tags: csharp, design
Published: 2021-05-12 21:39:04

Para obtener el color de bajo del cursor del mouse solo agregamos este código al formulario
```
[DllImport("user32.dll")]
private static extern bool GetCursorPos(ref Point lpPoint);


[DllImport("gdi32.dll", CharSet = CharSet.Auto, SetLastError = true, ExactSpelling = true)]
public static extern int BitBlt(IntPtr hDC, int x, int y, int nWidth, int nHeight, IntPtr hSrcDC, int xSrc, int ySrc, int dwRop);

```
Importamos todas las librerías necesaria.

Primero obtenemos la pantalla
```
Bitmap screenPixel = new Bitmap(1, 1, PixelFormat.Format32bppArgb);
```

Y creamos este método para obtener el color

```

public Color GetColor(Point location)
        {
            using (Graphics gdest = Graphics.FromImage(screenPixel))
            {
                using (Graphics gsrc = Graphics.FromHwnd(IntPtr.Zero))
                {
                    IntPtr hSrcDC = gsrc.GetHdc();
                    IntPtr hDC = gdest.GetHdc();
                    int retval = BitBlt(hDC, 0, 0, 1, 1, hSrcDC, location.X, location.Y, (int)CopyPixelOperation.SourceCopy);
                    gdest.ReleaseHdc();
                    gsrc.ReleaseHdc();
                }
            }

            return screenPixel.GetPixel(0, 0);
        }

```
Day 365 : 365 On
Tags: hiphop, code, coding, lifelongdev
Published: 2021-05-12 21:22:24

_liner notes_:
- Professional : Pretty chill day. Had a company-wide meeting. Worked on a script for the tutorial video voice over I've been working on. Then it started to rain pretty hard so I couldn't really record in the van. I'm wondering when I build out my van, how sound proof can I make my little recording area. Also, today marks, kind of, day 365 on this career as a Developer Advocate. I'm only counting days that I actually worked. No holidays or days off.

- Personal : Last night just went through some tracks for the radio show, and worked on the layout and some copy for my side project. Pretty much it. Time is flying by.

![View from the shore of a bridge in San Francisco, California, USA](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o91xj6qfi8tj6z1jdevx.jpg)

Going to pretty do what I did last night again. This time hopefully I'll be able to sneak in some time to watch "Yasuke". Really need to time box things better. Exactly why I made https://HIPHOPtimer.com haha. I just get super focused and want to finish one more thing on what I'm working on. haha Going to get started.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube igTVyMq_kp4 %}
Fully automated npm publish using GitHub Actions and Semantic Release
Tags: react, tsdx, library, npm
Published: 2021-05-12 21:21:15

{% youtube QZdY4XYbqLI %}

From their docs:
Fully automated release!!! semantic-release automates the whole package release workflow including: determining the next version number, generating the release notes and publishing the package.

This removes the immediate connection between human emotions and version numbers, strictly following the Semantic Versioning specification.

semantic-release is meant to be executed on the CI environment after every successful build on the release branch. This way no human is directly involved in the release process and the releases are guaranteed to be unromantic and unsentimental.

GitHub Actions makes it easy to automate all your software workflows, now with world-class CI/CD. Build, test, and deploy your code right from GitHub.
How to create and organize your Color styles in Figma 
Tags: figma, uidesign, colorstyles, tutorial
Published: 2021-05-12 21:16:14

Using the color styles feature in Figma is a perfect way to deal with color. Color styles allow you to save your color palette as a series of styles that you can quickly access and add to your design project.
Working with color styles allows to be more consistent when applying colors throughout the design process.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qs0yk30do083vacyvcln.jpg)

In this quick post,  I will use the [Essential UI Pro](https://figmaland.com/uikit/essential-ui-pro) Figma file as an example to show you how I organize my color styles for better use in my design's project.

##Essential UI pro

[The Essential UI Pro](https://figmaland.com/uikit/essential-ui-pro) is an Ui Kit, with 500+ Figma and HTML components, Ui Elements, pre-built layouts and more. Consequently, when I created the essential UI kit, I knew it would be a massive file with hundreds of UI elements. Since I was making this file not just for myself, but also to make it accessible to other designers and creatives, I needed to create a ready-to-use color style collection for the project. It will make it easier to work with color throughout the design process.

##Essential UI pro color styles

[The Essential UI Pro](https://figmaland.com/uikit/essential-ui-pro) color styles are split into four major categories: primary and secondary colors, Text colors, Background colors, and basic colors.

##1- Primary and Secondary Colors

In this first category, you can find four main colors. These shades may be modified depending on the project's color scheme.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/givkwyt5flaa6pjnleeb.jpg)

##2- Text Colors

I create three color styles are created specifically for text layers.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/exaezodtmxvebwu7jshl.jpg)


##3- Background Colors

Here are three color styles created to be utilised for the UI's backgrounds. The first color style is for a UI with a light background, the second for a UI with a dark background, and the third for a UI with a gradient background.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l0jfwt3e4bqybmf6wblh.jpg)


##4 - Basic Colors

Here are ten different color styles. These are the basic colors required for every design. The standard colors that you'll need in any design project, such as alert color, the links color, the success color, and so on.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pjsfpcg9708jdbq6gvfc.jpg)


Once you've established color styles in your file, you won't have to think about color issues in your design. You won't be left confused which color to use. All you need to do is apply the appropriate color style to your design's layers.

I hope you found this short tip helpful. Thank you so much for your time and soon I will be back with a few short tips.
I hope you found this post helpful, and I'll be back soon with some quick tips.