teleren/devto huggingface dataset:
How to visualize ESLint errors on Github!
Tags: github, actions, eslint, ci
Published: 2020-03-17 10:26:59

---
title: How to visualize ESLint errors on Github!
published: true
description: You can inline lint warnings on each pull request using this underrated technique!
tags: github, actions, eslint, ci
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/q3t22jats9ixcajmttf2.png
---

Today I'm going to write about a very underrated technique that allows you to display ESLint errors more visually in Github! We are going to use a [Github Action](https://github.com/ataylorme/eslint-annotate-action) by [Andrew Taylor](https://github.com/ataylorme) which can inline-display the ESLint errors on pull requests.

Let's see how the Action is advertised:

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

This feature is possible by leveraging Github Actions "Annotations", a for now pretty underutilized feature of Github Actions! However, Github is pushing this feature a lot, as they have recently changed the UI that appears when you click on an Action run.

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

Instead of seeing the output of the workflow, I now see an empty page that says "No artifacts, no annotations". At first I was frustrated because I had to make one more click, but if you set up annotations correctly, this new UI is actually pretty nice!

So let's set up the Github Action.

In your ESLint command, you have to generate a JSON:

```diff
- eslint src
+ eslint --output-file eslint_report.json --format json src
```

and then add this as the last step to your workflow.yml file:

```yaml
    - name: Annotate Code Linting Results
      uses: ataylorme/eslint-annotate-action@1.0.4
      if: always()
      with:
        repo-token: '${{ secrets.GITHUB_TOKEN }}'
        report-json: 'eslint_report.json'

```

That's it, now the ESLint errors will be annotations on your pull requests!

I have personally tweaked my configuration a bit more.

1. The original action only adds annotations for pull requests and  but I would personally also like the annotations to appear for normal runs on master branch. It is trivial to fork Github Actions and change them to your liking! Instead of `ataylorme/eslint-annotate-action@1.0.4`, you can use [`JonnyBurger/eslint-annotate-action@1.0.8`](https://github.com/JonnyBurger/eslint-annotate-action) if you would like the annotations to always appear.

2. If you add the `--output` parameter to the ESLint command, you will not see the errors in the command line and only get a JSON file. So I tweaked the ESLint command that it will only generate a JSON file while in a Github environment:

```bash
eslint $([ -z \"$GITHUB_WORKSPACE\" ] && echo \"\" || echo \"--output-file eslint_report.json --format json\") src
```

And this is how it looks in the end!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8mioxob7yj8pr7sddmn8.png)
New feature in Visual Studio 16.6.0 Preview 2, a better integration with Git and GitHub
Tags: visualstudio, preview, git, github
Published: 2020-03-17 10:18:29

---
title: New feature in Visual Studio 16.6.0 Preview 2, a better integration with Git and GitHub
published: true
description: 
tags: visualstudio, preview, git, github
---
In <b>Visual Studio 16.6.0 Preview 2</b> we have option for new git experience, to activate you should go to <b>Tools > Options > Preview Features</b>

<img src="https://dev-to-uploads.s3.amazonaws.com/i/h18od21aeml48cwuonxa.png" />

After activating this option you should restart Visual Studio, and you will see a new option in Visual Studio menu.
<img src="https://dev-to-uploads.s3.amazonaws.com/i/z7w0rhzz28gijvttxa1v.png" />
The Git docked window was updated with redesigned look and feel.
<img src="https://res.cloudinary.com/dbvcampra/image/upload/v1584440236/github2_srtulz.png" />
<img src="https://res.cloudinary.com/dbvcampra/image/upload/v1585660648/Git-Tool-Window-Frame_mcio2q.png" />
<img src="https://res.cloudinary.com/dbvcampra/image/upload/v1585660648/Git-Menu-Frame_fz2jkn.png" />
Catalina NTFS rw (no extra packages)
Tags: catalina, readwrite, macos, ntfs
Published: 2020-03-18 00:32:30

---
title: Catalina NTFS rw (no extra packages)
published: true
date: 2020-03-17 05:46:25 UTC
tags: catalina,readwrite,macos,ntfs
canonical_url: 
---

ไม่แน่ใจว่าทำได้ทุกเครื่องไหมต้องการผลทดสอบจากทางบ้าน

เท่าที่อ่านดู macOS มันก็เขียน NTFS ได้นะแหละแต่ default มัน read-only วันนี้พี่เค้าเอา Ext-HDD มาให้เลยมีโอกาสได้ลอง

