teleren/devto huggingface dataset:
SEO & accessibility
Tags: a11y, seo
Published: 2019-07-29 19:12:32


Hey everyone, this will be the last article in this quick series about accessibility. Today we will be talking about SEO and accessibility. While many developers know what SEO is, I would like to define it so everyone is on the same page, and I’m also going to do that for accessibility in the context of web development. The most important reason to make your site SEO friendly is easy to understand: the better your SEO, the more clicks you will get from google. SEO stands for search engine optimization, and this can take place in many different ways, from speeding your site up to adding alt tags. We will be discussing some SEO tips that also improve your accessibility. I’d also like to take the time to talk about some other forms of accessibility that may not get touched on as much, in the development community. Then I want to walk through how making your site accessible makes it more SEO friendly.
One of the biggest things that impact your SEO is your mobile site speed. Google does this for a few reasons, but I think the biggest two are that people are impatient, and there are still many people who do not have a good connection to the internet. I will not spend time discussing why people are impatient, everyone has their own opinions on that. However, I do want to spend some time discussing why it’s important to design your site with poor connections in mind. There are many people who either have older devices or live in places where there isn’t accessible internet. So making your site light, fast, and responsive means your SEO will improve and it increases the number of people who can access your site.  Making a site faster also makes more accessible for a few reasons, it makes it easier to navigate since tools will be faster to load. I’ve also noticed that faster sites tend to have a very clear hierarchy, which makes your site have better SEO + easier to navigate for everyone. 
Other things that can improve your SEO scores are things like adding all of your alt tags. Labeling your images helps two groups: the spiders that rank your site and people who use screen readers. Another quick tip is to make sure you use contrasting colors, as this helps people with vision issues, and it will help your SEO score. One final tip is to ensure all of your links have descriptions and make sure it is clear that the link is a link. This is so that keyboard users will be able to navigate your site better, and it makes it easier for the spiders to map out your site. 
I hope these definitions and tips helped you learn something new today!
window.location object
Tags: javascript
Published: 2019-07-29 18:58:32

---
title: window.location object
published: true
description: extract information like base url of URL with window.location 
tags: javascript
---
Page URL: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined

window.location // gives url

const baseRef = location.href.substring(0,location.href.lastIndexOf('/')+1);
console.log(baseRef);
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/
Load specific JS files in Elixir and Phoenix
Tags: specific, javascript, elixir, phoenix
Published: 2019-07-29 18:51:01

First of all, I'd like to say that this post is based on that one:
[http://codeloveandboards.com/blog/2016/04/26/page-specific-javascript-in-phoenix-framework-pt-2/](http://codeloveandboards.com/blog/2016/04/26/page-specific-javascript-in-phoenix-framework-pt-2/)
But I made some changes to (IMO) simplify it...

So, let's start:

First, we can add in our file `assets/js/app.js` this code:
```js
// Import specific page views
import './views/init';
```

And now we'll create this `init.js` file in `assets/js/views/init.js` and add this code:

```js
import loadView from './loader';

function handleDOMContentLoaded() {
  const viewName = document.body.dataset.jsViewPath;

  const view = loadView(viewName);
  view.mount();

  window.currentView = view;
}

function handleDocumentUnload() {
  window.currentView.unmount();
}

window.addEventListener('DOMContentLoaded', handleDOMContentLoaded, false);
window.addEventListener('unload', handleDocumentUnload, false);
```

And now we'll create this `loader.js` file mentioned on the `import`, so create the file `assets/js/views/loader.js` and add this code:
```js
import MainView from './main';

export default function loadView(viewPath) {
  if (!viewPath) return new MainView();

  const ViewClass = require('./' + viewPath);
  return new ViewClass.default();
}
```

And now this other file called `main.js` in `assets/js/views/main.js` with this code:
```js
export default class MainView {
  // It will be executed when the document loads...
  mount() { }

  // It will be executed when the document unloads...
  unmount() { }
}
```

Nice! :)
Now in our controller, we can return a new value to the view, informing the directory of our js file, something like this:

```ex
conn
|> assign(:js_view, "posts/index")
|> render("index.html")
```

And now in our layout file, that may be in `templates/layout/app.html.eex` we can add this code in our `<body>` tag:
```html
<body data-js-view-path="<%= assigns[:js_view] %>">
```

And it's ready! :)
So, we'll only try to fetch the JS file is we set the `js_view` on the controller.

Now, to use it, you can create a file in `assets/js/views/posts/index.js` and add code similar to this:

```js
import MainView from '../main';

export default class View extends MainView {
  mount() {
    // Add your JS code here...
    console.log('UHULL! It works!')

    super.mount();
  }

  unmount() {
    super.unmount();
  }
}
```

✨
Testimonial slider, Content circles, Image teaser | Module Monday 49
Tags: showdev, webdev, javascript
Published: 2019-07-29 18:17:36

---
title: Testimonial slider, Content circles, Image teaser | Module Monday 49
published: true
description: Module Monday 49
tags: showdev, webdev, javascript
cover_image: https://res.cloudinary.com/component/image/upload/b_rgb:ffffff,c_lpad,h_350,w_800/v1564187909/testimonials_n54dpc.gif
canonical_url: https://guide.anymod.com/module-monday/49.html
---

## Everything below is open source 
It's free to use on any website, web app, or anywhere else. There are hundreds more like these built & shared by developers on [AnyMod](https://anymod.com).

Click a mod to see it along with its source code.

## Testimonial carousel
Customer quotes in a slider format, with a parallax background.
<a class="btn btn-sm" href="https://anymod.com/mod/testimonial-carousel-with-parallax-alrkda?preview=true">View mod</a>
<a href="https://anymod.com/mod/testimonial-carousel-with-parallax-alrkda?preview=true">
  <img src="https://res.cloudinary.com/component/image/upload/v1564187909/testimonials_n54dpc.gif"/>
</a>

## Image teaser
Beautiful call to action with editable copy and image.
<a class="btn btn-sm" href="https://anymod.com/mod/image-teaser-ordbbo?preview=true">View mod</a>
<a href="https://anymod.com/mod/image-teaser-ordbbo?preview=true">
  <img src="https://res.cloudinary.com/component/image/upload/v1564187908/image-teaser_ppjonk.png"/>
</a>

## Auto-alternating sections
Your content is automatically styled to alternate.
<a class="btn btn-sm" href="https://anymod.com/mod/caminar-alternating-sections-raokdd?preview=true">View mod</a>
<a href="https://anymod.com/mod/caminar-alternating-sections-raokdd?preview=true">
  <img src="https://res.cloudinary.com/component/image/upload/v1564187909/alternating_hwfszg.gif"/>
</a>

## Content circles
Responsive thumbnails with short descriptions for each.
<a class="btn btn-sm" href="https://anymod.com/mod/content-circles-kdnmkn?preview=true">View mod</a>
<a href="https://anymod.com/mod/content-circles-kdnmkn?preview=true">
  <img src="https://res.cloudinary.com/component/image/upload/v1564187907/circles_y95jc8.png"/>
</a>

## Download call-to-action
Simple call-to-action section for driving downloads.
<a class="btn btn-sm" href="https://anymod.com/mod/cta-button-raokrd?preview=true">View mod</a>
<a href="https://anymod.com/mod/cta-button-raokrd?preview=true">
  <img src="https://res.cloudinary.com/component/image/upload/v1564187907/download_b8jrq1.png"/>
</a>

<hr>

