teleren/devto huggingface dataset:
Css Postion: Relative VS Absolute
Published: 2019-11-30 21:41:13

{% tag todayilearned %} {% tag beginners %} {% tag discuss %} {% tag meta %} 
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/jm1mj9gfo8yokzzv7qns.jpg)

Relative 
========
It's free and isn't associated with any element around it and doesn't affect any element. 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/17iabn4dfotd2lztck85.jpg)

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ja37df4hzi337qk8cip6.jpg)

The second element does affect it the result it does not anything ok when you write relative the next will happen
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/gkau8eroq1hneuzu0tln.jpg)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/idu6zamox6p2iun5w0px.jpg)

Example
==========
Html
----
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ehu1jazvy4dwez3l3ytq.jpg)
Css
---
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/i4mit8evft8xetpbpwz9.jpg)

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/gm01ka2csn870lmnk12l.jpg)

The result 
----------
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ia6wejz8nqua6kwwubrn.jpg)

Absolute
========
Html
-----
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/l6augkznup6ai4sdnm5w.jpg)
Css
---
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/kgdj3y1bjkibcx1f7fcu.jpg)

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/7j56buvab30tn0dae1uz.jpg)

The result
----------
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/tkhn19qz7d7x3ek54s2v.jpg)

It's associated with the second element the end it is a different way between Relative and Absolute.
Bird House - PG in DLF Phase 2 Gurgaon
Published: 2019-11-30 19:41:49

A Complete Rental Solution aims at providing accommodation and facilities with unification and customization living options. BirdHouse as an organization was incorporated in 2016 with its headquarter in Gurgaon. BirdHouse provides luxurious rental accommodations in a pocket friendly budget making it accessible for the millennial. We have Flats, Studio Apartments & PG in Delhi, Gurgaon & Indore with zero brokerage charges. All our properties are equipped with Fully Furnished rooms, Modular Kitchen with self cooking options, professional housekeeping, laundry service with CCTV surveillance and 24*7 security. For a hassle free experience, visit our website and book your home today. Contact details: website https://www.birdhouse.co.in/, call @ +91-8448040101
November 30th: Week in Review 🎉🎉
Tags: discuss, watercooler, career, todayilearned
Published: 2019-11-30 19:30:58

Hope everyone out there is having a good weekend. I wanted to start a week in review series where I pass on posts I've read and talk about anything interesting I learned over the past week. 

