teleren/devto huggingface dataset:
Weeknotes #1
Published: 2019-02-17 21:45:08

---
title: Weeknotes #1
published: true
tags: 
canonical_url: 
---

Saw this “Weeknotes” idea on some [other blogs](http://daverupert.com/2019/02/weeknotes-2/) and decided it’s a good idea. For a while I was trying to write an article every week on [dev.to](https://dev.to/sirtimbly) – but I missed week 6 and now it’s hard to get back on the habit. Maybe if I’m adding some value to my personal blog again I can be a little more motivated to write.

## Monday

Watched too much twitch. Apex Legends looks so awesome.

Set up perforance monitoring of an app through [Calibre](https://calibreapp.com) - It’s really excellent.

Looked at the latest version of [UI Engine](https://uiengine.uix.space) to see if it’s a good basis for my next design system. It can display plain HTML or handlebars templates like Fractal, but it also supports displaying Vue and React components, so that’s a pretty good option. Latest version has some great improvements in configuration also.

## Tuesday

Found [uptime robot](https://uptimerobot.com). Good free plan. Found an [interesting blog from Remy Sharp about rebuilding the very first web browser at CERN on the 30th anniversary of the web](https://remysharp.com/2019/02/12/cern-day-1).

## Wednesday

Lot’s of code reviews today. Hunting down the domain registrar for a client to see why their old website hosting dissappeared. Mystery. If it weren’t for [the wayback machine](//archive.org) we would lose a lot more websites due to neglect.

## Thursday

Spent a lot of time building a initial prototype serverless+FRETS app on Zeit Now. Amazing stack. Will have to write more. It is totally possible to deploy [serverless functions written in TypeScript without pre-compiling](https://zeit.co/blog/scalable-apps-with-typescript-and-now-2).

## Friday

Discussed CSS and HTML with my mentee. Lots of basic rules like when to use `position`. The concepts of selector specificity, and background images. Saw a really weird thing happen when viewing a flex element on Chrome mobile viewport emulator. The whole flex item shrunk down to fit in the available flexbox space… interesting. Setting a pixel value on the flex item seemed to solve it.

Saw this article about UX and login forms from Brad Frost. [Don’t Get Clever with Login Forms](http://bradfrost.com/blog/post/dont-get-clever-with-login-forms/).
Emoji Error in Chrome Extension HTML
Tags: html, unicode, emoji
Published: 2019-02-21 03:28:52

---
title: Emoji Error in Chrome Extension HTML
published: true
tags: html, unicode, emoji
canonical_url: https://www.slightedgecoder.com/2019/02/17/emoji-error-in-chrome-extension-html/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/zz88jgwzlbnk7syxg54m.jpg
---

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_Photo by [Bernard Hermant](https://unsplash.com/photos/bSpqe48INMg?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/search/photos/emoji?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_

I’ve had a problem where I was trying to display an Emoji in a Chrome Extension header of default popup HTML, `page_action.html` (specified by `page_action -> default_popup` in `manifest.json`).

But got the jumbled up characters instead.

 

![Emoji displayed as gobbledygook](https://i1.wp.com/www.slightedgecoder.com/wp-content/uploads/2019/02/2019-02-16_23-00-15.png?w=1170&ssl=1)<figcaption>Emoji displayed as gobbledygook</figcaption>

The problem was that I had to instruct Chrome that I am using a unicode by adding a charset meta tag.

{% gist https://gist.github.com/dance2die/ab0741ac11b3116d0020075d7d87c8bc %}
<figcaption>Character Set set to UTF-8<br></figcaption>

This has fixed the issue and shows the cute 🐥 emoji correctly in the Chrome Extension popup.

![You can now see the cute baby chick](https://i2.wp.com/www.slightedgecoder.com/wp-content/uploads/2019/02/emoji-shown.jpg?w=1170&ssl=1)<figcaption>You can now see the cute baby chick 🐥</figcaption>

_The post [Emoji Error in Chrome Extension HTML](https://www.slightedgecoder.com/2019/02/17/emoji-error-in-chrome-extension-html/) appeared first on [Sung's Technical Blog](https://www.slightedgecoder.com)._
Moving Away from AMPPS for Local Dev
Tags: webdev, learning, lemp, ampps
Published: 2019-02-17 04:53:51

---
title: Moving Away from AMPPS for Local Dev
published: true
description: My journey and experience of setting up my own local dev env
tags: webdev, learning, lemp, ampps
cover_image: https://thepracticaldev.s3.amazonaws.com/i/3mcdth4r0b3kma92q0h0.png
---
Ever since I started web development, I've been using [WAMP](http://www.wampserver.com/en/) and later on [AMPPS](https://www.ampps.com/), which is just WAMP/[MAMP](https://www.mamp.info/en/) with a better UI. But I feel I've been taking environment-setup for granted, and want to move away from that.

Since I've been introduced to [Docker](https://www.docker.com/) at work, I've been wanting to learn how to setup my own local development environment. At, work, the tech director would be the one to do the setup process, and I would just run it. But I was curious in wanting seeing how the different pieces come together--to through the process so I better understand the deployment side of web development. This aslo helps me be more effective as troubleshooting problems during the setup process.

I initally tried doing on my existing Windows machine. So I went and got a MBP, since Mac comes preinstalled with PHP and MySQL. Also it being based off Unix makes it simpler to run `bash` commands and scripts too!

Instead of diving straight into Docker, I decided to start simple and see if I could just get a local dev server running. After 3 days of trial and error and much Googling, finally managed to get an existing project running on Valet.

Through the whole process, I learned how to use [Homebrew](https://brew.sh/) and [Valet](https://laravel.com/docs/5.7/valet) The biggest challenge I faced was trying to get Sequel Pro connected to localhost MySQL.

Next setup is figuring out how to write the Docker scripts for a typical LEMP setup. Then figure out how to setup local dev environments specifically for [Laravel](https://laravel.com/) and [Craft](https://craftcms.com/). I know there's [LaraDock](https://laradock.io/) for Laravel... would that also work for Craft (or CraftCMS)?
Adapter Design pattern [structural]
Tags: appdev, blog, concepts, designpattern
Published: 2019-02-26 03:18:59

---
title: Adapter Design pattern [structural]
published: true
tags: appdev,blog,concepts,Design Pattern
canonical_url: https://itscoderslife.wordpress.com/2019/02/17/adapter-design-pattern-structural/
---

 **Motivation** : When we need to adapt a framework but we cannot or do not want to modify its interface, yet we want to use it. The aim of the Adapter is to take the incompatible interface and adapt it to the one we need.

- The Adapter should be used to make things work after they are designed. 
- Adapter is a right fit only when functionality is available but not in right interface.
- Choose the adapter if you cannot change the source code of the incompatible type. 
- The Adapter is what actually adapts the incompatible interface to the one we require.
- Don’t use an Adapter if you can modify the implementation. 
- You can also wrap the Adapter object in a dedicated Adapter class which exposes the API we need.

> The Adapter pattern converts an existinginterface to another interface, which is required to make it compatible with the rest of the software system.

This pattern is useful when we need to integrate a component that provides similar functionality to other components in the system, but comes with an incompatible interface. 

Example: What do we do when we have a HDMI port on our laptop and we need to connect it to a monitor with VGA? We use an adapter or a converter.

Let’s say you need to build an Photo sharing app which edits a photo and shares it on all social media – but interface for each one is different with various parameters. Facebook has its own parameter list, Twitter has different set, Tumblr has a different set. So we write a common (adapter) interface instead of using different interface for each of them. This keeps your app code clean and readable.

**Summary** : The Adapter pattern converts an incompatible interface into one that we need. The adapter can save us from a lot of refactoring work when integrating incompatible interfaces. By using the Adapter, we do not have to refactor our code to use the adaptee’s (framework’s) incompatible interface.

A **common mistake** we do is trying to adapt a component which does not provide the required functionality.
I built my first React Native app
Tags: reactnative, javascript, ios
Published: 2019-02-17 01:21:11

---
title: I built my first React Native app
published: true
description: About my first React Native app 
tags: #react-native #javascript #ios
---

Hello Developers,

This is my first post on Dev.to and it's about a very first app I developed using React Native. It's a simple and basic calculator app which does, yes you guessed it right, simple calculations.

#### What I learned:

Well, this is just a basic app so I did not learn React Native in much depth. But this app helped me learn things like,

- React Native syntax
- A different way to style components (without using CSS files)
- How to pass values between two different components
- How to set component state

#### What I missed from the web development world:

I really missed a simple way to style buttons using React Native. React Native **Button** component does not have `style` property of its own.

(Although, I learned that you can always create a custom button using [TouchableOpacity](https://facebook.github.io/react-native/docs/touchableopacity))

If anybody is interested please check out this cool calculator app here
{% github https://github.com/zerosand1s/ReactNative-Calculator %}

And this is what my calculator app looks like

![iPhones SE](https://thepracticaldev.s3.amazonaws.com/i/ykipqwuv2nj74rb4twk0.png)

![iPhones X](https://thepracticaldev.s3.amazonaws.com/i/zknlfgxdswokxq8qb93d.png)
Discovering the Durable Functions API - Retrieving the orchestration status (DurableOrchestrationClient part 2)
Tags: azure, serverless, dotnet, tutorial
Published: 2019-09-04 12:05:26

---
title: Discovering the Durable Functions API - Retrieving the orchestration status (DurableOrchestrationClient part 2)
published: true
tags: azure, serverless, dotnet, tutorial
series: Durable Functions API
canonical_url: https://blog.marcduiker.nl/2019/02/17/durable-functions-api-durableorchestrationclient-2.html
---

![Methods in DurableOrchestrationClientBase](https://blog.marcduiker.nl/assets/2019/02/10/DurableOrchestrationClientBase2_900.png)

## DurableOrchestrationClient(Base) class - Retrieving status

This post is the second part of a series of blogs/vlogs to discover the Durable Functions API.

<!--more-->

In the video linked below, I’m looking into the functionality from the [`DurableOrchestrationClient`(`Base`)](https://github.com/Azure/azure-functions-durable-extension/blob/master/src/WebJobs.Extensions.DurableTask/DurableOrchestrationClientBase.cs) class, which can be used to retrieve the status of orchestration instances.

These are the methods to retrieve the status of **one** orchestration and return a [`DurableOrchestrationStatus`](https://github.com/Azure/azure-functions-durable-extension/blob/master/src/WebJobs.Extensions.DurableTask/DurableOrchestrationStatus.cs) object:

- `GetStatusAsync(string instanceId)`
- `GetStatusAsync(string instanceId, bool showHistory);`
- `GetStatusAsync(string instanceId, bool showHistory, bool showHistoryOutput, bool showInput = true);`

These are the methods to retrieve the status for **multiple** orchestrations and they return an `IList<DurableOrchestrationStatus>`:

- `GetStatusAsync(CancellationToken cancellationToken = default(CancellationToken));`
- `GetStatusAsync(DateTime createdTimeFrom, DateTime? createdTimeTo, IEnumerable<OrchestrationRuntimeStatus> runtimeStatus, CancellationToken cancellationToken = default(CancellationToken));`

Here’s the video, please give it a thumbs up if you like it and subscribe to my channel if you haven’t done so already:

{% youtube d5fsidj_EDs %}

### Resources

- GitHub repo: [github.com/marcduiker/demos-azure-durable-functions](https://github.com/marcduiker/demos-azure-durable-functions).
- Microsoft docs: [Durable Functions HTTP API](https://docs.microsoft.com/en-us/azure/azure-functions/durable/durable-functions-http-api).

### Links to other posts in this series

- [Starting Orchestrations (DurableOrchestrationClient Part 1)](/marcduiker/discovering-the-durable-functions-api-starting-orchestrations-durableorchestrationclient-part-1-52ic)
- Retrieving the Orchestration Status (DurableOrchestrationClient Part 2)
- [Purge & Terminate Orchestrations (DurableOrchestrationClient Part 3)](/marcduiker/discovering-the-durable-functions-api-purge-terminate-orchestrations-durableorchestrationclient-part-3-59g6)
Roman Numeral Converter
Tags: beginners, discuss
Published: 2019-02-16 23:33:04

---
title: Roman Numeral Converter
published: true
description: How did you solve it?
tags: beginner, discuss
---

My coding education journey has been a bit, disjointed to say the least. I've stop started on [freeCodeCamp](freecodecamp.org), CS50, other tutorials, books, and just hanging out with smart people. I made it a goal to go back and get some of the certifications I bounced around on this year, and today solved the "Roman Numeral Converter" on freeCodeCamp. I'd love to know how others solved this. Because this was just the first idea I came up with and I'm sure there are many other ways to get it done!

What are the pros and cons of your solution? 

Here's mine: ![RomanNumeral](https://pbs.twimg.com/media/DzkEvB6X0AAHpd0?format=jpg&name=large)
A collection of apps that I developed in Flutter for implementing custom UI/UX designs
Tags: flutter, ui, ux, collection
Published: 2019-02-16 22:03:16

---
title: A collection of apps that I developed in Flutter for implementing custom UI/UX designs
published: true
description: Here you will find an updated collection of Flutter projects that I developed with the purpose of increasing my skills in implementing UI/UX designs
tags: #flutter #ui #ux #collection
---

In my [flutter-ui-ux-designs](https://github.com/CRivasGomez/flutter-ui-ux-designs) GitHub repository you will find a collection of apps that I developed in Flutter with the purpose of mastering the necessary skills for implementing custom UI/UX designs in Android and iOS.

All the apps are classified by topic and contain the corresponding references to the original UI/UX designs.

## Authentication

### Animated Background

#### [Original design](https://www.uplabs.com/posts/ios-login-template-freebie) by [Mike Ivanchyshyn](https://www.uplabs.com/imvasyl):

![Original design](https://thepracticaldev.s3.amazonaws.com/i/4p3683coexw63jd2md1f.gif)

#### iOS demo:

![iOS demo](https://thepracticaldev.s3.amazonaws.com/i/4m7ve4p83x6dtzinlgw2.gif)

#### Android demo:

![Android demo](https://thepracticaldev.s3.amazonaws.com/i/3pls9ukawr51g5shwssz.gif)

### Minimal Login

#### [Original design](https://www.uplabs.com/posts/minimal-login-light-dark-version) by [Anmol Arora](https://www.uplabs.com/anmol3107):

![Original design](https://thepracticaldev.s3.amazonaws.com/i/8crmzkveqtppyrsryh5m.png)

#### iOS demo:

![iOS demo](https://thepracticaldev.s3.amazonaws.com/i/7pupa0evvoxohahv1hk9.gif)

#### Android demo:

![Android demo](https://thepracticaldev.s3.amazonaws.com/i/ryh94v4lq1sh4d092iam.gif)

### Taxigola

#### [Original design](https://www.uplabs.com/posts/login-ui-8357f9ec-e05d-47b2-8902-f4229c307e8f) by anonymous:

![Original design](https://thepracticaldev.s3.amazonaws.com/i/ue8ti2domlw1nce30tq5.png)

#### iOS demo:

![iOS demo](https://thepracticaldev.s3.amazonaws.com/i/152k51bj2sgqcay8429u.gif)

#### Android demo:

![Android demo](https://thepracticaldev.s3.amazonaws.com/i/8a44jusrvjyz0flqhty1.gif)

## Onboarding

### Fitness

#### [Original design](https://www.uplabs.com/posts/fitness-app-onboarding-16ea7d31-a12c-49f8-b70c-e367cf651425) by [Anastasia Ageeva](https://www.uplabs.com/aaz127):

![Original design](https://thepracticaldev.s3.amazonaws.com/i/7sse2lwgtakjxt7s1x0t.png)

#### iOS demo:

![iOS demo](https://thepracticaldev.s3.amazonaws.com/i/owmx7btcv7q12oq114s5.gif)

#### Android demo:

![Android demo](https://thepracticaldev.s3.amazonaws.com/i/wc4qj8na7yy92k4nyprv.gif)

### Party Finding

#### [Original design](https://www.uplabs.com/posts/party-finding-concept) by [Lorenzo Restuccia](https://www.uplabs.com/lorenzo_restuccia_8):

![Original design](https://thepracticaldev.s3.amazonaws.com/i/czgsqvf6isycsemqu2ii.png)

#### iOS demo:

![iOS demo](https://thepracticaldev.s3.amazonaws.com/i/tx0bpr53y3aao73uw2yj.gif)

#### Android demo:

![Android demo](https://thepracticaldev.s3.amazonaws.com/i/knbbkcin8bl0sp1e41kg.gif)
Angular Jest Base From Scratch
Tags: angular, jest, pwa
Published: 2019-02-16 18:39:09

---
title: Angular Jest Base From Scratch
published: true
description: 
tags: angular, jest,pwa
---

# @Repo Link - [Angular-Z-Base](https://github.com/DhivakaranRavi/Angular-Z-Base)

 This Base helps you create an angular application without CLI  and create angular from depth. check out the link.


  ![Angular](https://raw.githubusercontent.com/DhivakaranRavi/Angular-Z-Base/master/src/assets/images/logogit.png)
What Is the Future Of Virtual Reality?
Tags: vr, ar
Published: 2019-02-16 18:10:11

---
title: What Is the Future Of Virtual Reality?
published: true
description: Thanks to modern technologies, the world around us go far beyond the physical objects. We can now visit places we have never been to and experience unique activities from any place in the world. The striking improvements that augmented and virtual realities bring to our lives cannot remain unnoticed. Numerous activities, industries, and businesses have reached a higher level of service after they employed VR technologies into their processes. The interest to related topics is tremendous; active discussions and considerable contributions built a hype even children know about these days. Nevertheless, the sphere is quite active and innovations appear all the time. To help our readers to keep a hand on a pulse of the state-of-art technologies, in this article we are going to review most interesting development projects and fascinating details about the future of VR. https://jelvix.com/blog/future-of-virtual-reality 
tags: VR, AR
---
Control the colors in your project
Tags: colors, extract, hex, rgb
Published: 2019-02-08 12:56:55

---
title: Control the colors in your project
published: true
description: Audit and fix color definitions.
tags: colors, extract, hex, rgb
---
Sometimes you may face this kinds of projects:

![Example](https://i.imgur.com/667goev.png)
<figcaption>Hard case, huh?</figcaption>
which bring you a little discomfort in the stomach. Today we'll talk about colors in particular and how they can be organized.

## Audit
One of the great options is to use online tools, like cssstats.com

![Example](https://i.imgur.com/mNhdfLX.png)
<figcaption>dev.to on cssstats.com</figcaption>

The issue with it that it shows only the colors that appear on the single page, so if you have code-splitting, some colors might be missing.
    I had a need something that would just show the colors used in the source files, but there wasn't anything, so I had to write a small utility [colors-in](https://github.com/omaiboroda/colors-in). It traverses the folder end extracts used colors:

![colors-in](https://i.imgur.com/X7ayPGN.png)
<figcaption>Colors in src folder</figcaption>

## Fix
Having this you can look at your the designs UI Kit or talk to your design to define the colors you're gonna use across the project.

At that point, we'd a need to "merge" similar colors and there's one approach you can do it. Since all colors are living in 3-dimensional `Red, Green, Blue` space, we can calculate the distance between them:

![colors-in](https://wikimedia.org/api/rest_v1/media/math/render/svg/06cdd86ced397bbf6fad505b4c4d91fa2438b567)
<figcaption>Euclidean distance</figcaption>

From my empirical feeling, those colors that are having less than 10% color difference can be deprecated in favor of more often used in a pair.

![colors-in](https://i.imgur.com/eQ7DHi7.png)
<figcaption>Difference between two shades of gray with npmjs.com/package/color-difference</figcaption>

Other things you can do:
* Unify color format to hex;
* Agree on 6 digits hex format;
* Remove unnecessary opacity layer;

In our case we were able to reduce the number of unique color definitions from 29 to 14:
Before:

![colors-in](https://i.imgur.com/zmwhwPP.png)
<figcaption>29 color definitions</figcaption>
After:

![colors-in](https://i.imgur.com/9BDCvPg.png)
<figcaption>14 color definitions</figcaption>

So if you have that "zoo" - make an Audit. Or if you keep your colors in an organized way - check if you forgot to use it somewhere else with `>colors-in src`;
Install Node.js on a Raspberry Pi
Tags: raspberrypi, node, javascript, iot
Published: 2019-02-16 17:27:39

---
title: Install Node.js on a Raspberry Pi
published: true
cover_image: https://thepracticaldev.s3.amazonaws.com/i/lp5zt9f5uo077upeh62y.jpg
description: Seamless installation without using binaries or package managers.
tags: raspberrypi, nodejs, javascript, iot
---

**This post is taken from my [blog](https://vorillaz.com), so be sure to check it out for more up-to-date content**

If you want to start developing with Node.js and Raspberry Pi boards you may found yourself troubled, especially if you own Raspberry Pi Zero or Zero W. The thing is that ARMv6l architecture is no longer supported by NodeSource binaries, thus installing Node.js with `apt-get`, the Linux package manager, is not possible.

You can always download the binary, load it into your board and install Node.js but instead in this tutorial, we are going to use the official Node.js distribution repository and automate the process.

## Node.js releases
In the official [Node.js distribution repository](https://nodejs.org/dist/) you can find the official releases as well as builds for different architectures listed. We are interested in the ARMv6l binaries: for instance, if you want to install the `v9.9.0` version, you have to look for the relevant resource.
In our case, it will be `https://nodejs.org/dist/v9.0.0/node-v9.9.0-linux-armv6l.tar.gz`.

 ## Installing Node.js
SSH into your board and execute the following command
```bash
curl -o node-v9.9.0-linux-armv6l.tar.gz https://nodejs.org/dist/v9.9.0/node-v9.9.0-linux-armv6l.tar.gz
```
The command above will download the binary to your device, afterward, we will unzip the contents as:
```bash
tar -xzf node-v9.9.0-linux-armv6l.tar.gz
```
Finally, we will add Node.js to the correct location and expose it as globally available command using:
```bash
sudo cp -r node-v9.9.0-linux-armv6l/* /usr/local/
```
The copied binaries are now exposed to your `$PATH` and you can test that everything works as expected just by checking the NPM and Node.js versions :
```bash
~ node -v
└── v9.9.0
~ npm -v
└── 6.4.1
```
In order to be safe with future updates, you will also have to install Git since NPM is heavily coupled with it. You may install Git as:
```bash
sudo apt-get install git
```
## Final thoughts
You can always use [Balena](https://www.balena.io/docs/learn/getting-started/raspberry-pi/nodejs/) in order to automate the installation and future upgrades. Also, there is a lovely, curated [repository](https://github.com/sdesalas/node-pi-zero) with plug and play installation scripts for Raspberry Pi Zero and Raspberry Pi Zero W devices.

## Purchase Raspberry Pi boards
You can purchase Raspberry Pi 4 online from [Seeed Studio](https://www.seeedstudio.com/Raspberry-Pi-4-Computer-Model-B-4GB-p-4077.html).