teleren/devto huggingface dataset:
Web starter with CI and AWS deployment (React NestJS Docker)
Tags: webdev, react, node, typescript
Published: 2021-03-17 11:28:06

In this article I will share with you a starter that has been pretty useful for some of my web projects :)

# What does it bring ?
1. an isolated docker environment with a local frontend / backend / database launchable in one command
2. a project structure with an authentication
3. a foundation on which features can be added
4. a deployment guide to AWS infrastructure
5. continuous integration with Github Actions
6. last but not least, almost 30 hours work saved :')

# How does it work ? 
The frontend, backend, and database are wrapped in docker to avoid any issue with OS or local configurations. You can fire up everything with one command : `docker-compose up`. 

Frontend and backend are defining an architecture and a naming conventions to ease the comprehension of the starter and the share of feature around it.

# Add features on it ?
Some modules are also available to be added on top of it. You can use them and plug it, they are fully adapted to the starter structure :)

Here is some available modules for this starter :
1. multilingual with Phrase
2. Payment system with Stripe
3. Webcam with React
4. Websocket with AWS API Gateway
5. Location by ip
6. ...

All module are listed and available for download [here](https://fast-modular-project.com/modules). There is much more module to be created, so feel free to create your own and share it with the community :D

# Deployment and continuous integration ?
For the deployment steps, you'll have to create a RDS database, an Elastic Beanstalks, a S3 bucket and a CloudFront instance.

For the continuous integration, you'll have to edit 
[`.github/workflows/main.yml`](https://fast-modular-project.com/starters/starter-reacjs-nestjs-mysql) to set up :
1. branch name on which you want to trigger continuous integration (generally `master` or `main`)
2. name of your `S3 bucket`
3. name of your `Elastic Beanstalk`

Add your AWS credentials as secrets to your GitHub repository (`AWS_ACCESS_KEY_ID`, `AWS_SECRET_ACCESS_KEY`) .

# Conclusion
I hope this starter will help you starting your future project! 
If you have any question I'll be present in the comment section !

**The platform sharing the starter and it's modules :
[Fast Modular Project](https://fast-modular-project.com)**

Do not hesitate to pin and like if you appreciated the article ❤️
Jenkins & GitHub Integration with Selenium Python
Tags: python, testing, tutorial, webdev
Published: 2021-03-17 11:25:42

In this post, we will finalize everything by running our tests in Jenkins. We will cover Jenkins & GitHub Integration with the Selenium Python tests as well as generate a JUnit report at the end to see the results in Jenkins.

### Pre-requisite
Make sure you have Jenkins installed in your local machine so that you can follow along with the rest of the steps. You can watch the Jenkins Installation video below that I made for the [WebdriverIO tutorial series](https://automationbro.com/courses/webdriverio-tutorial-series/) to see how to do that –

{% youtube ID0YM8iVL5M%}

---

### Push changes to GitHub
Once you have Jenkins installed, the next thing you will need to do is push all the code changes to your GitHub repository. But, before that, make sure to create a `requirements.txt` file to store all your packages details –

```pip freeze > requirements.txt```

This will create a new file listing all the packages that you were using in the virtual environment.

Now, you can push all the changes to GitHub.

---

### Jenkins Integration
To make Jenkins work with the Python environment, you will need to install the ShiningPanda plugin. Then, create a new job in Jenkins, and in the build step, select Custom Python Builder and add the following steps –

![code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pj50g6ap9p7s2283xarp.png)

The above script will create a virtual environment and install all the necessary packages for you. Once packages are installed we are triggering our tests using the `pytest` command.

---

#### **Check out the video below to learn more about generating reports using the SeleniumBase framework –**

{% youtube h2Abne2jIjM %}

---

📧 Subscribe to my [mailing list](https://automationbro.com/mailing-list) to get access to more content like this 

👍 Follow [automationbro](https://twitter.com/automationbro) on Twitter for the latest updates

...

I love coffees! And, if this post helped you out and you would like to support my work, you can do that by clicking on the button below and buying me a cup of coffee -

<a href="https://www.buymeacoffee.com/automationbro">![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/i/4aw2ub3f4qkyjk0ivwt4.png)</a>

You can also support me by liking and sharing this content.

Thanks for reading!
Zoom in/out slider with Swiper js
Tags: javascript, css, beginners, codenewbie
Published: 2021-03-17 11:05:42

Today I'm gonna show you how to create simple zoom in out effect with Swiper js.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4jaw7bir2vkxh1znba3s.gif)

### First we need to import necessary files.
Include styles in the head and script in the end of the body tag.
```html
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> 

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
```  
### Add required markup.

```html
<div class="container"> <!-- container to center and set slider width -->
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<div class="swiper-zoom-container"> <!-- All "zoomable" images should be wrapped with the div with swiper-zoom-container class. -->
					<img src="http://pngimg.com/uploads/bottle/bottle_PNG2095.png" />
				</div>
			</div>
			<div class="swiper-slide">
				<div class="swiper-zoom-container">
					<img src="http://pngimg.com/uploads/bottle/bottle_PNG2093.png" />
				</div>
			</div>
			<div class="swiper-slide">
				<div class="swiper-zoom-container">
					<img src="http://pngimg.com/uploads/bottle/bottle_PNG2081.png" />
				</div>
			</div>
		</div>
	</div>
</div>
```  

### Styles
```css
body {
	margin: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.container {
	width: 600px;
	height: 600px;
}

.swiper-container,
.swiper-wrapper,
.swiper-slide {
	width: 100%;
	height: 100%;
}

.swiper-slide img {
	display: block;
	margin: 0 auto;
	width: auto;
	height: 80%;
}
```  

### And now it's time to add JavaScript.
```javascript
// Initialize new Swiper instance
const swiper = new Swiper(".swiper-container", {
        // Setting default settings
	grabCursor: true,
	centeredSlides: true,
	loop: true,
        // Setting minimum and maximum zoom ration
	zoom: {
		maxRatio: 1.2,
		minRation: 1
	},
	
});

// Use built in zoom.in() and zoom.out() function to scale images
// When slide starts to change slideChangeTransitionStart event fires and we use it to scale down the image. 
swiper.on("slideChangeTransitionStart", swiper.zoom.out);
// And when transition has finished scale it up.
swiper.on("slideChangeTransitionEnd", swiper.zoom.in);
```  

That's it. Hope you liked it:)
How do you stay fit these days? 🥊🏋🏽‍♀️⛹🏿‍♂️🥋💯
Tags: watercooler, discuss, productivity
Published: 2021-03-17 10:52:52

---
title: How do you stay fit these days? 🥊🏋🏽‍♀️⛹🏿‍♂️🥋💯
published: true
description: What's your Workout Routine look like
tags: watercooler, discuss, productivity 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m11vzf2n5vshgbofn1x0.jpg
---
For developers, staying fit is as important as learning new skills in the market. Because most of our days we spend sitting at a table, staring at a screen. Though I tried my best to work out regularly sometimes life throws things at you that you can never predict and have to stop. But you can always start again. These days are good, as I'm back to my routine and working out, so I thought why not ask you all, how do you folks stay fit?

I'm personally into weight lifting and do running occasionally.

{% twitter 1205298291572756480 %}

So How do you stay fit I'm curious. Tell me your fitness mantra in the comment section below.

![](https://media.giphy.com/media/3oz8xK9ER0CRMAhozK/giphy.gif)

and and and ...

If you don't, check **[this article](https://dev.to/sarthology/the-definitive-guide-to-protecting-your-eyes-for-developers-22jm)** to keep your eyes healthy, **[this for your brain](https://dev.to/xenoxdev/use-the-full-power-of-your-brain-to-be-a-better-developer--27pe)** or check out this Open Source app we created to Workout while working ***["Brogrammers"](https://sarthology.github.io/brogrammers/)***. Trust me you will 💜 it.

Thanks, see you next week.
How can i deliver the best in PHP to my clients without having full php skills
Tags: php, html, javascript
Published: 2021-03-17 10:37:33

Please fellow developers, How can i deliver the best website in PHP to my clients without having full php skills? 
And is it alright to build up the website, launching it online and understanding how to works before going back to learn the code fully just to save time and deliver my work? 
Will that also make me a lazy developer? 
Please, help me, I need ur advice, please.
Understanding Kubernetes: part 40 – Role-Based Access Control (RBAC)
Tags: kubernetes, devops, docker, beginners
Published: 2021-03-17 10:37:05

---
title: Understanding Kubernetes: part 40 – Role-Based Access Control (RBAC)
published: true
description: Serie of sketchnotes about Kubernetes. Explaining in a visual way Kubernetes principles.
tags: Kubernetes, DevOps, Docker, beginners
series: Understanding Kubernetes in sketchnotes
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9upuu0j46hec7rzu9zys.jpeg
---

Understanding Kubernetes can be difficult or time-consuming. In order to spread knowledges about Cloud technologies I started to create sketchnotes about Kubernetes. I think it could be a good way, more visual, to explain Kubernetes (and others technologies).

We continue the serie of Sketchnotes about Kubernetes, with an explanation about RBAC: Role-Based Access Control.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9upuu0j46hec7rzu9zys.jpeg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54rxf5clovpd5awt77wm.jpeg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s2jxkn9iaa75f57ir631.jpeg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q7azvym3u376jic7z4gl.jpeg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3l70rma62geq0h2xy64x.jpeg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d2t3572r9b72104lil68.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ehrizk93knq7fn92z9gs.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1mpjp7sui9xyp2bpg3zn.jpg)

If you are interested, I published all the sketchnotes on Kubernetes (and new ones!) to make a "book" of 120 pages: ["Understanding Kubernetes in a visual way"](https://gumroad.com/aurelievache#uCxcr).

As usual, if you like theses sketchnotes, you can follow me, and tell me what do you think. I will publish others sketchs shortly :-).
Alfred Snippet workflow
Tags: alfred, productivity, pr, macos
Published: 2021-03-18 08:07:58

---
title: Alfred Snippet workflow
published: true
date: 2021-03-17 10:34:50 UTC
tags: alfred,productivity,pr,macos
canonical_url: https://krzysztofzuraw.com/blog/2021/alfred-snippet-workflow
---

I recently decided to remove a few no so frequently used applications. One of them was [Typinator](https://www.ergonis.com/products/typinator/). It is a text expander - one of many. While I was researching if I can remove it and consolidate my snippets I stumbled upon a feature in one of the most used apps by me - [Alfred](https://www.alfredapp.com/). There are two messages if you are looking into Alfred text expanding capabilities - you can do it - yay 🎉 and it wont be so simple.

There are two types of text expanding in Alfred world:

1. Simple - like expanding telephone number or date with cursor
2. Complex - with multiple variables & selecting from a list of possible options.

I want to cover here the second one. To have complex text expanding you need to create snippet workflow. As a demo I've created [conventional comments](https://conventionalcomments.org/) snippet workflow that ask me a couple of questions and pastes nicely formatted string into GitHub comment box. Workflow can be found on [GitHub](https://github.com/krzysztofzuraw/alfred-conventional-comments).

How it is working? At the beginning it ask me about `label` => which I can select from list; then I type `title` of my comment. Right after that workflow is pasting string:

```
**label** : title
{cursor_postion}

```

into currently focused input field.

You can see workflow in action below:

<video src="https://krzysztofzuraw.com/559ff382fd7f37b16cbb92e94584b105/video.webm" width="650" height="auto" preload="auto" muted="true" title="Workflow in action" autoplay playsinline controls loop></video>

## Summary

If you want to have text expander like capabilities in Alfred - it is doable via snippet workflow. You can start by looking into my [conventional comments](https://github.com/krzysztofzuraw/alfred-conventional-comments) one.
Why Node.js is Perfect for Enterprise App Development platform?
Tags: node, javascript, devops
Published: 2021-03-17 10:30:18

Amazon, eBay, Uber, and Netflix- all these top brands rely upon Node.js for having user-friendly applications with rich features. As the largest open-source [cross-platform development](https://www.suriainternational.com/cross-platform-app-development-company/) framework, Node.js witnesses over 15 million downloads every month worldwide. It streamlines the mobile app development process effectively, and therefore, developers consider it as a preferred platform for developing enterprise-grade apps.

Node.js- Important Framework for Web and Mobile App Development

LinkedIn was the first company that has used this framework for building the backend of its mobile app. As an open-source, cross-platform, JavaScript-based runtime environment for developing customized web and mobile apps, Node.js has replaced the traditional request-response-based standard. This framework enables mobile app developers with sufficient knowledge of JavaScript to make custom apps that can run across both web and mobile domains.

Node.js has gained [around 50% popularity](https://insights.stackoverflow.com/survey/2019) in the category of “Frameworks, Libraries, and Tools” in the recent Stack Overflow Developer Survey. This robust framework is accountable for almost 58% of the world’s total development time. As compared to other Java-based applications, Node. js-based apps can be built twice as fast thanks to 33% fewer lines of code. The framework meets the complex requirements of modern enterprises while developing web or mobile apps.

Let’s dig deep into the top reasons why Node.js is an ideal choice for enterprise app development.

Why Node.js is the Right Platform for Developing Enterprise Apps? 

High Scalability

Node.js is a highly scalable platform and enables developers to use the same language in front-end and back-end development. Features like the cluster module can enhance the scalability of the framework, and a PM2 process manager tool can make the development process quick and easy for developers.

Read More: https://www.suriainternational.com/why-node-js-is-perfect-for-enterprise-app-development-platform/
Data & Databases
Tags: blockchain, network, database, data
Published: 2021-03-18 10:21:02

---
title: Data & Databases
published: true
date: 2021-03-17 10:11:31 UTC
tags: blockchain,network,database,data
canonical_url: https://medium.com/coinmonks/blockchain-for-data-databases-9d4c7281b977
---

[![](https://cdn-images-1.medium.com/max/1200/0*yR0n4YM9TFGtEB0o.jpg)](https://medium.com/coinmonks/blockchain-for-data-databases-9d4c7281b977?source=rss----721b17443fd5---4)

To put blockchain into context it’s time to go all the way back to the advent of computing.

[Continue reading on Coinmonks »](https://medium.com/coinmonks/blockchain-for-data-databases-9d4c7281b977?source=rss----721b17443fd5---4)
Running http requests in release build android react native
Tags: android, reactnative, javascript, mobile
Published: 2021-03-17 10:11:02

For android version 9 and above, http requests wont be successful for your react native apps and this may lead to app crashes simply because RN's networking native module blocks insecure connections by default.
The best solution is to change your api calls to https, however if its a must for you to use http then head over to your main AndroidManifest.xml file and add this line
**xmlns:tools="http://schemas.android.com/tools"** to the **<manifest** tag so it looks like so,
**<manifest** **xmlns:tools="http://schemas.android.com/tools">**
PS. do not delete any other code inside the **<manifest**
we aren't done.. head down to the **<application** tag and add **android:usesCleartextTraffic="true" tools:targetApi="28"** so it looks like so **<application android:usesCleartextTraffic="true" tools:targetApi="28"** **>**
There you have it. Enjoy
Node ve Express ile TypeScript Kurulumu
Tags: typescript, javascript, node, webdev
Published: 2021-03-17 10:04:23

---
canonical_url: https://artuncolak.com/blog/node-ve-express-ile-typescript-kurulumu
---

Öncelikle boş bir klasörde `npm init` komutuyla yeni bir NodeJS projesi oluşturduktan sonra başlayabiliriz.

### Dependencyleri Yükleyelim

```bash
npm install express
npm install --save-dev typescript ts-node nodemon @types/node @types/express
```

### TypeScript Konfigurasyonu

TypeScript konfigurasyonlarımızın tutulacağı tsconfig.json dosyamızı oluşturalım

**tsconfig.json**

```json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}
```

tsconfig.json dosyamızda görüldüğü gibi tüm TypeScript kodlarımızı src klasöründe yazacağız

### Scriptlerin yazılması

**package.json**

```json
{
  //...package.json
  "scripts": {
    "start": "node dist/index.js",
    "dev": "nodemon src/index.ts",
    "build": "tsc"
  }
}
```

### index.ts dosyasının yazılması ve projeyi ayağa kaldırmak

Artık src klasörümüzde index.ts dosyamızı oluşturarak `npm run dev` komutu ile express projemizi çalıştırabiliriz.

**src/index.ts**

```ts
import express, { Request, Response } from "express";

const app = express();

app.get("/", (req: Request, res: Response) => {
  res.send("Hello World");
});

app.listen(5000, () => console.log("Server listening on http://localhost:5000"));
```

**Output**

```bash
$ npm run dev

> nodemon src/index.ts

[nodemon] 2.0.7
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: ts,json
[nodemon] starting `ts-node src/index.ts`
Server listening on http://localhost:5000
```

`npm run build` komutu ile projeyi buildleyerek `npm start` ile projenin JavaScripte compile edilmiş halini productionda ayağa kaldırabilirsiniz.
SDC Day 2
Published: 2021-03-17 09:22:34

Today I built out schemas for both PostgreSQL and MongoDB. Between the two, I decided to go with PostgreSQL for my first implementation because the data seems to be more relational. I also think this is a great opportunity to learn this new technology. We were then given CSV files containing over one million entries each. It froze my laptop just trying to open it! A big issue I had was trying to figure out how to use the Extract, Transform, and Load method to get the entries into my database. The data is already extracted, so now all I needed to do was figure out how to transform and load it. What I ended up doing was restructure my schema to have a table fit the data of each CSV file so that the data can be copied easily. Then, I utilized a copy feature of PostgreSQL to quickly import the entire file into my database. Easy peasy!
SDC Day 1
Published: 2021-03-17 09:15:56

Today we started our System Design Capstone project! Everyone was broken into teams of 2-3 members - my teammate is Chandler. Our goal is to replace the existing API from FEC with a back end system that can support the full data set and scale to meet the demands of production traffic. To start we had to choose between MySQL, MariaDB, and PostgreSQL for RDBMS and MongoDB for NoSQL. From my research I learned that MariaDB is an open-sourced version of MySQL that originally started as a fork. So when deciding between the two you pretty much decide between a larger corporation (Oracle Corp) and an open solution (MariaDB). Then comes in PostgreSQL, an object-relational database management system.  What's good about it is that has most of the feature of MySQL, except with the bonus of being able to offer materialized views and store data in XML/arrays. In the end I chose to go with PostgreSQL because it is a technology I haven't worked with yet. Because it is so versatile, I'll need to do a lot of research to figure out cool ways to utilize the features!
JS && Vue js  Book Recommendation
Tags: javascript, vue
Published: 2021-03-17 09:04:43

Hello, I look a book  was written in 2020-2021 for learning javascript with all new things like : 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
https://lodash.com/docs/4.17.15#cloneDeep

Also looking for a good recommendation of books that use backend (Laravel) API and Vue Js as consumers of API.
5 Best FREE Resources to learn JavaScript🔰
Tags: javascript, codenewbie, programming, coding
Published: 2021-03-17 08:48:16

1. **Traversy Media** is probably one of my favorite Youtube channels to learn anything related to Web Development. In this video, Brad teaches the fundamentals of JavaScript including more modern syntax like classes, arrow functions, higher-order functions, etc. 
**P.S. This tutorial only teaches you the fundamentals!**
[Tutorial Link](https://youtu.be/hdI2bqOjy3c)
![Brad Traversy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lrnqnlgdwn2npyx1jwbh.jpg)


2. **Learn JavaScript** is a wonderful website by **Joubran Jad** which teaches modern JavaScript from scratch and practice in an intuitive environment. The lessons & challenges will guide you through the topics step by step and its project-based approach will help you reinforce the concepts. Also, the mobile flashcards are awesome!🔥
[Website Link](https://learnjavascript.online/)
![Joubran's Website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hq036u0oyakxkabv7bpf.png)


3. **TheOdinProject** is another amazing website that teaches you to create interactive and dynamic websites. There are a lot of Projects which helps you get better at manipulating DOM. I love this website because it helps you get better at reading documentation.
[Website Link](https://www.theodinproject.com/courses/javascript)
![OdinProject](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/60vn00i5bc19q72ewbd9.png)


4. **Scrimba** has 9 courses related to JavaScript, it includes Modern JavaScript, Regular expressions, and also TypeScript you can explore and choose what you want to learn!
[Website Link](https://scrimba.com/topic/javascript)
![Scrimba](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o12j56bqkmg5mwh8l5qe.png)


5. And last but not least **WesBos's JavaScript30** is an amazing course that consists of 30 Vanilla JavaScript Projects which helps you get comfortable with both JavaScript fundamentals and working in the DOM without a library. I highly recommend this course after learning the basics of Vanilla JavaScript.
[Website Link](https://javascript30.com/)
![WesBos](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j9nzvuciuav59507msqb.png)


**Thank you if you read the blog so far, hope I helped you in some way or other. You can follow me on Twitter [Deveshb15](twitter.com/Deveshb15) where I tweet regularly regarding web development.**