teleren/devto huggingface dataset:
Dynamo DB - Hands On
Tags: aws, cloud, devops, tutorial
Published: 2021-08-18 02:03:10

To create a new dynamo DB table follow the instructions below:-

* Go to the DynamoDB service. Click on create table.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyhx0ba9id54b7dg95ni.png)

* Add table name and primary key. For example I used `TutTable` as name and `id` as the primary key. Click on create.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9s3qhv0f4frswim7hx4r.png)

* Now you will see a screen with details of Dynamo DB table

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/149c12dr8odm9wh545gg.png)
* Now we will add some items to see how DynamoDB works. To do that go into items tab and click create item
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c9qu9oxocevyfuadpfcs.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lcpphjw3ijes99q6kr63.png)
* Add some fields like name, gender. To add click the plus symbol do append and add the type of data you want to add and click on save. So you added an item to your database
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e5ll0wb2dn2a9cp7wa6n.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eja9ngztijeetq98a18t.png)
* Create another item and this time just add the id. you need not all all fields his is how NoSql database work.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jyqtjcqt00aea8g6o5ux.png)

* You will see two items with different data
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ox1v9eqlvs52sm8os4x.png)
* After that delete the table. So, that there are no additional charges.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2p4knmblnbqswqtenbo3.png)

Next we will study about some more databases available in AWS for various other use cases.
Save Large Canvas
Tags: javascript, canvas, tricks
Published: 2021-08-18 02:59:08

Weirdly if you try to save a massive data URI to a file (&gt; 15mb) it will just fail. In order to do this properly, you need to convert to a blob first and then save. 

