teleren/devto huggingface dataset:
Deploy Static Web Apps with GitHub Pages
Tags: github, vue, deploy, serverless
Published: 2020-11-19 17:54:01

## GitHub Pages

You can use GitHub Pages to host a website about yourself, your organization, or your project directly from a GitHub repository. It is a **static** site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process and publishes a website. You can see examples of GitHub Pages sites in the <a href="https://github.com/collections/github-pages-examples" title="GitHub Pages examples collection">GitHub Pages examples collection</a>.

You can host your site on GitHub's `github.io` domain or your own custom domain. We'll talk about hosting with a custom domain in later parts of this series.

To publish a user site, you must create a repository owned by your user account that's named `<username>.github.io`. To publish an organization site, you must create a repository owned by an organization that's named `<organization>.github.io`. Unless you're using a custom domain, user and organization sites are available at

`http(s)://<username>.github.io` or `http(s)://<organization>.github.io`.

The source files for a project site are stored in the same repository as their project. Unless you're using a custom domain, project sites are available at

`http(s)://<username>.github.io/<repository>` or `http(s)://<organization>.github.io/<repository>`.

## Deploy Your Project

Okay, so much theory. Let's publish our project now.

### Create a repository

   Head over to <a href="https://github.com/" title="GitHub">GitHub</a> and <a href="https://github.com/new" title="Create a new repository">create a new repository</a> named username.github.io, where username is your username (or organization name) on GitHub.

### Clone the repository

```sh
  git clone https://github.com/username/username.github.io
```

### Hello World

Enter the project folder and add an index.html file:

```sh
  cd username.github.io
  echo "Hello World" > index.html
```

### Push it

Add, commit and push your changes:

```sh
  git add .
  git commit -m "Initial Commit"
  git push -u origin master
```

### Done
Fire up a browser and go to **https://username.github.io**.

> Hosted directly from your GitHub repository. Just edit, push and your changes are live.

## Whats Next?

How cool is this? A complete web hosting just in seconds and for completely free. 💵🙌💸

In the next part of the series, I'll show you how to deploy VueJs apps with Github Pages. Till then, Have fun. Cheers 🥳
Focused On: Culture
Tags: culture, startup, growth
Published: 2020-11-19 17:53:18

