teleren/devto huggingface dataset:
IndieWebCamp London - Indie Webmention!
Tags: indieweb, webmention, indiewebcamp, trial
Published: 2020-03-16 23:05:57

---
title: IndieWebCamp London - Indie Webmention!
published: true
date: 2020-03-15 00:00:00 UTC
tags: Indie Web,Webmention,Indie Web Camp,Trial
canonical_url: https://cheuk.dev/2020/03/15/indie-webmention/
cover_image: https://cheuk.dev/assets/images/indiewebcamp-london-20200315.png
---

I would like to add webmention to my blog. And I am testing it out now!

## Why you should own your content?

Because we have full control of our appearance and interaction with people on the internet:

- No more losing content due to closing of websites
- No more privacy issues, no more hidden tracking
- Cause I am cool

## Join the Indie Web community

Visit [http://indieweb.org/](http://indieweb.org/) to get started.
Discovering the Durable Functions API - Human Interaction (DurableOrchestrationClient part 4)
Tags: azure, serverless, dotnet, tutorial
Published: 2020-03-15 20:38:43

---
title: Discovering the Durable Functions API - Human Interaction (DurableOrchestrationClient part 4)
published: true
series: Durable Functions API
date: 2020-03-15 00:00:00 UTC
tags: azure, serverless, dotnet, tutorial
canonical_url: https://blog.marcduiker.nl/2020/03/15/durable-functions-api-durableorchestrationclient-4.html
---

## Human Interaction Pattern

This is the fourth part of the Durable Functions series where I look into the `DurableOrchestrationClient`. In the video I’ll talk about the Human Interaction pattern, which deals with raising events from the client and waiting for events in the orchestrator.

Here’s the video, please give it a thumbs up if you like it and subscribe to my channel so you’ll be notified of new videos.

{% youtube bJLuyzcTT78 %}

The source code that is used for this demo can be found on [GitHub](https://github.com/marcduiker/demos-azure-durable-functions).
My vscode settings
Tags: vscode, ide
Published: 2020-03-14 23:56:09

<h1>Hey!</h1>
If you are using vscode, 
And think that "Holy crap how to make it look better?"
Then this is the best post for you, 
{
    "explorer.openEditors.visible": 1,
    "editor.fontFamily": "JetBrains Mono",
    "editor.fontSize": 13,
    "editor.fontWeight": "300",
    "editor.letterSpacing": 1.2,
    "editor.lineHeight": 22,
    "editor.fontLigatures": true, 
    "files.autoSave": "afterDelay",
    "window.zoomLevel": 0,
    "C_Cpp.updateChannel": "Insiders",
    "workbench.colorTheme": "Dark hacker theme",
    "breadcrumbs.enabled": false, 
    "customizeUI.font.regular": "JetBrains Mono",
    "explorer.confirmDelete": false,
    "editor.formatOnSave": true, 
    "editor.formatOnPaste": true, 
    "workbench.editor.highlightModifiedTabs": true, 
    "editor.cursorBlinking": "smooth", 
    "explorer.sortOrder": "type", 
}
Hope this helps you!
Tips on Blog Marketing
Tags: help, writing, discuss
Published: 2020-03-14 23:50:19

I'm new to blogging, and the problem I have is that I can seem to get people to read my blog posts. Creating the content is not a problem, but distributing it is really hard for me.

My target demographic for my blog is high schoolers in software engineering and entrepreneurship. I'm trying to get traction on platforms like LinkedIn, but I realized that most high school students are active on Instagram, so I'm trying to start marketing on Instagram. 

I can't seem to get traction on LinkedIn or Instagram, does anyone have any advice?
Building a Jekyll Site in the browser in less than 20 minutes
Tags: beginners, css, webdev, tutorial
Published: 2020-03-14 23:17:47

At my first conference talk ever (JekyllConf2019) I showed the world how to build a Jekyll website in under 20 minutes, using nothing but a browser.

https://www.youtube.com/embed/_x5GWpu2ing?autoplay=1&start=14067

## Why Jekyll?

Jekyll transforms your plain text into static websites and blogs. It is simple: no databases or pesky updates to install. It is static: Markdown, Liquid, HTML & CSS go in and blazing fast static sites come out, ready for deployment. It is feature rich: Permalinks, categories, pages, posts and custom layouts are all first-class citizens. Additionally, Jekyll gets you free hosting with GitHub Pages. Are you sick of dealing with hosting companies? GitHub Pages are powered by Jekyll, so you can easily deploy your site using GitHub for free—custom domain name and all.

## Why in a browser?

A lot of people think that Jekyll requires the command line, which is scary for beginners. In my tutorial I show you that you do not need to use the command line.

## What will we build?

We will be building a Jekyll website with version control (Git), a CMS and a form builder. Are you ready?

https://www.youtube.com/embed/_x5GWpu2ing?autoplay=1&start=14067
CSS Order Property for Accessibility
Tags: html, webdev, css
Published: 2020-03-14 23:13:43

There are plenty of ways to order your elements visually specially with grid widely available. 

What if you have a data-driven layout like a grid of items that opens up a dropdown when clicked? You might organize your HTML like this to make it work.

```html
<div class="grid">
  <div class="item" aria-haspopup="true" aria-expanded="false">...</div>
  <div class="item active" aria-haspopup="true" aria-expanded="true">...</div>
  <div class="item" ...>...</div>
  <div class="dropdown" aria-hidden="false">
    Some info about item 2
  </div>
  <div class="item" ...>...</div>
  <div class="item" ...>...</div>
  <div class="item" ...>...</div>
</div>
```

When an accessible user tabs through or scans through using a screen reader like Talkback or VoiceOver, it will go to the 3rd item before getting to the popup that became visible after a user action. An accessible user might get confused as to why they're hearing information about the 3rd item when they just opened up the 2nd item.

So how could we make this better for an accessible user? Luckily, we can use the CSS property `order` to reorder our HTML structure to make it more accessible.

Our new HTML structure would be:

```html
<div class="grid">
  <div class="item" aria-haspopup="true" aria-expanded="false">...</div>
  <div class="item active" aria-haspopup="true" aria-expanded="true">...</div>
  <div class="dropdown" aria-hidden="false">
    Some info about item 2
  </div>
  <div class="item" ...>...</div>
  <div class="item" ...>...</div>
  <div class="item" ...>...</div>
  <div class="item" ...>...</div>
</div>
```

You can see that we moved `.dropdown` to be underneath the 2nd item. Now, when an accessible user tabs or scans through the grid, it will now go to the open popup first before going to the 3rd item. 

We can then use the `order` CSS property to organize our items visually without losing the accessibleness of our HTML structure.

```html
<div class="grid">
  <div class="item" style="order: 1" ...>...</div>
  <div class="item active" style="order: 2" ...>...</div>
  <div class="dropdown" style="order: 4" ...>
    Some info about item 2
  </div>
  <div class="item" style="order: 3" ...>...</div>
  <div class="item" style="order: 5" ...>...</div>
  <div class="item" style="order: 6" ...>...</div>
  <div class="item" style="order: 7" ...>...</div>
</div>
```

Using `order` could be really useful when it comes to making your website more accessible. This example might not be a use case for your project but it certainly shows the power order has when it comes to accessibility.

**What accessibility use cases do you think that would require the help of `order`?**

Test tabbing through the example below.

{% codepen https://codepen.io/koralarts/pen/gOpeVOR %}
SEO: Score 90-100% on Google PageSpeed Insights
Published: 2020-03-14 22:22:49

One of the most important google ranking factors is page speed.

The best way to improve it is to serve only static HTML files to Search engine bots, Without loading javascript.

How do we detect bots? We can know this by checking the user-agent in every request made to our website.

In this solution I'm going to explain what I implemented


**Summary:**

I used two S3 buckets 
   1. The First one with only static html files (for Search Engine bots)
   2. The Second one with my production website (for users)

These two S3 are behind Cloudfront, which redirect traffic with Lambda@Edge depending on the User-Agent

**Let's start!**

Go to CloudFront, Select your distribution, Edit Behavior.

Here you need to Whitelist 2 Headers: Origin and User-Agent
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4a9pxqj54hwskwlmew93.png)

Once you have done this. Create a lambda function in us-east-1 Region
Select node.js 10 for runtime and give it lambda@edge permissions.

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

In the function code, you have to check the user-agent value in the headers, and if its some Search Engine Bots, redirect the origin to S3 bucket with only static html files.

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

After you are done with this, add a Trigger to the function, select Cloudfront trigger > Deploy to Lambda@Edge > Select your CloudFront distribution > Confirm deploy to Lambda@Edge > Deploy

That's it, Now when Googlebot or any other Search engine wants to index your website, it will get only what it is looking for, The html file.


Make sure your CloudFront Distribution have access to The files in both S3 buckets, 



To see how I got 90-100% score in all Paths of the website, with just adding this simple Lambda Function. You can check some Paths in my [website](https://buytoplaygame.com/) in [google page speed test](https://developers.google.com/speed/pagespeed/insights/).
Making your Vim easier to follow 👀
Tags: vim, neovim
Published: 2020-03-14 22:10:50

---
title: Making your Vim easier to follow 👀
published: true
description: It can be hard for coworkers to watch you program in terminal Vim, why not polish it up with a couple tools?
tags: vim, neovim
---

By default Vim is hard to follow for people other than the person driving. When pair programming or doing code review, the ability to follow along with the person editing is obviously super important. My coworkers get visibly exhausted when we view code on my machine. As much as I'd like to think it's because I'm incredibly fast with Vim (I am _pretty_ fast 🔥), it's more likely due to the fact that terminal Vim is just a little hard to keep up with for a few reasons.

1. Scrolling happens instantly, there is no smooth animation.
2. The cursor tends to jump around wildly if you're watching a seasoned Vim user.
3. Jumps between splits, buffers, tabs, etc. are hard to follow

## A minimalistic GUI: Neovide

Neovide is a very simplistic Gui around Neovim (the Vim fork with among many improvements, an emphasis on being embeddable). It adds a few nice features, but the killer one for me is the animated cursor:

![Neovide demo](https://dev-to-uploads.s3.amazonaws.com/i/sg9pb94wq23k3nfr7i59.gif)

This solves so many pain points when anyone is watching a Vim user. It animates your cursor between every motion. Navigating between splits, buffers, the quickfix window, etc. 

And for bonus fun you can add [particle effects](https://github.com/Kethku/neovide/wiki/Configuration#cursor-particles).

### May hamper some of your usual workflows:

📓 By default `<CR> V` is not bound to paste to paste in Neovide. Instead, you can paste from the `+` (clipboard) register: `["+]p`, or in insert mode: `[<cr>r]+`. 

## Smooth scrolling

![Smooth scrolling](https://dev-to-uploads.s3.amazonaws.com/i/hp0mr6bn87akf6rwgh5p.gif)

Smooth scrolling is a lot easier on the eyes and makes it a lot less disorienting for your viewers when you're navigating a large file. Smooth scrolling has been discussed in the [ Neovide issues ](https://github.com/Kethku/neovide/issues/62), but isn't added yet. Instead, it is possible to get a nice smooth scrolling experience via a Vim plugin. This works in terminal Vim too: [Vim Smoothie](https://github.com/psliwka/vim-smoothie).

These small changes can really improve the editing experience for yourself and for those following along. Happy Vimming!
Now Live Streaming Coding Sessions
Tags: livestream, livecoding
Published: 2020-03-14 22:09:10

---
title: Now Live Streaming Coding Sessions
published: true
description: A blog post to announce that I'm live streaming my coding sessions
tags: live stream, live coding
cover_image: https://github.com/maeganjwilson/appsbymwblog/blob/master/static/images/LiveStreaming.png?raw=true
canonical_url: https://blog.appsbymw.com/posts/now-live-streaming-coding-sessions-37e5/
---

For the past couple of weeks, I've been live streaming my coding sessions. I am going to keep live streaming every Monday at 6:30pm CST as long as life doesn't get in the way.

# What do I stream?

Anything I'm working on code wise. This could be [iHog](https://ihogapp.com/) or the new [Notefication](https://github.com/maeganjwilson/notefication). These are iOS apps, so I am coding in Swift and building the views in SwiftUI.

# How do you watch?

You can watch live on my [Twitch](https://www.twitch.tv/appsbymw) or watch them afterward on my [YouTube channel](https://www.youtube.com/playlist?list=PL9MW-diYJQnUeVJtVbBLkEfgp9VVjzZdW)!

If you have questions during the stream, ask the chat and I'll make sure to answer. That's the same for any of the YouTube videos. I want to share my knowledge and my thought process, so I will answer your questions.

# Thanks for reading!

---

If you enjoy my posts, streams, and apps, consider encouraging by efforts using [Buy Me a Coffee](https://www.buymeacoffee.com/appsbymw) or [subscribing to my Patreon](https://www.patreon.com/appsbymw).

<a href="https://www.buymeacoffee.com/appsbymw" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/arial-blue.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" ></a>

[![](https://github.com/maeganjwilson/appsbymwblog/blob/master/static/images/patron.png?raw=true)](https://www.patreon.com/appsbymw)
Atomic Commits
Tags: softwaredevelopment, collaboration, learninpublic
Published: 2020-03-14 21:45:49

An atomic commit is a commit (in a version control system like git) that can stand on its own. It is made up of changes to your codebase that do _exactly one thing_. It is the smallest change you can make that satisfies a feature’s acceptance criteria on some level, keeps the test suite green, and passes formatting and other CI checks. It’s solid. It’s ready to go.

Why does this matter?

A commit crafted in this way serves as a checkpoint for you. That means you can commit it and forget it as you continue to grapple with other concerns and the feature as a whole. It also means [it is a safe point to revert to](https://kellysutton.com/2019/07/15/keep-all-commits-green.html) if you’ve coded yourself into a corner or you’ve pursued an approach that isn’t going to pan out. Disentangling lines of code that you want to keep from ones that aren’t going to work is painstaking if you aren’t making checkpoint commits — this is one of git’s biggest selling points.

An atomic commit is something you’d be proud to show your coworkers. Toxic and judgmental work environments aside, we’ve all had that moment where we pull someone in for pairing or a code review and we feel the need to explain away our mess of unintelligible (or even profane) commits. Or as you try to walk through your progress, you have trouble identifying what is relevant and why you did X. Atomic commits with [good commit messages](https://dev.to/jbranchaud/good-commit-messages-4e9o) show that you’ve taken the time to organize your thoughts and are prepared to make good use of your coworkers’ time.

Atomic commits are complete which means you could hand one off at a moment’s notice. If you need to suddenly leave for the day, you could hand it off to a coworker and there is a clean break for them to pick up from. Or if business priorities shift, you could ship what you have without necessarily getting to the rest right now. The alternative is that you throw it out or it gets orphaned on a feature branch.

Making a practice of producing atomic commits is one of those things that levels you up as a developer. It makes you better at building features and it makes you a better collaborator.

---

_Thanks to [Jake Worth](https://twitter.com/jwworth) for providing feedback on this post._

Notes:

One of my favorite ways to review changes and produce atomic commits is [the `--patch` flag for `git commit`](https://twitter.com/jbrancha/status/1156711010482511872?s=21).

Making atomic commits has its tradeoffs. The [downsides of keeping commits green](https://kellysutton.com/2019/07/15/keep-all-commits-green.html) discussed by Kelly Sutton is worth reading in this context as well.
When Using An Ide/Editor 
Tags: beginners, firstpost, ide, editor
Published: 2020-03-14 21:07:44


 

Here are some tips about installing and using ide's & editors.  


An editor is a tool for writing code. An Ide (integrated development environment), provides us more comprehensive features (like debugging, terminal etc) alongside the editing feature.   


Before Installing 


- Before you start, get some info about the ide or editor you want to use. 
- But do not get lost in the details. Some installs are pretty easy.
- Install the compatible files for your operating system. (32/64 bit, Win 7/10, Mac Os X, Linux etc)
- Be sure to set up environment variables correctly on your system. 
- Some programming languages need to connect with the ide properly so be carefull when choosing options on language installer.
- If there is an extension for your programming language, find & add it. 
- Some extensions requires re-downloading so do not download lots of extensions and clog up the system. 
- Be, work/project-oriented. 
- If you need help, get online, watch videos, read documentation etc.
- Some languages need a special working environment, so set up the working environment as stated. 
- Do not set-up working environment in another place, you can get en error stating that ide does not see the environment. 
- Some languages need a specified version to work with. If the program is leading us to a different version, consider that.


Mistakes/Errors/Bugs 


- If elements written above is not properly done it is possible that we can have some difficulties using our ide or editor.
- Sometimes it is a version problem, sometimes an operating system issue and sometimes it is a problem we don't know or even understand. 
- In those situations read the error and try to understand it, even work on it. 
- Try to find a solution using a search engine or a site like stackoverflow. 
- Include the error fully in a complete manner as written.   
- Sometimes an error can be solved in several steps. You solve an issue but you get another one. 
- Don't think like there is only one cause to the problem. 
- Sometimes problems merge but it seems like one problem. Beacuse of that, we need to solve those issues step by step. 


When Coding 


For beginners, the coding process should be like that: 
(meaning on an ide or editor when learning tutorials)


1 - Write the Code.
2 - Save it.
3 - Run it with terminal/bash or powershell. 


- Get some info about bash, terminal, cmd, powershell and some basic commands. 
- Check your code continuously 
- Make sure it is written correctly.  
- Choose, proper variables and functions. 
- Consider syntax and semantics. 
- Don't forget to save the changes and don't run it without saving. 
- Read the code examples given on tutorials throughly, don't fudge!
- Do not rush when coding, be patient,  move step by step.
- Do not overwhelm yourself, remind yourself to take a break. 


Note: They say coding is like poetry. Just one mistake and you break down the harmony, similarly in programming a semicolon or a misspelled character may cause a bug.
Simple tweet locator using Python, Flask SocketIO and Tweepy
Tags: python, flask, sockets, tweepy
Published: 2020-03-14 20:27:56

---
title: Simple tweet locator using Python, Flask SocketIO and Tweepy
published: true
description: Simple application to locate tweets on a map based on the location from where they were sent. 
tags: python, flask, sockets, tweepy
---

Simple application to locate tweets on a map based on the location from where they were sent.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6ow4y71a6na5cn0m8sqg.gif)

This application was written in [Python 3.7](https://www.python.org/), and uses [Flask Socket IO](https://flask-socketio.readthedocs.io/en/latest/) which gives Flask applications access to low latency bi-directional communications between the clients and the server, and [Tweepy](https://www.tweepy.org/) a Python-based client to interact with the Twitter REST APIs.

In order to have access to Twitter data programmatically it's necessary to have some access tokens, you can create an app and get your secret tokens from [here](https://developer.twitter.com/en/apps).

## Installation

The full source code can be found on [Github](https://github.com/JuanBenitez97/Tweet-Locator).
```
git clone https://github.com/JuanBenitez97/Tweet-Locator.git
cd Tweet-Locator
pip install -r requirements.txt
```

After this proccess is done you need to create a **.env** file to store all your secret tokens and being able to use the Twitter APIs, this file should be in the root folder.
```
CONSUMER_KEY = 'Your API KEY'
CONSUMER_SECRET = 'Your API SECRET KEY'
ACCESS_TOKEN = 'Your Access Token'
ACCESS_SECRET = 'Your Access Secret Token'
```

## Run

```
python app.py
```

If everything is correct you will see the server is running and which host and port is running on.
Just go to the url and wait for the tweets appear on the map.

If you want to filter tweets based on other words you can change the tags in the **app.py** file
```
if __name__ == '__main__':
    """
    tags = ["#python", "programming", "flask"]   
    """
```

![](media/tweetlocator.gif)

**Enjoy it!!**