Some of the things I learned: 
- While working through the Ruby [exercism.io](https://exercism.io/) track, I learned how to make immutable constants using the ```freeze``` keyword.

- I finished the [*Object and Classes*](https://github.com/getify/You-Dont-Know-JS) book in the You Don't Know JS series and gained a much better idea of how prototypes and objects work. Behavior delegation kinda weirds me out but it seems way less gross than trying to jam inheritance into JS. 

- I started learning how to use Adobe XD for creating wireframes for websites.

Some articles I read: 
- [Martin Splitt's](https://dev.to/g33konaut) overview of [CORS](https://dev.to/g33konaut/understanding-cors-aaf)
- [Java with a Clojure mindset](https://dev.to/danlebrero/java-with-a-clojure-mindset-1p13) by [Dan Lebrero](https://dev.to/danlebrero)
- [Benjamin Liu's](https://dev.to/parkrooben) article on [Twelve Factor Apps](https://dev.to/parkrooben/the-twelve-factor-app-how-to-embrace-the-future-20kg)


Is there anything cool you learned last week? Let me know down below 👇
3 best-read blogs in Up & Running Weekly #48
Tags: kubernetes, docker, opensource, devops
Published: 2019-11-30 19:14:02

---
title: 3 best-read blogs in Up & Running Weekly #48
published: yes
description: Weekly curated blogs and tools for DevOps, SRE and I&O professionals. 
tags: kubernetes, docker, opensource, devops
---

<img src="https://miro.medium.com/max/671/1*unlBvg5bP-bBvo0bo_MMXQ.jpeg" />

<h3><strong><a href="https://redux.js.org/style-guide/style-guide">1. Events, the DNA of Kubernetes</a></strong></h3>

<p><strong>6 minutes —</strong> While working on another (long overdue) blog post I had to create an event-workflow diagram, using the Kubernetes Horizontal Pod Autoscaler. In order to not let wait my followers, I did a short tweet on how I think of and explain Kubernetes. Dear lord, did that thing go viral! Many of you have asked for a blog post (and even Kubecon talk!) on this. <i>By Michael Gasch.</i></p>

<h3><strong><a href="https://andydote.co.uk/2019/11/21/nomad-good-kubernetes-bad/">2. Nomad good, Kubernetes bad</a></strong></h3>
<p><strong>5 minutes —</strong> I will update this post as I learn more (both positive and negative), and is here to be linked to when people ask me why I don’t like Kubernetes, and why I would pick Nomad in most situations if I chose to use an orchestrator at all. <i>By Andy Davies.</i></p>

<h3><strong><a href="https://cacm.acm.org/magazines/2019/12/241054-the-rise-of-serverless-computing/fulltext">3. Rise of serverless computing</a></strong></h3>
<p><strong>25 minutes —</strong> Magnificent piece about all the fundamentals of serverless computing. <i>By Vinod Muthuswamy, Aleksander Slominski, Paul Castro and Vatche Ishakian.</i></p>

<h2><strong>About Up & Running Weekly</strong></h2>
<p><a href="https://www.getrevue.co/profile/cloud-architecture">Up & Running Weekly</a> is a mailing consisting of the latest blogs and tools curated for DevOps pros. I’m <a href="https://github.com/snedi">Andrey</a>, your curator, working from the Netherlands to help building a cloud platform for front-end developers that is called Jexia.</p>
<br></br>
<p>You have a question, feedback or you want to notify me about a noteworthy blog? Reach out via denis at upandrunningweekly.com.</p>
Installing and customizing oh-my-zsh on Ubuntu
Tags: zsh, ubuntu, linux, beginners
Published: 2019-11-30 18:33:42

ZSH (or Z Shell), is an extended version of the default shell. It includes new features, themes and plugins.

We can install it from the default shell using:

```
$ apt install zsh
```

[Oh-my-zsh](https://ohmyz.sh/) is a framework that runs on top of ZSH. If you want to understand it from a web example, it would be something like this: ZSH is Javascript and oh-my-zsh is React/Angular/Vue/etc.

From their site: 

>Oh My Zsh is a delightful, open source, community-driven framework for managing your Zsh configuration. It comes bundled with thousands of helpful functions, helpers, plugins, themes, and a few things (...)


We can simply install it with a one-liner. Via cURL:

```
$ sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
```

Or via Wget:

```
$ sh -c "$(wget https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh -O -)"
```

We accept changing our default shell to zsh, enter our password and that's it:

![installation_completed](https://i.imgur.com/EombiMZ.png)

Note: As you can see, the ~ symbol indicates that zsh is being used. But if we close the terminal and open it again, the default shell will be used.

We can now run '$ zsh' to enable it, or simply logout/login and the default shell will be zsh.

If the change didn't work and we still have the default shell running, run:

```
$sudo chsh -s $(which zsh) $(whoami)
```

## Customization

ohmyzsh comes with a lot of plugins and themes preinstalled. I'll be showing you how to customize it using my current preset.

First, we install powerline font to have support for icons in our terminal:

```
sudo apt install fonts-powerline
```

Then, we change the default theme 'robbyrussell' to [agnoster](https://github.com/agnoster/agnoster-zsh-theme). This one is pretty common because it's optimized for git repository usage.

```
sudo nano ~/.zshrc
```
And change ZSH_THEME variable to ZSH_THEME="agnoster".

To remove the username and host from the prompt, modify:

```
sudo nano ~/.oh-my-zsh/themes/agnoster.zsh-theme
```

And comment 'prompt_context' like below:

![comment_prompt_context](https://i.imgur.com/XUA6YSX.png)

If you followed the previous steps, you'd have something like this (using Solarized Dark theme for the terminal): 

![final](https://i.imgur.com/gtYtZuJ.png)
IT shop Immaturity
Tags: angular, typescript, javascript
Published: 2019-11-30 19:09:07

As a lifelong consultant, I've seen how many large IT organizations operate. In particular how the programming departments are run. 

Most of these organizations do not have reusable component libraries and if they do there's no way to read about the API. 

This is the single most overlooked and most immature way to operate. NPM took off some of the pressure for sure, but also added concerns such as 'Should we use this in production?'

Today's programmers should be component factories. If your team is not on that path there's a massive opportunity to improve. If your team doesn't embrace this concept,  it may be best to find another opportunity.

Angular, React. VUE, Typescript and Javascript are readily able to support the concepts of Componetization. Don't wait to get started.
Angular State Management Options
Tags: angular, ngrx, typescript, redux
Published: 2019-11-30 18:49:30

I do not use libraries for state management. The reason is, when I studied Redux, I saw it as a great tool whose problem it solved as being a non-issue.

Within the opinionated React way of doing things, state management is a top priority. Redux could make sense there for sure. However; to me, after 25 years as a programmer state management was never a separate concern. Neither was immutability or drill down data design such as React embraces.

To me the most elegant way to accomplish state management is the ubiquitous EventEmitter. Events and Event Handlers have been around for 50 years. They are a type of Observer pattern, easy to set up and they never fail.

Inter-Component communication may easily rely on EventEmitters contained in an Angular service to both Emit and Subscribe to app wide events. This pattern is loosely coupled in that neither the Emitter or Subscriber are directly coupled to each other. Instead, Angular injects the servive which provides a common code point.

Each component then receives notifications at indeterminate times. This allows each component to change state as needed. Each component boots up and sets the initial state, each notification advances the state flow.

This is really no different than Redux or Angular's own Ngrx. Both register something to trigger an event which notifies a specific component of a new state. 

We revealed the super easy Angular Event Service in a prior post in this seies. It showed how easy this pattern is to implement. Who needs ngRx?

JWP2019

Comments Welcome!
How do you deploy your apps?
Tags: discuss, deployment
Published: 2019-11-30 18:47:33

---
title: How do you deploy your apps?
published: true
description: A discussion about deployment stategies and tools
cover_image: https://thepracticaldev.s3.amazonaws.com/i/ee93slne2neow54ci1oj.jpg
tags: discuss, deployment
---

What kind of tools and strategies do you use for your apps' deployment Do you do it manually via Git? Do you use a PaaS like Dokku? Or maybe just create a custom bash script that does the work? 

There are so many options out there and I'm curious what do you guys use in your company or private projects.

I'd love to hear your thoughts on this topic! :)

Cover image by [Taylor Vick](https://unsplash.com/@tvick).
3 best-read blogs in Week of React #80
Tags: react, redux, javascript, typescript
Published: 2019-11-30 18:44:33

---
title: 3 best-read blogs in Week of React #80
published: yes
description: Weekly curated blogs and tools for React developers. 
tags: react, redux, javascript, typescript
---

<img src="https://miro.medium.com/max/649/1*FFcYWvaa1v79Alb8r_lTag.jpeg" />

<h3><strong><a href="https://medium.com/better-programming/10-tips-and-tricks-that-will-make-you-a-better-reactjs-dev-95f66cc18087">1. 10 tips & tricks that’ll make you a better React dev</a></strong></h3>

<p><strong>8 minutes -</strong> <i>By Simon Holdorf.</i></p>

<h3><strong><a href="https://blog.scottlogic.com/2019/11/22/Redux-Hooks.html"> 2. Now we’re hooking: Redux catches on</a></strong></h3>
<p><strong>5 minutes —</strong> With the release of hooks, React shook the codebase of developers all over the world and changed the way we write React web apps. Functional components with hooks have largely replaced class components and now Redux has followed. <i>By Tom Hands.</i></p>

<h3><strong><a href="https://www.freecodecamp.org/news/the-next-js-handbook/"> 3. The Next.js handbook</a></strong></h3>
<p><strong>31 minutes -</strong> I wrote this tutorial to help you quickly learn Next.js and get familiar with how it works. <i>By Flavio Copes.</i></p>

<h2><strong>About the Week of React</strong></h2>
<p><a href="https://www.getrevue.co/profile/Andres-from-Jexia">The Week of React</a> is a mailing consisting of the latest blogs and tools curated for React pros. I’m <a href="https://github.com/KutsenkoA">Andrey</a>, your curator, working from the Netherlands to help building a cloud platform for front-end developers that is called Jexia.</p>
<br></br>
<p>Do you have a question, feedback or you want to notify me about a recent blog for Week of React pros? Reach out to me via andres at weekofreact.com.</p>
Laravel Valet + PHP 7.4 + Homebrew
Tags: php, laravel
Published: 2019-11-30 18:30:22

**This is a temporary workouround that allows me to go on with the local development with Laravel + Valet + PHP7.4**
Today I upgraded my PHP to 7.4.0 version.
I have a MacBook Pro and I use PHP installed via Homebrew.
The usual step are:

```bash
brew update
brew upgrade php
composer global update
valet install
```

After "valet install" I had a problem: *Unable to determine linked PHP when parsing '7.4'*

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/zffk8wjeukx6hfyl0o14.png)

This happens because the current version of Valet are not whistelisting PHP 7.4.
I jumped on 
```bash
code ~/.composer/vendor/laravel/valet/cli/Valet/Brew.php
```

```php
class Brew
{
    const SUPPORTED_PHP_VERSIONS = [
        'php',
        'php@7.3',
        'php@7.2',
        'php@7.1',
        'php@7.0',
        'php@5.6',
        'php73',
        'php72',
        'php71',
        'php70',
        'php56'
    ];
```
I added 'php@7.4', line:
```php
class Brew
{
    const SUPPORTED_PHP_VERSIONS = [
        'php',
        'php@7.4',
        'php@7.3',
        'php@7.2',
        'php@7.1',
        'php@7.0',
        'php@5.6',
        'php73',
        'php72',
        'php71',
        'php70',
        'php56'
    ];
```
I needed to do this **workaround**, until Valet will include php@7.4
[Brew.php](https://github.com/laravel/valet/blob/master/cli/Valet/Brew.php#L11)

Obviously this is not the official way to have php7.4 but, for me at the moment is working so it allows me to go on with Laravel development on php7.4 via Valet (at least for this weekend).
Help us document neoan3
Tags: github, neoan3, php
Published: 2019-11-30 18:28:59

## What do you do if people start using your project before you are prepared for a release?

The back-story: neoan3's predecesor is the conclusion of a framework originally designed to teach coding with a very low entry hurdle. As it matured several forks used in production were revised to a complete new approach into what is now the PHP framework neoan3. The challenge never changed: A framework suitable for the beginner with the stability, security and power of an all-purpose framework.

The code-base has always been open source under an MIT license, but rarely did external developers pick it up or watch the videos explaining particular use-cases or internal tutorials (e.g. Stateless JWT REST API).

## What happend?

The cli-tool supporting neoan3 is versatile enough to be used without neoan3 as some of it's functionalities are useful helpers for a variety of code bases. This is why little attention was given to the fact that the tool was downloaded sometimes over a hundred times per day, sometimes only a few times a week. Recently the tool started to send a request whenever its command to download and install a neoan3 instance was executed. Due to a high respect for privacy it is not known where, who or why developers install & run neoan3, but that over 4000 instances are running with currently ~200 new instances a week.

## Is that a problem?

Converting from "private tutoring" to solid documentation & resources cannot be done overnight and cannot be done alone. We therefore hope that people are willing to consider 

- contributing to the documentation

- share their experience, best practices, tips, recommendations, issues in whatever format they see fit

- support the project over-all

## How can you help without a documentation?

If interested, you are encouraged to start by asking questions, submit issues on GitHub or reach out with direct messages. If you are more experienced, you will notice that the code base is very small and mostly self-explanatory. Feedback of any kind is appreciated.

[github](https://github.com/sroehrl/neoan3)
3 best-read blogs in Angular Weekly #82
Tags: angular, ngrx, rxjs, typescript
Published: 2019-11-30 18:27:53

---
title: 3 best-read blogs in Angular Weekly #82
published: yes
description: Weekly curated blogs and tools for Angular developers. 
tags: angular, ngrx, rxjs, typescript
---

<img src="https://miro.medium.com/max/1173/1*w9GJU5UY4233ExmPJ07g3g.png" />

<h3><strong><a href="https://indepth.dev/here-is-why-you-will-not-find-components-inside-angular/">1. Why you will not find components in Angular</a></strong></h3>

<p><strong>7 minutes —</strong> From the moment I started using Angular I was intrigued by the question what’s the difference between components and directives. <i>By Max Koretskyi.</i></p>

<h3><strong><a href="https://blog.snowfrog.dev/dependency-inversion-in-angular/">2. Dependency inversion in Angular</a></strong></h3>
<p><strong>3 minutes —</strong> Angular has a powerful dependency injection system. Learn how to use it so that your code complies with the Dependency Inversion Principle. <i>By Philippe Vaillancourt.</i></p>

<h3><strong><a href="https://blog.angular.io/how-we-use-angular-at-the-gdf-cd17807a9bd2?gi=95532ff7ed82">3. How Allianz uses Schematics and ng update for its UI</a></strong></h3>
<p><strong>6 minutes —</strong> In this article we want to share how we at Allianz Global Digital Factory (GDF) use the tooling of Angular to keep our ecosystem in sync. <i>By AllianzGlobalDigitalFactory.</i></p>

<h2><strong>About the Angular Weekly</strong></h2>
<p><a href="https://www.getrevue.co/profile/AndreyKutsenko">The Angular Weekly</a> is a mailing consisting of the latest blogs and tools curated for Angular pros. I’m <a href="https://github.com/KutsenkoA">Andrey</a>, your curator, working from the Netherlands to help building a cloud platform for front-end developers that is called Jexia.</p>
<br></br>
<p>Do you have a question, feedback or you want to notify me about a recent blog for Angular Weekly pros? Reach out to me via andrey at angular-weekly.com.</p>
Nginx로 https Proxy 서버 만들기
Tags: nginx, proxy, https, redirect
Published: 2019-11-30 18:25:22

## NGINX ?

[NGINX Wiki](https://ko.wikipedia.org/wiki/Nginx)

> Nginx(엔진 x라 읽는다)는 웹 서버 소프트웨어로, 가벼움과 높은 성능을 목표로 한다. 웹 서버, 리버스 프록시 및 메일 프록시 기능을 가진다.
...
Nginx는 요청에 응답하기 위해 비동기 이벤트 기반 구조를 가진다. 이것은 아파치 HTTP 서버의 스레드/프로세스 기반 구조를 가지는 것과는 대조적이다. 이러한 구조는 서버에 많은 부하가 생길 경우의 성능을 예측하기 쉽게 해준다.

## NGINX로 HTTPS PROXY 서버 만들기
브라우저의 https redirect 기능 때문에 http로 접속을 못하는 경우가 생겼다.
그래서 간단하게 HTTPS PROXY 서버를 만들어 해결하려한다.
추가로 인증 기능도 추가한다.  
현재 http로 동작하는 프로세스는 docker container위에 동작하고 있다.(netdata)

![diagram](http://raw.githubusercontent.com/wes5510/posts/master/src/creating_https_proxy_server_with_nginx/imgs/nginx_https_proxy_structure.jpg)

### password 파일 생성
http or https로 접속하기 전 아이디와 비밀번호를 입력하여 인증할 수있도록 만들어준다.
```sh
$ printf "yourusername:$(openssl passwd -apr1)" > <PATH>/passwords
Password: <비밀번호>
Verifying - Password: <비밀번호 확인>
```

### NGINX Config 파일 설정
아래와 같이 파일을 설정해 준다.
```sh
$ vi <PATH>/nginx.conf
```
```nginx
server { 
  /* HTTPS PORT 입력 */
  listen       199; 

  /* 도메인 입력 */
  server_name  <DOMAIN>; 

  ssl on; 
  /* SSL 파일 경로 입력(저자는 letsencrypt를 이용하여 ssl 등록) */
  ssl_certificate /etc/nginx/certs/fullchain1.pem; 
  ssl_certificate_key /etc/nginx/certs/privkey1.pem; 

  ssl_ciphers 'ECDHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA256:ECDHE-RSA-AES256-SHA:ECDHE-RSA-AES128-SHA:ECDHE-RSA-DES-CBC3-SHA:AES256-GCM-SHA384:AES128-GCM-SHA256:AES256-SHA
  256:AES128-SHA256:AES256-SHA:AES128-SHA:DES-CBC3-SHA:!aNULL:!eNULL:!EXPORT:!DES:!MD5:!PSK:!RC4'; 
  ssl_protocols  TLSv1 TLSv1.1 TLSv1.2; 
  ssl_prefer_server_ciphers on; 
  ssl_session_cache  builtin:1000  shared:SSL:10m; 
  ssl_session_timeout  5m; 

  /* 사용자 인증을 위한 설정 */
  auth_basic "Protected";
  auth_basic_user_file passwords;

  location / { 
    /* HTTP로 동작하는 서비스 URL 입력(현재 NGINX와 netdata는 같은 network상에 존재) */
    proxy_pass <http://netdata:19999>; 
  } 
}
```

### NGINX docker-compose 파일 설정

```yaml
version: '3'
services:
netdata-proxy:
restart: always
image: nginx
container_name: netdata-proxy
ports:
  - "199:199"
networks:
  - net
volumes:
  # nginx config 파일 경로 설정
  - <PATH>/nginx.conf:/etc/nginx/conf.d/default.conf
  # certs 파일 경로 설정
  - <PATH>/certs:/etc/nginx/certs
  # 사용자 인증을 위한 파일 경로 설정
  - <PATH>/passwords:/etc/nginx/passwords
# netdata와 같은 network 설정
networks:
  net:
    external:
      name: dev-tool-net
```
Visual Studio Tips Christmas Advent Calendar
Published: 2019-11-30 18:16:45

Hi.

If you use Visual Studio, I thought they might be interested to know that beginning December 1st until the 25th I am publishing a video tip for Visual Studio with a bit of a Christmas theme every day.

You can read about it here

http://www.manchesterdeveloper.com/blog/post/visual-studio-tips-christmas-advent-calendar/

I hope you find it useful.

Any feedback is welcomed.

— Lee
Kubernetes for rookies session
Tags: kubernetes, k8s, meetup, questions
Published: 2019-11-30 17:47:46

Shortly I will start preparing a session/talk about k8s called Kubernetes for rookies. 

The audience will be a group of developers with no or very limited knowledge about k8s and the goal will be to give them an introduction to k8s with the help of slides and demos.

If you are a developer, have heard about Kubernetes and would like to know more about it by attending an introduction session: 

- What info would you expect in the session?
- What kind of questions do you have?
- What would you like to see in a demo?  

For more advanced Kubernetes users:

- Which concepts should be explained?
- Any tips for best practices?

Really appreciated if you can help me further on this.