teleren/devto huggingface dataset:
Docker environment variables naming
Tags: docker, devops, beginners
Published: 2021-08-02 09:16:12

When you start to build an application you will definitively want to use environment variables for sensitive values like passwords, or configurations.

These values should never be hardcoded since it's a security issue. It will also help you make your application easier to maintain.

Typically you will also have one configuration file per environment: 
Development, Preproduction, and Production.

Take a look at the following docker-compose for our next unicorn app:

```
version: "3.9"
services:
  app_backend:
    image: killerapp:latest
    ports:
      - "8080:8000"
    environment:
      - DB_HOST=${DB_HOST}
      - DB_USER=${DB_USER}
      - DB_PASSWORD=${DB_PASSWORD}
      - DB_SCHEMA=${DB_SCHEMA}
```

This looks about right, and you're probably familiar with this kind of configuration. But this presents a problem that could be potentially dangerous.

There's a chance that someone accidentally set the env vars for one environment into another one.

Imagine what can happen if you end up using the production values in your preproduction or development environment.

One best practice is to have different variables for your environments.

> There are other ways to prevent these issues like having your environments in different servers, VPC's, accounts, etc.

In our example, the docker-compose.yml will look like this:

```
version: "3.9"
services:
  app_backend:
    image: killerapp:latest
    ports:
      - "8080:8000"
    environment:
      - DEV_DB_HOST=${DEV_DB_HOST}
      - DEV_DB_USER=${DEV_DB_USER}
      - DEV_DB_PASSWORD=${DEV_DB_PASSWORD}
      - DEV_DB_SCHEMA=${DEV_DB_SCHEMA}
      - PRE_DB_HOST=${PRE_DB_HOST}
      - PRE_DB_USER=${PRE_DB_USER}
      - PRE_DB_PASSWORD=${PRE_DB_PASSWORD}
      - PRE_DB_SCHEMA=${PRE_DB_SCHEMA}
      - PRO_DB_HOST=${PRO_DB_HOST}
      - PRO_DB_USER=${PRO_DB_USER}
      - PRO_DB_PASSWORD=${PRO_DB_PASSWORD}
      - PRO_DB_SCHEMA=${PRO_DB_SCHEMA}
```
This way is much harder for a developer/DevOps to accidentally use the production credentials in another environment.

The takeaway is that if you should have an environment-sensitive variable naming approach to make them crystal clear. This way, anyone that it's not familiar with the app config will be less prone to make mistakes.
What is the size impact of importing one method from date-fns
Tags: javascript
Published: 2021-08-02 07:05:51

In this article, I'll take a quick look at the build size of a simple code that imports a method from date-fns. I check results from both, webpack & [esbuild](https://how-to.dev/series/esbuild).

# The code
The code I use in this test is as follows:

```js
import { sub } from "date-fns";

const today = new Date();

console.log("Yesterday was", sub(today, { days: 1 }));
```

In this way, I can:

1. Test the impact of an import of the code needed to do one simple operation
2. Check the output code quickly in the console log - so I don't compare working builds with broken ones.

## Build scripts
The builds are run with:
```sh
webpack --mode=production
```
Standard webpack build, with production mode, set explicitly.

```sh
esbuild src/index.js --outfile=dist/main.js --bundle --minify
```

Fairly simple esbuild command, with `--minify` on & required `--bundle` flag.

# The benchmark
Both wepback & esbuild performed pretty much the same.

## Webpack
```sh
$ npm run webpack       

> date-fns-bundle-size@1.0.0 webpack
> webpack --mode=production

asset main.js 1.59 KiB [compared for emit] [minimized] (name: main)
orphan modules 546 KiB [orphan] 264 modules
./src/index.js + 8 modules 11.6 KiB [built] [code generated]
webpack 5.47.1 compiled successfully in 858 ms

$ stat dist/main.js 
  File: dist/main.js
  Size: 1633      ...
```

The output size is about **1.6 KiB**.

## esbuild

```sh
$ npm run esbuild  

> date-fns-bundle-size@1.0.0 esbuild
> esbuild src/index.js --outfile=dist/main.js --bundle --minify


  dist/main.js  1.6kb

⚡ Done in 40ms

# stat dist/main.js
  File: dist/main.js
  Size: 1624      ...
```

# Links

The test repo I've been using in this article is [here](https://github.com/marcin-wosinek/date-fns-bundle-size).

