teleren/devto huggingface dataset:
How to render an array of items in HTML & JavaScript
Tags: javascript, html, css, vscode
Published: 2020-02-09 19:10:52

I recently rebuilt by personal website and decided to just use basic vanilla HTML, CSS and JavaScript and get out of dependency hell for a bit. I thought this would be a whole lot harder than it turned out to be. In fact, the most annoying part was probably having to write regular old CSS instead of using some preprocessor like SASS or LESS. 

So when I wanted to render the projects on the page inside of a div, instead of doing like the following like in React using JSX:

## React JSX

```react
<div>
  {projects.map(project) => (
    <div>
      ...
    </div>
  )}
</div>
```

## Vanilla Javascript

```javascript
<script>
  const list = document.querySelector('#projects')

  data.projects.forEach(project => {
    // Create project 
    const projectEl = document.createElement('div')
    
    // Create content like titles and text
    ...

    // Add element to list
    list.appendChild(projectEl)
  })
</script>

<div id="projects"></div>
```

So as it turns out this was not so bad after all. It is a little bit more overhead having to write some more Javascript to get this to work. But this is what is happening in the background when you do it the React JSX way after all. So in smaller projects, why not just do it yourself?

Check out my new portfolio built using only HTML, CSS and vanilla Javascript right here:

Live: https://albingroen.com


## Thank you for reading!
CKAD - Revision - Services & Networking
Tags: kubernetes, linux, devops, docker
Published: 2020-02-09 20:57:18

A service provides an abstract way to expose an application running on a set of Pods as a network service.

For example, suppose you have a set of Pods that each listen on TCP port 9376 and carry a label `app=MyApp`:
```
apiVersion: v1
kind: Service
metadata:
  name: my-service
spec:
  selector:
    app: MyApp
  ports:
    - protocol: TCP
      port: 80
      targetPort: 9376
```

Services can be one of the following four types:

* **ClusterIP**
* **NodePort**
* **LoadBalancer**
* **ExternalName**

**ClusterIP** is the default and only provides access **internally**

**NodePort** is great for when static IP addresses are necessary, such as opening a specific IP through a firewall. It is a simple connection from a high-port routed to a **ClusterIP** using iptables or ipvs. **The creation of a *NodePort* generates a *ClusterIP* by default**. The traffic is routed from the *NodePort* to the *ClusterIP*.

**LoadBalancer** was created to pass requests to cloud provider like AWS. The address is made available to public traffic and packers are spread among the Pods in the deployment automatically.

**ExternalName** allows the return of an alias to an external service. It is used for **services not yet brought into the Kubernetes cluster** (a bit like a placeholder). Once those services are *ready* we can then change the type and traffic would flow to the internal objects.

```
kubectl proxy creates a local service to access a ClusterIP which can be useful for troubleshooting
```

## Exposing an application with a Service

We can use `kubectl expose` command which exposes a resource as a new Kubernetes service.

## Ingress

An ingress is an API object that manages external access to the services in a cluster, typically HTTP.

Ingress can provide:
* load balancing
* SSL termination
* name-based virtual hosting

## Service Mesh

We can implement a service mesh for more complex connections or resources, such as service discovery, rate limiting, traffic management and advanced metrics. 

A service mesh consists of edge and embedded proxies communicating with each other and handling traffic based on rules from the a control plane.