I post new mods from the community [here](https://dev.to/tyrw) every (Module) Monday -- I hope you find them useful!

Happy coding ✌️
WordPress needs a front end framework
Tags: wordpress, elm, learning, open
Published: 2019-07-29 18:17:19

---
title: WordPress needs a front end framework
published: true
description: The complexity of websites is growing exponentially and WordPress is not immune.
tags: wordpress, elm, learning, open
cover_image: https://wking.dev/images/projects/elm-press.jpg
canonical_url: https://www.wking.dev/content/articles/wordpress-needs-a-frontend-framework/
---

_Cross post from: https://www.wking.dev/content/articles/wordpress-needs-a-frontend-framework/_

The complexity of websites is growing exponentially and Wordpress is not immune. Although commonly thought of as a blogging platform, the company I work for and thousands of other use it for so much more.

### The Missing Link

Frameworks, tools, and even new languages have been created to help manage the complexity. However, WordPress does not have a story around how these new tools fit into developing for their platform. That is what I want to help fix.

That being said, I want to bring Elm into the WordPress community the right way. How do you justify Elm when working with a system that is so ingrained in how not only the backend is written, but the frontend as well? Is there even a case for building WordPress sites and applications with Elm? Obviously, I think the answer is yes, but I want to learn and share more about what that system looks like.

### So, what's the plan?

That's a good question. The only plan I have right now is to use my experience in WordPress and Elm to start exploring intersections where these two technologies support each other. Aka, I am just going start building and see where it takes me.

### The more the merrier

There are plenty of more experienced WordPress or Elm developers out there, and hopefully doing this in the open will encourage help from those who see this and are passionate about bring these two worlds together like I am!

Right now the plan is very fluid and will be changing along the way. I hope to give updates and provide breakthroughs. Also, there might be research/feedback that will need input from the broader community.

If you would like to be updated in an email for any of these reasons signup below. Otherwise, I will try and share them in some format on [Twitter](https://twitter.com/@wking__) and in the Elm communities.


**Signup for updates:**

[Follow Along](https://www.wking.dev/newsletter)

**Tweet thread:**

{% twitter 1155895077518155777 %}
OpenGL Game in Clojure CLR (Mono/.Net) - Part2 (The GameWindow)
Tags: clojure, mono, opengl, opentk
Published: 2019-07-29 18:06:31

---
title: OpenGL Game in Clojure CLR (Mono/.Net) - Part2 (The GameWindow)
published: true
description: A tutorial series on creating an OpenGL games using OpenTK and Clojure CLR with Mono.
tags: Clojure, Mono, Opengl, OpenTK
series: Create an OpenGL Game in Clojure CLR
cover_image: https://upload.wikimedia.org/wikipedia/commons/1/14/Chromium_BSU.jpg
---

## Importing OpenTK assembly.

We will begin with importing the OpenTK `dll` files into our source.

Update the `core.clj` with the following code:

{% gist https://gist.github.com/metacritical/bed233c07da6c5ab2ba800b91264cef1 file=core-import.clj %}

In the above code we just added the relative path of `OpenTK.dll`, a .net assembly wrapper for OpenGL.

The we import the necessary drawing and input libs and classes.

{% gist https://gist.github.com/metacritical/bed233c07da6c5ab2ba800b91264cef1 file=core-import_1.clj %}


Once the necessary classes are imported we will begin with creating an instance of `GameWindow` class and àssigning a cornflower blue color to the background.

{% gist https://gist.github.com/metacritical/bed233c07da6c5ab2ba800b91264cef1 file=core-import_2.clj %}

Important thing to note in the above is `(.SwapBuffers game)` because OpenGl is double buffered so while one buffer is showing on the screen other can be used to be drawn to. 

Once a drawing action has been accomplished we need to instruct the Graphics card to swap the visible buffer with the buffer drawn to this makes the new buffer visible and hides the previous one. Double buffering is essential in creating the illusion of animation by drawing to alternate buffers and swapping them.

Also `(.Run game 30.0)` is essentially telling OpenGL to refresh the screen at `30 FPS` (30 Frames per second)

Now let us compile this program using:

`$ ./build.sh c`
`Compiling core to build/ -- 1796 milliseconds.`

And then run it using :

`$ ./build.sh r`

This should result in a sunflower blue coloured window:


![SunFlowerGamewindow](https://thepracticaldev.s3.amazonaws.com/i/1slmg1w7acydybj63lpe.png)

So now we have a simple OpenGL Window Running, but it doesnt handle any inputs as of yet. In the next series lets implement ways to handle keyboard input to close the window.


All Posts:

[Part 1 - The Setup](https://dev.to/metacritical/create-an-opengl-game-in-clojure-clr-mono-net-part1-the-setup-59ai)
[Part 3 - Handling Input](https://dev.to/metacritical/create-an-opengl-game-in-clojure-clr-mono-net-part3-handling-input-2leo)
Welcome Thread - v36
Tags: welcome
Published: 2019-07-29 16:42:38

---
title: Welcome Thread - v36
published: true
description: Introduce yourself to the community!
tags: welcome
---

![Bear waving](https://media.giphy.com/media/dzaUX7CAG0Ihi/giphy.gif)

### Welcome!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
Why do you use React?
Tags: discuss, react
Published: 2019-07-29 16:41:38

---
title: Why do you use React?
published: true
description: I want to know why everyone is loving React, and whether I can be convinced to spend the time and money to learn it
tags: discuss,react
---

What makes it so good?

Why do you use it over other build tools?

What is the learning curve like? Any suggestions on resources?
Most developers feature creep on themselves
Tags: development, productivity, discuss, management
Published: 2019-07-29 16:22:20

---
title: Most developers feature creep on themselves
published: true
cover_image: "https://i.imgur.com/39W8NOi.jpg"
description: When simplistic solutions blow up with technical creep from developers 
tags: #development, #productivity, #discuss, #management
---

Them: “That Jira ticket will take me at least a week or maybe two.”
You: “Really? That feature didn’t seem like a lot of effort.”
Them: “This new feature will be accessing the database. I’ll need to write a caching layer.”

You: “Our platform doesn’t take that many requests. It’ll be a negligible amount of additional reads to the database.”
Them: “Ugh! Another hack, why can’t we do anything the right way?”

You’re probably not writing code for, Google, Facebook or Apple. Stop thinking you are.

A common trend I see more these days is that when other developers aren’t getting their way(aka “the right/correct way”), they are more likely to write off the solution as a “hack”. Every solution comes with compromises.

At what point do you draw the line? Is it when they start suggesting rewriting the whole JDBC driver because they believe their solution is more performant?

If we lived in a magical world where Steve Jobs sings to us every morning, the streets are paved with gold and everyone dreams to be us then, yes, time is infinite, and then they can implement as much as they want.

Instead of adding that caching layer, implementing an outrageous multitier abstraction, or using a new design pattern you just read about last week, can we focus on solving problems that make our lives better?

Wouldn’t it be a better use of this developer’s time to solve problems that will have a significant impact? It would be a better use of their time fixing the tooling that is going to make the team more productive seems like a better use of time then over engineering the shit out of this feature.

Yes, there are times when you’ll need to add caching on your reads but measure it, prove it and then develop it. Too many of us in the industry think we’re some mythical unicorn, Google, Apple, or Facebook, but in reality, a lot of our day to day problems aren’t near that kind of requirement.
Daily Challenge #26 - Ranking Position
Tags: challenge
Published: 2019-07-29 16:09:45

---
title: Daily Challenge #26 - Ranking Position
published: true
description: part of the Daily Challenge Series
tags: #challenge
series: Daily Challenge
---

We're back with another week of challenges! 

Today, let's get a little creative and develop a ranking system where we can sort points and calculate the position of an individual or a team competing in a game/competition. 

**Note**: 
If two or more persons have the same number of points, they should have same position number and sorted by name (name is unique).

For example, Input structure:

```
[
  {
    name: "John",
    points: 100,
  },
  {
    name: "Bob",
    points: 130,
  },
  {
    name: "Mary",
    points: 120,
  },
  {
    name: "Kate",
    points: 120,
  },
]
```

Output should be:

```
[
  {
    name: "Bob",
    points: 130,
    position: 1,
  },
  {
    name: "Kate",
    points: 120,
    position: 2,
  },
  {
    name: "Mary",
    points: 120,
    position: 2,
  },
  {
    name: "John",
    points: 100,
    position: 4,
  },
]
```

Good luck!


***
_This challenge comes from user kzm. Thank you to [CodeWars](https://codewars.com/), who has licensed redistribution of this challenge under the [2-Clause BSD License](https://opensource.org/licenses/BSD-2-Clause)!_

_Want to propose a challenge for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
URLSearchParams()
Tags: javascript, node, react
Published: 2019-07-29 15:43:01

Ola pessoal,

Na dica de hoje, vou mostrar o URLSearchParams()!

Uma forma fácil de trabalhar com os parâmetros de uma url no JavaScript!

![URLSearchParams()](https://thepracticaldev.s3.amazonaws.com/i/zjpcfr1lz4bp6o750i4y.jpg)


[Participe da nossa lista de devs](http://emersonbroga.com/e/participe/)

#javascript #react #nodejs
What can FFI, preloading and Typed Properties do for us in php?
Tags: php
Published: 2019-07-29 15:28:30

---
title: What can FFI, preloading and Typed Properties do for us in php?
published: true
description: 
tags: php
---
With the introduction of ffi, preloading and typed properties in php >= 7.4, should we now assume that php is fit for developing desktop applications or even more?
Tips for writing highly readable code
Tags: php, codestyle, readablecode
Published: 2019-07-29 15:27:01

---
title: Tips for writing highly readable code
published: true
description: How to write more readable code
tags: php, codestyle, readable code
---

# What is readable code

***You are writing for humans. Not the machine.***

The above should always be at the forefront of a developers mind when designing a system. Assuming your are writing syntactically correct code that functions the machine could not care less about how it is structured, but the developers who work on it later (and that could still be you) certainly will!

"Good code" is highly subjective because whats constitutes as such varies from developer to developer, project to project and year to year. That being said there are still common strategies and guidelines we can adhere to make our lives easier in the future.

I'll go through some more specific examples below but in general:

- Follow the project style guidelines (if it doesn't have any, suggest some)
- Write testable code
- Think SOLID
- Use common design patterns (where appropriate)
- Be consistent with file/class naming.


## Some examples

### Be descriptive

*This example is extremely basic and I expect most people write like this by default.*

First off - be descriptive with your class, method names and variables. Don't have vars called $i or $model.


{% gist https://gist.github.com/ddarrko/03d8a0fe4f67740d93c8e953d337a9be %}

Becomes

{% gist https://gist.github.com/ddarrko/e21c806cfac5bc207c1976b4228bd01b %}

### Abstract (complex) conditionals

Complex conditionals are hard to read and "break the flow" when reading through code. 

Consider the following example:

{% gist https://gist.github.com/ddarrko/17e050e3bf9cf26003f5c1216b182b40 %}

Becomes

{% gist https://gist.github.com/ddarrko/a8c70a82870c7d080c508f850a5b83ae %}

I am actually a fan of abstracting conditionals wherever possible. Even if they are relatively simple. They help make your code more testable and by naming your method appropriately you convey the purpose of the conditional in a really nice succinct way.

### No magic numbers

Magic numbers are hard coded values that implicitly define logic. Not only does it require us to investigate the code-base to see what the value represents it could also change over time. If a magic numbers value changes we will be required to change it in multiple locations which can lead to inconsistencies.

{% gist https://gist.github.com/ddarrko/27a454bbfd1a0165e113766bb3c8dc47 %}

Becomes

{% gist https://gist.github.com/ddarrko/01165538c12a12bcca33fe3f6eefe566 %}


## Review

It's easy to over complicate your code but as long as we remember we are writing for humans we can make a much nicer code-base for everyone.