teleren/devto huggingface dataset:
Protecting Employees Using Secure AWS Solutions
Tags: aws, containers, security, devops
Published: 2021-12-26 17:22:30

**What is TMA?**

Since 2014, Deutsche Telekom AG (DTAG) has run an employee threat management system internally. Dealing with all kinds of workplace issues and threats, the ultimate aim of the system is to ensure that each employee is treated with dignity and respect and to protect the company and its employees from harm.

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

**Since data privacy and security are paramount for this project, these aspects are taken into serious consideration when architecting and implementing the solution in AWS:**


_**The points below reflect the services implemented based on the security recommendations and improvements suggested by the AWS Well-Architected Review:**_

Ruby on Rails as a web-application framework — introduced containerisation using Docker process
Deployments via CodePipeline managed by Elastic Container Service
RDS PostgreSQL for data tier — multi-AZ for high availability and failover support
GitLab (Workbench)/CodePipeline for versioning and CI/CD
SSM Parameter Store for passwords and parameters
Elastic Load Balancing — Application Load Balancer for availability
AWS Key Management Service — encryption for data at rest
AWS Certificate Manager for certificate management
AWS CloudFormation — Infrastructure as Code
Amazon CloudWatch — Monitoring

**AWS Architecture — Security design implemented by T-Systems:**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2eh6t154teld3uzna29p.jpg)

**AWS Architecture — CI/CD Pipeline implemented by T-Systems:**

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

**Conclusion:**
Today, threat management is an integral part of Telekom’s personnel security in Germany. In fact, DTAG is the first company in Europe to employ a professional and firmly established Threat Management Assistant system.
Migrating the TMA system to AWS fulfilled all the business’s requirements, including flexibility, security, increased agility, scalability and improved business continuity. It also accelerated development of new features. Zero downtime deployments and AWS automated solutions contributed to a TMA cloud infrastructure with resulting benefits for operations.

**Reference:** 
https://www.t-systems.com/de/en/newsroom/expert-blogs/protecting-employees-using-secure-aws-solutions-387756
Experimenting with Three.js: Devlog #2
Published: 2021-12-26 16:55:38

## Before you read it

This is not a tutorial and I am not a Three.js expert. I am going to document my learning journey and share it with you. If you find it useful then I would appreciate you leaving a comment or liking this post. Thanks and let's get started 😎

-------

## Controls and wall collision problem