# Summary
In this article, we have seen the isolated impact of imports of one method from date-fns. In the following articles in this series, I'll look at other popular date manipulation libraries.
DevOps Study Roadmap
Tags: devops, cloud, study
Published: 2021-08-02 09:05:16

#### 1. Learning a programming language
You need to get a good grasp of a programming language. It doesn't matter which one, but it's needed for writing automation code. Automation is a key part of DevOps. You can learn Python, Java, Ruby, Golang etc.

#### 2. Understand different OS concepts
As suggested in the roadmap, you need to learn about process management, threads & concurrency, sockets, I/O management, virtualization, memory system, etc.

#### 3. Learn to Live in terminal
Terminal commands are essential for a DevOps engineer, especially if you are working on linux. You need to learn commands for process monitoring, text manipulation, system performance, etc. When you practice these commands, you can become a master at shell scripting.

#### 4. Network, Security & Protocols
You need to be familiar with various types of protocols which play a major role in communicating with different devices across the network like TCP/IP, HTTP, HTTPS, SMTP, FTP etc.

#### 5. What is and how to setup
In general, a DevOps engineer should know how to set up a web server like IIS, Nginx, Apache and Tomcat. They should also know about Caching Server, Load balancer, Reverse Proxy, and Firewall, etc.

#### 6. Learn Infrastructure as code
This is one of the most critical component in the learning path of a DevOps engineer. You need to learn about app containerization and have thorough understand of container tools like Docker and Kubernetes. Infrastructure provisioning tools such as Cloudformation, CDK, Terrafor,. Configuration management tools like Ansible, Chef, Salt & Puppet. Other areas include container orchestration and infrastructure provisioning.

#### 7. Learn some Continuous Integration and Delivery (CI/CD) tools
Continuous Integration/Continuous Deployment is now a core part of setting a DevOps culture. So you should get familiar with CI/CD tools like Jenkins, Github actions etc.

#### 8. Learn to monitor software and infrastructure
When you have thousands of services running, it's important to make sure that the system is running in fine health. Both your infrastructure and application should be continuously monitored. 

#### 9. Learn about Cloud Providers
Most of the apps today are built as cloud-native. So you need to make yourself familiar with major cloud providers. AWS, Azure and Google Cloud are the leading players.
Schedule postman collection run in Node.
Tags: postman, node, newman, javascript
Published: 2021-08-02 09:00:39

---
title: Schedule postman collection run in Node.
published: true
description: What if you would like to run your postman collections multiple times a day which is more than the limit Postman monitoring service provides? You can switch to Node.js library node-cron
tags: postman, node, newman, javascript
cover_image: https://miro.medium.com/max/700/0*JdQIg0AK7V9s5rKG
---

Postman helps us to write and automate API tests. We can create collections which are group of API requests. Newman is a command-line Collection Runner for Postman. It enables you to run and test a Postman Collection directly from the command line

Postman provides Monitoring service which is a way to stay up to date on the health and performance of your APIs. Postman monitors are based on collections. Monitors will run through each request in your collection, similar to the collection runner. The free plan of Postman monitor has limitation on API execution per month.

What if you would like to run your postman collections multiple times a day which is more than the limit Postman monitoring service provides? You can switch to Node.js library node-cron

