teleren/devto huggingface dataset:
Telescope 3.0 alpha
Published: 2022-04-11 02:09:40

With Telescope 3.0-alpha [released](https://github.com/Seneca-CDOT/telescope/releases/tag/3.0.0-alpha.0) this past Friday, we are now one release away from the big 3.0!

With this release the Docusaurus app is now live on production. It is available at [https://telescope.cdot.systems/docs](https://telescope.cdot.systems/docs).

After last week's [work](https://github.com/Seneca-CDOT/telescope/pull/3367) to have a Dockerfile for both the web app and our docs, this week I [added](https://github.com/Seneca-CDOT/telescope/pull/3400) the necessary config to Nginx to deploy the Docusaurus app. It was actually easier than I expected, I just had to add the following to `config/nginx.conf.template` just like I previously did in our dev config:

```
location /docs {
  root /usr/share/nginx/html;
}
```

## Docusaurus path

I also had to [fix](https://github.com/Seneca-CDOT/telescope/pull/3406) the Docusaurus path since after adding it to nginx we ended up with `/docs/docs` in the path (The first `/docs` from nginx and the second from Docusarus). I couldn't find a good way to do it and then I remembered that [pnpm](https://pnpm.io) uses Docusaurus for their docs and they do not have `/docs` in their path. In fact if you click the "Docs" link from their homepage, you are redirected to their first documentation page which is: [https://pnpm.io/motivation](https://pnpm.io/motivation).

Their docs are [open source](https://github.com/pnpm/pnpm.github.io) so I went digging and found that they have `routeBasePath: '/',` in their config. This did the trick for our Telescope docs.

Finally to get the app production ready I had to change the Telescope green to our Telescope **blue**! We still have dinosaurs on the homepage but [Alex](https://github.com/sirinoks) is working on a new one that should be up by the 3.0 release.

## Goodbye Satellite

I moved the Satellite project inside of the Telescope monorepo [last month](https://dev.to/menghif/last-piece-of-the-puzzle-moving-satellite-inside-telescope-1f89) and, this week, the time came to [archive](https://github.com/Seneca-CDOT/telescope/pull/3391) the original repo. Before clicking the big red button, I had to do some spring cleaning of the issues and PRs, change some outdated links and also remove the Satellite contribution info from the Dashboard (Something I actually added [last semester](https://dev.to/menghif/fetching-the-github-api-119e)).

We archived the Satellite repo but the project lives on an is healthier than ever!
On slightly easier pull requests
Tags: programming, discuss, writing
Published: 2022-04-11 01:53:25

Photo by <a href="https://unsplash.com/@malcoo?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Tomáš Malík</a> on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
  

Often times after getting past a tedious pull request, you know, the ones that have so many nit-picks, I wonder - how could it have gone better?

When going into a pull request, I try to focus on one thing - let's ship something that's _good enough_. This usually means that I focus on things like clarity and correctness, rather than aesthetics or organization.

 Something that I've started to really veer away from and dislike are comments that have to do with personal preferences.

For example, many people have the preference that in a React codebase, a file should have a single component and nothing else. Anything that is not that single component should be moved to a separate file, where it be another component or a utility.

In practice, I find that this style of coding can be useful, but when overly used it becomes a real chore. Sometimes functions or components have a single use, and to have to create a whole new file to house that purpose leads to reluctance - _better inline it_.

Another aesthetic preference I don't really care for is line count. When does a file have _too_ many lines? I'm not really sure. I tend to go with instinct on this. When the tree becomes convoluted in a way that makes me feel lost, I start to break things into subcomponents. Sometimes this can have benefits in performance when done well, as state can become pushed to subtrees and reduce the amount of renders happening higher up. However, if your team likes to nit on single components per file, then this sort of refactoring can become deterred as well. 

I found that happening to me a lot when working with Angular. The fact that there is so much boilerplate to setting up even the simplest of components made it so I avoided it whenever I could - which lead to really hard to read components.

In general I think intuition should be applied. If the sub-component that can be made can also provide improvements that are not just aesthetic, then you should do it.

So overall, my rules are:

- Is this correct?
- Can I provide non-aesthetic improvements?
- Is this good enough?

If so, lgtm.
Cloud Compliance and Assurance Within Reach
Tags: cybersecurity, cloud, aws, devops
Published: 2022-04-10 23:30:36

For many organizations and teams today, Governance, Risk, and Compliance Challenges are at the top of already long lists. 

Governance, Controls, and compliance may be needed and specific to the ones below just to name a few. 

- HIPPA
- PCI-DSS
- GDPR
- SOC 2

I will walk you through some native AWS security services, that when bundled together can help you achieve compliance. 

Before we go deeper into each AWS Security service, it may be helpful to first map the AWS services to lines of defense. 

The first one up is **managing our risks**, below are the AWS services we can leverage. 

As an example, you may have AWS S3 buckets, whether the S3 buckets are existing or are new ones created, you want to ensure the s3 buckets dont have public access enabled. You can use an AWS config managed rule, its created to evaluate and check whether the S3 bucket is compliant or not. If the S3 bucket does go out of compliance, the incident is logged and alert can also be configured.  

- AWS Config
- AWS CloudTrail
- AWS Systems Manager
- AWS Control Tower
- AWS License Manager

The second one up is **overseeing our risks**, below are the AWS services we can leverage. 

By enabling security standards from AWS, CIS, or PCI DSS, you can quickly view the security score and the specific results of your environments when evaluated against the standard(s) you have enabled.

- AWS Security Hub
- Amazon CloudWatch

The third one, and maybe even the most important for **audits** and when asked, being able to prove you are in fact doing what you need to for compliance and regulation. For example, collecting the evidence needed to support an audit, this includes your controls, policies, and procedures. 

For some organizations you may need to select the NIST, ISO or SOC2 framework for example. There is a framework library which allows you to easily search and select the framework you need for an audit. 

- AWS Audit Manager
In Swedish, are HTML elements "i" or "på" eachother?
Tags: swedish, html, help, watercooler
Published: 2022-04-11 01:06:03

[Original post on r/Svenska.](https://www.reddit.com/r/Svenska/comments/u0vkzt/are_html_elements_i_or_p%C3%A5_eachother/)  

<br/>

Ok, probably not many people here will know Swedish, but...
Are HTML elements "i" or "på" eachother?

The reason I ask is because I could argue a case for either.
```html
<html lang="se-SV"">
  <head>
    <!-- ... -->
  </head>
  <body>
    <p>
      Jag är en HTML-paragraph-tag, och jag är i
      <!-- However you'd say "the body tag". -->
    </p>
  </body>
</html>
```
The written form of HTML supports using "i" for describing element relationships.
BUT.
From a non-technical standpoint, you'd find that the browser renders the elements from the outer-most layer to the inner-most.
So we get (kind of) the reverse of the last argument.

Maybe you could use either depending on if you're talking about its technical sense or not, but I don't know which I should use.
Some input, even if it's an opinion, would help.

<br/>

<h1><b><center>
  Thanks in advance!<br/>
  Cheers!
</center></b></h1>
FlowRun - executable flowcharts for the web
Tags: flowrun, flowchart, scala, scalajs
Published: 2022-04-11 00:23:23

---
title: FlowRun - executable flowcharts for the web
published: true
description: FlowRun - executable flowcharts for web
tags: flowrun, flowchart, scala, scalajs
cover_image: https://i.ibb.co/M71vkZ4/automatic-layout.png
---

Wow, it's been 5 years since my last post here.. :o
I have something really exciting to share with you people!

[FlowRun](https://flowrun.io/) is my latest greatest project.
It is a PWA web app for designing and **running flowcharts** in your browser.
Its main alternative is [Flowgorithm](http://www.flowgorithm.org/index.html), which supports only Windows unfortunately. 
FlowRun even works offline to some extent. It is a PWA so it can be "installed" on phone/desktop. Since it is web based it is easier to share programs and integrate them in other apps like Jira, Confluence and similar.

## Snappy editor
A big advantage of FlowRun is its better UX of the editor: no popup windows, no doubleclicking nodes etc. 
Everything is right there, usually one click away. 
It has some features that Flowgorithm does not, like reporting *syntax errors as you type*.

## Expressions
The expressions and execution is mostly the same as in Java. 
It will be easy for beginners to switch to most real programming languages.

## Code generator
Code generator works for 10 languages, although there are probably still some bugs left to fix.  
When you click a statement(node in diagram) it gets highlighted in the code generator! Very handy when you are learning a new programming language.

## Execution
Runtime is also neat, you can start and stop the program whenever you want.  
When you get an error it will *highlight the relevant node* in the editor!  
When a program pauses for taking input from user, you can see the current state/values of variables.

## Layout
You can turn off some panels in the settings popup.  
E.g. if you only want to show the main function you can hide the functions chooser. This way you can focus viewer's attention on relevant details.

## Fun facts
FlowRun editor/interpreter is open source: https://github.com/sacode387/FlowRun

It is written in [ScalaJS](https://www.scala-js.org/), which compiles to JavaScript.
Why? Because Scala is really good for writing compilers.

Next, it uses Graphviz via [d3-graphviz](https://github.com/magjac/d3-graphviz) library,
which uses WebAssembly under the hood.
You can copy the DOT source for each function that is displayed,
and generate an SVG/PDF/JPG or any other format that Graphviz supports.

## Conclusion
Hope that this tool will help more people to get into programming.   
If you have any feedback, suggestions, please let me know in the comments! :)
How to setup React for testing
Tags: react, webdev, typescript, beginners
Published: 2022-04-11 00:21:59

## Introduction
Hey all, within this I'll be going step-by-step my journey in creating my personal website which will house my portfolio and CV.

I'll be building it with React + Typescript as I do most of my projects and I'll be building it using Test Driven Development.

## The Project So Far
Before deciding to blog this process I have already developed a quick sketch of the design on Figma, it currently looks like so:

![Figma Design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yswrxp04b8ey9kj8e3c9.png)

I know it might not be the best design, but hey, I'm an engineer not an art student.

## Setting up React
For this project I'll be using Create React App to install all the necessary dependencies, and I'll be using the TypeScript template. For this we'll just plug this into the terminal: `npx create-react-app . --template typescript`.

Now we'll be presented by our lovely default app.
![Default Create React App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c0t0rs4nmky2s7f6vvqp.png)We'll make a few changes so it's a bit simpler:
![Hello World](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9jbuko3uts4svwewum0c.png)
## Setting up our Testing
By default Create React App installs Jest, however we'll be using React Testing Library for unit testing, and Cypress for end-to-end testing.

We'll just run `npm install cypress`, then we need to add `"cypress:open": "cypress open"` to our scripts in `package.json`. Finally we need to run Cypress to allow it to do it's first time install, `npm run cypress:open`.

## GitHub
To view where we're at you can follow this [link](https://github.com/samp-reston/my-website/tree/c5e06937b5624f2d641133a3833558d46a263245) to the final commit at the end of each post to follow along!
Crie uma API simples (CRUD) com JSON Server
Tags: tutorial, beginners, json, api
Published: 2022-04-11 00:16:52

Nesse post veremos como criar uma API para requisições Post, Get, Put & Delete, utilizando JSON Server.

**Abra o seu terminal, navegue para dentro da pasta do seu projeto, e siga o passo a passo:**

###👨🏻‍💻 Iniciando API e dependências:

1. Criamos um **package.json** para administrar esse projeto, usando o comando:
`npm init -y`

2. Instalando as dependências mínimas pro NPM funcionar, digite no terminal:
`npm i`

3. Instalamos o JSON Server globalmente com o comando:
`npm i -g json-server`

4. E instalamos o JSON Server também como uma dependência de projeto! (No **package.json** 😉):
`npm i json-server`

###📚 Conectando a DataBase:

**Criamos/adicionamos o arquivo com extensão 'json' com nossa dB. Mas, para que as requisições funcionem corretamente, sua dB precisa conter:**

- Todos os dados dentro de uma única array, definida com um nome `"Dados": []`
- Array (com nome) envolvida em colchetes, ficando da seguinte forma:

```javascript
{
  "Dados": [
    {
      "text": "dado1",
      "id": 1
    },
    {
      "text": "dado2",
      "id": 2
    }
  ],
 "OutrosDados": []
}
```

1. Executamos o JsonServer na nossa dB com o comando:
`json-server --watch NomeDaSuaDb.json`
E pronto! O JSON-Server já vai criar automaticamente uma rota pra cada array que você criou na sua db.json! 😍😎

2. No **package.json**, no objeto de "scripts" trocamos o script _"test"_ para _"dev"_, com o seguinte conteúdo:
`"dev": "json-server --watch NomeDaSuaDb.json --port 3000"`

###🥳 Iniciando API

1- Criamos na pasta raiz do projeto um novo arquivo de nome "server.js" com o seguinte código dentro dele:

```javascript
const jsonServer = require("json-server");
const server = jsonServer.create();
const router = jsonServer.router("NomeDaSuaDb.json"); //👈🏽
const middlewares = jsonServer.defaults();
const port = process.env.PORT || 3000;

server.use(middlewares);
server.use(router);

server.listen(port);
```

2- Adicione na linha 3 o nome da sua database e pronto❗ Sua API com JSON Server está finalizada, e pronta para fazer o deploy 🙌🎆

###🏠 Deploy no Heroku

Você pode fazer o deploy da sua API em qualquer serviço de hospedagem da sua preferência. Recomendo pessoalmente o Heroku pois sempre utilizo a plataforma para hospedar minhas próprias API's.

**No Heroku, há os _"dynos"_, que sãos unidades que representam o quanto sua aplicação pode ficar disponível/online.**

Tanto na versão gratuita quanto paga, nossa API hiberna em horários convenientes para utilizar menos dynos. Caso você necessite de acesso **EXTREMO** e não se preocupe com **todos os seus dynos serem gastos rapidamente**, você pode impedir esse processo de hibernação.

**Para fazer isso gratuitamente, entre no site da [Kaffeine](https://kaffeine.herokuapp.com), e insira o nome da sua aplicação no Heroku (O mesmo nome que aparece lá na sua [dashboard](https://dashboard.heroku.com/apps) 👈🏽**
1. Clique no botão "Give my app a caffeine shot every 30 minutes" e PRONTO!! 

2. Sua API ou aplicação não entrará mais em hibernação 😉
Just Getting Started
Published: 2022-04-11 00:13:13

Video games have been a passion of mine for almost my entire life. Some of my earliest memories are watching my father playing *Disciples: Sacred Lands* as a kid and asking a million questions. What I loved most about games was storytelling and the problem solving. As a result, I branched out into many kinds of games - board games, interactive fiction, and tabletop role playing games. As an adult, I went to University of Baltimore for video game design. I found that the classes I gravitated towards were coding because of the challenge of coding and the familiarity of it.

Growing up, I also sought out any kind of coding languages. From coding my Neopets or Myspace page (showing my age a bit here) to taking coding classes in high school - I've always jumped head first into the challenge of programming. It's a puzzle to be solved -  and I love a good puzzle.

I went to college to design video games but found myself enjoying the programming most of all. 

I started with Amazon in 2015 and quickly moved into a role called "problem solve" and then into a "Data Analyst" role. I was able to gain experience with coding and have been using VBA and Python to improve processes and create solutions. It has been an amazing opportunity and I love the times when I get to build and create to help my team overcome challenges. Those are the parts of the job I love the most and I would love to move into Software Engineering to solve problems on a larger scale. 

It seems my love for video games and coding has led me in this direction and I am going to enjoy the challenge on the way there.
Trabalhando com JsPdf com React
Published: 2022-04-10 23:05:02

Neste domingo tive uma experiência que causou uma dor de cabeça bem grande em relação ao JsPdf. Para quem não conhece, é uma biblioteca que gera em PDF's. Alguns problemas que tive: imagem jpeg não funciona, textos estavam sendo quebrados pela metade e não adicionava um outra página automaticamente quando acaba o A4. 

Infelizmente o problema da imagem ainda não descobri como resolver e se você souber fico feliz que comente neste post para ajudar mais pessoas da comunidade. Mas, o problema do texto + adicionar outra página automaticamente, após MUITA pesquisa, consegui uma solução. 

    import { jsPDF as JsPDF } from 'jspdf';
    import html2canvas from 'html2canvas';


    const generatePdf = (): any => {
    const htmlSource = document.getElementById('profile');
    const filename = `Currículo ${fields.name}`;

    if (!htmlSource) {
      return;
    }

    html2canvas(htmlSource).then(function (canvas) {
      const imgData = canvas.toDataURL('image/png');
      const imgWidth = 180;
      const pageHeight = 297;

      const imgHeight = (canvas.height * imgWidth) / canvas.width;
      let heightLeft = imgHeight;
      let position = 5;
      const pdf = new JsPDF('p', 'mm');

      pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight);
      heightLeft -= pageHeight;

      while (heightLeft >= 0) {
        position = heightLeft - imgHeight;
        pdf.addPage();
        pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight);
        heightLeft -= pageHeight;
      }
      pdf.save(filename);
    });}; 


Use onClick={() => generatePdf()} no componente que deseja baixar o PDF.

Se no seu caso continuar cortando o texto em algum local que não está bom, modifique o `const pageHeight = 297;`, para o meu caso 297 ficou bom.

Documentação: http://raw.githack.com/MrRio/jsPDF/master/docs/index.html

Espero ter ajudado!


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/phgq8tbabmbdx2kh8gib.png)
When I don't (exactly) use Trunk-Based Development
Tags: trunkbaseddevelopmen, oss, featurebranches, pullrequests
Published: 2022-10-24 16:13:10

---
title: When I don't (exactly) use Trunk-Based Development
published: true
cover_image: https://jhall.io/images/bn-tree-stump-ax.jpg
date: 2022-04-11 00:00:00 UTC
tags: trunkbaseddevelopmen,opensourcesoftware,featurebranches,pullrequests
canonical_url: https://jhall.io/archive/2022/04/11/when-i-dont-exactly-use-trunk-based-development/
---

One topic that comes back constantly is git branching models. It’s no secret that [I don’t like GitFlow](https://jhall.io/archive/2021/03/09/gitflow-is-anti-agile/), and generally advocate using [trunk-based development (TBD)](https://jhall.io/archive/2021/03/10/a-case-for-trunk-based-development/) instead. But there are a few cases where TBD isn’t enough, and I want to talk about a couple of them.

Both of these examples come from open-source work. Although the first one can apply to a wide number of products, the second one will be extremely rare.

1. Long-term support releases

2. Following a versioned spec

So there you have it. I’m on record admitting that I don’t always use TBD, I sometimes use long-lived branches, and I sometimes even share an in-progress branch with other developers. All practices I regularly preach against. Even the best rules have a time and place to be broken, I guess. :)

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
Writing better code
Tags: java, cleancode
Published: 2022-04-10 23:01:50

Hi, in this article we will shed the light on an important topic.
Every programmer knows how to sort an array, how to balance a tree, how to create and use complex data structures, or event how to convert business specifications to a working code.
BUT.
Are all programmers aware of the importance of writing a good readable code? I bet the answer is a big **NO**.
Let's take an example of a code I came across while ago, when I was reviewing a merge request submitted by a colleague : 
 ```java
 public static int get(Person p) {
        return Period.between(p.getBirthDate(), LocalDate.now()).getYears();
    }
```
The above code computes the age of a given person, it is flawless and gets the results correctly, but to understand that, it requires more effort and maybe you will have to dig into more details, or maybe ask your friend about the intention of a such code snippet.
Below a suggestion to re-write the same code, but in a more understandable way :  

```java
public static int calculateAgeOfAPerson(Person person) {
        LocalDate now = LocalDate.now();
        Period difference = Period.between(person.getBirthDate(), now);
        return difference.getYears();
    }
```
It is obvious now, that the intention of this snippet is clear as it is described by the code itself, no documentation is required, and the idea becomes clear without the need of going further into the details.