At [Focused Labs](https://focusedlabs.io/), we hold a weekly *Culture Lunch* to host important conversations about our work life. Although our company still has its youth, the seasoned team can draw from a treasure chest of experience - and it's important that we share this kind of wealth. 

About a month ago, [Austin](https://www.linkedin.com/in/austinbv/) set the stage for a conversation to define our own work culture. 

It's hard not to adopt an aspirational tone when writing your culture down (especially for the outside world). Conversations, though, draw out the truth in increments, allowing everyone to contribute their experience. Reading back on our notes from the conversation, I'm noticing that the written product of our brainstorm carries both *aspiration* **and** *present quality* - we set a high standard of quality, but aren't afraid to admit that we have to be constantly improving to maintain that standard.

Having recently joined Focused Labs, this was a critical early opportunity for me to hear the values of my new colleagues directly - and contribute my own. Building great relationships takes time and trust, and this conversation gave me a foundation of understanding to start with. I think the approach of openly mapping your culture can be incredibly valuable, but it is hard to earn the trust that it requires. I hope that by sharing our experience, it can be a guidepost for others - and a force of accountability for us.

-[Ryan](https://www.linkedin.com/in/ryantaylor3/)


---

*Below is the product of our 10/19/2020 brainstorm about Focused Labs culture, lightly edited for readability.*

## **Why We Do What We Do?**

❤️  Love your craft
👂  Listen First
🧠  Learn Why

### *What is our* **culture**?

- We build our interactions around collaboration
- We deliver efficiently and fast

### *What defines our* **culture**?

- The people
- Daily practices
- Shared values around work output
- Our development approach & methodology
- How we communicate
- That we have clients
- Our mission

### *What does it mean to* **love your craft**?

- I take enjoyment out of what I do
- I stay current on the latest and greatest
- You try to learn new things in your industry
- You can recognize bad craftsmanship
- You improve your approach
- You represent and showcase the value in quality

### *Why do we say* **craft**?

- It makes it an art form
- Crafts can be continuously improved
- There are skills that are honed but never mastered
- It is more than just specific technologies
- Love your craft and then use the tools *(rather than loving your tools and then using the craft)*
- There's passion and dedication to quality
- I feel accountable for the output

### *What tools are integral to our* **culture**?

- [Pair Programming](https://www.builtinchicago.org/2020/10/30/pairing-strategies)
- Test driven development
- CI/CD
- *Google*

---

*Cover photo is my own: [Flickr](https://www.flickr.com/photos/rasputin243/42025525155)*
OpenCV-Snapchat Filter RestAPI with FastAPI
Tags: python, news, android
Published: 2020-11-19 17:52:37

It's a Rest API for Face Filter using OpenCV, FastAPI. 
Currently, It's using a simple haar cascade for face detection and applying mask by resizing on the face.
It can be integrated into the web app or Android/IOS mobile APP.

API-URL - http://opencv-api.herokuapp.com/
Documentation: http://opencv-api.herokuapp.com/docs
status: alpha

![withot filter](https://dev-to-uploads.s3.amazonaws.com/i/i04khffdfelq7dp7hc9b.jpg)

![face-filter](https://dev-to-uploads.s3.amazonaws.com/i/fzu9mlmf8vexh5jcemct.jpg)

## Try It with your picture. 

you will get the Image Url in Response. open it in the browser.

Create a POST request with file-field to get the filtered Image.

```python
import requests

url = "http://opencv-api.herokuapp.com/api/v1/facefilter"

# enter your full file path
file_path = ""

files ={
    'file': open(file_path, 'rb')
}

#choose mask 1 to 3
data ={
    'mask': 2
}

r = requests.post(url, files=files, data=data)
print(r.json())
```

![facefilter](https://dev-to-uploads.s3.amazonaws.com/i/v6kmmjmzzyn9ymk7zfbo.png)

![face detection](https://dev-to-uploads.s3.amazonaws.com/i/ptj52lntb3s3qqjf9197.png)
## Future roadmap

Facial keypoints and face emotion deep learning models for better accuracy and mask.

Share your Filtered Image in Comments and your Feedback.
Learn compositional collection view layout and diffable data source with example code
Tags: ios, showdev, swift
Published: 2020-11-19 17:51:17

Compositional collection view layouts and diffable data sources are great UIKit additions available for iOS 13 and up. They greatly simplify building collection views (especially those with complicated layout) and populating those collections views with data.

No longer it is needed to manually specify the number of sections and rows and to keep the collection view correctly updated. These new APIs will do much of the hard work for you.
I wanted to get a better grasp on compositional collection views and diffable data sources so I created public repository to share my experiments.

![CDP Main screen small](https://nemecek.be/media/images/compositionalDiffableMainScreen_fP0RG7L.gif)

So far I have one main screen with fairly complicated layout. Multiple sections where some are horizontal and items are responsive to fill the width along with screens dedicated for specifics layouts. For example list layout, grid layout with option to change grid cell size and see them animate or lazy loaded grid which is ideal when you need to implement paging of results from API.

![CDP Resizable Grid Example](https://nemecek.be/media/images/CDPResizableGrid.gif)

![CDP Lazy Grid](https://nemecek.be/media/images/CDPLazyGrid.gif)

I am by no means an expert so please take this code and examples more like a suggestion and inspiration than best practices.

Do you have layout you want to see? Let me know and I can try to implement it.

The project is available on [GitHub](https://github.com/nemecek-filip/CompositionalDiffablePlayground.ios).
I couldn't find a house in Amsterdam, so I build a tool that helped me find a place to live in!
Tags: saas, node, webdev, vue
Published: 2020-11-19 17:46:40

Finding a rental in Amsterdam is really hard. There are way more people looking for a house than there are houses available.

I would often react to a rental listing only to find out that I was too late (even though I reacted the same day it was posted!)

So I started building some scrapers that would check all the rental listing websites every 5 minutes.  

Each time a new listing came online the tool would send me an email! This helped me find a really nice place in Amsterdam and I thought "why not build a small SaaS tool out of it)

Fast forward a few weeks and [WoningAlert.com](https://woningalert.com/en) is live!

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

Let me know what you guys think!
Use Google Sheets to Store your Custom Web Form Data with WayScript
Tags: startup, serverless, tutorial, wayscript
Published: 2020-11-19 17:43:46

Introduction
------------

Any business owner that uses custom forms for orders and the like knows keeping track of them can be tedious work. However, with WayScript we can create a script that allows users to host these web forms and automatically compile the results to a Google Sheet, saving time in the process. Keep reading to follow the step-by-step process!

Building our Script
-------------------

The first step in creating a hosted form is creating the URL that the form is hosted on. To do this using WayScript, simply add the Form Trigger module to the beginning of the script. On the left side of the screen is a toolbar; here a title can be given to a form, along with the inputs for the form (e.g. name, location, etc.). It’s important that the outputs match the headings on the Google Sheet for continuity purposes.  
  
Next, a date and time heading is needed for the Google Sheet. This will be created through WayScript using the Date Time module. Once this module is added, select the appropriate time zone from the left toolbar. This generates a “datetime” variable that is used later.  
  

![tutorial step #1](https://wayscript.com/blog_img/147/1.png)

  
  
This information is now passed on to a spreadsheet using the Google Sheets module.  
  
After including the Google Sheets module, the next step is to add in the appropriate information in the toolbar. First, select “Write File” and below that choose the corresponding file. Add the variables that correspond to the headings for the sheet; this is where the “datetime” and form input variables created earlier are used.  
  

![tutorial step #1](https://wayscript.com/blog_img/147/2.png)

  
  
Finally, activate the Form Trigger module. Now the URL contains the live form that can be filled out. Once this occurs, the information is passed onto the following steps in the script and then pasted to the Google Sheet.  
  

![tutorial step #1](https://wayscript.com/blog_img/147/3.png)

  
  
Gone are the days of needing to manually update a spreadsheet with information each time a form is submitted. Using WayScript’s drag and drop script builder, users can now create an efficient program that does the work for them. To see the step-by-step process of creating this script, watch our YouTube video below!

Conclusion
----------

Questions about this script or anything else? Join our [discord](https://discord.gg/VWbXSbj). We're always around to help. If you want to work the full script template, just find it [here](https://wayscript.com/team/avengers/vYUE5uSd).
Frontend Basics
Tags: html, css, javascript
Published: 2020-11-18 01:47:28

Basics matter.

HTML, CSS and JavaScript are the most fundamental building squares of web coding. For someone who has never coded before and doesn`t have a 
technological backgroud, creating a page from scratch can seem really intimidating. It is important that you understand these basics in order to grow on the Frontend path.

#### **HTML**

It provides the basic structure of sites and it was first created by Tim Berners-Lee in 1989. It stands for Hyper Text Markup Language. If you think about it, an HTML file is just a text file. It is when you put that file into a browser when the magic happens.

It can be assisted by CSS and scripting languages such as JavaScript. HTML and CSS are actually not technically programming languages; they're just page structure and style information. 

#### **CSS**

CSS is the language we use to style an HTML document: you can control the appearance of the documents defined with HTML. CSS is the best way to separate content and presentation. It describes how HTML elements should be displayed. Combined with Javascript, its current applications can be huge.


#### **JavaScript**

JavaScript enables interactive web pages and is an essential part of web applications: "it is the programming language of the Web".
To give you an idea, Javascript is behind anything that moves, refreshes, or changes on your screen without the need for you to manually reload the page. 

#### Never forget:

- HTML is the structure of your page: headers, text and images.
- CSS is the presentation of the structure: customized fonts, background colors, etc.
- Once you have created your structure and your aesthetic, JavaScript makes your site or project dynamic.
Website user login! 
Tags: discuss
Published: 2020-11-19 17:41:06

Hi all, 

I wanted to ask a question. What are you choosing when building website for user management system, login provider..? 

I am developing my website which will display stuff got from my API backend, not important... And now I am at the stage where I need to implement user login feature, all the good stuff - register, login, forgot password... 

I am looking for something free/open source. Started googling about it but could not find one best solution.

As far as I understand options are :
- self coded from a-z;
- User content management system like (free until 1k users):
    - OAuth
    - Swoopnow

I have seen some plugins for WordPress to work with Angular. Some very expensive solutions, and many tutorials of 'do it your self'. But not sure if that is the best in my case. And could take too much time to build it from ground up. 

What are you using? Why?
Locally run Stackblitz project with Typescript and RxJs
Tags: webdev, typescript
Published: 2020-11-19 16:22:58

Yoyoyo, what's up guys?

OMG, it's been a while since my last article. A lot going on, thankfully good stuff (:

I use [Stackblitz](https://stackblitz.com/) a lot. Like A LOT. Today I created a new Typescript/RxJs project, once done, I was trying to export it and run it locally. Long story short, it wasn't running locally out-of-the-box.

Lucky us, my friend [Tomek Sułkowski](https://twitter.com/sulco) got us covered, all it took was to reach out and ask him:

> Hey Tomek, how do you locally run a Stackblitz project with Typescript and RxJs?

NOTE: If you don't follow [Tomek on Twitter](https://twitter.com/sulco) already, you should.

All you gotta do is:

- Export the project from Stackblitz.
- Extract the project into the folder of your preference.
- Go to the project's directory using a terminal.
- Run `npm i -D parcel`.

With `parcel` it's easy to spin up a server that properly serves the index.html file. Before continuing, add your `.ts` files as scripts in the index.html file. 

```html
<!-- Your HTML code -->

<script src="index.ts"></script>
```

NOTE: If you have more than one `.ts` file, you may need to inject them all.

The last thing we're going to do is adding a new script to the package.json to serve the application.

```json
{
  "name": "<your_project_name>",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    ...
    "serve": "parcel index.html"
  },
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  }
}
```

You made it! Now call `npm run serve` and go to `http://localhost:1234` in your browser.

NOTE: This guide is for simple projects, if you find issues trying to follow it, drop me a comment down below.
How to Create Header Images for Your Blog
Tags: blogging, cover, image
Published: 2020-11-19 17:07:33

## Option 1 : Quick and ~~dirty~~ Beautiful ##

Head over to https://coverview.now.sh/ - explore.
It is self explanatory.

When in hurry, this is the best.

It has a nice feature that lets you add an icon based on the technology you are blogging about like python, docker, react, heroku and so on.

While it lets you choose background from bunch of options, you can not (yet) upload your own background image.

## Option 2 : More Work, More Control ##

0. Create a login on Canva. It is free.
1. Create New Design 1600x840 - This size works well for most blogs
2. Go to Background and select something you like
3. Go to Elements, and select twitter. Choose twitter icon that you like
4. Go to Text, select a style and then type in your twitter handle.
5. Go to Text, select a style and then type in your website URL.
6. Go to Text, select "Add Heading", change font to your liking.
7. Arrange the text elements such that Heading is prominent.
8. Optionally, add a little illustration either from Canva or other sites like undraw.co
9. Optionally, add a technology icon like previous option. (I haven't done that yet)

To avoid doing most of these steps over and over, Save background, twitter and website URL in a template. Each time just change the header (and technology icon, if you have one).

I am trying to use SVG for my blog for two reasons - files are "text" and light. But for some reason, my SVG are only Black and White. I'm sure there are color SVG, but then they are as "heavy" as PNG.

I have found Convertio (link in the Resource section below) to be good option. But there are more options out there. (Including `potrace` which one can use locally.)

## Resources ##

* [Canva](https://www.canva.com/join/qlx-tlw-qdh)
* [Undraw](https://undraw.co)
* [Convertio](https://convertio.co/)
Add Multi-Arch Dependencies Easily
Tags: docker, devops, kubernetes, github
Published: 2020-11-19 17:48:49

---
title: Add Multi-Arch Dependencies Easily
published: true
date: 2020-11-19 17:02:45 UTC
tags: ["docker", "devops", "kubernetes", "github"]
canonical_url: https://www.joshkasuboski.com/posts/easy-multi-arch-deps/
---

I wanted to build a multi-arch docker image for media transcoding. Time to get the dependencies from someone who already did it.

## The Goal

I wanted a multi-arch image to run [mdhiggins/sickbeard\_mp4\_automator](https://github.com/mdhiggins/sickbeard_mp4_automator). I just needed the `manual.py` script not the radarr integration. The images published by mdhiggins are based on images like the linuxserver/radarr image and aren't multi-arch.

You can skip ahead to just see the Dockerfile at [kasuboski/manual-sma](https://github.com/kasuboski/manual-sma/blob/main/Dockerfile).

The main issue for making the image multi-arch is `ffmpeg`. In the [mdhiggins/radarr-sma](https://github.com/mdhiggins/radarr-sma) Dockerfile, it is always downloading the amd64 version of ffmpeg. This obviously won't go well for other architectures.

There are ffmpeg builds published for other architectures. You would just need to make sure to download the correct one.

## The Lazy Solution

It wouldn't be too bad to figure out which architecture is being built and then download the correct version of ffmpeg. It is one more script to maintain though.

I noticed the linuxserver repo has a multi-arch ffmpeg container already. They include a statically compiled ffmpeg so getting it into my image is as easy as copying the binary.

Dockerfiles have a `COPY --from=<image>` option. This lets you copy files from another image. That image will automatically be the correct one for your architecture (as long as the image supports it).

So instead of figuring out the correct architecture and downloading the corresponding ffmpeg. You can just add `FROM linuxserver/ffmpeg as ffmpeg` and then `COPY --from=ffmpeg /usr/local/bin/ff* /usr/local/bin/`.

This will copy both ffmpeg and ffprobe to the built container.

To build the image, I used the same method as my [building multiarch images post](https://www.joshkasuboski.com/posts/build-multiarch-image/). Basically, setting up docker buildx in GitHub Actions. You can see the workflow at [kasuboski/manual-sma](https://github.com/kasuboski/manual-sma/blob/main/.github/workflows/docker.yml).
Vue School is offering an amazing Black Friday discount this year.
Tags: vue, javascript, webdev
Published: 2020-11-19 17:01:11

Get a MASSIVE $100+ off a premium plan!

At Vue School, you’ll learn Vue.js and modern, cutting-edge front-end technologies from core-team members and industry experts with premium tutorials and video courses.

You can register your interest and get notified when the offer launches here 📬
https://vueschool.io/sales/blackfriday
Accessing WSL to-and-from Windows (I still have problems with "PORT" generated in Windows, accessing inside WSL)
Tags: wsl, help
Published: 2020-11-19 16:57:39

## Paths and restrictions

Path-wise is the easiest one.

- Accessing Windows from WSL is always?? possible via

```typescript
'/mnt/' + windowsPath
  .replace(/^(\S+):/, (_, p: string) => p.toLocaleLowerCase())
  .replace(/\\/g, '/')
```

- Accession WSL from Windows is possible via

```typescript
'\\\\wsl$\\' + osName + wslPath.replace(/\//g, '\\')
```

Now, I have qualms about forward slashes in Windows paths (seems not the be possible at all); vs backward slashes in Linux paths (seems to be possible, via `\\`).

## Accessing environmental variables (beyond PATH)

This seems to be possible via either

```typescript
spawnSync('wsl', ['echo', ENVVAR])
```

and

```typescript
spawnSync('cmd.exe', ['/c', 'echo', ENVVAR])
```

## Accessing ports

This is where I stumbled. For Windows' Edge browser accessing WSL, it seems to use `PORT + 1`; but I cannot access Windows spawning ports from WSL (trying with [Ankiconnect](https://foosoft.net/projects/anki-connect/)).

Not sure how does it compare with Docker container vs Host?