Typically we use [Envoy](https://www.envoyproxy.io/) and [Istio](https://istio.io/)
Hoisting in JavaScript
Tags: javascript
Published: 2020-02-09 20:56:38

---
title: Hoisting in JavaScript
published: true
date: 2020-02-09 00:00:00 UTC
description: How an old snippet from a few years ago prompted me to read more about how hoisting works in JavaScript.
tags: JavaScript
canonical_url: https://blog.gnclmorais.com/javascript-hoisting
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/9ax7p1z7rfq15f4nk3v6.png
---



[Storm Ciara][storm-ciara] is outside battering the UK and I’m going through old drafts and notes I took years ago about things I wished to write about… one day. Well, today is one of those days.

Something that caught my eye were a few lines of code that boggled my mind a long time ago:
```js
var greeting;
function greeting () { 
    console.log("hi");
}
console.log(typeof greeting); // function

var greeting = "string";
function greeting () { 
    console.log("hi");
}
console.log(typeof greeting); // string
```

When I first encountered this, I couldn’t really explain it. It’s one of those things that, even thought you’ve been working with JavaScript for a while, might caught you off-guard.

I’m a bit more knowledgeable now so the code above makes some sense. I’m not going to write a full blown article about hoisting in JavaScript, but I’ll point you to an excellent one by Scotch.io, [Understanding Hoisting in JavaScript][hoisting]. Nevertheless, I’ll try to explain what’s happening in the snippet above, because if you can’t explain something, you don’t understand it that well.

`function greeting ()` is a **function declaration**, which takes precedence over the **variable declaration** performed right before it (`var greeting;`). On the other hand, the second part of the code has a **variable assignment** (`var greeting = "string";`) which takes precedence over the function declaration below it.

The order of the declarations doesn’t matter and that’s the focus of this short post. **JavaScript reorders your code** according a few rules — in this case, [_only declarations are hoisted_][only-declarations].

_“Why hoist things in the first place??”_, you might ask. I had the same question and I found a [great answer on StackOverflow][why-hoist]! It seems to be quite useful (necessary even?) for mutually recursive functions and everything else that uses variable references in a circular fashion. Using the code from the answer as an example, we can have an `even` function that tries to use another function only declared after itself:
```js
function even(n) { return n == 0 || !odd(n-1); }
function odd(n) { return !even(n-1); }
```

[storm-ciara]: https://www.theguardian.com/uk-news/2020/feb/09/storm-ciara-hurricane-force-winds-batter-uk-transport
[hoisting]: https://scotch.io/tutorials/understanding-hoisting-in-javascript
[only-declarations]: https://developer.mozilla.org/en-US/docs/Glossary/Hoisting#Only_declarations_are_hoisted
[why-hoist]: https://stackoverflow.com/a/52880419/590525
Evolving past the test pyramid with T shaped testing
Tags: testing, opensource
Published: 2020-02-09 20:41:16

A few months back I wrote an article that is the culmination of all my thoughts around software testing, I thought I should share it here :)

**T shaped testing** uses mostly black box component testing to test the plumbing and most use cases, complemented by unit tests for edge cases and core logic, and the traditional integration tests and end to end tests. This approach produces better refactor-ability / confidence / development speed / code coverage / ease for TDD, BDD / ease for outsourcing and remote working / ease for quick quality and completeness assessments.

Taking documentation to another level of quality is another major benefit.

The over-reliance of pyramid testing on traditional unit tests locks down the implementation details and spreads the solution for a requirement over many places, making it hard to refactor later or leverage the analysis of the original problem, besides being time consuming.