{% codepen https://codepen.io/ZevanRosser/pen/eYWaQJL default-tab=js,result %}

I encountered this at some point and learned of the solution from user <a href="https://stackoverflow.com/users/254830/doppelgreener" rel="noopener" target="_blank">doppelgreener</a> over at stack overflow. Take a look at <a href="https://stackoverflow.com/questions/38781968/problems-downloading-big-filemax-15-mb-on-google-chrome" rel="noopener" target="_blank">the post here</a>.


_See more stuff like this over @ [Snippet Zone](https://snippet.zone/)_
Golfed Join
Tags: codegolf, javascript, hacks
Published: 2021-08-18 02:56:02

```js
const str = ['one','-','two'].join``;
console.log(str);
// outputs "one-two"
```

With tagged templates you can pass a template string to a function without parens.

_See more stuff like this over @ [Snippet Zone](https://snippet.zone/)_
Make Math Global
Tags: javascript, math, hacks
Published: 2021-08-18 02:52:34

```javascript
Object.getOwnPropertyNames(Math).forEach(i => window[i] = Math[i]);
 
// or with map, just to be shorter
Object.getOwnPropertyNames(Math).map(i => window[i] = Math[i]);
 
// if this points to window
Object.getOwnPropertyNames(Math).map(i => this[i] = Math[i]);
 
// or using the deprecated "with" statement
with (Math) {
  console.log(PI, E, SQRT2, cos(1));
}
```
While not very useful, I sometimes like to make the entire Math object global on the window – just when speed coding and playing around.


_See more stuff like this over @ [Snippet Zone](https://snippet.zone/)_
NextJS Client-side, Server-side & Static Rendering
Tags: react, javascript
Published: 2021-08-18 01:16:49

The future of SEO and search ranking algorithms are now in heavy favour of static or server-side rendering. This means building static or server-side rendered apps instantly gain advantages in rankings.

In this article, we are going to discuss building static & server-side rendering with NextJS, a server-side rendering React framework.

## What is Static Rendering & Server-Side Rendering

### Server-Rendering (SSR)
In response to each request, renders the app on the Server , and then sends the rendered HTML and Javascript back to the client.

### Client-Side Rendering (CSR)
Renders the app in the browser on the client at run time.

### Static Rendering (SR)
Usually generating a static HTML page for every URL. Pre-built app, or renders the app at build time (e.g. when you run the npm run build or yarn build command). This is the default approach of NextJS.

## NextJS

In NextJS, there are three main functions that are used for SSR and SR, and a hook that for client-side data fetching.

Built time:

*getStaticProps* — fetches data at build time getStaticPaths — pre-render dynamic routes at build time

Run time:

*getServerSideProps* — fetches data on each request SWR — fetches data on the client-side at run time

### Server-Side Rendering (SSR)

The HTML is generated on the server on each request for the page — the HTML is 'dynamic' rather than 'static' as it will depend on the data required.

Each time a client requests the page, the server will fetch the data for that page, and generate the page's HTML using the data.

Next.js offers two data fetching methods for SSR — getServerSideProps and getInitialProp

[Read more here](https://seanamarasinghe.com/developer/2021-02-02-nextjs-client-side-server-side-and-static-rendering)
#002: Indexando o primeiro documento no Elasticsearch
Tags: elasticsearch, index, search, document
Published: 2021-08-18 01:00:02

Certifique-se que o cluster foi iniciado. Como podemos ver nesse artigo [#001: Iniciando no Elasticsearch](https://dev.to/brunoflegler/001-iniciando-no-elasticsearch-10fe).

Os documentos são indexados no elasticsearch no formato como JSON. Ex:

```json
{
  "id": 1,
  "name": "Christopher M. Bass",
  "age": 45,
  "createdAt": "2021-08-17T02:36:39.104"
}
```

Use o `curl` para indexar o documento. O mesmo será indexado no índice `customers`. A palavra `_doc` é reservada e iremos entende-lá melhor quando falarmos sobre *mappings*. 

```sh
$ curl -X POST "http://localhost:9202/customers/_doc" -H "Content-Type: application/json" -d '
{
  "id": 1,
  "name": "Christopher M. Bass",
  "age": 45,
  "createdAt": "2021-08-17T02:36:39.104"
}'
```

O cluster confirma a indexação e como não atribuímos um identificador para o documento, o cluster cria automáticamente. Como podemos ver no atributo `_id`.

```json
{
  "_index": "customers",
  "_type": "_doc",
  "_id": "TKMXUnsBDnCk96a8UqV7",
  "_version": 1,
  "result": "created",
  "_shards": {
    "total": 2,
    "successful": 1,
    "failed": 0
  },
  "_seq_no": 1,
  "_primary_term": 1
}
```

Para atribuir um identificador basta informar um valor único depois do `_doc/?`. Ex: `http://localhost:9202/customers/_doc/1"`.

É importante frisar a diferença entre `id` e `_id`. O `_id` é identificador único do elasticsearch, diferentemente de `id` que pode conter ou não no documento indexado.

Para visualizar o documento indexado podemos fazer a pesquisa pelo identificador `_id`. Ex:

```sh
$ curl -X GET "http://localhost:9202/customers/_doc/1"
```

```json
{
  "_index": "customers",
  "_type": "_doc",
  "_id": "1",
  "_version": 1,
  "_seq_no": 0,
  "_primary_term": 1,
  "found": true,
  "_source": {
    "id": 1,
    "name": "Christopher M. Bass",
    "age": 45,
    "createdAt": "2021-08-17T02: 36: 39.104"
  }
}
```

No próximo artigo iremos entender como retornar todos os documentos de um indíce. Até lá pratique bem essa etapa, ela é o coração para um bom aprendizado sobre elasticsearch.
Coding as a hobby for the elderly?
Tags: discuss, teaching
Published: 2021-08-18 00:43:30

My Grandpa is a relatively intelligent man, he used to design circuits and has always enjoyed maths but his bones are giving up on him and he struggles to move up stairs anymore. Mentally this really gets to him, only a few years ago he would always be busy with an odd job and now he has to watch everyone else do these things for him. He basically just talks to my Grandma or watches TV. 

I think programming would be something he could really throw himself into and enjoy, whether creating art through it or creating useful things for himself but I know people struggle to learn things as they grow older and I feel he'd find it frustrating if he didnt pick it up with relative ease. It could actually make his confidence worse if he struggles with it.

---

So heres my question:

What language would be the best for something like this? And what tools do people reccommend? 

* Python is good for learning but it often simplifies things in such a way they actually become harder to explain logically if you're wanting to think about it from a low level perspective rather than a "oh the computer just does that" perspective, for instance self in classes.

* Javascript requires you to learn html and css too and needs you to be willing to forgo alot of early understanding through the logic of "oh the browser just does that"

* C++ is incredibly complex even if logical and is difficult to achieve much with without alot of experience, and linking libraries would not be fun for someone with little experience with computers

---

Writing this out it feels a little silly but I genuinely do feel that this could be a real confidence boost for alot of elderly people, I know for a fact my Grandpa isnt the only elderly person feeling this way about themselves who has all the nescessary skills to learn to code. I'm intrested to know what other people think about this idea, if they have any experiences related to it or maybe if there are any elderly coders who only recently started out there?


Tldr; many elderly people feel useless as their bodies weaken. I think programming could be a good solution to this, something productive that doesnt require physical strength. 
* What are good languages to learn? 
* Whats a good tool for them to use to teach themselves?
* Would an elderly brain take to learning something new easily enough to make it enjoyable?
* Is it good for them physically to find hobbies where they dont move regularly?
Redshift es compatible con vistas materializadas!
Tags: aws, sql
Published: 2021-08-18 00:21:07

Esta buen noticia llego a fines del 2019, donde Amazon anuncio la copatibilidad de Redshift con las vistas materializadas. 
Pero, que son? 

Una vista no es mas que una consulta almacenada que representa un conjunto

de tablas (posiblemente de diferentes esquemas) a la que daremos

un nombre y trataremos como si fuese una tabla más de nuestro

esquema, pero sin llegar a ser realmentea serlo. Es importante destacar que  una vista NO guarda datos, sino que solo almacena el query

que nos dara acceso a los datos. Existen principalmente dos motivos para usar las vistas, en primer lugar por cuestiones de  seguridad, para restringir el acceso a ciertos usuarios a toda la información de la base de datos, dandole acceso en cambio a un conjunto de datos específicos que creamos para esos usuarios. Por otro lado, el otro motivo 

tiene que ver con la estructura de nuestro modelo de datos, ya que si es bastante

complejo o con muchas tablas nos puede ser muy útil crear este tipo

de vistas para organizar una cierta información de modo que nos sea

mucho más cómodo acceder a ella mediante consultas mucho más

sencillas.

Ahora bien, a diferencia de las vistas tradicionales, una vista materializada

almacena físicamente los datos resultantes de ejecutar

la consulta definida en la vista. Este tipo de vistas materializadas realizan

una carga inicial de los datos cuando se definen y posteriormente con una

frecuencia establecida se actualizan los datos de la misma.Con la utilización

de vistas materializadas logramos aumentar el rendimiento de las consultas

SQL además de ser un método de optimización

a nivel físico en modelos de datos muy complejos y/o con muchos datos.


Una vez definida una vista materializada uno de los problemas

que nos encontramos es el de la actualización de los datos.

Como se ha comentado antes, estas vistas contienen fisicamente los datos de

las «tablas base», por lo que si cambian los datos de estas tablas

no se reflejarán en la vista materializada. Para ello necesitamos establecer

un mecanismo de resfresco automático en el que tendremos que definir

el tipo y la forma de refresco.

El comando para crear una vista materializada en Redshift es: 

```
CREATE MATERIALIZED VIEW mv_name
[ BACKUP { YES | NO } ]
[ table_attributes ]   
[ AUTO REFRESH { YES | NO } ]
AS query 
```
Tenemos algunos parametros mas para agregar, [te los dejo en la documentacion](https://docs.aws.amazon.com/es_es/redshift/latest/dg/materialized-view-create-sql-command.html)
Cabe destacar que se pueden crear vistas materializadas basadas en una o mas tablas, mediante el uso de filtros, proyecciones, combinaciones internas, agregaciones, agrupaciones, funciones, etc.
En resumen, podemos optimizar aun mas las consultas en Redshift, aunmentando la velocidad de las consultas mediante el procesamiento de  la consulta en función de los datos precalculados almacenados en la Vista materializada
Y todo esto sin costo adicional!
How to get the current year using JavaScript?
Tags: javascript
Published: 2021-08-18 00:00:00

---
  title: How to get the current year using JavaScript?
  published: true
  tags: JavaScript
  date: Wed Aug 18 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/get-current-year-using-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-93259de1ce79f09931a8c689b1846f6c.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/get-current-year-using-javascript)
  
To get the current year, we can use the `getFullYear()` method from the global `Date` object in JavaScript.

### TL;DR

```js
// Make an instance or object of the Date constructor
const currentDate = new Date();

// get the current year
const year = currentDate.getFullYear();

console.log(year); // 2021
```

First, let's make an object (or instance) from the global `Date` constructor using the `new` keyword like this,

```js
// Make an instance or object of the Date constructor
const currentDate = new Date();
```

Now we can use the `getFullYear()` method from the `currentDate` object to get the year number like this,

```js
// Make an instance or object of the Date constructor
const currentDate = new Date();

// get the current year
const year = currentDate.getFullYear();

console.log(year); // 2021
```

Yay, We successfully got the year 🎉!

See the above code live in [JSBin](https://jsbin.com/hilegizoxu/2/edit?js,console).

That's all 😃!

### Feel free to share if you found this useful 😃.

---
How to override the netlify build config
Tags: devops, netlify
Published: 2021-08-30 03:40:31

---
title: How to override the netlify build config
description: A way to override the netlify build settings so that we can override the build commands for a branch
published: true
date: 2021-08-18 00:00:00 UTC
tags: devops, netlify
canonical_url: https://www.ankursheel.com/blog/override-netlify-build-config
---

## Problem

As part of the [migration from Gatsby to Statiq](https://www.ankursheel.com/blog/migrating-gatsby-statiq), I wanted to keep the original site running with gatsby but deploy the new branch using Statiq.

## Solution

First, we need to allow branch deploys for our branch.
![Netlify UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a494wpknjpgkztdavqxh.png)
 
In the above screenshot, my branch for the migration is named _statiq_.

To override the build settings set in the Netlify UI, we can add the following snippet to _netlify.toml_

```toml
[build]
  command = "dotnet run --project ./subDir/"
  publish = "./subDir/output"
```

So, what’s happening here?

- **Line 1** : Apply the build settings globally and override anything set in the UI.
- **Line 2** : Use the `dotnet run` as the build command and specify the project path.
- **Line 3** : The relative directory to the root directory containing the deploy-ready HTML files and assets.

## Conclusion

The advantage of updating the _netlify.toml_ file is that when we merge our branch back to master, it will automatically use Statiq to build the site.

References:

- [Netlify File Based Configuration](https://docs.netlify.com/configure-builds/file-based-configuration/)
- [Dotnet run command](https://docs.microsoft.com/en-us/dotnet/core/tools/dotnet-run)
DevOps isn't about automation
Tags: devops, automation, softwaredelivery
Published: 2021-08-24 10:41:06

---
title: DevOps isn't about automation
published: true
date: 2021-08-18 00:00:00 UTC
tags: devops,automation,softwaredelivery
canonical_url: https://jhall.io/archive/2021/08/18/devops-isnt-about-automation/
---

Automation gets a _lot_ of attention these days. In many circles, automation, or at least automation of software delivery, it’s even treated as a synonym for DevOps.

But it’s not.

The [2021 State of DevOps Report](https://www2.circleci.com/2020-state-of-devops-report.html?utm_source=gnb&utm_medium=SEM&utm_campaign=SEM-gnb-stateOfDevopsReport-Ld-emea&utm_content=SEM-gnb-stateOfDevopsReport-Ld-emea-StateOfDevops&utm_term=SoDReport2020&gclid=CjwKCAjwmeiIBhA6EiwA-uaeFdlqogdZb1wdzw85CEo9RroNYpqePbQ7MNgyPMZHL81prmlywtAf0hoCXygQAvD_BwE) says:

> For every team “doing DevOps” well, there are far too many organizations that have been stuck in the middle of their DevOps journey for far too long.
> 
> Despite all their DevOps talk, these companies have failed to address or understand the cultural, organizational, and process changes required to dadopt a new way of working with technology. **They may have invested in automation—67 percent of mid-evolution respondents say their team has automated most repetitive tasks** —but _as an organization_, they haven’t addressed the organizational silos and misaligned incentives around deploying software to production that gave rise to the DevOps movement.

If 67 percent of survey respondents can have automation, but not be doing successful DevOps, what gives? What makes DevOps successful? The report goes on:

> A majority 58 percent report multiple handoffs between teams are required for deployment of products and services.

Does your project require one or more hand-offs to get your software deployed? From developers to operations? Or perhaps from developers to QA? Or to a security audit group?

Regadless of how much automation you have (or don’t have), if you have hand-offs, you’re not doing DevOps.

I believe that you can do 100% manual DevOps. And in fact, if you have silos, you should look for manual solutions first, and only worry about automation later.

How many hand-offs does your software go through before it can be deployed? Hit reply and let me know.

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
Enable Python type checking in VSCode
Tags: python, vscode, typing
Published: 2021-09-26 10:18:03

---
title: Enable Python type checking in VSCode
published: true
date: 2021-08-18 00:00:00 UTC
tags:
  - python
  - vscode
  - typing
canonical_url: https://www.emmanuelgautier.com/blog/enable-vscode-python-type-checking
---

Since version 3.5, Python now has [support for type hints](https://docs.python.org/3/library/typing.html). This typing is a cool new feature allowing type checking across your code for more quality and also help when you are using some packages or call some functions your colleague did in a large codebase. In this article, we will see how to enable type IntelliSense and type checking analysis in Visual Studio Code editor.

First of all, you need to install the Microsoft extension [Pylance](https://marketplace.visualstudio.com/items?itemName=ms-python.vscode-pylance). This extension provides a set of useful features powered with [Pyright](https://github.com/microsoft/pyright), the Microsoft static type checking tool.

With the extension installed and enabled, you should now have better IntelliSense with typing information when you are calling some package function for example. For the type checking analysis, it is not enabled by default, you need to configure it by yourself.

In your `settings.json` file, add a new line with the following setting:

```json
{
  "python.analysis.typeCheckingMode": "basic"
}
```

The default value for this line is `off` meaning the static analysis is disabled. You have two other possible values which are:
* `basic`: basic type checking rules
* `strict`: All type checking rules at the highest error severity

If you test on the code below you should have a type error in VSCode now

```python
# Wrong type between expected return type and the value type really returned by this function
def wrong_return_type() -> str:
    return False
```
How to replicate the output of the FullScreen template from StreamLadder
Tags: ffmpeg, streamladder
Published: 2021-08-17 23:48:58

---
title: How to replicate the output of the FullScreen template from StreamLadder
published: true
date: 2021-08-17 23:37:46 UTC
tags: FFmpeg,StreamLadder
canonical_url: https://donaldfeury.xyz/how-to-replicate-the-output-of-the-fullscreen-template-from-streaml/
series: "Automated Video Editing"
cover_image: https://donaldfeury.xyz/content/images/2021/08/MMPEG_Logo2.png
---

 ![How to replicate the output of the FullScreen template from StreamLadder](https://donaldfeury.xyz/content/images/2021/08/MMPEG_Logo2.png)

[StreamLadder](https://streamladder.com) is a nifty little tool for creating vertical versions of your Twitch clips for platforms like Tiktok and YouTube Shorts. However, I like tinkering with [FFmpeg](https://donaldfeury.xyz/tag/ffmpeg) so I replicated the output with a simple command.

If we look at the Fullscreen template, all it's essentially doing is cropping the original clip down into a 9:16 ratio.

To do the same with [FFmpeg](https://donaldfeury.xyz/tag/ffmpeg) we can just do the following:

```
#!/usr/bin/env sh

# the source video (in this case, a twitch clip)
input=$1

# where you want to save the processed version
output=$2

ffmpeg \
	-i "$input" \
	-vf "crop=w=in_h*9/16:h=in_h,scale=1080x1920" \
	-vcodec libx264 \
	-crf 23 \
	-preset veryfast \
	-c:a copy \
	-s 1080x1920 \
	"$output"

```

The main part of this command doing all the work is the video filter, denoted with `-vf`. We do `w=in_h*9/16` to set the width of the video to the 9:16 ratio compared to what the height of the video is while we keep the height the same with `h=in_h`. We finally scale the video up to 1080x1920 with the `scale` filter.

If the video quality looks a bit pixelated from scaling up too much, anywhere you see `1080x1920` replace with a smaller equivalent like `720x1280`
JS13K: My First Day (Day 5 😨)
Tags: challenge, javascript, devjournal, gamedev
Published: 2021-08-17 23:34:25

It's JS13KGames time, everybody!
Time to make a game about "SPACE" (Yes, that is the theme to follow for this month).
I'll try to make a professional game in one month, mainly for mobile with Desktop and Web Monetization support.
For now I have this GIF to show. It's not much, but I am trying to test a rhythm game if I can make it and if that will be good.
Until then, rest well, have a good day and I'll update you!
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sx9zwlqyf563qkx8041c.gif)
<figcaption>Rhythm Game first test!</figcaption>