teleren/devto huggingface dataset:
Me, a Developer
Published: 2021-02-10 01:03:09

Hey there. My name is Todd. I'm a sysadmin, and like most sysadmins I've been working on expanding my skills into the area on the other side of "the wall". You know, the wall that people throw things over when they get so focused on one thing that they can't partner effectively with co-workers to get their projects done. The wall that divides IT into coders and operators, developers and sysadmins, and so on.

I am a "DevOps engineer" at a midsized business in Wilmington, North Carolina. We provide SaaS to customers across the U.S. I was hired at a time when the company was transitioning to a DevOps mindset. My new co-worker had been working on transforming our applications to run on OpenShift. He had a strong developer background, and my own is on the operations side. But we both like process! And we both wanted to bring our ideas about how to make IT work better to fruition.

In this new year, I want to learn Python. It's not our preferred development or scripting language at work, but there is room in the environment for whatever works. So that's what I intend to write about here, as well as scripting and OS stuff that I find interesting.
VUE JS
Published: 2021-02-10 00:37:17

What is Vue JS?
Vue is a JavaScript framework for building interfaces on the front end. It helps to organize our JavaScript files to make the user interfaces more interact.Vue is a much simpler and less complex way of adding Javascript functionality when developing an application.

My thought process for selecting how your component should function.

Since this was my first time using Vue, I started of with a basic test run by applying it my HTML code from the previous Resume assignment. To include Vue to the HTML, I needed to added the version of Vue URL to our script source tag. Just so you are aware they are two versions of Vue JS. There is the development version which is typically recommended for new users and the production version, which is used by developers familiar with the framework. In the video, I am going to explain how I was able to select elements in my HTML and use Vue JS to refer and modify these elements easier.

Links to Youtube Video: https://www.youtube.com/watch?v=1xHXDNGuRs0;
Link to codepen: https://codepen.io/flexdesign1/pen/VwmKmPe
Greetings!
Published: 2021-02-10 00:03:59

Hello there! My name is Jason; I was referred here by a good friend of mine. I am a bit nervous about joining, but I look forward to meeting more programmers. My skills are mostly self-taught, so I am not too confident in skills professionally. I started with Ruby and then moved to C++ and more. C# stuck with me the most, and I have more fun working that language than most others. I would love to learn more about the subject of my passion, video game development, and above that, programming.
Day 305 : Talk
Tags: hiphop, code, coding, lifelongdev
Published: 2021-02-09 22:49:52

_liner notes_:
- Professional : Wow! Today went by quick! Lost track of time. Got up early to plan out my slides for an upcoming talk. Got the outline done and then had a couple of meetings. After that, I created the Web Component that I'll be centering my presentation around. Got a chance to play around with the Adobe UI Web Components called Spectrum. Took me a minute to get up to speed, but it was pretty straight forward.

- Personal : Last night, I went through a bunch of tracks for the radio show this week. Did a little work on my side project. I even got in an episode of "The Watch" before I called it a night. Not a bad night.

