teleren/devto huggingface dataset:
Visualising scroll position in your Gatsby site
Tags: gatsby, blog, plugin, scroll
Published: 2019-03-15 22:15:32

---
title: Visualising scroll position in your Gatsby site
published: true
description: I recently developed a little scroll indicator for my site and then thought, maybe others might find this useful?
tags: gatsby, blog, plugin, scroll
canonical_url: https://www.barrymcgee.co.uk/notes/gatsby-plugin-scroll-indicator
cover_image: https://www.barrymcgee.co.uk/images/scroll.png
---

At the start of this year, I rebuilt my blog using [Gatsby](https://www.gatsbyjs.org/). 

One of the stand-out features which set Gatsby apart from the rest as a static site generator is the [plugin eco-system](https://www.gatsbyjs.org/plugins/). Why re-invent the wheel if someone else has already designed a perfectly good wheel?

The beauty of web development is the ease in which we can easily peer over the shoulder of someone else, who may well be on the other side of the world, and quickly learn from them. 

Working within a well-designed plugin eco-system, we can not only learn from other developers but also turbo-charge our own development by quickly adopting their work and adding it to our own projects to make something that is hopefully more than the sum of its parts.

I'm an impatient person by nature. Have you been stuck on a train or plane with no idea when you'll be moving again? Isn't it utterly infuriating? Others [seem to agree](https://www.theguardian.com/lifeandstyle/2017/aug/28/michelle-hanson-still-here-waiting-childcae).  

Whenever there is any major transport disruption event, you'll notice that the first thing a frazzled interviewee on the evening news will complain about is typically not the cause of the disruption but the lack of information provided around it.  

A little information goes a long, long way.

You'll notice as you scroll down a post on [my blog](https://www.barrymcgee.co.uk), your progress is being tracked along the top of the screen from left to right. 

This gives you an immediate visual indicator of how long you have left on your journey to the end of this page. 

In our time-starved digital world, it's my theory that this little indicator makes it more likely you'll continue reading all the way to the bottom (the quality of my writing notwithstanding.)

I developed this little feature on my blog and saw that it was good. I then bundled it up as a [Gatsby plugin](https://www.gatsbyjs.org/packages/gatsby-plugin-scroll-indicator/) for others to pick up and use in their own Gatsby sites. 

To add it to your own Gatsby site, install using npm;

`npm install --save gatsby-plugin-scroll-indicator`

...or Yarn...

`yarn add gatsby-plugin-scroll-indicator`

...and then add the plugin reference and config options to your `gatsby-config.js` file:

```
plugins: [
  {
    resolve: `gatsby-plugin-scroll-indicator`,
    options: {
      // Configure your indicator bar color here
      color: '#BADA55',
    },
  },
];
```

Restart all the things, clear all the caches and you should now have a visual scroll indicator on your site too. 💥

Source code: [Github](https://github.com/barrymcgee/gatsby-plugin-scroll-indicator)
Dev-Log #1: Lander-Game
Tags: elixir, game, indie, space
Published: 2019-03-15 22:10:45

---
title: Dev-Log #1: Lander-Game
published: true
description: Thoughts about a new mini-game
tags: elixir, game, indie, space
---

I like to work on games from time to time. The last thing I released was [Dubiduh](http://dubiduh.com) in 2016, a short puzzle-game where you control a snaky-ghosty-thing through levels.

That has beed some years ago, and I'd like to release something small again!

I have no idea where this is going, or if there will be a Dev-Log #2, I just felt like writing some words down.

The idea is as follows:

- The player is responsible for the utilisation of landing-platforms in a space-hangar. The hangar has a couple of those platforms. 
- Every few rounds/iterations there's a ship arriving.
- The player decides where it may land, or whether to send it away. 
- Ships pay for landing, and for each round they are in the hangar.
- Each ship leaves after one or a few rounds.
- Each ship belongs to a fraction: Police, Corporate, Cartel.
- The player has a reputation with each fraction.
- Placing a police-ship next to a cartel-ship will improve the reputation with the police, and worsen it with the cartel. Rock-paper-scissors in space.
- All combinations will have some effects like the one above.
- The better the reputation, the more that fraction will pay for landing/staying.

So the main goal is to place/send away the incoming ships strategically, to reach a certain financial goal, or to construct additional platforms (but not in a cookie-clicker fashion)

The platforms could be 4 in a row, or even a 2D-Grid with different ship-sizes.

There could be events, like a cartel ship promising you a large amount of money for not allowing police for n rounds.

But let's lay low for now. I'm working on a prototype where the player should be able to place incoming ships, get money for their stay, and have varying reputation based on described effects.

Since I have had a crush on Elixir for some time, I'm picking it for the initial code. I'm keeping the interface as ASCII for now, since I'd like to figure out the rules before drawing a single pixel. I imagine this would also work well with paper and dice.

I'm calling it "NEORAID", because I mistyped "niorad" and liked the word.

![Prototype](https://thepracticaldev.s3.amazonaws.com/i/cemfgsh87h63xrt847rf.png)
Help with the dijkstra algorithm, please
Published: 2019-03-15 21:54:28

---
title: Help with the dijkstra algorithm, please
published: true
description: I need help to program the algorithm. It's for a project for a college programming course and I do not understand it.
tags: 
---
Hello, could someone help me with this please, in itself I do not want to pass the code but I want to learn. If you could explain or tell me about a video or page where they teach how to program it, I would greatly appreciate it. Because I really need it. Thanks in advance.
Getting the latest episodes instantly in Pocket Casts
Tags: showdev, podcast, pocketcasts
Published: 2019-04-09 22:17:52

---
title: Getting the latest episodes instantly in Pocket Casts
published: true
tags: showdev, Podcast,Pocket Casts
canonical_url: https://miguelpiedrafita.com/pocketcasts-cache/
cover_image: https://miguelpiedrafita.com/content/images/2019/03/pocket-casts-2.jpg
---

_Too tired to read? Listen to this article instead!_

{% blogcast 531 %}

I use Pocket Casts as my only podcatcher. It's awesome, but I've noticed sometimes episodes take a while to appear. For example, someone tweets a link to the latest episode of their podcast, but it doesn't appear in the app, even when I hit refresh.

This is because Pocket Casts caches all the feeds you're subscribed to and refreshes them periodically. When you click the refresh button in your app, it just fetches the latest cached version but doesn't re-fetch it.

Fortunately, I managed to come up with a solution that'll bust the cache of a specific podcast. And this change will not only affect you, all Pocket Casts users will see the new episode in their podcatcher.

To use my trick, you'll first need to find the URL to the RSS feed for the podcast you want to refresh. This can be usually found on the podcast website. Once you have it, use a URL shortener like Bitly to create a shorter link. This'll pass through Pocket Casts' duplicate check and make it think it's a new feed you're adding.

Finally, go to [Pocket Casts' submit page](https://pocketcasts.com/submit) and paste the shortened URL. You should see the new episodes appearing in your app almost instantly!
Are you for or against testing for beginners?
Tags: beginners, testing, discuss, healthydebate
Published: 2019-03-15 21:37:14

---
title: Are you for or against testing for beginners?
published: true
description: 
tags: beginners, testing,discuss, healthydebate
cover_image: https://thepracticaldev.s3.amazonaws.com/i/1o6kp4cnwy9uvcgl2p60.jpg
---

So we have heard from - 
{% user joncalhoun %} 
{% link joncalhoun/when-nil-isnt-equal-to-nil-5bbh %}

and a counter article from -
{% user dowenb %}
{% link  dowenb/testing-is-for-beginners-44da %}

__Let's hear from you__
Whether you are a senior/junior developer, software engineer, or a beginner trying to learn TDD what is your view or advice on this?
What are the best alternatives to Adobe assets?
Published: 2019-03-15 21:26:14

---
title: What are the best alternatives to Adobe assets?
published: true
description: design, adobe, creative-cloud, help
tags: 
---

Adobe used to have a really cool feature on Creative Cloud called Adobe assets, which worked almost seamlessly with Adobe XD. Basically it provided a quick and easy UI to download icons while designing a wireframe. 

So If I was sketching the layout for an iPhone app, and I wanted to add a home icon to the the home tab in the design, I could easily search for home icons, download my favorite one, drag it into the XD file, and position it in home tab section. And all of this could be done for free right from the toolbar at the top of my Mac.

![](https://thepracticaldev.s3.amazonaws.com/i/ezt0uhkyixa2i1xumiy8.png)
![](https://thepracticaldev.s3.amazonaws.com/i/i0xq7le2s5ds4yxz8cte.jpg)

It was such a perfect UX for downloading icons and adding them to a wireframe, and it made the task of designing apps and websites so much simpler.

Unfortunately, Adobe got rid of this feature. I'm not sure why, and I'm definitely not happy about it, but for some reason they decided it didn't make sense anymore to give user's of their products a great experience (clearly I'm not over this yet lol.)

Anyways, now I'm in need of a new method for downloading icons while I sketch wireframes, and I figured what better community to ask for help on this than the dev community! Any of you guys know of a good tool that accomplishes the same thing as Adobe assets? 

Ideally it would be free all though I wouldn't mind a product with a small fee attached.

Also, I'm considering dropping Adobe Creative Cloud all together, since I really only used it for Adobe XD and now that I feel like the seamless UX of the whole design process is heading south I'm looking at other options. I've tried sketch but I find it complicated compared to the simplicity of Adobe XD. Anyone know of any other good alternatives?
Understanding Angular 9|8|7 Animations
Tags: angular, angular987, animations
Published: 2020-02-07 09:37:33

---
title: Understanding Angular 9|8|7 Animations
published: true
tags: Angular ,Angular 9|8|7, Animations
canonical_url: https://www.positronx.io/understanding-angular-animations/
---

The post [Understanding Angular 7 Animations](https://www.positronx.io/understanding-angular-animations/) appeared first on [positronX.io](https://www.positronx.io).

**Angular 7+ Animations** will be covered in this article. Thanks to the Web **Angular animations API** , Angular is fully equipped with its own DSL and powerful animation engine. This article is meant to be a detailed study of Angular 2+ animations. And we will need to come up with more posts to cover this topic more efficiently. 

We have provided some simple **Angular animations examples** for your reference. Let’s divulge more details of **Angular animations**.

 [click here to read more](https://www.positronx.io/understanding-angular-animations/)
A11y
Tags: a11y
Published: 2019-03-15 18:52:46

---
title: A11y
published: true
description: My notes on an the NERDSummit 2019 Accessibility tech talk
tags: A11y, Accessibility
---


Web Accessibility: also known as A11y (a numeronum A(11 chars)Y pronounced ally.

I went to an A11y talk by Alex Brenon who is a member of the accessibility github team.
[Her slides are available here](https://alexroseb.com/nerd)

She talked about the less obvious use cases for making your site more accessible as well as the hearing and site impaired.

Is it important to consider the cases where a site may be difficult to use.

The standards for accessibility are set out by 

. W3CAG:  pronounced wocag.
. WAI
. W3C

Some non obvious cases to affect a sites use is: 
. Low internet speed
. Temporary injuries people get, can’t type for a while

Everyone benefits from it.

#Tota11y is common tag, as well as #a11y

Highlights from the overview:
Alt-text: description should be good,  but not too wordy just important parts
Also helps with SEO (search engines)
Screen readers read the alt tags. 

If Slow network the alt shows us first so everyone gains.

Never use words such as 'pic of' or 'image' in alt text

W3c site helps create a ratio for colour ratio: higher the better
AA - levels of how much you are conforming to standards
AAA - full set

Think about how Perceivable you site is:
Colours / alt text

Is your site Operable?

i.e. Keyboard friendly without mouse and Tab index accessibile and it makes sense sequentially and the Ordering: make sure there are Skiplinks at the top of page, brings you to the main content, without the navigation.

The 3rd step of wcag is making your site understandable.

Lang attribute in header,  and when language changes within content
With span.

Final thing is Robustness
Good Html practices , Tag id once only, classnames clear.

Check your site with an auto and manual Audit:
[Wave - by webaim](http://wave.webaim.org) 

[Axe - a chrome extension you can add](https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)

Always check:
Can you mute the sound?
No mouse - Can you tab through
No sight - alt tags for images.

[For further reading on ReactJS sites](https://reactjs.org/docs/accessibility.html)

Screen readers to check : Jaws and Nba
Other usefull tools: Chrome lense

Resources:
https://a11yproject.com/about

https://theblog.adobe.com/different-breaking-accessibility-universality-inclusion-design/

https://www.w3schools.com/html/html_accessibility.asp

Alex is available at;
@staralexb


Thanks for reading!
Susi zsh + iterm theme
Tags: zsh, iterm, terminal, ohmyzsh
Published: 2019-03-15 19:58:35

---
title: Susi zsh + iterm theme
published: true
description: Susi zsh-theme - iterm2 + zsh theme dark theme
tags: zsh,iterm,terminal,oh-my-zsh
cover_image: https://thepracticaldev.s3.amazonaws.com/i/nyefcr2gqnjklugwgdf8.png
---

My first post in [dev.to](dev.to) to share my iterm + zsh theme


## Installation

First you need to clone or download the [susi-zsh-iterm repo](https://github.com/carcruz/susi-zsh-iterm) 

### Theme

- Drop susi.zsh-theme into the ~/.oh-my-zsh/custom/themes/ directory (simply create the themes directory if it does not exist)
- Change the theme variable name to **ZSH_THEME="susi"** in _~/.zshrc_
- Reload the terminal (ZSH with source ~/.zshrc)

### Colors
- Open **Preferences** pane on the **Profiles** tab in iTerm
- Switch to the Colors tab and import the _susi.itermcolors_ (you will find this option in a drop-down in the lower right corner)

### Font
My recommended font is Incosolata. You can find it [here](https://fonts.google.com/specimen/Inconsolata)


Enjoy ✌🏼
Made in 🇨🇷
Associate File Types in VS Code
Tags: vue, vscode, javascript, webdev
Published: 2019-03-15 19:20:02

---
title: Associate File Types in VS Code
description: How to make your editor understand specific file formats.
published: true
tags: vuejs,vscode,javascript,webdev
canonical_url: https://medium.com/@John_Papa/associate-file-types-in-vs-code-14b19dbbacd0
cover_image: https://thepracticaldev.s3.amazonaws.com/i/qc974qi2ho0av2tme6qc.jpg
---

I love a good editor. All of the great tooling, intellisense, auto-complete and all of the goodness and efficiency. Intelligent tooling is a huge part of what makes our day fun. Don’t you agree?

For example, when I open [Visual Studio Code](https://code.visualstudio.com/?wt.mc_id=devto-blog-jopapa) (aka VS Code) and it recognizes the file type I am editing, it lights up all of the relevant tooling features. Typescript, JavaScript, docker files, Vue files … it all works great! Sometimes we have to load an extension to make some of these light up (e.g. Vue files with the [Vetur extension](https://marketplace.visualstudio.com/items?itemName=octref.vetur&wt.mc_id=devto-blog-jopapa)).

So you can understand it makes me sad when I open a file and I get zero help from the tool. No color coding of keywords, no formatting, no intellisense, nothing! This rarely happens, but when it does, there is an easy fix. One case is the .vuerc file.

![Associate Files by Type, in Visual Studio Code](https://media.giphy.com/media/TFdR29C9lm4RDzzZES/giphy.gif
)<figcaption>Associate Files by Type, in Visual Studio Code</figcaption>

### Associate Files

Here is an example. When coding with Vue, sometimes we want to view or edit the .vuerc file. This is where Vue stores all of the Vue CLI presets that we save. If we open the file (stored on my computer at ~/.vuerc) in VS Code we see a file with no special tooling help. VS Code cannot by default determine what to do with this dot file.

Fortunately, there is an easy solution. Open your settings (CMD + , on a Mac or CTRL + , on Windows) and enter a file association. We can do this with the settings UI or the settings JSON, both are options to edit your settings.

Then enter a file association for the .vuerc file so VS Code knows it should contain JSON.

```
"files.associations": {
 ".vuerc": "json"
}
```

The code above associates this one file with JSON. We can also add pattern matching if we want to associate all files that match a specific naming pattern.

You can [learn more about the language identifier feature from this link in the VS Code docs](https://code.visualstudio.com/docs/languages/identifiers?wt.mc_id=devto-blog-jopapa).

Now we know how to get great tooling features for all of our files!

![](https://cdn-images-1.medium.com/max/1024/1*qLO8W8xWxPfjgP5R1I6fLg.png)<figcaption>VS Code</figcaption>
New Feature: Personal Configuration (sans serif fonts/night mode beta)
Tags: meta, changelog, webdev
Published: 2019-03-15 18:33:36

_Update: Night mode is coming along nicely and looks awesome! It was not as far along when I first wrote this._

We just shipped a new feature: Display customization.

It is available in your [/settings/misc](/settings/misc) page.

The two available configs are "theme" and "font" (for post bodies). These are customizations that individual users can make to achieve their preferred experience without having to rely on browser extensions or other non-native hacks. There is one available non-default configuration for each config. In the future, perhaps there will be more variety.

This configuration will naturally work across all devices while you're logged in.

There are both personal preference and accessibility issues at play, and it's exciting to offer better options for everyone. Serif fonts are particularly difficult for folks with dyslexia.

More info here:

{% link https://dev.to/lkopacz/learn-about-dyslexia-for-the-web-with-me-1b9n %}

The night theme is still sort of a work in progress in terms of getting the colors right. So what you are seeing now is sort of a temporary implementation, but I think it will kickstart the progress towards full-on themes. @link2twenty from the community has done an awesome job leading the way in making CSS themes possible.

{% github https://github.com/thepracticaldev/dev.to/issues/1377 %}

You may find you don't actually want to use night mode until more progress is made with themes. I think the font customization will be more immediately valuable.

Great read on the CSS theme approach:

{% link https://dev.to/link2twenty/future-of-css-color-scheme-10of %}

Again, go here to make this change: [/settings/misc](/settings/misc).

We considered changing universally to sans serif a long time ago, but nobody agreed on what was best. It doesn't really make sense for this choice to be up to the author—it's really a matter of personal taste for the readers.

Here's the old post mulling over the topic:

{% link https://dev.to/ben/considering-changing-to-sans-serif-for-post-body-8f5 %}

Regarding implementation: We don't serve most requests from our origin server, but instead serve cached pages that don't have an understanding of the user's context. Because of this constraint, the individual config is stored in `localstorage`, and modifies the page at render time. I'd overcomplicated things by trying to make this work via serviceworkers, and that might still be the longterm solution, but for now this works pretty well in all environments.

Here was the pull request from this morning:

{% github https://github.com/thepracticaldev/dev.to/pull/2072 %}

This also may not work across all pages on the site until some caches are cleared, but should work globally soon enough.

Happy coding!
String Reversal in Javascript
Published: 2020-11-08 00:48:46

---
title: String Reversal in Javascript
published: true
tags: 
canonical_url: http://andrewmiracle.com/posts/algorithms-js-string-reversal/
---

> #30 days of Javascript Algorithms - D1

In this javascript algorithm, I would be sharing with us different methods to reverse a string in javascript. This is a common exercise in coding interviews, entry level algorithm challenges, though implementation in various languages may be different we would be looking at how to reverse a string in javascript, hope this helps you.

## Task

Given a string, return a new string with the reversed order of characters

###### Examples

- reverse(‘apple’) === ‘leppa’
- reverse(‘hello’) === ‘olleh’
- reverse(‘Greetings!’) === ‘!sgniteerG’

### Using Javascripts Inbuilt Array Prototypes

```
function reverse(str) {
  return str
    .split("")
    .reverse("")
    .join("");
}
```

In the example above, we use the array methods, `split`, `reverse` and `join` if we executed the function, our output would be something like

```
reverse("hello") //here we reverse the string hello

function reverse(str) {
  return str
    .split("") // output here is an array ['h','e','l','l','o']
    .reverse("") // the output here is ['0','l','l','e','h']
    .join(""); // The array join method would join the array into a string "olleh"
}
```

### Using Reduce Callback

```
function reverse(str) {
  return str.split("").reduce((acc, curValue) => curValue + acc), ''
};
```

The reduce function takes an accumulator and a value, this function will loop through every element in an array an generate an output based on the expression we pass into it, here we reversely concatenate the elements of the array, a much clearer way to look at it is

```
function reverse(str) {
  let stringToArray = str.split("") // This expression creates a new array from our string
  return stringToArray
      .reduce( (acc, curValue) => curValue + acc), ''};
```

### Using the _For Of_ Syntax

```
function reverse(str) {
  // we initially define reversed as an empty string in within the function
  let reversed = "";

  // The for of loop iterates over elements
  for (var character of str) {
    // var reversed = []
    // store the value into reversed recursively
    reversed = character + reversed;
  }
  // return the value of reveresed in our function
  return reversed;
}
```

The for Of loop can iterate through Arrays, Strings and Javascript constructs that return `true` to the `propertyIsEnumerable` arguement.

[Learn More about Algorithms from : The Coding Interview Bootcamp: Algorithms + Data Structures](https://www.udemy.com/coding-interview-bootcamp-algorithms-and-data-structure/)