teleren/devto huggingface dataset:
The Scroll Indicator
Tags: webdev, beginners, javascript, showdev
Published: 2019-05-01 06:10:53

---
title: The Scroll Indicator
published: true
description: Scroll indicator implementation
tags: webdev, beginners, javascript, showdev
---

![](https://thepracticaldev.s3.amazonaws.com/i/yuoy5g872a6oa2y8ba1n.png)

**Scroll Indicator** is basically a line which fills up based on how much the user has scrolled in the page.They are usually positioned at the Top of the page.

![](https://media.giphy.com/media/vvWhQsVAFkyisScAsM/giphy-downsized-large.gif)


**Output:**

Checkout the output [here](https://scrollindicator.netlify.com/)

![](https://thepracticaldev.s3.amazonaws.com/i/acf1wkn8ncov8d5i20el.gif)

##Let's get to Coding:


```jsx
<body>
 <div class="line" id="scrollIndicator"></div>
 <div>
   // ... some code
 </div>
</body>
```

All we did in the above snippet was adding a small scrollIndicator `<div>`.

Before we jump into how we can implement scroll indicator it is necessary to understand few `window` properties related to scrolling.

```css
.line {
      background: #038eff;
      height: 5px;
      border-radius: 3px;
      width: 0%;
      position: fixed;
      top: 0;
    }
```
Above shows the CSS required for plotting the line. It should initially be at width 0. Then increase it based on the percentage of scroll.


##Window's Scroll related Properties:
* `window.innerHeight` - Height of the viewable portion of the browser.(Eg: 640)
* `document.body.scrollHeight` - Height of the entire webPage.
* `window.scrollY` - how many pixels the user has scrolled down so far. It is `0` on **page load** and it increases as the user scrolls down.


```js
const scrollIndicatorElt = document.getElementById('scrollIndicator');
const maxScrollableHeight = document.body.scrollHeight - window.innerHeight;
window.addEventListener('scroll', moveScrollIndicator);
```
* Get the `scrollIndicator` node by its id.The Scroll line appears in this element.
* Find `maxScrollableHeight` which specifies the number of pixels the user can scroll.To identify this we find the difference between `document.body.scrollHeight` and `window.innerHeight`
* Attach an Event listener to `scroll`.

```js
function moveScrollIndicator() {
  const percentage = ((window.scrollY) / maxScrollableHeight) * 100;
  scrollIndicatorElt.style.width = percentage + '%';
}
```

* `moveScrollIndicator` function gets executed when scroll event is fired.
* `percentage` is the width of the `scrollIndicator` element. 
* `percentage` is calculated as the ratio of **Pixels scrolled(`window.scrollY`)** by the user to **total Scrollable Pixels (maxScrollableHeight)**

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

Check the output [here](https://scrollindicator.netlify.com/). [Repo Link](https://github.com/dhilipkmr/scrollIndicator)

Follow me for interesting contents.

My [Website](https://www.dhilipkmr.dev), [blogs](https://dev.to/dhilipkmr) and [Twitter](https://twitter.com/dhilipkmr_)

That's All Folks!
My simple site - sangau.me
Tags: react, typescript, materialui
Published: 2019-05-01 04:55:56

---
title: My simple site - sangau.me
published: true
description: My simple site
tags: reactjs, typescript, material-ui
---


### This is my personal site and, I use the following technology to built it:

- React
- Typescript
- Material-UI
- GitHub pages
- Travis CI

### Could you give me some ideas about it!

Repo: [GitHub](https://github.com/auvansang/sangau)
Dennis Begos
Tags: dennisbegos
Published: 2019-05-01 04:27:58

---
title: Dennis Begos
published: true
description: About Dennis Begos
tags: dennisbegos
---

Dennis Begos was heavily involved in hospital leadership, being the president of the medical staff at Winchester Hospital for 2 years (2016-7), and chair of the department of surgery for 10 years (2006-16). I was involved with medical quality and safety monitoring, a very hot topic these days. I implemented clinical protocols in surgery that improved patient satisfaction, decreased length of stay, and lowered complication rates. This was a huge task that involved coordinating input from not only surgeons, but also nursing, anesthesiology, hospital administration, physical therapy, nutrition, etc.
Naming things is hard. Agree or disagree? 
Tags: discuss, webdev, css, javascript
Published: 2019-05-01 03:29:59

---
title: Naming things is hard. Agree or disagree? 
published: true
tags: discuss,webdev,css,javascript
cover_image: https://images.unsplash.com/photo-1527509602458-3a3d3f9c61d9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&h=420&q=80
---

I've been a web developer for 10+ years now, mostly on the front-end, and I still find it difficult to name CSS classes, especially as a project grows. I've been using BEM for awhile and while this helps keep things scoped, there comes a time when you've used up a lot of the common component names and have to start getting more creative. So much so that I've resorted to keeping a (growing) [gist of names](https://gist.github.com/james-brndwgn/2e5b2c6ae7c41e0af79dec5292742929). 

Funnily enough, I don't seem to have this problem in naming JS components (for the most part). I work a lot with Vue and am thinking of trying out CSS Modules/scoped CSS in hopes it eliminates the need for CSS component names that BEM creates.

**What are some strategies you use when naming things?**
Making The Jump From Mobile Developer To Founder
Tags: startup, ama
Published: 2019-05-01 02:09:13

---
title: Making The Jump From Mobile Developer To Founder
published: true
description: 
tags: startup, ama
---

After years of trying to start a company, I finally made the jump. Multiple years experience working as a mobile developer, ask my anything.

I did so with the help of Sidepact, a weekend program for employed engineers to start companies in the Bay Area.

[Read the full story here.](https://www.sidepact.com/blog/2019/04/making-jump-from-mobile-developer-to-founder)
How to generate a static site by Hugo for GitHub Pages
Tags: githubpages, linux, hugo
Published: 2019-05-01 02:06:59

# Outline

I wanted to use a static site generator instead of hand-writing html pages. I need a static site generator because I'm hosting my web page by GitHub Pages.
I decided to use [Hugo](https://gohugo.io/) because of [terminal theme](https://themes.gohugo.io/hugo-theme-terminal/).
For your reference, this is steps of transfer from hand-writing to the Hugo.


# Install Hugo

I'm using the linux mint and the [linux brew](https://docs.brew.sh/Homebrew-on-Linux). it works! 

```bash
$ brew install hugo
...
$ hugo version
Hugo Static Site Generator v0.55.4/extended linux/amd64 BuildDate: unknown

```


# Create a new site & Install a theme

I selected [terminal theme](https://themes.gohugo.io/hugo-theme-terminal/)
```bash
$ hugo new site hugo_webpage
$ cd hugo_webpage
$ git init
$ git submodule add https://github.com/panr/hugo-theme-terminal.git themes/terminal
```
using `submodule` is not mandatory.

# Configuration

```
vim config.toml
```
by reading [README.md](https://github.com/panr/hugo-theme-terminal/blob/master/README.md#how-to-configure)

# Copy from old site

I had several hand-writing html pages. Some pages were able to be transferred to Hugo markdown documents under the `content/` directory, but the rest pages were not able to be done.
So that I had to use the `static/` directory in order keeping the rest pages.
```
$ cp -R ${old_pages} static/
```

# Confirmation

The Hugo has a serving future.
We can use this for confirmation.

```
$ hugo server
```
see also: [hugo serve command](https://gohugo.io/commands/hugo_server/)

you can confirm your site with `localhost:1313`

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

## trouble shooting#1
If you cannot confirm your hugo pages.
Please check again with below command
```
$ hugo server -D
```
If you can confirm the pages.
you should change your meta data of hugo markdown.
```diff
- draft: true
+ draft: false
```

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

# Build it
The hugo command generates your static html pages into public directory.
```
$ hugo
```
see also: [hugo command](https://gohugo.io/commands/hugo/)

# Confirm static html server
```
$ cd public
$ python -m http.server 8000
```

# Publishing

I copied everything inside the `public/` directory to the repository of GitHub Pages then pushed it.

That's all.

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

## trouble shooting#2

At Firs I attempted to create a index page for my top page beside a about page like below.

```tree
content/
├── index.md
├── about.md
...
```

Also my expectation of generated pages structure was like below.

```
public/
...
├── about
│   └── index.html
└── index.html
```
However the about directory was gone.
The cause is `index.md`. At Hugo, `index.md` and `_index.md` have special meaning.(https://gohugo.io/content-management/organization/)

Eventually I gave up creating a top page. So I created below structure.

```
content/
├── about.md
├── posts
│   └── hello.md
...
```

That's true all.
It's OK to be Scared
Tags: fear, stress, growth
Published: 2019-05-01 01:08:02

---
title: It's OK to be Scared
published: true
description: The unkown is absolutely terrifying, probably because we can't control what we don't know. But that's OK.
tags: fear, stress, growth
cover_image: https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2FItsOKToBeScared.png?alt=media&token=586a9f2b-f91e-4291-91d0-5a81454e7b73
canonical_url: https://ashleemboyer.com/it-s-ok-to-be-scared
---

*Originally written in late February 2019 for [my personal blog site](https://ashleemboyer.com/it-s-ok-to-be-scared).*

The unknown is absolutely terrifying, probably because we can't control what we don't know. But have you ever taken the time to think about how it feels to have all the information you need about something and still know you can't control it? It's terrifying _and_ infuriating.

Next week is the beginning of a totally new challenge for me. I'll be taking a class ~2 hours away from my job, and I have to change my work schedule to accommodate for the commute. 4 days per week, I'll be working from 6am - 2pm and then traveling to a lecture that lasts less than an hour.

Most of my fear about how the next 3 months will go has manifested as anger at the past. I think a lot about all the things that could and _should have_ gone differently for me. When I went to campus a few weeks ago in preparation for the term, I couldn't help but walk the hallways feeling sad for my younger self. She deserved so much better than she got at the time.

Then I think about where I am now. I live with my best friend and the life we've built together is something beyond I ever dreamed. We have a lovely home and handsome pup we share it with. The past year has involved so much growth in our relationship and I've never connected with another human more.

What if just one thing had gone differently while I was in college? Would I still be where I am? I probably wouldn't be the same person. All I know about right now is that am completely content with my life and my relationship with myself.

It took a while for everything to feel OK. But it got there, and I made it too. I have arrived and I am resting for the next trip. Nearly a year of rest has given me the space to realize that it was definitely OK to be scared all those times.

Fear keeps us moving, whether or not it's in the right direction. What's important is that we look at our surroundings periodically to make sure we're on the right track. When you see something scary looking you dead in the eyes, just keep faith that you _will_ be OK.

Everything will turn out exactly as it should.

---

Did you know I have a newsletter? 📬

If you want to get notified when I publish new blog posts or make major project announcements, head over to [https://ashleemboyer.com/newsletter](https://ashleemboyer.com/newsletter).

---

*[Image](https://unsplash.com/photos/n5zPMiIpX-M) by [irosmagelav](https://unsplash.com/@irosmagelav) on [Unsplash](unsplash.com)*
Setting up a Minecraft mod environment in VSCode (It's easier than you think!)
Tags: minecraft, vscode
Published: 2019-05-01 00:23:15

---
title: Setting up a Minecraft mod environment in VSCode (It's easier than you think!)
published: true
description: Easy summary on how to get a Minecraft mod development working in VSCode
tags: minecraft, vscode
---


Hi! This is my documented journey to create a Minecraft Forge mod. It's been a while since I created one, and I want to see if I still remember how things work.

In addition, I'd like to try to do this using [VSCode](https://code.visualstudio.com/), instead of the usual IDEs recommended for this. Let's see how it goes!

First, let's download Forge. The files can be found at [http://files.minecraftforge.net/](http://files.minecraftforge.net/_), and I think I want the MDK, but [let's see if the docs tell us](https://mcforge.readthedocs.io/en/latest/gettingstarted/#from-zero-to-modding).



Yep, the MDK. Ok, downloading the MDK for 1.12.2 - 14.23.5.2836...

Oh, before we get too far along, I'm planning to track my progress with git commits and this readme. That way, if things get broken or strange, I can use git to backup, and you and I get a nice history we can look back on.

Ok, the MDK is downloaded, let's unzip it.

The docs say to only copy `build.gradle`, `gradlew.bat`, `gradlew`, and the `gradle` directory. I'll leave out `gradlew.bat` since I'm developing on Linux.

The next step is to run `gradlew setupDecompWorkspace`. Since this is Linux, the correct command is `./gradlew setupDecompWorkspace`, since the working directory isn't in the path.

Ok, it looks like I don't have the java compiler (or JDK) installed on this computer. Your instructions to get a JDK installed for likely differ, so I'll leave this part out. DuckDuckGo is your friend.

OpenJDK 8 installed and `./gradlew setupDecompWorkspace` is successful.

The two commands we want for testing are:

- `./gradlew runClient`
- `./gradlew runServer`

Before we do that, we need a mod. Forge comes with a sample mod, but the instructions don't tell us to copy that. Let's do that though, so we have a starting place, and we can test this setup works

Copied the `src` directory from our unzipped MDK directory.

`[19:59:27] [Client thread/INFO] [examplemod]: DIRT BLOCK >> minecraft:dirt`

Great, it works! At this time, before we commit we probably want to create a `.gitignore and add a couple of things to it.

Before I get too far into modding, I want to know that we can build our mod correctly as well. I'm going to to use [MultiMC](https://multimc.org/) because it works all 3 major operating systems and makes creating Minecraft instances with the exact versions and mods you want so easy.

Here goes `./gradlew build`

`[20:08:03] [Client thread/INFO] [examplemod]: DIRT BLOCK >> minecraft:dirt`

Perfect! At this point, let's calls this version 0.1.0

*This post was created as part of the README for my [Panda's mod](https://github.com/drazisil/pandas#readme), but given my habit of not completing things I thought I'd share this part here in case it helped others. Thoughts and feedback welcome.*
Tracking changes with context
Published: 2019-05-01 00:00:00

---
title: Tracking changes with context
date: "2019-05-01"
published: true
description: "The what, who and why of keeping track of data changes"
tags: 
canonical_url: https://luizdamim.com/blog/tracking-changes-with-context/
---

Imagine an online shop who sells... anything, really. Users place orders buying products they want. But sometimes _they regret_ their decision ~~me 2min after buying something~~. Sometimes there's a _problem_ with the _payment gateway_. Sometimes you have a problem in your warehouse and the products are _out of stock_. Sometimes you can't sell because you can't _ship to the user's address_ or any other constraint that can't be verified at checkout time (please please PLEASE verify everything you can at checkout time, everyone gets happy :)).

All these possibilities result in the order cancellation. Behind the scene the application updates the order's `status` field from `processing` to `cancelled` and hopefully logs the date/time. That's it. Right? RIGHT?

## Sometimes knowing _What_ changed is not enough. It's essential to know _Why_ it changed.

If you don't know **why** something happened you are losing insight about your application, making you unable to act upon it.

---

**Example 1: User doesn't have sufficient funds**

Payment declined because the user doesn't have sufficient funds. The application cancels the order automatically.

The fields `gateway` and `reason` could be set by your application's payment workflow and `error_code` returned by the gateway processor.

```json
{
  "event": "order_cancelled",
  "id": 42,
  "actor_id": null,
  "metadata": {
    "reason": "payment_declined",
    "error_code": "INSUFFICIENT_FUNDS",
    "gateway": "IPayU"
    ...
  }
}
```

_Although in this example_ `actor_id` _is_ `null`, _I usually have an application user that is assigned to every automated action in the application._

**Example 2: Can't ship to the user's address**

User changed their shipping address after placing the order and for whatever reason you can't ship there.

Here `reason` and `description` were informed by an employee after manually analyzing the problem.

```json
{
  "event": "order_cancelled",
  "id": 42,
  "actor_id": 19,
  "metadata": {
    "reason": "shipping_address",
    "description": "User changed his address, can't ship to the new one."
    ...
  }
}
```

_These are contrived examples. There are better ways to handle these cases than cancelling the order._

---

On the next post I'll show one way you can do it in Elixir using _Ecto_ and _Phoenix_.

_Many thanks to Allan Jorge, @gustavoaguiar and @tyurok from_ [_Elixir Brazil OffTopic @ Telegram_](https://t.me/elixirbr_offtopic) _for helping me overcome my writing block / fear of writing this first post._
How to improve the security of your Netlify site?
Tags: netlify, security, beginners
Published: 2019-05-07 13:08:33

---
title: How to improve the security of your Netlify site?
published: true
tags:
  - Netlify
  - Security
  - Beginner
canonical_url: https://peterthaleikis.com/posts/how-to-improve-the-security-of-your-netlify-site/
---

Recently I've rebuilt my blog (this website) using [Eleventy](http://11ty.io/) and [Netlify](http://netlify.com/). Being an engineer, I like to enhance and improve my websites. Sometimes I submit my websites to services checking them to identify new areas of improvement. These services are for example broken link crawlers to find links which aren't working anymore or [securityheaders.com](https://securityheaders.com/), a service to check the HTTP headers for potential security enhancements/issues.

## The initial security assessment of my Netlify site

As many times before, I entered one of my websites for the check of the security-relevant HTTP headers on securityheaders.com. The result came back quickly and showed there is a potential to improve the headers. Only "Grade D" according to Scott Helme' site:

![Securityheaders Result of my website before any modification](https://peterthaleikis.com/static/images/How-to-improve-the-security-of-your-Netlify-site/result-before.png)

## Easy to improve with Netlify' \_headers file

The outstanding Netlify developer experience makes it very easy to tweak the headers. Netlify allows you to set additional headers in a file called `_headers`. This file should live in your "Publish directory". This is often called `public/`, `dist` or `_site`. If you are unsure you can check it in the Netlify admin panel of your site under "Build & Deploy".

The headers file allows you to define headers for different URLs (for example `/contact`) or URL segments (for example `/*` for all URLs) of your page. In my case it's very simple as I want to apply the headers to all pages (URLs):

```
/*
 X-Frame-Options: DENY
 X-XSS-Protection: 1; mode=block
 Referrer-Policy: no-referrer
 X-Content-Type-Options: nosniff

```

`_headers`-file example used on peterthaleikis.com

With these headers I get a significantly improved result and a "Grade A":

![Securityheaders Result of my website after tweaking _headers](https://peterthaleikis.com/static/images/How-to-improve-the-security-of-your-Netlify-site/result-after.png)

Adding the header file to your git, pushing it up and deploying shouldn't take more than five minutes and improves the security of your website significantly. I would think these are well invested minutes 🙏️
Introducing… CloudFormation extrinsic functions ;-)
Tags: aws, lambda, programming, serverless
Published: 2019-05-04 09:49:41

---
title: Introducing… CloudFormation extrinsic functions ;-)
published: true
tags: AWS,Lambda,Programming,Serverless
canonical_url: https://theburningmonk.com/2019/04/introducing-cloudformation-extrinsic-functions/
---

Ok, ok, AWS hasn’t announced a whole new class of [intrinsic functions](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/intrinsic-function-reference.html) for you to use in CloudFormation. But if you’re using the [Serverless framework](https://serverless.com/framework/) then I have a treat for you :-) I created a [plugin](https://github.com/theburningmonk/serverless-plugin-extrinsic-functions) for the Serverless framework that lets you use a number of custom Fn:: functions in your serverless.yml.

![](https://theburningmonk.com/wp-content/uploads/2019/04/img_5cc8ceab922ba-1024x443.png)

### The problem

The motivation for this plugin came from a challenge we had encountered at DAZN. We had a use case where we wanted to specify a CloudFormation condition that behaves like Javascript’s [startsWith](https://www.w3schools.com/jsref/jsref_startswith.asp) function.

The available set of [Condition functions](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/intrinsic-function-reference-conditions.html) is fairly constrained. Even simple logic such as the one described above proved tricky and the code was not easily comprehensible.

### “Extrinsic” functions

This plugin lets you use a number of custom functions anywhere in your serverless.yml as if they’re CloudFormation’s intrinsic functions. For example, you can use them as part of CloudFormation Conditions. To implement the startsWith logic, we can simply use the Fn::StartsWith function:

![](https://theburningmonk.com/wp-content/uploads/2019/04/img_5cc8d201bdcf1-1024x186.png)

All and all, 8 custom functions are supported out-of-the-box. And it’s pretty trivial to [add support for additional functions](https://github.com/theburningmonk/serverless-plugin-extrinsic-functions/blob/master/index.js#L1-L11) in the future. Let me know in the comments below if you have use cases that are difficult to implement with CloudFormation’s intrinsic functions. Maybe I can make your life easier by supporting them as extrinsic functions.

![](https://theburningmonk.com/wp-content/uploads/2019/04/img_5cc8d1a1b868f-1024x452.png)

The post [Introducing… CloudFormation extrinsic functions ;-)](https://theburningmonk.com/2019/04/introducing-cloudformation-extrinsic-functions/) appeared first on [theburningmonk.com](https://theburningmonk.com).

 ![](http://feeds.feedburner.com/~r/theburningmonk/~4/_2pK0jnPWgM)