teleren/devto huggingface dataset:
Lessons gained while learning UI design as a frontend developer
Published: 2020-09-29 14:31:48

Every year I see frontend developer roadmap videos released, which are filled with tons of latest tools, frameworks and libraries to cover in order to become a successful frontend developer. It's important to learn them but there is one thing which I  see missing in a lot of these articles. This little thing is UI design and let me tell you why with this 3 simple reasons:

##  1. A Better understanding of the thought process behind UIs
Our main task as front-end developers is mainly to take designs from UI designers and transform them into a website using HTML, CSS and Javascript. But if we don't have the slightest idea about why a particular colour scheme was chosen or why the blocks which are in UI are positioned in a particular manner then chances we won't be able to give proper justice to the design.
Also understanding things from UI designer's perspective helps us in giving constructive feedback when we need updates from the team in particular feature designs. 

## 2. A new perspective on minute little things like fonts and spacing
As a developer, whenever I saw a font-family I would usually search for a font, add it in CSS and be done with it. Now I realise that fonts do play a crucial role in the overall looks of a website. Also, designers always lay emphasis on using a single font-family wherever possible so as to not have to download additional font files while the page is loading. 
The second important thing I realised was an emphasis on having a proper spacing between elements and colour contrast. I had no idea prior to this, that a lot of thought process goes into the spacing between different elements as well as how much white space a page should typically have.

## 3. The design grid system
I was aware of 12 column grid system which we typically use in CSS styling but for the first time came to know that website designers also use a similar grid system to build designs for a website. This is actually going to help a lot in future when I would be able to relate the design UI grid to website grid.

The point I am trying to make here is we don't have to master UI design but at least know the basics of this field in order to become a better frontend developer.


