teleren/devto huggingface dataset:
Migration sous Eleventy
Tags: 11ty, eleventy, jekyll, french
Published: 2021-12-09 11:50:44

Après presque 4 ans sous [Jekyll](https://blog.pagesd.info/2017/01/04/migration-sous-jekyll/) (merci [@jekyllrb](https://twitter.com/jekyllrb) et merci [GitHub Pages](https://pages.github.com/)), j'ai décidé de migrer mon blogue sous [Eleventy](https://11ty.dev). C'est un de ces trucs intéressants à faire quand on a un blogue : même si on n'a rien à raconter, on peut toujours écrire un billet à chaque fois qu'on change d'outil pour le mettre à jour ou bien quand on renouvelle la charte graphique de son site. Dans le genre marronnier, on trouve aussi le billet pour s'excuser d'avoir délaissé son blog depuis un petit moment :)

C'est pour ça que je me contente de migrer le "moteur" mais que je ne touche surtout pas à la [charte graphique](https://dev.to/michelc/a-new-css-and-5-tips-to-know-cmg). En un, elle a à peine 2 ans ! En deux, je n'en suis toujours pas lassé. En trois, ça me fera du grain à moudre en cas de besoin.

Ces derniers temps, j'ai traficoté les markdowns de Jekyll, adaptouillé les templates Liquid en Nunjucks, révisé les frontmatters et les excerpts, réajusté les illustrations, testé et débugué à n'en plus pouvoir, mais ça y est, j'ai une nouvelle fois un blogue tout neuf, toujours aussi statique et miracle de la technologie, encore hébergé sur GitHub Pages.

Normalement les gens sont dithyrambiques au sujet de Eleventy et du fait qu'il soit tellement simple et intuitif. Mais comme moi j'ai un peu galéré avec son côté super personnalisable, ça me donnera peut-être l'occasion de faire quelques billets pour expliquer comment je m'y suis pris. 

Accrochez-vous ! Encore des billets pour ne parler que du blog et en plus par quelqu'un qui avoue ne pas trop maitriser le sujet...

1. [Création de mon site Eleventy](https://dev.to/michelc/creation-de-mon-site-eleventy-mo2) (20/12/2021)

---

Billet publié à l'origine sur [blog.pagesd.info](https://blog.pagesd.info/2021/12/08/migration-sous-eleventy/).
Illustration: [Virginia opossums](https://www1.nyc.gov/site/wildlifenyc/animals/virginia-opossum.page)
Image Optimizer
Tags: github, opensource, vue, electron
Published: 2021-12-09 11:25:12

---
title: Image Optimizer
published: true
description: A free and open source tool for optimizing images and vector graphics
tags:  github, opensource, vue, electron
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dz2wkofz6cd2crj46f9n.jpeg
---

Recently I decided to try Vite in tandem with Electron for self-development purposes. I ended up with a small project.

I don't doubt there are lots of cool tools like this on the net, but I think mine will complete that list. Enjoy using it

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gjvvlx6ywquxklp992bn.gif)

{% github antonreshetov/image-optimizer %}
kyoto on GopherCon 2021!
Tags: gophercon, go, webdev, frontend
Published: 2021-12-09 11:14:25

---
title: kyoto on GopherCon 2021!
published: true
description: 
tags: gophercon, go, webdev, frontend
cover_image: https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fres.cloudinary.com%2Fbizzaboprod%2Fimage%2Fupload%2Fq_auto%3Abest%2Cc_crop%2Cg_custom%2Fv1616882425%2Funaq8ihjisffjcds5zly.png&f=1&nofb=1
---

For those unfamiliar with kyoto, it's an SSR-first Go Frontend Library. It's my first time going public and I hope it was not as awful as I think 😅 

Library: https://github.com/kyoto-framework/kyoto
Talk recording: https://youtu.be/35eIxI_n5ZM?t=11860

I was really happy to participate, the atmosphere was delightful!
JavaScript & Web API
Tags: javascript, webdev, beginners
Published: 2021-12-09 10:58:53

As we all know, API stands for Application Programming Interface. API is actually some kind of interface which is having a set of functions. These set of functions will allow programmers to acquire some specific features or the data of an application.
Our web browser ( Chrome, Mozilla, Safari, etc. ) also provide some API, which is used by JavaScript engine. 
> ######Note that these API's are not the part of JavaScript language.

Below are the some most commonly used Web API's,

####1. Timer API ( setTimeout, setInterval)

###### These API are used for executing task after specific time duration. 
[click here](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout) to read more...

####2. Console API
######Yes, console is not the part of JavaScript language but it's browser API. We can access many console features like `console.log`, `console.error`, `console.dir`, etc through this API. 
[click here](https://developer.mozilla.org/en-US/docs/Web/API/console) to read more...

####3. Document Object Model (DOM) API 
######DOM API are used to access, modify web document i.e. HTML pages. some commonly used DOM  properties are `document.getElementById`, `document.append`, etc. 
[click here](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) to read more...


####4. Storage API ( localStorage, sessionStorage)
###### Storage API's are used for storing data locally in client side. 
[click here](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) to read more...

####5. Geolocation API ( Navigatior)
######To get user's location related information , this API is used. 
[click here](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) to read more...


There are many Web API's are available. [click here](https://developer.mozilla.org/en-US/docs/Web/API) to read more about all of API's
AWS Connectivity Troubleshooter
Tags: aws, ecs, rds, apigateway
Published: 2021-12-09 10:27:55

---
title: AWS Connectivity Troubleshooter
published: true
description: Some trouble shooting questions
tags: aws,ecs,rds,apigateway
//cover_image: https://direct_url_to_image.jpg
---

# AWS Connectivity Troubleshooter

Just simple troubleshooting questions to ask myself whenever connectivity fails.

## ECS <--> SecretsManager

* Does the ECS task have network access to SecretsManager? e.g.:
    * from a private subnet via a NAT Gateway or VPC Endpoint
    * from a public subnet via a public IP address
* Does the TaskExecutionRole have sufficient IAM rights to read the secret?

## API Gateway HTTP API <--> VPC Link <--> ECS

* Does the VPC Link have a security group that's allowed to access the ECS tasks on the given port?
* Are the Cloud Map DNS records of type `SRV`?

## RDS Access

* Does the accessor have a security group that's allowed to access the DB?
* Does the accessor have the right network access?
* Is the accessor using the right port? (Aurora may set unexpected ports when using CloudFormation)
* Have you double checked spelling?
Deploy Angular Project on an ubuntu server with pm2
Tags: angular, javascript, node, ubuntu
Published: 2021-12-09 10:25:48


**1. Install NodeJs**

```
sudo apt install nodejs

node -v
// v16.13.0
```

**2. Install pm2**

```
sudo npm install pm2 -g

pm2 -v
// 5.1.0
```

**3. Install Git**

```
sudo apt install git

git --version
// git version 2.17.1
```

**4. Install Angular CLI**

```
sudo npm install -g @angular/cli 

ng version
// Angular CLI: 13.0.3
```

**5. Clone Project and Install package**

```
sudo git clone https://github.com/<username>/<repository>.git

cd <project-name>

sudo npm install
```

**6. Run Angular with pm2**

```
pm2 start "ng serve"

// you can specific host, port and name of your app
pm2 start "ng serve --host 0.0.0.0 --port 4205" --name "name"

// list app
pm2 list
```
Anyone who want to make NFT art marketplace? 
Published: 2021-12-09 10:25:34

Hi This is Jeff.

I am currently working in IT sector.

I would like to make a NFT marketplace with the timeline of releasing 2022 Q2 or Q3.

I am looking for smart engineers who is less greedy and like a nerd and strong interest in NFT art marketplace.

If you looking for the job or payed work, this is not for your project.

But  if you want to explore your new opportunity for your growth and your skill up in NFT world, as a core member of this project, this is new possibility to you.

Here is the details of engineers wanted.

* 3 Backend: Golang or NodeJS.
* 3 - 4 Frontend: ReactJS / Responsive web app.
* 1 -2 Defi
* 1 Project Manager role or 
  1 Product Development Manager

Here is contact information.

Email: soasks@hotmail.com 
Discord ID: Tokyodream#3246

Feel free to reach me if you are interest in this project.

Best regards, 
Jeff
React + MobX Boilerplate
Tags: react, webdev, typescript
Published: 2021-12-09 10:24:58


![y tho](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tp8j11nx60kh2suqg8je.png)
 
Simple, I really got tired of setting up a structure for every react project I make, which lead into the birth of this little boilerplate code, here's what's included in it:

- TypeScript
- Sass (global styles and module styles)
- MobX + MobX State Tree 🥰
- Apisauce

This template takes heavily from [Ignite CLI](https://github.com/infinitered/ignite)'s boilerplate for React Native in terms of used tech and file structure

{% github ibrahimelaradi/react-template %}

I'm currently working on a full example usage that will explain some of the concepts used in this project, until then, feel free to check out the [repo](https://github.com/ibrahimelaradi/react-template) on Github, any suggestions/contributions are very welcome!

![peace out](https://c.tenor.com/_tMorpHF7hQAAAAC/fade-meme.gif)
How to test React hooks ... by not testing react hooks
Tags: react, javascript, testing
Published: 2021-12-09 10:18:09

---
title: How to test React hooks ... by not testing react hooks
published: true
description: "React lifecycle methods are a pain to test. How do you know if your component mounted twice? How do you test for that? Why should you, since it's part of React's internal behaviour? Here's how we've started testing React hooks ... by not testing them at all!"
tags: 
- react
- javascript 
- testing
---

**React lifecycle methods are a pain to test. How do you know if your component mounted twice? How do you test for that? Why should you, since it's part of React's internal behaviour? Here's how we've started testing React hooks ... by not testing them at all!**

Say I have my component written and it updates some messages from my API using a useEffect hook like this:

```javascript
    useEffect(() => {
    if (data) {
        const messagesToUpdate = getAllMessagesToUpdate(data);
        messagesToUpdate &&
            messagesToUpdate.forEach(edge => {
                updateMessage({
                    variables: {
                        UpdateMessageInput: {
                            id: edge.node.id,
                            read: true,
                        },
                    },
                });
            });
    }
    }, [data, updateMessage]);
```
How do I test each permutation of this call? I would need to mock the render cycle so that I can ensure that each time useEffect is called, this message does as it's expected.

Here's an alternative. Abstract the useEffect call into its own hook, and abstract the functionality into a separate function.

```javascript
// in my main component
useUpdateMessages(data, updateMessage);

// in my hook
export function useUpdateMessages(data, updateMessage) {
   useEffect(() => {
        updateMessages(data, updateMessage);
    }, [data, updateMessage]);
}

// in my standalone function
export function updateMessages(data, updateMessage) {
    if (data) {
        const messagesToUpdate = getAllMessagesToUpdate(data);
        messagesToUpdate &&
            messagesToUpdate.forEach(edge => {
                updateMessage({
                    variables: {
                        UpdateMessageInput: {
                            id: edge.node.id,
                            read: true,
                        },
                    },
                });
            });
    }
}
```

Now I don't need to worry about React lifecycle methods. I can test my hook if I want to, but it hardly seems worth it here. If I would, it would be easier to do so using [react-hooks-testing-library](https://react-hooks-testing-library.com/)

Additionally, I only need to worry about testing my standalone function, and that can be done much more easily now it's separated away from React's internal mechanism.

I like this approach a lot. Separate your code from the framework you're using. Even though there are more moving parts, it can facilitate much easier testing and a lot cleaner code.

_Thanks to my colleague Stuart Nichols for this idea!_
5 Things John Learned Fighting Hackers of His App — A must-read for PM’s and CISO’s
Tags: rasp, freerasp, android, hacking
Published: 2021-12-09 10:07:35

Writing this article gave me a lot of insights into mobile security issues. The interviewee made the point: You'll never understand until it happens to you. Have you ever experienced a cloning attack yourself?

Android security tips, RASPs, real-world consequences:

https://medium.com/@talsec/5-things-john-learned-fighting-hackers-of-his-app-a-must-read-for-pms-and-ciso-s-463379b49410
Do you want to know more about Blockchain and Cryptocurrency?
Tags: blockchain, cryptocurrency, beginners, dapps
Published: 2021-12-09 10:04:52

If you are a beginner and you have wondered what blockchain and cryptocurrency is, this is the right place to be! Saturday, 11 December 12 pm (IST) onwards Commudle will lead an introductory webinar to the blockchain and cryptocurrency. In this series, you will be writing and deploying your first smart contract.

**Reserve your spot and register today:** https://bit.ly/3GkMFLc


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lxq1dqoegt8rf8uznhwh.jpg)
Advent of code  Day 9
Tags: adventofcode, adventofcode2021, programming, 42
Published: 2021-12-09 10:03:34

I'm very satisfied for my solution today.
This problem fits very well with AdamsTowel matrixes.
You can see a video description of my solution at 
(https://www.youtube.com/watch?v=tSTDJlICst8)
Some highlights of the solution:
(1)
```
(new=that.with(row=\row-1\) catch error Any _ void \add(new))
```
This is making a new coordinate and adding it to the list under construction. If the coordinate would be outside of the matrix, an error is raised and ignored.
(2)
```
sizes=I.List()( for i in Range(seeds.size()) 
    \add(Match.Count()(for v in matrix \add(v==i+100I)))
    )
```
Here we taint the seeds using a number much bigger than any height.
The number can be tracked back as the corresponding seed index.

(3)

```
GrowBasin={class method Void(mut Matrix matrix)=(
  for c in matrix.coords() var h in matrix {
    if h>=9I return void
    return for ci in Near(c) if matrix.val(ci)>99I return h:=matrix.val(ci)
    }
```
To grow a basin one step, we search for all the coordinates c of height h; if there is a ci near c that is tainted with a basin number, we taint the current height too.


Here is the full code.
```
reuse [L42.is/AdamsTowel]

Fs = Load:{reuse[L42.is/FileSystem]}

Matrix = Collection.matrix(I.List,row=100I, col=100I)

Coords = Collection.list(Matrix.Coord)

Split={class method S.List (S that)=\()(//should be in adamsTowel
  for c in that.replace(S"" with=S",").split(S",")\add(c)
  )}
Near={class method Coords (Matrix.Coord that)=Coords()((
  (new=that.with(row=\row-1\) catch error Any _ void \add(new))
  (new=that.with(row=\row+1\) catch error Any _ void \add(new))
  (new=that.with(col=\col-1\) catch error Any _ void \add(new))
  (new=that.with(col=\col+1\) catch error Any _ void \add(new))
  ))}
GrowBasin={class method Void(mut Matrix matrix)=(
  for c in matrix.coords() var h in matrix {
    if h>=9I return void
    return for ci in Near(c) if matrix.val(ci)>99I return h:=matrix.val(ci)
    }
  )}
NeedsMore={class method Bool(read Matrix matrix) = 
  Match.Some()(for e in matrix \add(e<9I))  
  }
PopMax ={class method I (mut I.List that)=(
  var i = 0I
  var e = 0I
  for ei in that, ii in Range(that.size()) if ei>e (
    e:=ei, i:=ii
    )
  that.remove(i)
  e
  )}

MainPart2 = (
  input = Fs.Real.#$of().read(\"input")
  matrix = Matrix(\()(
    for s in input.split(S.nl()) for si in Split(s) \add(I(string=si))
    ))
  seeds = Coords()(for c in matrix.coords() h in matrix (
    min = Match.All()(for ci in Near(c) \add(matrix.val(ci)>h))
    if min \add(c)
    ))
  for c in seeds, i in Range(seeds.size()) (matrix.set(c val=i+100I))
  while NeedsMore(matrix=matrix) ( GrowBasin(matrix=matrix) )
  sizes=I.List()( for i in Range(seeds.size()) 
    \add(Match.Count()(for v in matrix \add(v==i+100I)))
    )
  v1=PopMax(sizes)
  v2=PopMax(sizes)
  v3=PopMax(sizes)
  Debug(v1*v2*v3)//882942
  )

```
Placeholder title
Tags: actionshackathon21
Published: 2021-12-09 09:55:12

[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon 2021, please fill out all sections.)


### My Workflow
[Note]: # (Please make sure the project links to the appropriate GitHub Actions repository, and includes [an open source license](https://choosealicense.com/) and README.)

Javascript Action to tell a notification to the user

### Submission Category: 

[Note]: # (Maintainer Must-Haves, DIY Deployments, Interesting IoT, Phone Friendly, or Wacky Wildcards)
JavaScript Action with tests, linting, workflow, publishing, and versioning

### Yaml File or Link to Code

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)

https://github.com/preeti13456/Js-Action-Maniac

### Additional Resources / Info

[Note:] # (Be sure to link to any open source projects that are using your workflow!)

[Note]: # (Be sure to include the DEV usernames of your collaborators, if any. )

[Reminder]: # (Submissions are due on December 8th, 2021 (11:59 PM PT or 2 AM ET/6 AM UTC on December 9th).
Data Types in JavaScript
Tags: webdev, javascript, beginners, programming
Published: 2021-12-09 09:50:19

Data types describe the characteristics of data stored in a variable. Data types can be divided into two:
- Primitive Data types
- Non-primitive Data types

**1. Primitive Data Types**
Primitive data types are immutable or non-modifiable data types. Once a primitive data type is created we cannot modify it. Primitive data types in JavaScript include:-

**Number**
Number datatype can stores both integers and decimal values. Using Number data type we can do all the arithmetic operations.
`let age = 21;
var quantity= 12;
const gravity = 9.81  // we use const for non-changing values`

**Strings**
Strings data type are used to store textual data. To declare a string, we need a variable name, assignment operator, and a value under a single quote, double quote, or backtick quote.
`let userName = "Khyati";
let city = 'Mumbai';
let language = 'JavaScript';
let space = ' ';           // an empty space string`

**Booleans**
The Boolean data type can store only two values i.e. true and false.This type is commonly used to store yes or no types values.
`var yes = true;
var no= false;`

**Null**
null data type is special type of placeholder in JavaScript. Null value represents the intentional absence of any object value.
`var vaule = null;`

**Undefined**
The undefined data type is special type of placeholder in JavaScript, undefined means “value is not assigned”. If a variable is declared, but not assigned, then its value is undefined.
`var  userName;
console.log(userName);  // shows "undefined"`

**2. Non-primitive Data Types**
Non-primitive data types are modifiable or mutable. We can modify the value of non-primitive data types even after it gets created. Non-primitive data types in JavaScript includes:-

**Arrays**
Arrays data type are used to store multiple values at a time in single variable. An array is a list of values store within a variable, and can access these values by referring to their index number.
`let numbers = [1, 2, 3];
let fruits=['apple', 'banana', 'mango'];`

**Objects**
Objects are the complex data type in JavaScript. Object tries to map real like things in programing. Object stores the data in form of key value pair. Where key is string and value can be anything.
`let car={
name: 'Honda City',
model: 'VMT' ,
color: 'Black',
}`

_So this is it for this article. If you find it informative please leave a like and consider following me. Thanks for reading._
Search Engine Optimization (MetaTags) for Ruby on Rails applications
Tags: ruby, rails, programming
Published: 2021-12-09 09:38:33

The following code set's up the minimal required meta tags for Social Media and Search Engines using the MetaTags gem. ([https://moz.com/blog/meta-data-templates-123]) 

You can easily extend this with other properties. Setting this up with a couple of helper functions makes it easy to extend and maintain.

### Installation

Add the "meta-tags" gem to your Gemfile.

```
gem 'meta-tags'
```

And run `bundle install` command.

### MetaTags Usage

First, add this code to your main layout:

```
<head>
  <%= display_meta_tags site: 'My website' %>
</head>
```

Then, to set the page title, add this to each of your views (see below for other options):

```
<h1><%= title 'My page title' %></h1>
```

When views are rendered, the page title will be included in the right spots:

```
<head>
  <title>My website | My page title</title>
</head>
<body>
  <h1>My page title</h1>
</body>
```

### Setting up default values

Let's add a helper function to setup default values 

```
def default_meta_tags
    {
      site: 'Site Name',
      title: '',
      reverse: true,
      separator: '|',
      description: 'Site Description',
      keywords: 'your, key, words',
      canonical: request.original_url,
      noindex: !Rails.env.production?,
      icon: [
        { href: image_url('logo.png') },
        { href: image_url('logo.png'), rel: 'apple-touch-icon', sizes: '180x180', type: 'image/png' },
      ],
      og: {
        site_name: 'Site Name',
        title: '',
        description: 'Site Description', 
        type: 'website',
        url: request.original_url,
        image: image_url('social.jpg')
      }
    }
end
```

Implement the helper function in your main layout

```
<head>
  <%= display_meta_tags(default_meta_tags %>
</head>
```

### Overriding the default values

The following example overrides the default values for a Post model. (Add this code to the show.erb for example)

```
set_meta_tags title: @post.title, 
  description: @post.intro, 
  twitter: {
   card: "summary",
   site: "@getSmart_NL"
 },
  og: { 
    title: @post.title, 
    description: @post.intro, 
    image: image_url(@post.header.attached? ? url_for(@post.header) : "social.jpg"), 
    type: "article" 
  }
```

*Instructions based on MetaTags readme and tweaked to my personal usage.