If you into .net core, this [open source project](https://github.com/AlanCS/SystemTestingTools) contains examples and a [nuget package](https://www.nuget.org/packages/SystemTestingTools/) to help you implement this.

This approach has been successfully tested in back end micro services and shared libraries, and it has the potential to help with desktop applications and front end; give it a try!

Further explanation can be found at [https://www.linkedin.com/pulse/evolving-past-test-pyramid-shaped-testing-alan-sarli/](https://www.linkedin.com/pulse/evolving-past-test-pyramid-shaped-testing-alan-sarli/)
Free Themes
Published: 2020-02-09 20:36:20

## Orbit

Orbit is a free Bootstrap 4 resume/CV template designed for developers. Looking to impress your potential employer? Get this template and you can send an online resume/CV instead of a word/pdf attachment. You can easily make different versions of your online resume/CV to tailor for different job positions too.

The template comes with 6 colour schemes. The source SCSS files are included so it’s quick and easy to change the styling and colour scheme.

[Demo](https://themes.3rdwavemedia.com/bootstrap-templates/resume/orbit-free-resume-cv-bootstrap-theme-for-developers/)
[GitHub Project](https://github.com/xriley/Orbit-Theme)
Learn the Basics of Angular 9: Build a Calculator App
Tags: angular, angular9
Published: 2020-02-09 19:06:27

---
title: Learn the Basics of Angular 9: Build a Calculator App
published: true
description: Learn the Basics of Angular 9 by building a calculator app step by step
tags: angular, angular9
---

Learn the Basics of Angular 9 by building a calculator app step by step.

 ![Angular 9 basic tutorial](https://dev-to-uploads.s3.amazonaws.com/i/aoutq0uiq8xm9cz0z01a.png)

## Angular 9 Tutorial Learning Outcomes

We'll learn about concepts like Angular modules, components, and directives.

We'll also learn about Angular template syntax which includes interpolation, event binding, and property binding, etc.

For the example that we'll be building, it's a simple calculator application that implements the basic calculus operations.

You'll learn from this tutorial:

- How to install the latest version of Angular 9 CLI,
- How to initialize a new Angular 9 project,
- Understand and work with modules and components,
- Understand Angular template syntax, particularly event and property bindings,
- Listen for click events and update the UI when data changes.


## Angular 9 Tutorial Steps

These are the steps:

- Step 1 - Installing Angular CLI 9
- Step 2 - Initializing our Project
- Step 3 - Understanding Angular Modules & Components
- Step 4 - Adding our HTML Template and Styles
- Step 5 - Understanding Angular Template Syntax
- Step 6 - Listening for Click Events on the Buttons and Get their Associated Values
- Step 7 - Displaying the Value of Variables in the Template

Check out the [tutorial](https://www.techiediaries.com/angular/angular-9-tutorial-and-example/)
Hexagon Architecture with C#
Tags: architecture, csharp
Published: 2020-02-09 20:27:39

#Ports and Adapters

Reference

[A Ports and Adapters implementation in C# by maz100](https://flat9.wordpress.com/2015/03/02/a-ports-and-adapters-implementation-in-c/)

[Ports and Adapters Pattern (Hexagonal Architecture) by @jmgarridopaz](https://softwarecampament.wordpress.com/portsadapters/)

[Hexagonal Architecture 101: Decoupling your technical code from your business logic (HexArch)](https://beyondxscratch.com/2017/08/19/decoupling-your-technical-code-from-your-business-logic-with-the-hexagonal-architecture-hexarch/)
🔥 Firebase: Onboarding 📸
Tags: firebase, design, documentation
Published: 2020-02-09 20:25:22

{% link benzguo/getting-started-with-next-js-now-firebase-4ejg %}

----

> In this sub-post, I'll share some screenshots from Firebase's docs 📸

----

![Firebase – docs](https://dev-to-uploads.s3.amazonaws.com/i/r3b2tud0uw3flqn71bbi.png)

----

![Firebase - web quickstart](https://dev-to-uploads.s3.amazonaws.com/i/524if1nd24cz9w4hocl6.png)

----

To get a feel for what it's like to set up a new Firebase project, check out this post:

{% link benzguo/firebase-setup-3320 %}

{% link benzguo/zeit-now-signup-flow-49le %}
How to install tippecanoe in CircleCI
Tags: tippecanoe, vectortiles, unvt
Published: 2020-02-09 20:24:38

halsk is running tippecanoe in CircleCI. [This](https://github.com/halsk/pharmacies-tiles/blob/61b65f5c4948407fb55fd03d6430a483ff0724f8/.circleci/config.yml#L18-L26) is how he installed tippecanoe. 

```yml
    steps:
      - checkout
      - run:
          name: install dependencies
          command: |
            git clone https://github.com/mapbox/tippecanoe.git
            cd tippecanoe
            make -j
            sudo make install
```
Angular & SignalR
Tags: angular, signalr, websocket
Published: 2020-02-09 20:21:38

References:

[Google Search]
(https://www.google.com/search?rlz=1C1GCEU_pt-BRBR825BR825&ei=32dVXezWJZW55OUP3fiz4Ac&q=angular+signalr&oq=angular+signalr&gs_l=psy-ab.3..0i203l2j0l8.115808.117600..118045...0.0..0.105.759.7j1......0....1..gws-wiz.......0i71j35i39j0i67j0i203i70i249.MWSj73LF6WM&ved=0ahUKEwiswu-Bh4XkAhWVHLkGHV38DHwQ4dUDCAo&uact=5)

[Real Time Apps with TypeScript: Integrating Web Sockets, Node & Angular
By Luis Aviles]
(https://medium.com/dailyjs/real-time-apps-with-typescript-integrating-web-sockets-node-angular-e2b57cbd1ec1)

[Luis Aviles' Github](https://github.com/luixaviles/socket-io-typescript-chat)

[.NET Core with SignalR and Angular – Real-Time Charts by Marinko Spasojevic]
(https://code-maze.com/netcore-signalr-angular/)

[Hosting WebAPI using OWIN in a windows service](https://stackoverflow.com/questions/21634333/hosting-webapi-using-owin-in-a-windows-service)
Linux Post install Script
Tags: ubuntu, linux, script, bash
Published: 2020-02-09 19:31:33

Hey Guys,

I recently wrote a small script to automate the post install section of a server set up. It did okay on r/usefulscripts so i thought i'd share here.  If you're like me and break stuff all the time, saving time by not having type out all the commands when you are setting up your new machine up post install.

[https://www.reddit.com/r/usefulscripts/comments/f08c71/basic\_linux\_set\_up\_scripts/fgw97o8/?context=3](https://www.reddit.com/r/usefulscripts/comments/f08c71/basic_linux_set_up_scripts/fgw97o8/?context=3)

So after  a few positive comments and a bits of feedback i have since worked on the post install script (new name) rather than calling it a set up script.

Combining a few of them into one big one, whilst also filling out the features a bit more, looking back the first script was a bit bare.

The new scripts include :

* speedtest-cli
* Fail2Ban config
* Automatic security updates
* SSH disable root login
* SSH FTP server config
* Optional install of Wireguard VPN server -
* Optional install for docker with portainer management on port 9000
* A message of the day system stats shown on login
* System Clean up after the install

Coming Next:

* Notification / Progress system credit: u/discogravy

[https://github.com/jwandrews99/Linux-Post-Install](https://github.com/jwandrews99/Linux-Post-Install)

Any feedback is appreciated, if you have an ideas please let me know and i can potentially make them optional installs
🥑🍌🍆 Creating a Stacked Area Chart – Using React (Hooks) with D3 
Tags: react, d3, reacthooks, dataviz
Published: 2020-02-09 19:05:16

{% youtube ww54a4Xbdds %}

Hi, this is video tutorial for creating a Stacked Area Chart with D3 and React (Hooks). 

This is a follow-up to the last entry in the series, where we created a Stacked Bar Chart component. In this one, we transform our Stacked Bar Chart component to become a Stacked Area Chart component.

The code for this video you can find also on GitHub:
https://github.com/muratkemaldar/using-react-hooks-with-d3/tree/15-stacked-area-chart

Enjoy!
Seeking connections: Nothing beats knowing a real developer
Tags: swift, developer, mentor, ios
Published: 2020-02-09 18:33:49

Are you an IOS - swift developers. I want to discuss swift, but I don't know whom to tap for such discussions ( #Stackoverflow is cool, but nothing beats a real developer).


So my knowledge on swift = limited. Today I learned:

--------------


So far I have been using Int() to convert a string into a number, and swift returns an optional.


But today, I used Int() to convert from a Double to an Int and it didn't return an optional. It was shocking. I got so used to unwrapping the optional, that I thought it was needed in this case as well.


I am looking forward to learning more cool stuff, it would be cool to have a few swift connections.


Please send me info about swift communities as well, thanks
Flutter Photography UI Tutorial with Dark/Light Switch
Tags: flutter, tutorial, beginners, career
Published: 2020-02-09 18:24:44

---
title: Flutter Photography UI Tutorial with Dark/Light Switch
published: true
description: A Preview of my Flutter UI Tutorial
tags: flutter, tutorial, beginners, career
---

A minimal design take on a Photography app UI with Flutter.

Full Video on Youtube ▶: https://youtu.be/vDqGe7ugfIA

Help me by starring on Github
-https://github.com/oliver-gomes/flutter-unsplassh-ui
Extend Qiscus Multichannel Widget Functionality with Custom Callbacks
Tags: qiscus, multichannel, javascript
Published: 2020-02-09 18:16:48

In the previous part of the series, we have learned how to modify the display of our widget by using CSS. In this tutorial, I'll show you how you can extend the functionality of the widget by using custom callbacks.

By using custom callbacks, you can add more functionality for example if you want to log the user state to your own analytics server when the user has successfully logged in, or successfully opened a chat session.

For a detailed explanation, please check this [interactive screencast](https://scrimba.com/c/c7Pn2QU3)

Basically, you just need to pass a parameter called `Callbacks` as a 2nd parameter to the `Qismo` object. Refer to the screencast above for a working example.
boom - command line http tool
Tags: productivity, http
Published: 2020-02-09 17:21:43

---
title: boom - command line http tool
published: true
description: boom - command line http tool
tags: #productivity, #http
---

I have published my first npm package. 💃💃💃

boom is a cli tool built for working with collection of http requests.

{% github pranayrauthu/boom %}
iOS: Using WKWebView in headless mode
Tags: ios, swift
Published: 2020-02-09 16:59:55

This is another short post about using `WKWebView`.  Yet another useful use case can be to run `WKWebView` in the background, meaning user does not see it on the screen.

At first this can seem super easy. You will just create instance of `WKWebView` and work with it, right? Well, sort of. But there si something you need to be aware of.

_Btw I am using the term headless, because this commonly used when working with webViews in background. so you have easier time Googling_ 

`WKWebView` is optimized to not use too much resources when user is not directly interacting with it. It can detect this via its parent property to check whether it is part of the current view controller.

I found this out when my JavaScript code wasn’t working as expected in headless mode but worked perfectly fine when I had another `WKWebView` in the normal foreground mode.

Fortunately there is pretty easy solution. You can create instance with zero size frame and set it as a subview of main window of your application. Like this:

```swift
let webView = WKWebView(frame: CGRect.zero)
UIApplication.shared.windows.first?.addSubview(webView)
```

And now `WKWebView` is working as expected.

Note: Since iOS 13, there is now array `windows` of type `UIWindow` available via `UIApplication.shared` because apps can work with multiple windows. In the old templates we were dealing only with `window` property.
Remove Widget's Call to Action Button Label for Mobile view
Tags: qiscus, multichannel, javascript
Published: 2020-02-09 16:57:46

In this 3rd part, we'll remove the label of our widget's call to action button to save more screen space. A mobile device has a narrow screen width and the label make the screen looked cramped.

There's an option to remove it from the widget builder page of the [Qiscus ][https://www.qiscus.com] Multichannel Integration Page. But It'll affect both web and mobile view.
![Widget Builder](https://support.qiscus.com/hc/article_attachments/900000317483/mceclip0.png)

If we only want to remove the label on mobile view, we can do it with the help of CSS Media Query as described in this [interactive screencast](https://scrimba.com/c/cmdKnkAd).

Or if you're in a hurry just copy and paste this code snippet:

```html
<style>
@media (max-width:600px) {
   .qcw-cs-trigger-button div, .qcw-trigger-btn div {
      display: none;
   }
}
</style>
```

The following is an example if the widget is accessed from the browser
![web view](https://support.qiscus.com/hc/article_attachments/360039485034/Screen_Shot_2019-06-26_at_3.07.28_PM.png)

And if the widget is accessed from a mobile browser, the label is hidden
![mobile view](https://support.qiscus.com/hc/article_attachments/360040322673/Screen_Shot_2019-06-26_at_3.07.14_PM.png)
Expose yourself to the world
Tags: localtunnel, ngrok, serveo, freedomain
Published: 2020-02-09 16:48:35



Expose your local application without deployment with free custom domain.

![](https://cdn-images-1.medium.com/max/3200/1*bZUNQx9YZz1Ei-9B_2L8lg.png)

Create a free account : [https://packetriot.com/](https://packetriot.com/)

![Chose Free Tier](https://cdn-images-1.medium.com/max/2000/1*KElVYD2ogTwjFYQF8ul2VQ.png)

* For windows, download and unzip the the file : h[ttps://packetriot.com/docs#downloads](https://packetriot.com/docs#downloads)

* In Command line change directory to the unzipped location which contains “pktriot.exe”. Optionally the path can also be added to the system environment variable

* Run following commands to route http/https traffic to localhost

    > pktriot configure

* Choose the path and then authenticate by visiting the generated URL and select the region

* Run following command to get the host name

    > pktriot info

* Note down the host name, this host name will also be visible in [https://packetriot.com/tunnels](https://packetriot.com/tunnels)

* Optionally can update the tunnel name with following command

    > pktriot edit --name '{your tunnel name}'

* Expose your localhost port 80 over https with following command

    > pktriot route http add --domain {your host name} --destination localhost --http 80 --secure --redirect

* Run following command to start receiving traffic from outside

    > pktriot start

* You can browse with [https://{your](https://{your) host name}/ . You can also monitor the traffic by login to [https://packetriot.com](https://packetriot.com/)

### Free Domain

* Look for a domain on [https://www.freenom.com/](https://www.freenom.com/) . “.tk”, “.ml”, “.ga”, “.cf” & “.gq” domains are free.

*Note: use “.tk” etc in lookup otherwise there is a bug that you might not be able to select the domain*

* Select required domain and signup

### Route traffic from custom domain

* Login to [https://packetriot.com/](https://packetriot.com/) , under “Domains” click “Verify Domain” and add the custom domain name. It will generate the TXT Record

Go to [https://my.freenom.com/](https://my.freenom.com/) (Services > My Domains > Manage Domains > Manage Freenom DNS)

* Add a record with Type “TXT” and the Target same as generated in above step

* Add record for Type “CNAME” with any subdomain name and the Target same as [{your](https://{your) host name}.

*Note: It will take couple of minutes before the status of the domain will be changed to “verified”. You can track the status under: [https://packetriot.com/domains](https://packetriot.com/domains)*

* Run following command to route traffic from custom domain to localhost

    > pktriot route http add --domain {your subdomain e-g: example.domain.com} --destination localhost --http 80 --secure --letsencrypt --redirect

* Run following command to start receiving traffic locally from your custom domain

    > pktriot start