ผลการทดสอบคือถ้า UI มันเปิดอัตโนมัติสั่ง mount ยังไงก็ read-only ต้องใส่ option ไม่ให้ UI เปิดอัตโนมัติ โดยมีขั้นตอนดังนี้

![](https://cdn-images-1.medium.com/max/1024/1*HhJDUUciCSYZOR3FxtRkgg.png)<figcaption>ดู device name</figcaption>

1. ดู device name ด้วยคำสั่ง

```
mount
```

2. ทำการ unmount

```
sudo umount /dev/disk2s1
```

3. สร้าง directory มารับการ mount ที่ไหนก็ได้

```
sudo mkdir /Volumes/t
```

4. ทำการ mount ใหม่อีกครั้ง

```
sudo mount -v -t ntfs -o rw,auto,nobrowse /dev/disk2s1 /Volumes/t
```

ขั้นตอนนี้ให้ใส่ options rw คือ ให้ read-write และ nobrowse ก็คือ mount เสร็จก็จะนิ่งๆ finder จะไม่เปิดให้อัตโนมัติ ถ้า mount สำเร็จตอนนี้ user ของเราก็จะอ่านเขียนได้แล้ว ถ้าจะเปิดด้วย finder ก็สั่ง

```
open /Volumes/t
```

![](https://cdn-images-1.medium.com/max/1024/1*Z0kq5pC2AQOw9SOmtnvtUw.png)<figcaption>สร้างเขียนได้แล้ว</figcaption>

![](https://cdn-images-1.medium.com/max/1024/1*9RU0pvY-wTGvtt5yjGAbDw.png)<figcaption>สร้าง directory ได้</figcaption>

หรือจะใช้ command line copy file มาใส่ได้เลย

![](https://cdn-images-1.medium.com/max/1024/1*eGk3FrFz0Vg8dN4kwhGI4Q.png)<figcaption>ใน drive จะเป็นสิทธิของ user</figcaption>

เมื่อใช้งานเสร็จแล้วก็ให้ unmount

```
sudo umount /dev/disk2s1
```

![](https://cdn-images-1.medium.com/max/1024/1*YpYkw2o_p6h0Ay6LawJqqQ.png)
Got time? Test Offen today.
Tags: feedback, news, showdev, changelog
Published: 2020-03-17 09:36:56

**Your feedback is helping** us take a step forward on our way to **develop a self hosted, fair and ethical alternative to established web analytics tools.**

We’re excited to present our first alpha version that is officially ready for testing. After we released our initial alpha in January this year, we've been busy working on a successor version for the last weeks. Based on the initial feedback, we have made major adjustments in the front and backend area.

Although we have dug very deep, things may still contain issues. Therefore, we recommend using Offen in a production environment only for the brave. Also be aware that the upgrade path may be broken with upcoming releases. **Offen is free and always will be.**


***Offen v0.1.0-alpha***

Single binary file for Linux, Windows or MacOS
[**Download**](https://get.offen.dev/)

Your own Offen instance
[**Deploy to Heroku**](https://heroku.com/deploy?template=https://github.com/offen/heroku/tree/master)


Download or deploy Offen today and give it a spin. **[Check our Docs](https://docs.offen.dev/)** for detailed instructions. 

We appreciate any feedback. No matter if you have difficulties with the installation, find our UI hard to understand or catch anything unexpected. 


Please put your feedback in the comments, use Twitter [@hioffen](https://twitter.com/hioffen) or head to [offen.dev](https://www.offen.dev/) to get in touch.

We look forward to hearing from you. Happy testing!
Container image promotion across environments - The Video
Tags: devops, containers, cicd, youtube
Published: 2020-03-17 09:15:59

When you use containers for your application, one of the things you need to think about is how to move (aka promote) the container images you generate across different environments.

In this series, I will explore different ways to do so... with the help of __Azure DevOps__

### Intro

In the first article of the series we explored the "Base Registry" approach to promote a Container image across different environments.  
In the second part we got rid of the additional registry and we used a Build Artifact.  
In the third and final part we have used the same approach as the second one, but using 100% the __YAML Pipelines__ (or, more appropriately, the ___Multi-stage Pipelines___).

In this ___bonus post___ you can find the link to the __YouTube video__ where I explain this approach.

### The video

I decided to create this video to explain the theory behind this approac, and also to show in practice how this is achieved with Azure DevOps.

Here you have it:

{% youtube tG0O8vsO1LE %}

### Conclusion

I hope you enjoyed the video, and if you did please like it and subscribe to my [YouTube Channel](https://www.youtube.com/channel/UCtiFg7r8WBBzC6xo-tfEYFw), called [__CoderDave__](https://www.youtube.com/channel/UCtiFg7r8WBBzC6xo-tfEYFw).

I'd appreciate if you could help me growing the channel sharing it to your friends, colleagues and contacts.

Thank you!
Test Tutorial - Syndicating your blog post to dev.to and Medium
Tags: blog, meta, jekyll, githubpages
Published: 2020-03-17 08:59:48

---
title: Test Tutorial - Syndicating your blog post to dev.to and Medium
published: true
description: While testing my streaming setup, I teach you how to syndicat your blog post to dev.to and Medium.
tags: blog, meta, jekyll, githubpages
canonical_url: https://cheuk.dev/videos/ufay8f0ykfq/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/406im81c7vanuwfu2ela.png
---

Yesterday I was testing my streaming setup, and I show you how I syndicate the [blog post in TerminusDB](http://blog.terminusdb.com/) to dev.to and Medium.

More to come - [Follow me on Twitch](https://www.twitch.tv/cheukting_ho)
Future of Artificial Intelligence and Machine Learning in 2020
Tags: machinelearning, datascience, artificialintellgent, beginners
Published: 2020-03-17 08:55:35

What are the technology disruptions we expect next year? New and innovative uses for machine learning across industries? Impact of artificial intelligence in education? Human and machine interaction evolving further? The rise of AI-powered assistants? 

This is just the starting of the digital revolution, so let’s educate ourselves on what the mavens of [Artificial Intelligence](https://agiletech.vn/artificial-intelligence-and-machine-learning-in-2019/) and Machine Learning are predicting for the months ahead.

🔥 Innovative Uses for Machine Learning Across Industries

✅ Food and Beverages: Predict which items will run out of stock within a specified timeframe. 
✅ Military: The US Army is currently using machine learning to predict when fighter vehicles need maintenance or repair.
✅ Sciences and Healthcare: Look at the variables of a patient’s health records, takes into account demographics, health history, and other factors. Also predicts the probability of the patient’s death within the stipulated hours of hospitalization 😱.
✅ Stock market: Predict stock market performance based on publicly available income documents.

🔥 Machine Interaction on the Rise

Developing AI are putting efforts to get it to comprehend the subtleties of human interactions. Could you imagine a chatbot being able to recognize more than what you are implying with your words? That would be so amazing for enhancing customer service beyond excellence.

If you want to know more about tech trends, don't hesitate to [get it here](https://agiletech.vn/blog/)!
What is Functional Programming
Tags: functional
Published: 2020-03-17 08:39:37

##### In many ways, the concepts of functional programming (often abbreviated FP) predate programming itself. This paradigm is strongly based on the lambda-calculus invented by Alonzo Church in the 1930s.
## Don’t let all the new buzzwords scare you away. It’s a lot easier than it sounds.
A programming paradigm is a way of thinking when constructing software, other examples of programming paradigms include object-oriented programming and procedural programming.

FP is the process of building software by composing pure functions, avoiding shared state, mutable data(changeable), and side-effects. Functional programming is declarative rather than imperative, and the application state flows through pure functions. Contrast with object-oriented programming, where the application state is usually shared and colocated with methods in objects or sometimes the state is being separated into its own object.
###### Sounds Nerdy? :nerd_face: we will explain every word said above :rose:  

### pure functions
This is when the same input that gives the same output always in some way it is similar to the stateless object(Has no side-effects).

### Function composition
This is when the process of combining two or more functions in order to produce a new function or perform some computation. For example, composition f . g (the dot means “composed with”) is equivalent to f(g(x)) in JavaScript.This is really useful when applying the dependency inversion principle. Better check this article out!
{% post https://dev.to/ibrahimshamma99/what-is-dependency-inversion-54b9 %}

### Shared State
Meanwhile, This is any variable, object, or memory space that exists in a shared scope, can be delivered to any function as a parameter as the property of an object being passed between scopes. A shared scope can include global scope or closure scopes. Often, in object-oriented programming, objects are shared between scopes by adding properties to other objects.

### Immutations 
An immutable object is an object that can’t be modified(Changes) after it’s created. Conversely, a mutable object is any object which can be modified after it’s created.
Immutability is the most important concept of functional programming because, without it, the data flow in your program is messed up, state history is abandoned, and strange bugs can creep into your software.
I recommend you to check this medium article out it has some in-depth Immutations details

{% medium https://medium.com/javascript-scene/the-dao-of-immutability-9f91a70c88cd %}

## Conclusion
We discussed what is functional programming although FP is good for reducing code redundancy, improving modularity, helping us to solve complex problems and most importantly increases maintainability by 
being able to test each functional component separately.
Starting the journey of remote work - Day 1
Tags: watercooler, corona, remotework
Published: 2020-03-17 08:33:56

---
title: Starting the journey of remote work - Day 1
published: true
description: Recap first day of being at home, starting Hangouts and trying to be productive when corona is everywhere
tags: watercooler, corona, remote work
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/vetrwytws134kmxy72jr.jpg
series: working from home
---

As of yesterday, Monday 16th of March 2020, I'm now working remotely from home. Right now, the initial idea was until end of month but schools and nursery schools are closing until 17th of April. Technically they close only for 3 weeks and combine this with the eastern holidays (2 weeks).

This means I'm definitely doing working from home for at least 5 weeks😱

Yesterday was still chaotic. My wife realized that she forgot some stuff and we went early the day to her office to grab things. We also have a daily plan which helps me to have frequent pauses. I realized on my first day that I'm sitting in my chair for hours somehow. In the office this is rarely happening due to coffee breaks, meetings, etc.

We also had our first Refinement Meeting via Hangouts and our Review. It was clear that we will need some more time and iteration until it works well.

![Review Meeting](https://dev-to-uploads.s3.amazonaws.com/i/48nwo9cvmn5jkqvkdkzk.png)

Surprisingly, when you have 8-9 people in the Refinement Meeting it worked more or less quiet well.
The Review Meeting with 25 people was tricky, as we want a lot of discussion but how do you handle discussions online in a Hangout with 25 people? We are still trying to figure this out.

Personally, due to all this corona thing still going on and Germany being in a "Retail Shutdown", except there are still many things open, focusing on the daily tasks is a bit tricky. My productivity needs definitely a couple of days.

I also realized the current chair we have is great for short work but not for long hours, so I ordered one from ikea 😃🤞

Technically, I'm tackling some tough technical debt topics and dealing with a Chrome Browser Extension. 

## TIL

When you do HTTP calls in your contentscript.js, I don't know how someone can debug this. Chrome only offers debug options for the background.js file.

From my understanding, if you need to do a HTTP Call to an API, either provide some output options in your contentscript or put them all to the background.js file.

Take care everyone.

---
Previous post:

My journey on starting working from home (thanks to corona 😃):

{% link https://dev.to/fokusman/starting-remote-work-journey-day-0-cga %}
10 Examples with CSS Grid
Tags: css, cssgrid, webdesign
Published: 2020-03-17 15:14:10

---
title: 10 Examples with CSS Grid
published: true
date: 2020-03-17 00:00:00 UTC
tags: css, css-grid, web-design
canonical_url: https://www.jamesqquick.com/blog/10-examples-with-css-grid
---
{% youtube wfXz8rW_fUs %}


I've decided to spend some dedicated time learning more about different technologies this year. My goal is to spend about 2 weeks on topics like Vue, Serverless, TypeScript, Headless CMS, etc. This way I can hold myself accountable. The first topic I dove into was **CSS Grid**.

I created this list of 10 examples to build with CSS Grid as practice for myself and others.

> Learn how to build 10 examples with CSS Grid by following the [video](https://youtu.be/wfXz8rW_fUs) and [the source code](https://github.com/jamesqquick/Getting-Started-with-CSS-Grid-by-Example)

In addition to the video, here are a few helpful resources as well as screenshots of the ten examples.

## Resources

Here are the top resources that I used in my learning process!

- [CSS Grid Course by Wes Bos](https://CSSGrid.io/friend/QUICK)
- [Complete Guide to CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
- [Practical CSS Grid by Bryan Robinson](https://www.udemy.com/course/practical-css-grid/)

## The Examples

For each example, there is a set of starter files and finished files. Open the finished files to see what you need to build. Then, open up the starter files to see if you can complete the example on your own. If not, use the [video](https://youtu.be/wfXz8rW_fUs) for help.

> Find the solutions in the [video](https://youtu.be/wfXz8rW_fUs)!

1. Responsive 3 Column Grid ![Example 1](https://github.com/jamesqquick/Getting-Started-with-CSS-Grid-by-Example/raw/master/media/1.png)
2. Centered Content ![Example 2](https://github.com/jamesqquick/Getting-Started-with-CSS-Grid-by-Example/raw/master/media/2.png)
3. Reordered Content ![Example 3](https://github.com/jamesqquick/Getting-Started-with-CSS-Grid-by-Example/raw/master/media/3.png)
4. Responsive Navbar ![Example 4](https://github.com/jamesqquick/Getting-Started-with-CSS-Grid-by-Example/raw/master/media/4.png)
5. Asymetric Dashboard ![Example 5](https://github.com/jamesqquick/Getting-Started-with-CSS-Grid-by-Example/raw/master/media/5.png)
6. Responsive Card Gallery ![Example 6](https://github.com/jamesqquick/Getting-Started-with-CSS-Grid-by-Example/raw/master/media/7.png)
7. Asymetric Gallery Layout
![Example 7](https://github.com/jamesqquick/Getting-Started-with-CSS-Grid-by-Example/raw/master/media/6.png)
8. Responsive 2 Column with Footer ![Example 8](https://github.com/jamesqquick/Getting-Started-with-CSS-Grid-by-Example/raw/master/media/8.png)
9. Responsive 2 Column Grid with Footer (Grid Areas) ![Example 9](https://github.com/jamesqquick/Getting-Started-with-CSS-Grid-by-Example/raw/master/media/8.png)
10. Checkerboard Layout ![Example 10](https://github.com/jamesqquick/Getting-Started-with-CSS-Grid-by-Example/raw/master/media/10.png)
Why We Write
Tags: writing, life, process, ideas
Published: 2020-03-17 08:29:42

I can't write effortlessly or perfectly. I must sweat over the process of revision, drafting, and redrafting until I get it right. I think most people are the same.

Very few people think clearly enough to communicate what they mean. Ideas rarely form exactly how you imagine them. We revise our words and refine our thoughts all the time, making small improvements in our thinking and presentation. 

Writing is the process of discovery of our ideas. Writing is refined thinking.

I am writing for myself. I am thinking out loud. I write to discover what I know and gain clarity through articulation.

Some of my worthy ideas, I only thought of when I sat down to write. That's why I want to write; to get more of them.
How NOT to integrate Google Calendar with your product
Tags: rails, ruby, react, webdev
Published: 2020-03-17 08:25:34

Google calendar has decent documentation for most of its products and supports most of the libraries, even then, it's confusing enough to take the wrong approach while integrating with google calendar.

When I set out to build calendar integration for one of my products, I had never thought that it would end up becoming so complicated to do things which I had initially thought to be simple. 

### Product Requirements
1. During Signup/Login ask for permission to view/edit/create the events in their primary google calendar.
2. Fetch the calendar events(both recurring and 1 time) and show them to the users so that they can add more details to it(specific to the product).
3. Keep in sync with any new events that are created.
4. Sync existing events between the product and the calendar.
5. Updating the correct recurring events in google calendar for any updates done to them in my product.

Remember that, my product required 2-way sync of events.

### The Incorrect Approach 
During my research, most of the blog posts I read pointed to using the  [Calendar Events List API](https://developers.google.com/calendar/v3/reference/events/list) and my brain started to work in that direction. I took the following approach which is inefficient and unscalable -

1. Integrated the Calendar Events List API which got me the event information for all the upcoming events.
2. Saved the ones which matched as per the algorithm of the product
3. If the user performed any update to these events then update the calendar events accordingly(changes to date/time/description)
4. Write a Cron job which runs every 30 minutes to check if any new events were added/existing events changed(biggest blunder) for all the users in the database.

### The Correct Approach 
Soon, I realised that this was not the most efficient and scalable way to achieve the results I wanted.
I dug deeper into the google documentation to realize that there is a [synch API](https://developers.google.com/calendar/v3/sync) which helps in incremental synch of data and works as a [webhook](https://en.wikipedia.org/wiki/Webhook). This is what made complete sense and would fit my requirements perfectly.
I am going to talk about this approach in a new series. Stay Tuned