teleren/devto huggingface dataset:
Not POCing enough — 5 things I wish I knew as a Software Engineer (Part 3/5)
Tags: webdev, codenewbie, welcome, beginners
Published: 2020-12-31 06:14:28

In case you missed the first part in this 5 part series — you can read about it at: [Key Point 2 — Focused on Implementation only — 5 things I wish I knew as a Software Engineer](https://dev.to/anandsafi/key-point-2-focused-on-implementation-only-5-things-i-wish-i-knew-as-a-software-engineer-f3k)

All the **5 key traits** can be found [here in this article](https://dev.to/anandsafi/software-engineering-done-right-5-things-i-wish-i-knew-as-a-software-engineer-27lg).
...
_POC = Proof of Concept_

I can easily say this is often the **most overlooked** trait that I have seen across engineers even though the **most imporant** in my opinion.
▪︎▪︎▪︎
Personally, I learned about this the hard way when I realized I was working hard but not learning/ growing at the pace I thought I was. My manager back then made me aware of the importance of **the art of POCing** — _the process of experimenting, implementing in a light weight manner and picking my own best solution that I was most proud of and one that made most sense to me._

Honestly, it took me some time to realize the benefit of this approach and I often felt I was being challenged or even questioned in my implemented approach for no good reason. Once I was able to gain clarity on some of the benefits (mentioned below), this became my primary approach for most mid-large size or complex tasks.
▪︎▪︎▪︎
Potential benefits of POCing vs a single implementation:
 1) Increased ability to weigh pros and cons of various approaches
 2) Developing critical thinking to approach a give problem with multiple solutions
 3) Expanded coding chops and know-how since each solution might use a different approach or method or syntax
 4) Increased ability to approach future refactors with ease and build for scale from get go
 5) Increased focus on chosing the best approach vs just delivering a working solution

Hence, I would **highly recommend** folks to start this approach ASAP if they are not doing it or contiuing to build on it if you are practicing it in some form.
▪︎▪︎▪︎
Let me know in the comments below on what are your thoughts with such an approach and when does it make sense to leverage this.
On to the next [Key Trait #4 — Communicate & Collaborate…](https://dev.to/anandsafi/communicate-collaborate-5-things-i-wish-i-knew-as-a-software-engineer-part-4-5-404m)
IDE on browsers (for Frontend)
Published: 2020-12-31 06:10:42

## free
* [CodeSandbox](https://codesandbox.io/)
   * terminal experience is not available

## partly free
* [AWS Cloud9](https://aws.amazon.com/ko/cloud9/)
   * +) smooth with TypeScript
   * +) reasonable cost with very flexible plan
* [GitPod](https://gitpod.io/)
   * +) smooth with TypeScript, Sass
   * +) decent memory, cpu
   * -) limited time for free tier, expensive cost
* [Codetasty](https://codetasty.com/)
   * -) not smooth with TypeScript, Sass
   * +) reasonable cost with Vultr