> If you liked this article, then share it with your people who can learn from it and connect with me on [Twitter](https://twitter.com/coderwhodreams) with your views.
C++ Neural Network in a Weekend
Tags: cpp, machinelearning, tutorial
Published: 2020-09-29 14:18:21

There are tons of ML/AI frameworks to choose from right now (Tensorflow, Keras, Pytorch, etc). However, sometimes, building things completely from scratch is still the best way to learn how something works. To help people seeking to to this, I created a neural network in a weekend in C++ *without any external dependencies*. No matrix libraries, no linear algebra subroutines, nada, zilch.

The code for the repository is [here](https://github.com/jeremyong/cpp_nn_in_a_weekend). I also wrote a paper tutorial walking through the math (the derivations) and the implementation hosted in the same repository [here](https://github.com/jeremyong/cpp_nn_in_a_weekend/blob/master/doc/DOC.pdf). The paper is... a bit on the long side at 42 pages, but it's meant to be entirely self-contained. Again, from scratch!

In addition, the code is pretty heavily annotated with comments, so should hopefully be easy to following along, but please leave a question/comment if you get stuck. Happy hacking!
Auth0 Internal Dev Tools: Unleashing Engineering Potential
Published: 2020-09-29 13:57:09

Helping engineers stay focused on building features that [solve the hard problems of identity](https://auth0.com/blog/auth0-internal-dev-tools-unleashing-engineering-potential/?utm_source=newsletter&utm_medium=sc&utm_campaign=internal_devtools) for customers.

#DevTools #Identity #Solutions
A reliable way to create PDF from HTML/markdown, with PDF specific features
Tags: markdown, pdf, writing
Published: 2020-09-29 13:53:02

Indeed, the way includes

- Don't just simply convert a HTML file to PDF, one-to-one. Otherwise, you can never control page breaks.
- Nonetheless, HTML rendering will be web-browser dependent. (Therefore, not sure about [Pandoc](https://pandoc.org/MANUAL.html).)
- CSS is powerful, but are there exceptions?

Therefore, I suggest a way of using a web driver + a PDF library, that can READ and MODIFY pdf.

The web driver is currently best either Puppeteer, or Chrome DevTools Protocol.

Additionally, it might be possible to distribute PDF generator via Electron + [Puppeteer-in-Electron](https://www.npmjs.com/package/puppeteer-in-electron).

{% stackoverflow 58213258 %}

The PDF manager, that can read-and-merge PDF, is traditionally either [PDFtk](https://www.pdflabs.com/tools/pdftk-the-pdf-toolkit/) (binary) or [pdfbox](https://pdfbox.apache.org/) (Java), I think; but I have just recently found,

{% github Hopding/pdf-lib no-readme %}

About CSS, yes CSS can also detect page margins.

```css
  body {
    position: fixed;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
```

This is my attempt so far.

{% github patarapolw/make-pdf no-readme %}

So, the answer to the question is, no, do not convert a single HTML or Markdown file, to one PDF file; but do combine [within a folder](https://github.com/patarapolw/make-pdf/tree/master/in). Also,

- Running a web server might be better than using `file://` protocol and relative paths
- Choosing a web browser might affect result.

Also, consider alternatives to PDF, that easily allow editing. Might be [odt](https://www.npmjs.com/package/simple-odf) or [docx](https://www.npmjs.com/package/docx)?
Lighter font weight in code editors - yay or nay?
Tags: discuss
Published: 2020-09-29 13:52:34

---
title: Lighter font weight in code editors - yay or nay?
published: true
tags: discuss
---

Many code-oriented monospaced fonts looks 'bold' by default compared to your regular fonts. I've recently switched to `Cascadia Mono SemiLight` and kind of dig it, it feels easier to pick up different code tokens than with the regular weight.

Anyone else is using lighter versions of this or other fonts?
Calculating leap year with JS
Tags: html, javascript, leapyear, calculatorleap
Published: 2020-09-29 13:49:18

[[clique aqui para português]](https://medium.com/walternascimentobarroso-pt/calculando-ano-bissexto-com-js-8f4a4c222005)

We have a leap year every four years, but it is easy to get confused which year is leap or not, so as not to suffer from it anymore, we will create a new project that finds out if the year is leap or not.

## CODE

First we will create the interface, we will do something simple, using only HTML.

```html
<h1>Calcular ano bissexto</h1>
<form name="form_main">
  <label for="date">Data:</label> 
  <input name="date" id="date" size="20" type="date" /><br />
  <label for="tipo">Tipo:</label> 
  <span id="tipo"></span><br />
  <label for="dia">Dia da Semana:</label> 
  <span id="dia"></span><br />

  <input name="button" value="Gerar" onclick="calcularBissexto()" type="button">
</form>
```
In the HTML structure an input was created to receive the date we want to know if the year is leap or not, and to give a small increment, we will also find out what day of the week.

Now let’s create the `calcularBissexto()` function.
```javascript
function calcularBissexto() {
  let day_array = [
    'Segunda-Feira', 
    'Terça-Feira', 
    'Quarta-Feira', 
    'Quinta-Feira', 
    'Sexta-Feira', 
    'Sábado', 
    'Domingo'];
  let date_full = new Date(document.form_main.date.value);
  let calcular_bissexto = (ano) => (ano % 4 == 0 &&  ano % 100 != 0 ||  ano % 400 == 0)  
  ? 'E bissexto' : 'Nao e bissexto';
  document.querySelector('#tipo').innerText = calcular_bissexto(date_full.getFullYear());
  document.querySelector('#dia').innerText = day_array[date_full.getDay()];
}
```

In this function (`calcularBissexto()`), we have the `day_array` variable with the days of the week, the `date_full` variable that receives the date input and we have a function called `calcularBissexto` which is where we check the date.

The check made in the function calcularBissexto is:

* If year module 4 is 0 AND year module 100 is different from 0 then, leap = true
* If module 400 is 0 then leap = true;
* Any different case then, leap = false;

To find out what day of the week we take the variable `date_full` and use the standard function `getDay()` which returns a number value (0–6) and with that value we discover the day of the week `day_array[date_full.getDay()`.

ready as simple as that.

## Demo

See the complete project working below.

{% codepen https://codepen.io/WalterNascimento/pen/oNxYvgm %}

## Youtube

If you prefer to watch, I see the development on youtube (video in PT-BR).

{% youtube QLKVoUGOLyw %}

## Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you! 😊😊
How to be Pythonic? Design a Query Language in Python - Cheuk Ho (EuroPython 2020)
Tags: europython, videos, python
Published: 2020-09-29 13:38:55

🎞 We just uploaded another 30 EuroPython 2020 videos and in total we have 120 videos online!

👉 See our [playlist on youtube](https://www.youtube.com/playlist?list=PL8uoeex94UhHgMD9GOCbEHWku7pEPx9fW)

We want to highlight talks in this EuroPython 2020 Video series, especially those who are part of DEV community.

First up is Cheuk Ho talking about "How to be Pythonic? Design a Query Language in Python".

{% user cheukting_ho %}

{% youtube foEChBTSeQw %}

### Talk Description
Query language is an important part of a database system, it is how people manage their data and how they can make the data useful to them. Starting from the 70s, the world is full of relational databases and SQL was the way to make queries. However, SQL is valuable to an injection attack. Lots of efforts are being used to stop those attacks and it made workflow become less efficient.

We don’t want to make the same mistake. That’s why using a Python query language is good. Having the Python community in our mind, we created WOQLpy, an open-source query language that lets users build queries in Python, instead of JSON-LD which is the native query language for our TerminusDB database. Now users can store data with a knowledge graph and make graph data visualization with Python.

In the first part of the talk, we will talk about what challenges we have when creating a query language in Python, the method we use, the idea and theory behind, and how WOQLpy work. This part will include a quick live demo of using WOQLpy so audiences can have an impression on how to make a query and get the task done, that is, getting a meaningful graph visualization form the source CSVs. The process of how to create a database and schema, loading the data form many CSVs, making a query and visualization, will be demonstrated using just one python script.

In the second part of the talk, we want to stimulate a discussion of what is a good design in Python and what is not. This part will be more interactive with the audiences, as we want to hear from you all, what would be the best for Pythonistas. By first suggesting some possible design, we will use a live voting system to gather opinions. This part of the talk will extend to the Q &amp; A sessions to allow further discussions.

This talk is for Pythonista at all levels who are interested in starting to design a package in Python, no matter if the audience has published a python library or not. By attending this talk, audiences will learn about how to design a Python package that will be useful to Pythonistas and hopefully encourage more people to publish open-source packages online.

##### Note
License: This video is licensed under the CC BY-NC-SA 3.0 license: https://creativecommons.org/licenses/by-nc-sa/3.0/
Typper 💻🎮, (the beginning of) a typing game [v0.2.0-beta]
Tags: showdev, gamedev, react, javascript
Published: 2020-09-29 13:36:23

---
title: Typper 💻🎮, (the beginning of) a typing game [v0.2.0-beta]
published: true
description: Help the Ninja save our world from a hoard of Zombies in this simple typing game!
tags: showdev, gamedev, react, javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/yl4s5j5s218ryhaiei2t.png
series: 💻 Typper 💻 - A Web-based Typing Game
---

🎉 Introducing **Typper**, a simple typing game where our hero is a Ninja fighting off a never ending hoard of Zombies. 🎉

Typper is still in an early stage, there are many features and improvements to come that will make everything more interesting!

Give it a try, have fun and **feel free to reach out** and give feedback 📝 or report a bug ⭕️ (I am sure there are a few).

[🎮 PLAY 🎮](https://play-typper.web.app/)

{% github patricepeartree/typper-web no-readme %}

> #### Remarks
> * Typper is being developed using React. It is not the obvious approach to building a web-based game, but I wanted to familiarize myself with the new Hooks API, so 🙆.
> * I did not use any library for the animations (sprites, object movement, collision detection, ...). I know it would have saved me a lot of work, but I wanted to try and use the Web Animations API.

*[PatricePeartree](https://twitter.com/PatricePeartree) @ Twitter*
Top 10 Retool Alternatives – Comparison, Pros & Cons
Tags: webdev, lowcode, nocode, uiweekly
Published: 2020-09-29 13:32:40

Hey guys!
Check out the top 10 alternatives to Retool💡
Find a comparison table of various low-code and no-code web app builders. Get the details about their pros & cons, competitive advantages, etc.
OutSystems, Mendix, AppGyver, AppSheet, Radzen, Honeycode, UI Bakery, and others.

Read more here -> https://uibakery.io/retool-alternatives?utm_campaign=ui_bakery%20-%20website_page%20-%20retool_alternatives%20-%20cacq%20-%20xx%20-%20traffic&utm_source=DevTo&utm_medium=webdev&utm_content=announcement
And here...we...go...
Tags: beginners, tutorial, writing, career
Published: 2020-09-29 13:31:21

# Introduction
## Who Am I?

You know who I a...actually no, no you don't. I'm Josh and welcome to the crazy life that is attending a coding bootcamp. I'm 28; live in Columbus, OH with my Cats and Puppy; teach Taekwondo; cosplay; and many other things that will probably come up in some later posts. I hope I can give you a sense of what it is like to attend something like a coding bootcamp as well as a sense of who I am over the next few weeks.

## Coding Background
I've been working in IT for about 9 years now. That is a broad subject area: My path  was as such Help Desk -> Business Analyst/Project Manager/Product Owner -> Product Owner/UX Designer. While working on the Project/Product side of things I was exposed to some light coding and reading code, but didn't do much writing or gain a full understanding of it. In January of 2020 in preparation for a job interview, I took a Udemy course that focused on JavaScript/CSS3/HTML5 and that was the *Beginning*. Since June, I've been working on a Bachelors of Science in Software Development from Western Governors University. In September 2020 I started as a student to learn full-stack development in the Java language with Tech Elevator.

# Coding Bootcamp
## Current Status 

I just started Week 3 of this 14-week bootcamp and I've got to say while it has been fun, it has been a whirlwind. Being unemployed since February, I've been able to take some...liberties with my daily schedule, so coming back to a proper schedule came easier than I expected, but not as much I would have liked it to. 

Even with that being the case, I have loved every minute that I have been involved with Tech Elevator. I'm learning new ways to think about problems; nuances of the Java language versus C# and JavaScript; and that I CAN do this (maybe in a later post I'll go into this, but I always thought that being a developer was very much out of my grasp). The staff have been extremely helpful as well as the other students. 

It truly is amazing to see how even though we're remotely learning together, even though we have varying levels of experience and personalities, that we can all come together to help each other. 

#And Finally...

I look forward to cataloguing this journey and sharing my experiences with you.
Complete the function without using loops and conditions
Tags: javascript, webdev, interview, codenewbie
Published: 2020-09-29 13:31:10

```
// Complete the function
function calculate(n) {
	...
};

calculate(48); // 52
calculate(52); // 48
```

The function accepts one argument. 
If 48 is passed then it should return 52,
& if 52 is passed then it should return 48

Write the function body without using loops (for, while..) or conditionals(if..else, ?:, switch)

---

**Thanks for reading 💙**  
Follow **@codedrops.tech** for daily posts.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Twitter](https://twitter.com/codedrops_tech) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack ● Javascript  
**[codedrops.tech](https://www.codedrops.tech/)**
C# Language Highlights: Tuples
Published: 2020-09-29 13:28:55

In this video, Maira and Kendra will teach us how to use tuples in C#. The tuples feature provides concise syntax to group multiple data elements in a lightweight data structure. To learn more about other C# features, head over to the [C# documentation](https://docs.microsoft.com/en-us/dotnet/csharp/?WT.mc_id=ondotnet-devto-cephilli)

{% youtube HDnCu8fn73o %}

If you liked this video and would like to see some more of our .NET content, please subscribe to our [.NET Developers YouTube Channel](https://www.youtube.com/channel/UCvtT19MZW8dq5Wwfu6B0oxw).


## Useful Links
<ul>
<li><a href="https://docs.microsoft.com/dotnet/csharp/language-reference/builtin-types/value-tuples?WT.mc_id=ondotnet-c9-cephilli" target="_blank">Tuple Types</a></li>
<li><a href="https://docs.microsoft.com/dotnet/csharp/deconstruct?WT.mc_id=ondotnet-c9-cephilli" target="_blank">Deconstructing tuples and other types</a></li>
<li><a href="https://docs.microsoft.com/dotnet/csharp/whats-new/csharp-9?WT.mc_id=ondotnet-c9-cephilli" target="_blank">What's new in C# 9&nbsp;</a></li>
</ul>
Close all open Vim buffers except the current
Tags: vim, neovim, productivity, editor
Published: 2020-09-29 11:22:07

During development, I often use `:ls` to display open buffers. However, after a while, the list can become long. I'm going to add a custom command in my `.vimrc` – which is similar to "Close others" in VS Code – that deletes all buffers, except the one I'm currently on.

```vim
command BufOnly silent! execute "%bd|e#|bd#"
```

- `command` – Define a user command
- `BufOnly` – The command name we want to use
- `silent!` – Silence messages, `!` silences errors too
- `execute` – Execute the following string expression

Now let's breakdown the actual command. The pipes (`|`) break the string into three commands:

- `%bd` – Deletes all open buffers (`bd` is short for `bdelete`)
- `e#` – Opens the last buffer (`e` is short for `edit`)
- `bd#` – Deletes the `[No Name]` buffer that gets created

After restarting Vim or sourcing the updated `.vimrc` I can run `:BufOnly` to clean up my `:ls` list.

## Quick command

Create a binding to run the command quickly whenever needed.

```vim
" I have <leader> mapped to <Space>
nnoremap <leader>b :BufOnly<CR>
```
GCP DevOps Certification - Pomodoro Four
Tags: googlecloud, certification, sre, devops
Published: 2020-09-29 13:07:28

# Service Level Objectives (SLOs)

Is it a competing balance?

Pressure of new features whilst maintaining a level of reliability for a system that is in constant flux.

Knowing just how reliable a system should be seems to be an interesting question. This takes me back to working on a system that was part of the [GDS scheme](https://www.gov.uk/government/publications/technology-code-of-practice/technology-code-of-practice). We built a system that had a pretty high level of reliability only to find out that it would be turned off during holiday periods - not for technical reasons but for people reasons. There were simply no support staff should any customers have a support query!

We certainly didn't ask "how reliable does the system need to be?"

# NFR's (Non Functional Requirements)

Reliability (or many other ity's for that matter) can be classed as Non-Functional Requirements...but if that is the case how do we prioritise? It always comes down to prioritisation.

Also does classing reliability as a NFR do it a disservice? 

[SLO's](https://landing.google.com/sre/sre-book/chapters/service-level-objectives/) is the practice of setting a reliability target and communicating that target wide enough for people to be aware. Having a side effect of your organisation being able to determine independently whether or not the service is reliable enough.

So SLO's could help development teams answer, _when making software_, just how fast is too fast?

# Estimating Reliability Risks

We can estimate risks to reliability (from the roll-out of new features) in terms of: 

* time to detection
* time to resolution
* impact percentage

But the focus irrespective of terminology goes back to those DevOps cultural, human aspects.

Shared ownership of where developers feel they have a shared responsibility to make the service reliable and the operations team feel that they have a responsibility to help new features reach users as quickly as possible is crucial.

Both enabling each other and agreeing on the service level objective.

# Three Principles for Setting SLO's

The above covers a bit of the "why" and human aspects so the next stage is a bit of the "what" of SLO's.

1. What to promise and to whom
2. What metrics to measure
3. How much reliability is good enough

### SLA's vs SLO's

I like to think of SLA's (Service Level Agreements) as the last line of defence. Essentially the promises you make to customers around the service you will deliver. It's the service they are paying you for and their minimum expectations for that service.

If you break the SLA then the customer can quite rightly expect some form of reimbursement. You broke their agreement.

So clearly it's better to find out BEFORE you break an SLA.

Thats where our fancy SLO's come in. They should be stronger than your SLA's such that they get spotted before the customers impact is felt through breaking an SLA. 

In turn that means you might have a chance to fix the issue before you break your customer agreement.