![A pathway made of stones down the center of a field of wheat and forest on the sides and a mountain in the distance at sunset in North Bend, WA, USA](https://dev-to-uploads.s3.amazonaws.com/i/305gu8jua4de7s475u3t.jpg)

Probably spend the rest of tonight working on my slides. I'm going to do a couple of test runs tomorrow with some teammates and get some feedback. Hopefully that goes well. I think I may be caught up with "The Watch" or maybe have one more episode. Hope I can get a chance to watch it, maybe during dinner.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube 76mT-_hjg_o %}
Introducing online base64 image encoder
Tags: web, image
Published: 2021-02-15 20:52:57

---
title: Introducing online base64 image encoder
published: true
date: 2021-02-10 00:00:00 UTC
tags: web, image
canonical_url: https://swimburger.net/blog/web/introducing-online-base64-image-encoder
---

In addition to loading images on an HTML page by referencing the image via URL, you can also embed the base64 string of the image. In most cases, this is not a good idea because it will make your HTML page much larger in size and the image won't be cached by URL. Though, there are some edge cases where this is useful.

This little tool generates the base64 data URL for the file you select without uploading it to a server.  
The base64 encoding happens inside your browser. You can find this little tool here: [Online base64 image encoder](https://img2base64.swimburger.net/)

 ![Screenshot of &quot;Online base64 image encoder&quot; tool](https://swimburger.net/media/to5h3oki/img2base64-swimburger-net_-ipad-pro.png)

Alternatively, you can use the following PowerShell command on Windows: `[convert]::ToBase64String((get-content "PATH_TO_IMAGE_HERE" -encoding byte))`.  
On Linux, you can use the following command `base64 "PATH_TO_IMAGE_HERE"`.
How to create a circle using Pure CSS?
Tags: css
Published: 2021-02-10 00:00:00

---
  title: How to create a circle using Pure CSS?
  published: true
  tags: CSS
  date: Wed Feb 10 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/create-circle-using-pure-css
  cover_image: https://melvingeorge.me/_next/static/images/main-9de62961c49bb0ac7decd491fe179fd9.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/create-circle-using-pure-css)
  
You can create a circle using pure CSS. 🔥

**TL;DR**

```css
/* Make a Circle in pure CSS */
.circle {
  width: 100px;
  height: 100px;
  background: red;
  border-radius: 50%;
}
```

If you want a clearer explanation read on. 🚀

First, let's create a square shape in CSS using the same `width` and `height` since a square has `width = height`.

Let's say both `width` and `height` to be `100px` like this,

```css
/* Make a Circle in pure CSS */
.circle {
  width: 100px;
  height: 100px;
}
```

Now let's give a simple background color of `red` like this,

```css
/* Make a Circle in pure CSS */
.circle {
  width: 100px;
  height: 100px;
  background: red;
}
```

Now all we have to do is set the border radius to `50%` or greater so that it is converted to a perfect circle. It can be done like this,

```css
/* Make a Circle in pure CSS */
.circle {
  width: 100px;
  height: 100px;
  background: red;
  border-radius: 50%;
}
```

That's it! You have made a circle shape 😃.

See the code live in [JSBin](https://jsbin.com/nuhecigajo/edit?html,css,output).

To make an even smaller circle change the `width` and `height` to a much smaller pixel value.

Let's say we want a circle to be `10px` in `width` and `height`. It can be done like this,

```css
/* Much smaller Circle in pure CSS */
.circle {
  width: 10px;
  height: 10px;
  background: red;
  border-radius: 50%;
}
```

### Feel free to share if you found this useful 😃.

---
Build an API using Node.js step-by-step
Tags: vscode, node, beginners, programming
Published: 2021-02-09 23:31:47

---
title: Build an API using Node.js step-by-step 
published: true
description: Learn how to build an API using Node.js to receive data from a Firefox extension.
tags: vscode,nodejs,beginner,programming
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/biawats0tl1jtwgcb1y6.png
---

Hello everyone, 

I've been streaming a mixture of security and programming related topics on my [Twitch Stream](https://twitch.tv/mbcrump) and I've recently built an API using Node.js that receives data from a Firefox extension. I recorded part one and thought I'd share it in case you are interested in a easy to learn tutorial that you can go through at your own pace. With the mini-series, I've taken the approach of building the app over a set of videos that incorporate the skills to be a effective with Node.js, using external and internal libraries, and using JavaScript to create a Firefox extension.  

**Part 1 - Build the server using Node.js**

Video (22 mins)
[Source code](https://github.com/mbcrump/nodefirefoxtwitch/tree/main/nodev1)

{% youtube DTJ49J4geQg %}

**Part 2 - Build a Firefox Extension from Scratch that integrates with Node.js**

Video (19 mins)
[Source code](https://github.com/mbcrump/nodefirefoxtwitch/tree/main/firefoxv1)

{% youtube WiLu-2GbkFg %}

Conclusion

Stay tuned for [future streams](https://twitch.tv/mbcrump) as we build out additional functionality of this apps or you can watch the condensed version by subscribing to my [YouTube](https://youtube.com/mbcrump). 

Stay connected with me on social platforms for daily software development news.

-[Twitter](https://twitter.com/intent/follow?screen_name=mbcrump) | [Twitch](https://twitch.tv/mbcrump) | [Instagram](https://instagram.com/mbcrump) | [YouTube](https://youtube.com/mbcrump) | [GitHub](https://github.com/mbcrump) | [Website](https://www.michaelcrump.net)
[Kubernetes] Kubernetes 101: Play with Kubernetes Labs
Tags: kubernetes, k8s
Published: 2021-02-09 23:18:51

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n472xfwvdp6npt9r93gr.png)

Quick Intro to how to use Play with Kubernetes to get your Kubernetes journey start!

Blog: https://medium.com/swlh/kubernetes-101-play-with-kubernetes-labs-64d1fcbde2f3
Hotwire in Action 🚀
Tags: opensource, rails, stimulus, django
Published: 2021-02-09 22:52:41

![Hotwire.dev](https://cdn.hashnode.com/res/hashnode/image/upload/v1612841200174/LWYzrzZWr.png)

[Hotwire](https://hotwire.dev/) is a new and perfect tool to build a "just enough" or modest front-end stuff by sending HTML over the wire without using much Javascript 🥳 . In fact, one of Hotwire stack, StimulusJS is already wide-used by many awesome project and website since it [debut](https://news.ycombinator.com/item?id=16052105). The most important thing about Hotwire is we can use it in any language or backend tool, not specifically for Rails. Either Go, Php, Django, Hotwire can build with it 🔥. Cool right.

Hotwire ship with 3 main tools 🛠 (StimulusReflex is a great combination tho) ;

# Hotwire Stack

✅ [Turbo](https://turbo.hotwire.dev/)
✅ [Stimulus](https://stimulus.hotwire.dev/)
✅ Strada (soon)
✅ [StimulusReflex](https://docs.stimulusreflex.com/)

Here, I create a list of awesome Open source applications, and websites that use Hotwire in Action. For example ;

### website
- [basecamp](https://basecamp.com/)
- [CoinGecko](https://www.coingecko.com/en)
- [hey.com](https://hey.com/)
- [stackoverflow](https://stackoverflow.com/)
- [wip.co](https://wip.co/)

### open-source
- [annict](https://github.com/annict/annict) - The platform for anime addicts built with Rails and Stimulus.js.
- [boxdrop](https://github.com/marcoroth/boxdrop) - Dropbox Clone built with StimulusReflex
- [chat-hotwire-go](https://github.com/lu4p/chat-hotwire-go) - This is a simple chat app that shows how to use Go with Hotwire.
- [hnpwa-app](https://github.com/johnbeatty/hnpwa-app) - An implementation of the Hacker News PWA with Rails + Stimulus
- [hotwire-demo-chat-in-springboot](https://github.com/mbucc/hotwire-demo-chat-in-springboot) - Convert the demo video in Hotwire launch from Ruby to SpringBoot
- [hotwire-django](https://github.com/hotwire-django/hotwire-django) - Meta package to combine turbo-django and stimulus-django
- [hotwire-go-example](https://github.com/while1malloc0/hotwire-go-example) - The hotwire demo chat written in Golang
- [phoenix-hotwire-demo-chat](https://github.com/en30/hotwire-phoenix-demo-chat) - This is a Phoenix port of hotwired/hotwire-rails-demo-chat.
- and many more 🔥

## What do you waiting for ???

![](https://media.giphy.com/media/5Yt4yAH775O3wckR4f/giphy.gif)

<center><a href="https://github.com/asyraffff/Hotwire-in-action" target="_blank" rel="noopener noreferrer">Here we go 🚀</a>.</center>

![](https://media.giphy.com/media/lReVblhSRtxXtfK81w/giphy.gif)
Help me with frontend frameworks
Tags: css, webdev, help
Published: 2021-02-09 22:45:49

Hi, I have read some posts on the site where frontend frameworks like Foundation or Tailwindcss were recommended. I tried to install Foundation, with poor results. Why does everyone need npm? The reason is not clear to me, can someone explain it to me? :)

Could you recommend something like Bootstrap which does not require installations?

I had tried with pure CSS but I can't make nice sites :(

PS: I use Django as backend
Why I failed at starting a company.
Published: 2021-02-09 22:15:59

The real reason was isolation and loneliness. 

At the end of 2019 I decided to work on a project for the Martial Arts dojo I was attending. It was a membership platform. It was meant to handle recurring student dues, and manage payment processing, credit cards, etc. 

When people would ask me about what I was doing, I really hated explaining it, dreading the, doesn't XYZ do that? "My yoga studio uses XYZ and it's pretty good.". 

I took on the react frontend and a node-graphql backend at the same time, and it was a lot of work to build. I churned and churned and had a hard time getting things done.

The relationships around me suffered. My partner was supportive and helpful but I was definitely not present with them, and I had my bouts of irritability.

It was all I thought about. I couldn't really socially hold a conversation about anything else.

My savings was being drained, and the financial pressure would be looming over my head.

The isolation, lack of sleep, poor eating habits, lack of exercise all were a recipe for disaster.

The biggest irony is I had stopped training in martial arts because I needed to spend that time building this platform. Let me reiterate, I had gave up the thing I was most passionate about to spend time being sedentary in front of a desk.

I ended up quitting the project when I had a gotten a job opportunity. The promise of having health insurance, and an income was a weight off my shoulders. 

The lesson from all of this is the need for a partner to help get you through those times, to feed each other with energy when shit is at its worst. 

If you're currently building something alone, and need someone to brainstorm with or just chat about literally anything else please reach out and we can schedule some time to chat on the phone. I would love to help anyone else struggling, perhaps I can help because I've been there. Contact information available [reggi.com](http://reggi.com).
The inspiring story of BASTL Instruments
Published: 2021-02-09 21:45:48

A couple of days ago I went down a rabbit hole. I started the deep dive into learning about Synthesizers. You know the thing that looks like a piano keyboard but makes robot noises. 

My journey took me from youtube to ebay, and back again. I was scowering lists of "Top 10 best beginner synths". Eventually I found the world of Modular Synthesizers. 

These things just look cool.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dtz2xh2i146ap11lbg8i.jpg)

It looks like being at the helm of a spaceship.

The programmer / engineer in me lights up a like a little kid. Imagine the possibilities. Is it possible I can create a sound that nobody else ever created? Something original? Something emotional? Something rad? Turns out this is a very expensive hobby. Each Module can run well into the hundreds. 

I soon started coming across one module brand over and over BASTL. Then I found this: [Bastl Instruments Cuckoo Documentary 2017](https://www.youtube.com/watch?v=K4oOmcm0NGY&t=651s). 

BASTL makes beautiful instruments.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c9uygz2ryqibzh8vztuo.jpg)

It's a documentary of the people behind BASTL working on the company. They're a passionate crew who get friends to help out and solder components. This heavily reminded me of the early days of Apple, just a bunch of passionate tinker-people / hackers making things for themselves and their community.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ha5bj8y6hf2ld2nyx7jv.png)

I love this ethos. I love the combination of people working on the team. I love that they're making a physical device, a thing, and how small and scrappy the operation is. I love how they're good at what they do. 

Software developers can learn a great deal from the people at BASTL. They're not looking for an IPO, or investor funding, they're trying to create great musical instruments and share them with others. There's more here then just money. 

I'd love it if we could embrace this community ethos, teach others, facilitate more hacker spaces. Build things that people can use to express themselves. Monetization is not an end goal.
How to Ship Software Quickly, Safely and Reliably 
Tags: techtalks, programming, webdev
Published: 2021-02-09 21:29:06

Def Method is hosting a tech talk webinar next Friday, February 19th at 12pm-12:45pm ET on How to Ship Software Quickly, Reliably, and Safely. 

In this webinar, we will show you how to ship software quickly, reliably, and safely. Whether you're an engineering leader or a member of an engineering team and your team is struggling to release regularly, join to understand the foundations for making regular releases a reality. If your team is already releasing software regularly, join us to learn new ideas on how to further improve workflows.

We’ll discuss factors that influence the frequency of releases, what enables more frequent releases, common deployment issues and how to address them, how system complexity impacts deployment ease, and much more.

It's a free tech talk: rsvp here, https://us02web.zoom.us/webinar/register/9116129060962/WN_TUswSv6dQ7O-JZgMT2QcKQ

#webdev
Create Arkanoid on React and Raxy
Tags: react, javascript
Published: 2021-02-09 21:04:29

{% codesandbox raxy-demo-arkanoid-kwrfm%}

Create Store in [Raxy](https://github.com/Tetragius/raxy)
```typescript
const initStore: IGame = {
  game: { width: 660, height: 450 },
  bricks: [{ x: 0, y: 0 }],
  base: { x: 0, y: 0 },
  bat: { x: 150, y: 52, height: 8, width: 150 },
  ball: { x: 150, y: 60, stick: true, a: Math.PI / 4, r: 15, k: 1 }
};

const instanse = raxyReact(initStore);
export const { store, transaction, subscribe, useRaxy } = instanse;
```

Create main game service for collision check
```typescript
import { subscribe } from "./store";
subscribe("update", (e) => {}); // subscribe to store update
```
[in codesandbox](https://codesandbox.io/s/raxy-demo-arkanoid-kwrfm?file=/src/service.ts:0-36)

Create score counter
```typescript
import React from "react";
import { useRaxy } from "./store";

export default function Score() {
  const { state } = useRaxy((store) => ({
    score: store.bricks.filter((brick) => !brick.removed).length
  }));

  return <div className="score">Blocks : {state.score}</div>;
}
```

Create ball
```typescript
import React, { forwardRef } from "react";
import { useRaxy } from "./store";

const Ball = forwardRef((props, ref: any) => {
  const { state } = useRaxy((store) => ({ ball: store.ball }));

  return (
    <div
      ref={ref}
      className="ball"
      style={{ bottom: `${state.ball.y}px`, left: `${state.ball.x}px` }}
    />
  );
});

export default Ball;
```

And then create `Brick` component with colllision check [in codesandbox](https://codesandbox.io/s/raxy-demo-arkanoid-kwrfm?file=/src/Brick.tsx)

Finally create `Game` component that binds all the others [in codesandbox](https://codesandbox.io/s/raxy-demo-arkanoid-kwrfm?file=/src/Game.tsx:404-1085)

Pay special attention to the code block
```typescript
  const { store, state } = useRaxy(
    (store) => ({
      bricks: store.bricks,
      game: store.game
    }),
    { game: { ignoreTimeStamp: true }, bricks: { ignoreTimeStamp: true } }
  );
```

```typescript
{ game: { ignoreTimeStamp: true }, bricks: { ignoreTimeStamp: true } }
```
This part says - do not redraw the component when changing children in the store.
Thus, when the ball moves and collisions, only score, a bat, a ball and a block with which it collided will be redrawn
Load Balancing Building Blocks - Overview
Published: 2021-02-09 20:51:17

This is a long form version of [my talk at SRECon EMEA 2019 - Load Balancing Building Blocks](https://www.usenix.org/conference/srecon19emea/presentation/lexmond). But it's turned into a bit of a brain dump, writing down what I've learnt.

My alternative title was "What I wish I knew about (Network) Load Balancing".

---

## Why do we need Load Balancing?
Load balancing essentially comes down to spreading requests across multiple servers. There are a few common reasons to do so:
1. we have too many requests for a single server to handle
2. we are defending against the failure of an individual unit of capacity
3. we want to be able to gracefully add and remove units of capacity

The first is easy to understand - if your server can only handle 100 requests per second (rps) before melting down/degrading, but you're getting 150 rps of traffic, you probably need to either upgrade the server (scale up) or add more servers (scale out).

You can probably scale up, but you can't always do that - you'll hit a limit eventually, be it technical (you want more cores than available) or financial (the next dollar you spend gets you less performance than the last dollar).

Reasons 2 and 3 are a bit more handwavy. I'm specifically mentioning "individual unit" because we're not always operating on the level of a single server depending on _where_ we're doing the load balancing. If you're (un)lucky enough to worry about multiple racks in a datacenter, you can start treating racks as your unit of individual capacity.

![Datacenter Scale, XKCD](https://imgs.xkcd.com/comics/datacenter_scale.png)

What they both come down to is the need to explicitly control where traffic gets sent to based on the health of the server we're talking to.

Why is this important? Servers don't stay online indefinitely. There's random hardware failures, and you (usually) need to restart for maintenance/operations like kernel upgrades. My personal site going down for an upgrade is one thing. If you're depending on your site to make money, you want to keep the site up.

With a load balancer we can allow a service being stopped to mark itself as unhealthy so it stops getting new traffic, instead of continuing to receive traffic that ends up in a black hole. The load balancer can be your [router in a blue/green deployment](https://martinfowler.com/bliki/BlueGreenDeployment.html).

Tentative Topics:
1. Overview (this)
2. Proxy type load balancers (L4 & L7)
3. Getting traffic to the datacenters
4. How do PoPs help?
5. Global load balancing
6. MagLev load balancers
7. Putting it together
Hello! Looking for feedback on a new automated DevOps platform!
Tags: devops, kubernetes, security, automation
Published: 2021-02-09 20:51:03

We are now scheduling demos and onboarding new customers for our new turnkey DevOps solution! Feel free to reach out or email me. Considering this is a new product, we would love to at least get your feedback and input. Thanks!

afowler@cornerstonets.net


https://cornerstonets.io/zeero/