* [Repl.it](https://repl.it/)
* [Goormide](https://ide.goorm.io/)
   

## upcoming
* [Codespaces](https://github.com/features/codespaces)
2020 Go Away Then 2021 | #RoadMap2021
Published: 2020-12-31 05:59:48

2020 talks that in fact there are things that have failed to be done / realized, there is a sense of disappointment that there is definitely a name that is only human. Luckily it has prepared then and catch. The results of learning object promises in JavaScript, which often play in the API will know.
Promise : An object that represents the success / failure of an asynchronous event in the future.
+states (fulfilled / rejected / pending)
+callback (resolve / reject / finally)
+aksi (then / catch)

Furthermore, things that you want to do outside of work, maybe you will document more of the things that have been obtained so far and increase your routine exercise.
What is a retrospective?
Tags: agile, feedback
Published: 2020-12-31 05:25:44

---
title: What is a retrospective?
description: Learn what a retrospective is, Prime directive and the four questions retrospective
tags:
  - agile
  - feedback
published: true
canonical_url: https://cri.dev/posts/2020-09-24-What-is-a-retrospective/
---

**Originally posted on [cri.dev](https://cri.dev/posts/2020-09-24-What-is-a-retrospective/)**


# What is it?

- Comes from the necessity to regularly reflect about how project / team is going
- It’s an interactive way to focus on past things and see if there is a way we can improve them through a team effort and collaboration

# The Prime Directive

> Regardless of what we discover, we understand and truly believe that everyone did the best job they could, given what they knew at the time, their skills and abilities, the resources available, and the situation at hand.

# What do I get from it?

- Discussion about important topics 
    - already a step in the right direction
- Actions to improve in the future
- Grow, connect as a team


# 4 questions retrospective

- What went well?
- What didn’t go so well?
- What have I learned?
- What still puzzles me?

> We look at the past to improve in the future 


## 1. What went well?
- we start with stating positive things to ensure we continue on doing those positive things in the future
- State a fact
- Saying thx is cool
- You can go into details

## 2. What didn’t go so well?
- Difficulties, issues, dissatisfactions
- “Where better to look to make improvements than where things are not going so well?”
- Something less than ideal
- Give observations, not judgement
- “We spent a long time making the decision on the ordering process”, rather than “it shouldn’t take us long to decide the ordering process”

## 3. What have I learned?
- Positive + negative things
- > Observations on the past Create Opportunities for the Future

## 4. What still puzzles me?
- Questions!
- Concerns
- Doubts
- Worries

# Turning 4 questions into improvements

- We have some insights now
    - Identify actions to improve in the future
    - Volunteer for action
- Remember that the volunteer is not necessarily the person doing the actions, they should remind the team about the action and be mindful about respecting the action
HTML5 Starting boilerplate template
Tags: html
Published: 2020-12-31 05:21:04

Today I want to go back to the absolute basics when we start our websites, the boilerplate template.

What a boilerplate stands for is a quick copy-paste `HTML` document that is the bare minimum to get started.

In this article, I'll share my version of the `HTML5` boilerplate with you guys and explain the parts that are to it.

## HTML5 Boilerplate template

Without further ado, this is my boilerplate

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Daily Dev Tips Boilerplate</title>
    <meta name="description" content="Basic HTML boilerplate" />
    <meta name="author" content="Daily Dev Tips" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="css/style.css" />
  </head>

  <body>
    <!-- Your content goes here -->
    <script src="js/main.js"></script>
  </body>
</html>
```

You can also get the raw file directly from this GIST.

[Download the HTML5 boilerplate](https://gist.github.com/rebelchris/f13c5acc2c5a833042137540b63b7633)

## What is in this boilerplate

It's a very basic boilerplate, with only the bare minimum that would come back in 99% of the projects.

**Generic elements**

- Doctype: The doctype is very important as it tells a browser what kind of document it's looking at. In our case a basic HTML document
- The `<html>` tag is the most important part and our main wrapper for everything. We define a `lang` attribute, in my version it's `en` (English).

**Head section**

We then come to the head section, which can be vastly extended, for me these are the basics that always recur.

- Meta charset, almost in all cases `UTF-8` is the character encoding we use, so I like to have it set to that.
- Title: What is our document called, this is the page title that shows in your tab
- Meta description: A short description of our page
- Meta Author: The name of the author, it's not a mandatory field, but I like to include this.
- Meta viewport, I tend to include these since they make sure your page behaves well on mobile. This one is the most generic one that will scale to the device size.
- Link to our stylesheet, in this case, the stylesheet is called style.css and sits in the css folder.

**Body section**

Then the main part where most of our content will go, the body of our HTML document.

- I've added an HTML comment where you can start your site's structure.
- Then I add the script as low as possible, it loads a script called main.js from the js folder.

That's it.

A very basic template, but something you'll need all the time.
You can even use tools to have this as a shortcut.

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Pretty Easy Privacy
Tags: react, privacy, webdev, javascript
Published: 2020-12-31 05:06:54

## PGP Powered Encryption Made Easy

<a href=https://prettyeasyprivacy.xyz/#/><b>prettyeasyprivacy.xyz<b></a>

Pretty Easy Privacy gives users the power of openPGP encryption without the hassle of the command line. 

The application performs encryption using <a href=https://openpgpjs.org/>openPGP.js</a> (maintained by the protonmail folks).


## Goals

The goal of this project is to offer a simplified, open source, tool to encrypt files/objects for storage.

With the open nature of this project the hope is more individuals will be encouraged to practice and explore encryption tools.

## Behind the Scenes

This is a simple react app hosted on github pages.

## Simple Passphrase Encryption Demo

{% youtube PMcsWo5RC3k %}

### What do you think? 


<a href=https://prettyeasyprivacy.xyz/#/><b>prettyeasyprivacy.xyz<b></a>
Accessible Inverted Colors
Tags: a11y, html, css, sass
Published: 2020-12-31 04:52:26

---
title: Accessible Inverted Colors
published: true
description: 
tags: accessibility, html5, css, sass
---

Recently when developing styles for accessible form inputs an interesting challenge came up - how to handle the inverted color schemes that are available on Windows computers.

For reference, to switch a Windows PC to use inverted colors, you can use the keyboard shortcut

```
Shift+Alt+PrtScr
```

By default, form inputs like `html±<input>` and `html±<textarea>` will look fine and the colors will invert properly.

However, if you are doing custom styling without using the `border` property, for example using `box-shadow` and hiding the border in a standard color view, you may notice that box shadows on these elements do not appear in the inverted mode, creating an accessiblity issue for users that are using the inverted mode.

A quick trick to fix this issue is by adding a transparent border to those elements, like so:

```css
border: 1px solid transparent;
```

This could potentially create a gap if you are using a combination of inset and outside box-shadow properties - so we can use a media query to specify when it should be used - in this case, when the inverted mode is active.

There are two useful media queries that are currently available that can achieve this goal:

`ms-high-contrast: active` and `forced-colors: active`

The first media query works on older versions of Internet Explorer, and `forced-colors` works on (most) modern browsers.

The final code should look something like this:

```css
@media screen and (-ms-high-contrast: active), (forced-colors: active) {
  border: 1px solid transparent;
}
```

A side note: currently neither of these media queries appear to work on the latest Firefox as of writing this. 

Both are fully supported in the latest Microsoft Edge, which is the best supported browser when using inverted color mode.

*Originally published at https://jaketracey.com*
Binary Search Algorithm
Tags: java, algorithms
Published: 2020-12-31 04:47:05

###What is Binary search?
Binary search is an algorithm that solves search problems, and its input is a sorted list of elements. If an element you’re looking for is in that list, it returns the position where it’s located. Otherwise, binary search returns -1 or null

Suppose you’re searching for a word that starts with letter M in a dictionary. You could start at the beginning and keep flipping pages until you get to the Ms. But you’re more likely to start at a page in the middle, because you know the Ms are going to be near the middle of the dictionary. In general, for any list of n, binary search will take _O(log n)_ steps to run in the worst case, whereas simple search will take n steps.

___
###Psuedocode w/ illustrations

**Name of method:**
binarySearch(a, x)

**Inputs:** 
a: The sorted array to search in 
x: The value we are searching for in a

As an example we'll use int[]{11, 88, 99, 111, 223, 999, 1028}
![Array of integer values](https://dev-to-uploads.s3.amazonaws.com/i/q10yslvgwwq4z4wjdl3x.png)

**Outputs:**
the index position where a[i] == x or -1 if not found

**Procedures:**
1. Define start and range variables
![Start and range variables](https://dev-to-uploads.s3.amazonaws.com/i/e4sgtp29g6v0qpkhyt5w.png)

2. Set start to 0, and set range to the length/size of a
![Initialized start and range variables](https://dev-to-uploads.s3.amazonaws.com/i/uoa6t4boo336lxeu8q6r.png)

3. While start <= range, do the following:

a. Define a mid variable and set it to (start + range)/2 this will get the middle element
![Initializing the mid variable](https://dev-to-uploads.s3.amazonaws.com/i/sxhosuxtk9t9m7aebvuv.png)

b. If x > a[mid], then set the start variable to mid + 1
![if x > a[mid]](https://dev-to-uploads.s3.amazonaws.com/i/cpeuxvtjpk8jk09kfsai.png)

else if x < a[mid] set the range variable to mid - 1
![if x < a[mid]](https://dev-to-uploads.s3.amazonaws.com/i/sbulebkep7fwyeyanjhc.png)

c. if a[mid] = x, then return mid

4.Return -1 if the value isn't found

###Sample code:
Let's find the index position of: 
![value to find](https://dev-to-uploads.s3.amazonaws.com/i/3r96gzq5ihkxiivsk9qm.png)
```
public class MyClass {
  public static void main(String[] args) {
        System.out.print(binarySearch( new int[]{11, 88, 99, 111, 223, 999, 1028}, 999 ));
  }  
  
  public static int binarySearch(int[] a, int x){
    int start = 0;
    int range = a.length-1;
    
    while(start <= range){
        int mid = (start + range) / 2;

        if(x > a[mid]) start = mid + 1; 
        else if(x < a[mid]) range = mid - 1;
        else return mid;
    }
    return -1;
  }
}
```
Toggle Between Dark/Light Modes with HTML5 web storage API
Tags: webdev, html, css, javascript
Published: 2020-12-31 04:23:12

Dark-theme is a really simple dark mode library that enables a switcher to toggle between dark and light modes on the web application.

Written in vanilla JavaScript. Uses HTML5 web storage API (local storage) to save the current theme on the client-side.

How to use it:

Create a checkbox based toggle switch on the page.

```html
<div class="toggle">
  <input id="switch" type="checkbox" name="theme">
  <label for="switch">Toggle</label>
</div>
```

```css 
input[type=checkbox]{
  height: 0;
  width: 0;
  visibility: hidden;
}

label {
  cursor: pointer;
  text-indent: -9999px;
  width: 52px;
  height: 27px;
  background: grey;
  float: right;
  border-radius: 100px;
  position: relative;
}

label::after{
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 90px;
  transition: 0.3s;
}

input:checked + label {
  background-color: var(--color-headings);
}

input:checked + label::after {
  left: calc(100% - 5px);
  transform: translateX(-100%);
}

label:active:after {
  width: 45px;
}
```

Determine the styles on the light mode using the following CSS variables.

```css
html {
  --bg: #FCFCFC;
}

body {
  background-color: var(--bg);
}
```

The main JavaScript to enable the dark mode switcher and determine the CSS styles on the dark mode.

```js 
const html = document.querySelector("html")
const checkbox = document.querySelector("input[name=theme]")

const getStyle = (element, style) => 
  window
    .getComputedStyle(element)
    .getPropertyValue(style);

const initialColors = {
  bg: getStyle(html, "--bg"),
}

const darkMode = {
  bg: "#333333", // override styles here
}

const transformKey = key => 
  "--" + key.replace(/([A-Z])/, "-$1").toLowerCase();

const changeColors = (colors) => {
  Object.keys(colors).map(key => 
    html.style.setProperty(transformKey(key), colors[key]) 
  );
}

checkbox.addEventListener("change", ({target}) => {
    target.checked ? changeColors(darkMode) : changeColors(initialColors);
});
```

Create local storage.

```js 
const isExistLocalStorage = (key) => localStorage.getItem(key) != null;

const createOrEditLocalStorage = (key, value) =>
  localStorage.setItem(key, JSON.stringify(value));

const getValeuLocalStorage = (key) => JSON.parse(localStorage.getItem(key));

checkbox.addEventListener("change", ({ target }) => {
  if (target.checked) {
    changeColors(darkMode);
    createOrEditLocalStorage("mode", "darkMode");
  } else {
    changeColors(initialColors);
    createOrEditLocalStorage("mode", "initialColors");
  }
});

if (!isExistLocalStorage("mode"))
  createOrEditLocalStorage("mode", "initialColors");

if (getValeuLocalStorage("mode") === "initialColors") {
  checkbox.removeAttribute("checked");
  changeColors(initialColors);
} else {
  checkbox.setAttribute("checked", "");
  changeColors(darkMode);
}
```

Now, try it! 

{% codepen https://codepen.io/fariasmateuss/pen/eYdVeYV %}
Difference between Object.assign() and just assign
Tags: javascript, newbie
Published: 2020-12-31 04:20:40

As a newbie I saw that some developer use `Object.assign()` for assign a value to object, and some developer use `just assign`.

#### What is the difference between that?

`Object.assign()` is clone the object.
`Just assign` assign the address.
Here I give you an simple example
```javascript
let x = { "a":10, "b":100 }
let y = x;
y.a = 50;
console.log(x);

// {a: 50, b: 100}
```
Here you can see that if we change the value of `y.a` then `x.a` changes automatically, means `x` and `y` have same address.

Now for `just assign`
```javascript
let x = { "a":10, "b":100 }
let z = {};
Object.assign(z,x);
z.a= 1000;
console.log(x);

// {a: 10, b: 100}
```

Here you can notice that we change the value of `z.a` but `x.a` remains as it is, means `z` and `x` have different address.

In short, `Object.assign()` is copy the key-value pair ans `just assign` assign the same address.

[Here](https://javascript.info/object-copy) Link for more better understanding.

Here is a useful link for javascript reference.
[Javascript.info](https://javascript.info/)

Bye bye 2020. :smile:
Building cloud native apps: Codebase
Tags: git, codebase, saas, cloudnative
Published: 2020-12-31 03:24:04

## Everything starts with the code

Codebase is the first factor mentioned in the twelve-factor app manifest: https://www.12factor.net/codebase.

It is the very first factor everyone should consider when building a new app. Why? Because everything starts with the code.

When I started my professional IT career I was working with CVS (Concurrent Versioning System), then I was working with Subversion, did one project in Mercurial, but fell in love with Git.

## Git and GitOps

Git is the undisputed king of version control systems. Git makes the dev world go round - it is the foundation of GitOps and what we can now call `everything-as-code` paradigm (with the most notable examples like `infrastructure-as-code`, `build-as-code`, `pipeline-as-code`, `documentation-as-code`, and `security-as-code`). If you're starting a new project, it must be simply Git.

## Monorepo vs. Multirepo

The twelve-factor app manifest also touches on an important matter which I would like to stress as well. 

Every app should have its own codebase. If you're building your cloud native app based on microservices then every service should have its own code repository (multirepo approach). Developers have a tendency to do shortcuts, if multiple apps are stored in a single repo (monorepo approach) then there is a risk of referencing other apps/components directly and breaking the clear design and component separation. Finally, having one codebase per app simplifies a lot of: code management, release management, and everything we can label as CI/CD pipelines.

## Hosting

Where to host your codebase? My preference is [GitHub](https://github.com/). The list of all the available features is mind-blowing. Starting with the basic stuff like storing your code, organising your documentation/pull requests/discussion/teams/organisations/projects, running CI/CD workflows, and last but not least running security scans for your code and 3rd party dependencies. It's where I host all my projects and with (not so) recent announcement of unlimited private repos, GitHub made life so much easier. [BitBucket](https://bitbucket.org/) is another alternative. Or perhaps if you're going with AWS then you could consider [AWS CodeCommit](https://aws.amazon.com/codecommit/) and leverage the power of the AWS platform (IAM and other AWS Code* services).

Just don't host Git server yourself. There are examples of companies that did it and it didn't go as planned.
Learning HTML & CSS took me 2 weeks
Tags: beginners
Published: 2020-12-31 02:19:02

I just learn html and css over at freecode camp in 2 weeks with my cheap and slow laptop. Now i made some site https://ibrahimkhair.vercel.app/ for my personal site.

I use github, netlify, vercel and now sign up on dev.
I'm 14 years old, to be aspiring front end engineer.
Still learn, I'm from Singapore. 
Happy to join this community.

Stay safe all
My learning route for 2021
Tags: php, python, javascript, webdev
Published: 2020-12-31 02:01:40

I’ve been a software developer for 14 years (heading to 15), most of these years I worked with PHP and some of its frameworks (Laravel, CakePHP and Symfony). 

Over these years I also worked with other technologies like Javascript, CSS, JQuery, Bootstrap, OpenGEO, Openlayers, Mysql, PostgreSQL, PostGIS, SQLServer, Apache Cordoba, Jquery mobile, Ionic Framework, Android with Java and AngularJS.

As PHP can build Frontend pages too, I consider myself a Fullstack developer. Since 2020 August I took a Python course and an Advanced Javascript course to develop NodeJs applications.

My goal is to master these frameworks: Laravel (PHP), Flask or Django (Python), ExpressJS (NodeJs) then get a job with a better salary.

I would like some feedback from experienced developers to polish my learning route for 2021.

Thanks in advance.