Read More about it [here..](https://manojkkengudelu.medium.com/schedule-postman-collection-run-in-node-js-f5995ac78081)
Free online course vouchers from udemy
Tags: webdev
Published: 2021-08-02 08:49:47

A collection of free online course vouchers from udemy that you can use:

1. The Advanced SQL Course 2021 [(Redeem Coupon)](https://www.udemy.com/course/the-advanced-sql-course-2021/?couponCode=5F78CD08807CD18E174F)

2. Gatsby JS | Build a personal blog using gatsbyJS [(Redeem Coupon)](https://www.udemy.com/course/gatsbyjs-graphql-build-a-personal-blog-using-gatsbyjs-graphql/?couponCode=7A499B1A186D3664ED89)

3. Swagger API Documentation with Node JS [(Redeem Coupon)](https://www.udemy.com/course/swagger-api-documentation-with-node-js/?couponCode=1059E247049B9A34AE5B)

4. Python Programming Course Bundle : Build 15 Applications [(Redeem Coupon)](https://www.udemy.com/course/full-python-programming/?couponCode=0D38A49B332394FBC493)

5. WordPress for Absolute Beginners [(Redeem Coupon)](https://www.udemy.com/course/wordpress-for-absolute-beginners-course/?couponCode=WPAUG2021)

6. Build Your Own File Sharing Website [(Redeem Coupon)](https://www.udemy.com/course/build-file-sharing-website/?couponCode=FREECOURSEFILEHOST)

7. Time Series Analysis and Forecasting using Python [(Redeem Coupon)](https://www.udemy.com/course/machine-learning-time-series-forecasting-in-python/?couponCode=TIME2FRJL)

8. Software testing course for absolute beginner [(Redeem Coupon)](https://www.udemy.com/course/software-testing-course-for-absolute-beginner/?couponCode=AUGESTFREE1)

9. SEO Training Masterclass 2021: Beginner SEO To Advanced SEO [(Redeem Coupon)](https://www.udemy.com/course/seo-with-google-other-large-platforms-to-get-great-scale/?couponCode=382815F6CE73898FD82A)

10. Python Programming Course Bundle : Build 15 Applications [(Redeem Coupon)](https://www.udemy.com/course/full-python-programming/?couponCode=0D38A49B332394FBC493)

visit [Infinigo](https://www.infinigo.id) for a collection of other free online courses from udemy. You can also follow [Twitter](https://twitter.com/infinigo_id) or [Facebook](https://facebook.com/infinigo.id) accounts to get the latest information.
How many commits it take to be trendy ? 
Tags: github, codenewbie, codequality, codereview
Published: 2021-08-02 08:25:11

 Being trendy is something that is rewarding for both the devs and the project. 

Often, you need to exchange with people, iterate until your product is perfect to be trendy. 

But do you really need to do Thousands commits to be trendy ? 

You can see how the top 3 trendy github of today behave  on gitframed ! 

Go to https://gitframed.com/trending-github-repositories-02-08-2021/ to see them all ! 

Do you still think that more commit == more success ? ;)
How to format Date & Time in Flutter
Tags: programming, flutter, tutorial, android
Published: 2021-08-02 13:38:01

---
title: How to format Date & Time in Flutter
published: true
date: 2021-08-02 08:21:20 UTC
tags: programming,flutter,tutorial,android
canonical_url: https://medium.com/codechai/how-to-format-datetime-in-flutter-1ed0f6c8fcad
---

[![Photo by Brett Jordan on Unsplash](https://cdn-images-1.medium.com/max/2400/1*VmX4ueWdEXXfDRQ3DBgepg.jpeg)](https://medium.com/codechai/how-to-format-datetime-in-flutter-1ed0f6c8fcad?source=rss-a0365826277b------2)
Photo by Brett Jordan on Unsplash


This week's widget is mandatory if you want to display a certain date or time inside your app. The Date Format package helps you to display time, date, time zone, weekday and some more, regardless of their order. Therefore you have to specify a dateformat string in the code, which determines the format of the desired text of a datetime object. How? Let me show you!

[Continue reading on CodeChai »](https://medium.com/codechai/how-to-format-datetime-in-flutter-1ed0f6c8fcad?source=rss-a0365826277b------2)
Font ligatures in Vscode
Tags: vscode, programming
Published: 2021-08-02 07:57:56

Ligatures are awesome and they produce very picturesque figures while coding, which makes them a bliss to use.
Here is a guide on how to implement them in vscode.

## Step 1: Download fira code
Fira code is a font made exclusively for developers and supports ligatures.
You can download that from google fonts [here](https://fonts.google.com/specimen/Fira+Code).

## Step 2: Update Vs Code's default font
To do this open up visual studio code and go to settings then in the place of Font Family type down Fira Code.
After this you will see fira code as your defualt font for coding. 

## Step 3: Enable ligatures
There is one last step you need to follow to enable ligatures.
In visual studio hit <kbd>Ctrl+Shift+P</kbd> (Command instead of ctrl if you are on mac). Then hit open settings.json.
This will open settings.json a file with all your configurations.
locate editor.fontligatures and write true ahead of it. 

Enjoy and comment down if you like those ligatures.
What is Dynamic Module Import ?
Tags: javascript, react
Published: 2021-08-02 07:44:43

> You can find the original post on [my blog](https://mcperera.com/blog/dynamic-module-imports). Thank you for visiting. 😊

## Why we need ‘import’ in JavaScript?

The static import is very useful when we want to use read only live bindings which are exporting by other modules in your program. In this way the idea is to manage our code by separating them as we want. This can be functionality, features or component wise. But the entire code is working as a one code block after connecting them by importing.

Below code block shows how we can import modules in a static way.

```js
import defaultExport from "module-name";
import * as name from "module-name";
import { export1 } from "module-name";
import { export1 as alias1 } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export1 [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
```

In this way it’s easier to understand the code to some and very helpful for debugging.
The import statement cannot be used in the embedded scripts unless the script has a type=’ module.’
Also, we can import modules as a dynamic import.

## What’s dynamic import in JavaScript?

Most of the time developers are used to use the standard static import. This will always import the modules at the loading time. No matter what if we use that imported module or not JavaScript always loads the static modules in loading time.

What if we want to import modules conditionally or on demand? This is the place where you need to implement dynamic import in JavaScript.

To use dynamic import call the ‘import()’ as a function as pass the module path as an argument. Then you can use JavaScript promise or await to get the rest of the work done.

```js
import("/modules/my-module.js").then((module) => {
  // Do something with the module.
  console.log("module-->", module);
});
```

```js
let module = await import("/modules/my-module.js");
```

### When to use dynamic import?

- When importing statically significantly slows the loading of your code.
- When importing statically significantly increases your program's memory usage.
- When the module you are importing does not exist at load time
- When the module being imported has side effects, and you do not want those side effects unless some condition is true.
- When the import specifier string needs to be constructed dynamically.

Thank you for reading and Happy Coding 🥳
Some free Udemy courses for web developer
Tags: webdev, javascript, html, codenewbie
Published: 2021-08-02 07:36:20

Few Udemy courses which are free for certain amount of time 
Use Coupon Code: FREEAUG1
They are free until 4th August only 
share with your friends so that they can get benefit from this.
1. Python Programming - From Basics to Advanced level [2021]
Link:https://t.co/1IPIjnWVtX
2. React JS- Complete Guide for Frontend Web Development [2021]
Link:https://t.co/TDrdCFhD3V

3: JavaScript - Basics to Advanced [step by step (2021)]
Link:https://t.co/nBTuN7PgFr

4: HTML5 - From Basics to Advanced level (2021)
Link:https://t.co/zHPDxnXlc3
5. CSS - Basics To Advanced for front end development (2021)
Link:https://t.co/FM6f9JbqVE

Share with your friends
Follow me for more amazing content
User preference feature queries have a boolean context
Tags: css
Published: 2021-08-02 07:28:14

---
title: User preference feature queries have a boolean context
published: true
description: Media queries can have a boolean context even though they allow more than two values.
tags: css
canonical_url: https://www.stefanjudis.com/today-i-learned/user-preference-feature-queries-have-a-boolean-context/
---

Today I learned a small trick about CSS media queries that can help to save some bytes on the wire. You might know that you can check for user preferences using media queries.

Let's take the `prefers-reduced-motion` media query as an example.👇

```css
@media screen and (prefers-reduced-motion: reduce) {
  /* stop all these animations */
}
```

You can use the `prefers-reduced-motion` query to stop animating elements when users prefer not to see motion and animations ([learn more about why you should do that on CSS-Tricks](https://css-tricks.com/introduction-reduced-motion-media-query/)). The query can have two different values: `no-preference` and `reduce`.

If you have used this media query before, you might know that you can also use its short variant and drop the `reduce` value. The media query will behave the same.

```css
@media screen and (prefers-reduced-motion) {
  /* stop all these animations */
}
```

And what you see there is the media query's boolean context in action. [The spec defines the `no-preference` value as follows](https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion):

> \[no-preference\] indicates that the user has made no preference known to the system. **This keyword value evaluates as false in the boolean context.**

This definition means that when you're using the shorthand media query without defining a value, everything other than `no-preference` will evaluate to `true`. 

A boolean context might seem obvious for `prefers-reduced-motion` because it allows only two different values, but there are also media queries with more than two options. And today I learned, that these can implement a boolean context, too.

Look at `prefers-contrast` – [this media query allows four different values](https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion): `no-preference`, `less`, `more` and `custom`. And while there are four available options; `no-preference` evaluates to `false` and every other value to `true`. 

```css
/* evaluates to true for `less`, `more` and `custom` */
@media screen and (prefers-contrast) { }
```

Boolean contexts allow you to shorten your media queries and come in handy when you only want to check for a non-default value. If you want to learn more about them, [read the boolean context spec](https://www.w3.org/TR/mediaqueries-4/#mq-boolean-context).
Web Dev in the Cloud
Tags: devjournal
Published: 2021-08-02 07:25:57

## Table Of Contents 
* Forking an example blog repo, 
* running it in Gitpod, 
* and writing our first blog post
[Original Post](https://egghead.io/lessons/react-moving-your-entire-development-environment-to-the-cloud-with-next-js-gitpod-and-vercel)
OpenBSD httpd: Basic authentication with htpasswd
Tags: openbsd, httpd, basicauthentication, security
Published: 2021-08-02 07:16:46

## Summary

[OpenBSD](https://www.openbsd.org/) [httpd](https://man.openbsd.org/httpd.8) supports basic authentication with [`htpasswd`](https://man.openbsd.org/htpasswd.1).
Here shows how to use it. Besides, the official documentation is [here](https://man.openbsd.org/httpd.conf.5#SERVERS).

## Tutorial

Assuming that:
the absolute path of our document root is `/var/www/auth-trial`.

### Generate .htpasswd 

First, generate .htpasswd:

```console
$ doas htpasswd /var/www/auth-trial/.htpasswd <username>
```

This command writes \<username\> (which is editable) and generated password for them, hashed by [bcrypt](https://man.openbsd.org/bcrypt.3), into .htpasswd file.
Now you can see:

```console
$ doas cat /var/www/auth-trial/.htpasswd
<username>:(...)
```

It is important to confirm the web user running httpd daemon can read it:

```console
$ doas chown www: /var/www/auth-trial/.htpasswd
$ # the file generated above is writable by user
$ doas chmod u-w: /var/www/auth-trial/.htpasswd

$ ls -l /var/www/auth-trial/.htpasswd 
-r--------  1 www       wheel  69 Aug  2 15:20 /var/www/auth-trial/.htpasswd
```

### Configure httpd.conf

Edit httpd.conf:

```console
$ doas nvim /etc/httpd.conf
```

in order to define `authenticate` in `server` section:

```diff
  server "(...)" {
      (...)
+     authenticate with "/auth-trial/.htpasswd"
      root "/auth-trial"
      (...)
      location "(...)" {
          (...)
      }
      (...)
  }
```

Restart the daemon:

```console
$ doas rcctl restart httpd
httpd(ok)
httpd(ok)
```

Done :)

## Conclusion

Now you can see confirmation required:

![confirmation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3w6z2tenq3u80m4nrfbk.png)

and access denied when the input is invalid:

![unauthorized](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0giwzl6zwp75xow3yzer.png)
What is the size impact of importing luxon - a date manipulation library
Tags: javascript
Published: 2021-08-02 07:07:18

In this article, I'll take a look at the size impact of importing [luxon](https://moment.github.io/luxon/#). I'll check with both webpack & esbuild.

# The code

Similar to the [date-fns](https://how-to.dev/what-is-the-size-impact-of-importing-one-method-from-date-fns) article in this series, I'm testing with a rather simple code:
```js
// import trick from https://github.com/moment/luxon/issues/854
import { DateTime } from "luxon/src/luxon";

console.log("Yesterday was", DateTime.now().minus({ day: 1 }).toJSDate());
```

The import is modified from `import { DataeTime } from 'luxon';` that you can find in the documentation. It improved the build size a bit, but not enough.

# The build scripts
For my benchmark, I build code with:

```sh
webpack --mode=production
```
production mode set explicitly in webpack, and

```sh
esbuild src/index.js --outfile=dist/main.js --bundle --minify
```
Minification on in esbuild.

# The benchmark

Both bundlers performed similarly in regards to size; of course, esbuild is much faster.

## Webpack

```sh
$ webpack --mode=production

asset main.js 58.3 KiB [emitted] [minimized] (name: main)
orphan modules 217 KiB [orphan] 24 modules
./src/index.js + 23 modules 216 KiB [built] [code generated]
webpack 5.47.1 compiled successfully in 1749 ms

$ stat dist/main.js 
  File: dist/main.js
  Size: 59710       
```

The output size is **58.3 KiB**

## esbuild

```sh
$ npm run esbuild  

> luxon-bundle-size@1.0.0 esbuild
> esbuild src/index.js --outfile=dist/main.js --bundle --minify


  dist/main.js  58.5kb

⚡ Done in 18ms
$ stat dist/main.js
  File: dist/main.js
  Size: 59929  
```
The output size is **58.5KiB**

# Links
You can find my test repository [here](https://github.com/marcin-wosinek/luxon-bundle-size).

# Summary
In this article, we have seen a size impact of importing luxon to our project. Unfortunately, luxon doesn't support tree shaking, so for doing only 1 operation with it, we need to import the whole library. And for doing so, we get a serious size penalty to our project. I will not consider this library for my projects, and I'm really curious about use-cases when it's doing better than other libs discussed in this series - if you have any, please let me know in the comments.