[In the previous devlog](https://dev.to/andrewchmr/experimenting-with-threejs-devlog-1-41k3), I added [PointerLockControls](https://threejs.org/docs/#examples/en/controls/PointerLockControls) to my scene and assign movement on keypress (W, A, S, D keys). And as mentioned there is a problem that camera can pass throw walls.

I didn't work with game dev or 3D before, so it was difficult for me to think about a solution for this. 

My initial thought was to create enough `if` statements that would prevent the camera from passing throw walls (it was a super dummy idea 😅).

After struggling with it for some time, I discovered that there is a much easier and better solution for this.

## Introducing physics

I found this wonderful answer to my problem on Stackoverflow:

![Stackoverflow answer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qw34rig8pn6z3dwfqii4.png) 

It sounds way better than adding an infinite number of `if` statements 🤔

In easier words, it means that the viewer is a ball and if it will collide with the wall then physics will do its job 😱

As Einstein once said:
![Einstein quote](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1n0kdb5b4g93cap3ix77.png) 

(or something like that).

## Using use-cannon 

There is a great library for handling physics [use-cannon](https://github.com/pmndrs/use-cannon).

I defined walls using `useBox` hook and sphere using `useSphere`. Here is the result:

![useSphere and useBox example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1rfvbv0q5juf49kcnksb.gif)

For debug purposes, I used [Debug](https://github.com/pmndrs/use-cannon#debug) component

## Applying camera to the sphere

The last and most challenging part is to add the camera to the sphere.

I was lucky to find this tutorial: https://www.youtube.com/watch?v=ZnXKmODEFHA

I won't write in detail how it is done, because you can check it on your now 😉 But basically it just subscribing to sphere/ball position and setting the camera to that place.

![Wall collision use-cannon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2f8fp9r1uhe4jsez52ws.png) 

And it is done 🎉

Here is how it looks all together:

![Wall collision threejs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xi62ui4kr00yu6g55v87.gif)

It looks like something basic on this video, but it felt soooo good to hit that wall and be stoped by the laws of physics 😍

---- 

You might think that we are finished with controls and can move on to more advanced stuff. Not really...

[PointerLockControls](https://threejs.org/docs/#examples/en/controls/PointerLockControls) won't work on mobile and we need to find another way of doing it. But I would talk about it in the next devlog 😉

Thanks for reading! 🙌
How to quickly optimize images in a Github repository
Tags: githubmarketplace, github
Published: 2021-12-26 16:59:33

---
title: How to quickly optimize images in a Github repository
published: true
date: 2021-12-26 16:54:56 UTC
tags: githubmarketplace,github
canonical_url: https://relatablecode.com/how-to-quickly-optimize-images-in-a-github-repository/
---

![Splash](https://cdn-images-1.medium.com/max/1024/1*6-uJXlkiT2gCE7ZYpwbNcQ.jpeg)
_Photo by Erik Mclean on Unsplash_

It can be pretty common to just have some images bundled up in the repository. Taking into consideration the size of said images can be incredibly important to lower the size of the entire page/web app.

There are plenty of services online that can be used to optimize images but Github directly has access to a method of optimization!

In this short tutorial, I’ll quickly go over how to set it up in your repo, this entire process should take under 5 minutes!

### Marketplace

![ImgBot](https://cdn-images-1.medium.com/max/438/0*Fhc4jB6NQJQLeoGN)

Within the Github marketplace, which can be accessed from the top bar of Github, you can access a variety of different tools for your repository! One of which is the [ImgBot](https://github.com/marketplace/imgbot).

As per the description: “Imgbot is a friendly robot that optimizes your images and saves you time. Optimized images mean smaller file sizes without sacrificing quality.”

Great! Once you’re on the page you can set up the plan. As a disclaimer, ImgBot does have paid plans for private repos but for public repos it is completely free!

After selecting the plan you can complete the installation, as an aside you can also select which repositories you specifically want to install it to.

### Pull request

![ImgBot Detail](https://cdn-images-1.medium.com/max/636/0*zOPh45ED5u2l32--)

After installing the ImgBot it will automatically create a pull request after analyzing all the images.

It’ll even tell you exactly how much the images were reduced by:

And within detail it’ll give a breakdown of every single image that was altered:

![Picture details](https://cdn-images-1.medium.com/max/544/0*3aXOgrPM7a_d74FJ)

The way the ImgBot optimizes every file can be different but to give an example here are two files:

For a PNG file it reduces the size:

![PNG files](https://cdn-images-1.medium.com/max/381/0*hVx8Cc_TqYifaIqS)

Meanwhile, for an SVG it takes away all the empty space and essentially minifies it:

![SVG file](https://cdn-images-1.medium.com/max/901/0*GiZFbjUmbWQXmi0Y)

Afterward, it’s just reviewing all the changes and accepting the PR merge into the main branch, as easy as that!

Let me know how it goes in the comments below or if you have any other optimizations for images.

More content at [RelatableCode](https://relatablecode.com)

_Originally published at_ [_https://relatablecode.com_](https://relatablecode.com/how-to-quickly-optimize-images-in-a-github-repository/) _on December 26, 2021._
Finding hidden (dotfiles) using Telescope in neovim
Tags: vim, todayilearned
Published: 2021-12-26 16:51:41

---
title: Finding hidden (dotfiles) using Telescope in neovim
tags:
  - vim
  - til
canonical_url: https://waylonwalker.com/til/nvim-telescope-hidden-files/
series: til
published: true
---

Finding hidden files using Telescope as you fuzzy file finder is not too hard, its a single flag passed in.  Then it will use whichever file finder it can find ['fd', 'fdfind', 'rg --files', 'find', or 'where'] in that order.  These tools each have their own way of handling hidden files, but telescope takes care of that so all you need to do is pass in `hidden=true`.

I have this keymap set to help me list out all files including hidden files using the pnumonic go edit hidden.  I use ge for quite a few different things to take me directly to a specific file or picker.

``` python
nnoremap geh <cmd>Telescope find_files hidden=true<cr>
```
see the [implementation](https://github.com/nvim-telescope/telescope.nvim/blob/82e3cc322ad87b262aef092cb7475e769740e83a/lua/telescope/builtin/files.lua#L167-L184) telescope finds your files.

---

This is a part of my til project, I am trying to post daily tils. Here's the full feed https://waylonwalker.com/til/.
Git/GitHub
Tags: github, webdev, beginners, programming
Published: 2021-12-26 16:47:37

Happy Holidays all! 

I’ve been reflecting on where I am in my “learning to code” journey and I’ve come to realise I’ve learn A LOT of little bits about Frontend Development. 

I understand the basics of HTML & CSS and I’m excited to move onto learning JavaScript but there’s an element of developing I keep seeing come up time and time again and that is Git/Github. 

People talk about collaborating on projects and all stuff I don’t understand. I have a GitHub profile and have used it a bit for The Odin Project and whilst I understand the necessity of version control, I still don’t really understand what I’m doing. 

It seems like collaborating on projects using Github is quite common but also one of those things that you don’t really understand until you do it. 

Can anyone point me in the right direction of how to make a start?
Creating new server in node.js
Tags: javascript, npm, node
Published: 2021-12-26 16:44:11

Firstly install express

```
const express = require("express")
const app = express()
```

Then add to server.js or other js files to listen port

```
app.listen(4000, ()=>{
console.log("server is running on port: 4000")
})
```

Or if you want to this way. This way is also good. It's best practices

```
const PORT = process.env.PORT || 4000

app.listen(PORT, ()=>{
console.log(PORT)
})
```
Automate Notion Kanban Report to MongoDB
Tags: atlashackathon, notion, azure, serverless
Published: 2021-12-26 16:13:38

### Overview of My Submission

I use Notion Kanban extensively to track my daily task and at the end of every month, I'll create a report to get a summary of my work for a whole month. This way I can manage my work-life balance more efficiently.

At first it was fun to setup the kanban board and create my first report, but doing it repeatedly for every month is kinda cumbersome. So I wanted to automate this process and create a simple dashboard that I can visit anytime.

MongoDB Hackathon came in just the right time for me to explore serverless technology to automate this reporting task and store the data into a database.

This project aims to automate the process of creating reports from Notion kanban board and then store it into MongoDB Serverless Instance.

### Submission Category

Automation Innovation

### Link to Code

{% github https://github.com/fahminlb33/FahmiNotionAutomation %}

### Additional Resources / Info

You can access the API and the dashboard from the link in my repo.

![](https://github.com/fahminlb33/FahmiNotionAutomation/raw/master/dashboard.png)

#### Tech

- [MongoDB Atlas (serverless)](https://docs.atlas.mongodb.com/tutorial/create-new-serverless-instance/)
- [Azure Functions](https://azure.microsoft.com/en-us/services/functions/)
- [Notion](https://www.notion.so/)
- [Bulma](https://bulma.io/)
- [Plotly](https://plotly.com/)
- [AutoMapper](https://automapper.org/)
- [Newtonsoft.Json](https://www.newtonsoft.com/json)
- [dotenv.net](https://github.com/bolorundurowb/dotenv.net)
Installing Neovim on Chromebook
Tags: chromebook, neovim, firstpost
Published: 2021-12-26 16:11:58

---
title: Installing Neovim on Chromebook
published: true
description: 
tags: chromebook, neovim, firstpost
//cover_image: https://direct_url_to_image.jpg
---

Hello!

This is my first blog post! I didn't know which subject to talk about and wanted to write small for a start.

I wanted to give a try of [neovim](https://neovim.io/) on my Chromebook, but there was no binary compiled for it, and binaries from Debian are too old.

If you don't want to read the [install from source](https://github.com/neovim/neovim/wiki/Installing-Neovim#install-from-source) documentation, follow along!

I'm going to assume that you already have the Linux VM setup.


## Install prerequisites

Open the terminal and run the following command to install the build tools required.

`sudo apt-get install ninja-build gettext libtool libtool-bin autoconf automake cmake g++ pkg-config unzip curl doxygen`

## Install Neovim

Go to the [neovim releases page](https://github.com/neovim/neovim/releases) to download the latest version. At the time of writing, the latest stable is v0.6.0, so download, extract it and go in the folder like following:

```sh
wget https://github.com/neovim/neovim/archive/refs/tags/v0.6.0.tar.gz
tar xvf v0.6.0.tar.gz
cd neovim-0.6.0/
```

I don't like to install packages system-wide so I compiled with a destination to `~/tools/neovim`.

```sh
make CMAKE_EXTRA_FLAGS="-DCMAKE_INSTALL_PREFIX=$HOME/tools/neovim"
make install
```

The only thing left to do is to add the `bin` folder to your path. Add the following at the end of your `~/.bashrc`:

```sh
export PATH="$HOME/tools/neovim/bin:$PATH"
```


--
Happy Neovim-ing! :)

Next, I'm interested in configuring neovim with vue3!
React Hooks
Published: 2021-12-26 16:06:49

Hooks are the new feature  which is introduced in the React 16.8 version. It allows you to use state and other React features without writing a class. Hooks are the functions which "hook into" React state and lifecycle features from function components. It does not work inside classes.
Hooks are backward-compatible, which means it does not contain any breaking changes. Also, it does not replace your knowledge of React concepts.
When to use a Hooks
If we write a function component, and then we want to add some state to it, previously we do this by converting it to a class. But, now we can do it by using a Hook inside the existing function component.
Rules of Hooks
1. Only call Hooks at the top level
Do not call Hooks inside loops, conditions, or nested functions. Hooks should always be used at the top level of the React functions. This rule ensures that Hooks are called in the same order each time a component renders.
2. Only call Hooks from React functions
We cannot call Hooks from regular JavaScript functions. Instead, we can call Hooks from React function components. Hooks can also be called from custom Hooks.
Dart's Network Byte Order 
Tags: dart, dartlang
Published: 2021-12-26 13:34:31

This section explains network byte orders.
There is no special problem when storing one byte of data in memory.

```dart
import 'dart:typed_data' show Uint8List;

String toHex(Uint8List buffer) {
  const List<String> vv = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
    var b = StringBuffer();
    for (var i = 0; i < buffer.length; i++) {
      var v = buffer[i];
      var v1 = (v >> 4) & 0xF;
      var v2 = v & 0xF;
      b.write('${vv[v1]}${vv[v2]}');
    }
    return b.toString();
}

main() async {
  var input = <int>[0x00, 0x01,0x02,0x03,0x04,0x05,0x06,0x07,0x08,0x09,0x0a,0x0b,0x0c,0x0d,0x0e,0x0f];  
  var buffer = Uint8List(16);
  for(var i=0;i<input.length;i++){
    buffer[i] = input[i] & 0xFF;
  }
  print(toHex(buffer));
}
```

When this is executed, it will output data such as `000102030405060708090a0b0c0d0e0f`.

However, the problem is how to record 2 bytes of short data, 4 bytes of int data
etc. should be recorded in memory...

There are several recording methods, but two are the most common.

- Big Endian
When 0x1234 is recorded in memory, it is recorded as `[0x12,0x34]`.

- Little endian
When 0x1234 is recorded in memory, it is recorded as `[0x34,0x12]`.


## Try to store it in little-endian format

```dart
main() async {
  var input = 0x1234;
  var buffer = Uint8List(2);

  //print(((input>>8) & 0xFF).toRadixString(16)); --> 12
  //print((input & 0xFF).toRadixString(16)); --> 34
  buffer[0] = input & 0xFF;
  buffer[1] = (input>>8) & 0xFF;
  print(toHex(buffer));
}
```

If it is little-endian, it should be displayed in the order 0x34 0x12.
If it is big-endian, it should display 0x12 0x32 in that order.

When we run this, it returns 3412, so we have successfully stored the data as little-endian.

## Try to store it in big-endian format

```dart

main() async {
  var input = 0x1234;
  var buffer = Uint8List(2);

  //print(((input>>8) & 0xFF).toRadixString(16)); --> 12
  // print((input & 0xFF).toRadixString(16)); --> 34
  buffer[0] = (input>>8) & 0xFF;
  buffer[1] = input & 0xFF;
  print(toHex(buffer));
}

```

This will return 1234, so we have successfully stored the data in big-endian format.

## Communication Protocols are Big Endian

In this article, we will implement DNS which is described in RFCs. In these protocols, data is exchanged in big-endian unless otherwise stated.
flex flexBox | flex grow | flex shrink | flex shrink 0 | flex grow 0
Tags: webdev, tailwindcss, programming, tutorial
Published: 2021-12-26 16:02:59

flex flexBox | flex grow | flex shrink | flex shrink 0 | flex grow 0
https://youtu.be/S-8Mkb1-4Oc
If you liked our content help us by subscribing on the channel and leaving a nice comment
Takeaways from the "My Journey into Tech" meetup
Tags: devjournal, codenewbie, beginners
Published: 2021-12-26 16:01:07

The following is a few takeaways I took from a panel of speakers at a [Code Connector](https://codeconnector.io/) tech meetup. You can watch the entire video [here](https://youtu.be/BqtEf62vprk).

## It's important to be willing to take calculated risks to get where you want to be.
You have to be willing to give up something to create an opportunity: time, rest, convenience, and etc. One of the speakers reflected how as an immigrant to the U.S. with very little saving, she quit her job to pursue two tech boot-camps back to back. The first boot camp was low cost and the following one was free. Her testimony reminded me that if you have the will there is a way.

## Be willing to say yes even if something is uncomfortable.
I can personally attest as a stutter and person with social anxiety that the road into tech is full with uncomfortable spaces. Saying "Yes" led me to working as a teacher assistant at a boot-camp, leading tech meetups, getting paid for a freelance project, working for free for a startup, and giving technical talks. All of these uncomfortable scary tech-adjusted opportunities lead to my first job in tech.

## Don't be scared to ask for what you want.
One of the speakers felt like she didn't ace an interview for a developer role and pivoted to ask if they had an internship. The answer was yes! She now has her first tech experience by simply being courageous.

## Don't underestimate the power of networking.
Job hunting can seem like a black hole sucking up every job application you submit. Networking can and should be an essential part of connecting your face, name, or reputation to a job application. Use LinkedIn, Twitter, and tech meetups to connect with others in the tech industry.

## Have one intentional conversation a day with someone in your network or complete stranger.
You have to have the attitude that every tech-related person you meet is an opportunity to impress and get a referral down the line. In the job search, the key is making relationships. Its depth, not width.

I would love to read y'all thoughts on these topics?
What is JSX
Published: 2021-12-26 15:55:49

Jsx means Javascript xml.JSX makes it easier to write and add HTML in React.JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement()  and  appendChild() methods.JSX converts HTML tags into react elements.

Example with Jsx: 
const myelement = <h1>'hello world!'</h1>;
ReactDOM.render(myelement, document.getElementById('root'));
Example without Jsx:
const myelement = React.createElement('h1', {}, 'hello world!');

ReactDOM.render(myelement, document.getElementById('root'));
My first hackathon went horribly wrong!
Published: 2021-12-26 12:58:51

My first hackathon went horribly wrong! Few tips to avoid this.

So, I attended a hackathon, (I am not gonna take the name of the hackathon)and it went horribly wrong, and here's how:

So I found 3 people to be my team, one was a illustrator with great project ideas, one was a beginner frontend developer with HTML CSS and JS skills and the other one knew HTML & CSS a bit but was more comfortable in python and Django. So I somehow pushed/forced then (by continuous messages) to join a google meets call,  we discussed what to do, and divided the work, now here is when the problem begins…

The next day when I asked everyone, to post there progress, as there were only 5 hours till the deadline, and the person, that agreed to do the main component of the project, just turned in copied code! Everything was copied from GitHub and then went offline! The other person, mysteriously disappeared! Both of them did not come online, even after continuous messaging! Only me and the illustrator were online, so there were now only 2 hours left, I decided that I will at least submit a project!

So after around 30 mins of brainstorming, I decided to build a discord bot, but I had no idea how to build one! So I started watching a freecodecamp tutorial, that was 1 hour long, but then I realised well, I did not have any time for that! So I jumped straight into docs and made it work.

But there was another problem, I did not know how to request data from APIs, and work with that data, this was crucial; as basically what the discord bot did, is retrieve data from several APIs, and send messages.

So I learnt the requests library, and the json library. 

“Growth happens outside of the comfort zone”

I found that this thing really true, Because I learnt discord.py, requests, and the Json library under these conditions, and implemented them directly in my project, I don’t think I will ever forget these libraries and concepts.

But don’t worry this horrible experience at this hackathon, did not stop me from registering for another hackathon!

If you are organise events/hackathons then please read this:
This thing really annoyed me in the hackathon that whenever I would ask any query they would be online on discord, but they would neither reply, nor type anything!  And they promised everyone a sticker, but now they are saying that international shipping will be not available!

-	Don’t make false promises
-	Reply to queries ASAP

If you want to be a good hackathon participant :
-	Take the work if you know how to do it, and will be able to do it in time
-	Don’t turn in copied code
-	Try to be online most of the time in the hackathon.


What I learnt:

-	Json standard library
-	Requests standard library
-	Discord.py