teleren/devto huggingface dataset:
Managing focus for accessibility
Tags: a11y
Published: 2018-05-22 02:19:26

---
title: Managing focus for accessibility
published: true
description: A quick a11y tip to handle focus in a single page web app.
tags: a11y
---

> If I'm building a single page web app, what should happen to `focus` when the user clicks some navigation?

{% youtube srLRSQg6Jgg %}

This is a video I shot a while back, but the question comes up so often I wanted to re-share here on dev.to—plus it's a good excuse to write my first post 😁

Typically in a single page app you'll have a structure that looks _roughly_ something like this:

```html
<nav>
  <a href="/">Home</a>
  <a href="/cart">Shopping Cart</a>
  <a href="/settings">Settings</a>
</nav>
<main>
  <!-- some content -->
</main>
```

Because it's a single page app, clicking on a link won't do a hard refresh. Instead, it will trigger a route change which usually uses a bit of AJAX to fetch some more data and populate the `<main>` content area.

For a sighted user this is all good—but what if I'm a non-sighted user navigating with a screen reader? I may not know that the new content has been added to the page (maybe I was expecting a hard refresh) and there's no indication that I should navigate back to the `<main>` area.

One easy way to improve this experience is to find a good heading in the newly loaded content and direct `focus` to it. The easiest way to pull this off is to give the heading a `tabindex` of -1 and call its `focus()` method.


```html
<main>
  <h2 tabindex="-1">Welcome to your shopping cart</h2>
</main>
<script>
  // Assuming this gets called every time new content loads...
  function onNewPage() {
    var heading = document.querySelector('h2');
    heading.focus();
    // You can also update the page title :)
    document.title = heading.textContent;
  }
</script>
```

A screen reader will then announce the new heading, as well as the `main` landmark area that it's contained within. Note that you probably don't want to do this focus management when a user first arrives at your site—you would only want to do it for subsequent navigation, like when they click a link. 

Hope you enjoyed this post! It's an easy trick that could make a big difference for some of your users. And if you're interested in more a11y screencasts check out [my playlist over on the YouTubes](https://www.youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g) 📺

✌️
Ready to deploy! Vue + Flask, but where to deploy it to?
Tags: discuss, deployment, vue, flask
Published: 2018-05-21 23:27:30

---
title: Ready to deploy! Vue + Flask, but where to deploy it to?
published: true
tags: discuss, deployment, vuejs, flask
---

Hi all!

After some weeks toiling with my app, I would love to finally **deploy** it to a production server. The thing is built as follows:

- Backend: **Python Flask + Postgresql** as an API endpoint
- Frontend: **Vue.js** SPA with axios calls to my API to populate data

So where would you put something like this? I am thinking, *Heroku* or *Digital Ocean*? Or not? Any advice on what should I watch out for?

As much as the idea of a static site is appealing (using nuxt.js or VuePress), it would not work for me, as I have a lot of relational data that might be displayed by the user in unpredictable ways. Also, there will be a user account system on v2.0, so I guess this disqualifies the site for *Netlify*, right?

Thanks a lot!
Best,
Daniel
You Can't Pay Your Bills with Craft Beers.
Published: 2018-05-21 23:10:56

---
title: You Can't Pay Your Bills with Craft Beers.
published: true
description: career, culture, teams, community
tags: 
---

Culture is a very interesting thing in the tech community, and it has really come a long way. Over the years I've worked with an array() of wonderfully talented people, from all sorts of walks of life, and it has been a really cool ride.

When I first began cutting my teeth as a Developer, it was right around when the dot-com bubble had fizzled out. Web Development was a fairly new thing, Flash was everywhere, and mobile app development was a twinkle in Steve Job's eye. CSS was just beginning to replace that god awful table markup, and everyone and their dog was coming out with a new CMS in their preferred language. It was the new frontier, back when learning something new meant *gasp* opening a book. 

The tech culture then was similar to something you might find in the movie 'Office Space'. Depending on your organization, you might see a definite delineation between tech department and everyone else. You know, the weirdos that look at that black cmd prompt all day, and if your computer breaks they will definitely know how to fix it.

Over time, agency work began to get more popular. Many upper management positions were replaced with PMs. Around this time I began to notice a cultural shift forming. Office casual was replaced with the sweatshirt, backpack, jeans and sneakers ensemble, and you could definitely tell that companies were starting to place fly traps in their job descriptions that attracted this type of individual. 

You started to see things like, "Rock Star Developer", "Craft beers on tap", "Ping-pong table","Free Spotify subscription". All of those things are well and good if you are a 20 something male fresh out of college, but as someone who is not, let me tell you that those things don't actually have too much value.    

Which brings me to the point of this post: <b>You can't pay your bills with craft beers.</b> 

Though it's not always the case, be a little bit weary of an organization that tries to sell these things to you as part of the package deal. Money is definitely not everything, and working with a team of great people is invaluable. However, in my experience when an organization tries to do this, it's because they might be lacking in other areas. 

All of those things can be pretty good bonuses, but when you're weighing the pros and cons of accepting a position take those things out. Ask yourself instead 

<ul>
<li>Is this the best fit for me culturally and personality wise?</li> 
<li>Is this a position where I can really see myself growing into what I want to be both short-term/long-term and inside/outside the company?</li>
<li>Will they see the value in what I can potentially bring to the organization?</li>
<li>Most importantly, will I be happy there?</li>
</ul>
If all of those questions are answered with a yes, *then* you can take a look at their craft beer selection.

Cheers! :)
30 day of Sketch: the playbook and basics
Tags: design, sketch, ui, sketchplugin
Published: 2018-05-21 22:01:16

---
title: 30 day of Sketch: the playbook and basics
published: True
description: 
tags: Design,Sketch, UI, Sketch Plugin
---

Hi, in this story we are gone be looking into basics of Sketch, Style tiles, wireframes, user interface for Mobile, Tablet or Desktop and recommended plugin.

# What is [Sketch?](https://www.sketchapp.com)
The Sketch is a digital design app for Mac. It can be used for UI, mobile, web and even icon designing. You pay for the app once, and you can use it for as long as you want. The license that you buy lasts for one year, and in that year, you have all the updates included.

# Recommended plugin

Sketch Toolbox (Plugins: Hipsterfill, MagicMirror, Rename it, Sketch measure, Sketch Palettes, Sketch Subtlepatterns)
Invisionapp Craft
Nudg.it
Sketch Image Compressor
SVGO Compressor

# Style Tiles ->Resources Recommended: [Click me](http://styletil.es)

Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web. The steps for a style tile can be:

Working with Icons
Creating Buttons and Forms
Creating Typography Styles
Working with color Palettes

# Wireframe

Wireframes are simple layouts that outline the specific size and placement of page elements, site features, conversion areas and navigation for a website. This can include Creating:

A Mobile-First Approach Wireframe
Creating a Tablet Wireframe
Creating a Desktop Wireframe

## Resources Recommended
Resources: [Click me](https://mozilla.design)
Resources: [Click me](https://design.firefox.com)
Resources: [Click me](http://collectui.com)


# UI Design for Mobile, Tablet, Desktop

When Designing, you’ll need to remember; Pixels, Screen sizes, Resolutions a height or width; Example for mobile max-width: 479px, max-width: 767px for Tablet, max-width: 991px for Desktop, DPI (Dots per inch or pixels per inch). Down we have an example, what we will design is a simple blog and the proses are:

Designing the Header
Designing the body are
Designing the Content Spaces
Designing the Footer

# FINISH UP THE DESIGN
After fishing UI designing, you will have to make copy of mobile, tablet and desktop artboards and after that starts;

Annotating, Winch is simply adding notes that give explanation or comment on pixel, height or weight etc.
Saves the annotating artboards or wireframe to PNG, icons to SVG, JPG or PNG etc. And send them to the developer or start developing the design into an app.


Thanks for reading. Hope you enjoy it and have a nice day where ever you live.
Quick Advice For Junior Devs
Tags: discuss
Published: 2018-05-21 20:51:26

---
title: Quick Advice For Junior Devs
published: true
description: Some thoughts for junior devs.
tags: #discuss
---

The other day I had this thought and shared it on [Twitter](https://twitter.com/DevelopmentMatt)

> One issue related to growing as a developer is looking back at old code and being embarrassed. Don’t be. Without it, you wouldn’t be where you are. As a bonus, it's a great opportunity to practice refactoring.

Do you have any thoughts you'd want to share with junior or beginning devs?
Dev and Designer Communication
Tags: discuss
Published: 2018-05-21 20:42:32

---
title: Dev and Designer Communication
published: true
description: What's the ideal mode of communication?
tags: discuss
---

I recently witnessed an engineer vs designer --well-- fight, with the words, "It's a waste of our time!" heavily expressed by the engineer.

My questions to you are:

- How would you like your designer to approach a concern or problem?
- How can the communication between you and your designer improve?
- What is a good and/or bad experience/collaboration/conversation you had with a designer?

Please add any other insight or advice in the comments!

---

Let's keep in touch! Find me on:
[twitter](http://twitter.com/catcarbn) ||  [facebook](http://facebook.com/catcarbn)
Weekly Command: inspecting network usage with iftop
Tags: weeklycommand, xnix
Published: 2018-05-23 14:54:56

---
title: Weekly Command: inspecting network usage with iftop
published: true
tags: weekly-command,xnix
canonical_url: https://monades.roperzh.com/weekly-command-inspecting-network-traffic-with-iftop/
---

![iftop-overview](https://user-images.githubusercontent.com/4419992/40357344-412b927c-5d92-11e8-9ca6-8588bcdf009b.jpg)

If you need a tool to inspect your network usage, without having to wire a proxy or install a more complex tool like Wireshark, `iftop` may be what are you looking for.

## The basics

```
iftop | [-nNpblBP] [-i interface] [-f filter] [-F net/mask] [-G net6/mask6]
```

When running, `iftop` uses the whole screen to display network usage. At the top there’s is a logarithmic scale which gives a visual indication of traffic, and at the bottom a summary with information of all packages captured.

By default, the program shows for each pair of hosts, the rate at which data has been sent and received over the preceding 2, 10 and 40-second intervals. The arrows (`<=` and `=>`) indicates the direction of data flow. For example:

```
foo.example.com => bar.example.com 1Kb 500b 100b
                 <= 2Mb 2Mb 2Mb
```

If invoked without arguments, `iftop` displays information for the first interface it can find which looks like an external interface, most of the time you may want to provide a specific interface with the `-i` flag.

_note: to find interfaces, you can use `ifconfig` in \*nix systems, or `networksetup -listallhardwareports` in macOS._

The system needs special privileges to execute `iftop`, which in most cases implies running it as a root.

The program is very versatile, you can filter, sort, and even use it in text-mode if you don’t need the interactive interface.

## Examples

### Screen filters

`l` allows you to enter a POSIX extended regular expression that will be used to filter hostnames shown in the display.

It’s important to note that this happens at a much later stage than filter codes and does not affect what is actually captured, therefore, display filters DO NOT affect the totals at the bottom of the screen.

### Filter codes

Screen filters are good to do a quick, visual filter, but if you only need to track packets transmitted under certain conditions, you can use a filter code to select the packets to count.

`iftop` uses [pcap formatted filters](http://www.manpagez.com/man/7/pcap-filter/) as input, and you can provide them with the `-f` flag, or in the app by pressing `f`. As a general rule, I will always recommend using the flag to prevent unexpected behavior.

_note: because only IP packets are ever counted, the specified code is evaluated as “(filter code) **and ip** ”._

### Sorting

You can also use a set of pre-defined sort methods to order the data presented in the view by pressing one of these keys:

- `1/2/3` - sort by 1st/2nd/3rd column (2, 10 and 40-second intervals)
- `<` - sort by source name
- `>` - sort by dest name
- `o` - freeze current order

### Text mode

You can enable text-mode with the `-t` flag, in text-mode the output is printed to STDOUT in intervals.
OpenShift for Mere Mortals: Container Orchestration
Tags: openshift, docker, containers, kubernetes
Published: 2018-05-21 18:34:18

---
title: OpenShift for Mere Mortals: Container Orchestration
published: true
description: Part four of my blog series on Openshit
tags: OpenShift, docker, containers, kubernetes
cover_image: https://thepracticaldev.s3.amazonaws.com/i/lwnnv19texct1hb438z6.jpeg
---

This week in my blog series **OpenShift for Mere Mortals**, I discuss **Container Orchestration**. I provide some examples using **Docker Compose** and demonstrate what it means to orchestrate multiple containers in an app. 

Https://vault.osninja.net/openshift-for-mere-mortals-part-four/
Flash a Window with Xojo Using a WinAPI Declare
Tags: winapi, win32, declare, xojo
Published: 2018-05-21 18:15:02

---
title: Flash a Window with Xojo Using a WinAPI Declare
published: true
description: Use Declares in Xojo to call OS API functions.
tags: WinAPI, Win32, Declare, Xojo
---

You can call into Win32 APIs (aka WinAPI) to use methods and properties that are not built into the framework by using the Declare command. To create a Declare statement you first need to track down the API you want to use using Microsoft’s documentation: [Microsoft Developer Documentation](https://msdn.microsoft.com/en-us/library/windows/desktop/hh920508(v=vs.85).aspx).


The Win32 API is largely based on the C/C++ programming language and makes heavy use of structures.

As a simple example, you can call a simple function to flash the window to get the user’s attention. Refer to the [FlashWindow doc page](https://msdn.microsoft.com/en-us/library/windows/desktop/ms679346%28v=vs.85%29.aspx?f=255&MSPPError=-2147217396) in the Microsoft Win32 docs, where you can see the declaration for this method. It looks like this:

    BOOL WINAPI FlashWindow(
     _In_ HWND hWnd,
     _In_ BOOL bInvert
    );

This tells you that this method is a function (the BOOL at the beginning indicates it returns a Boolean) and that it takes two parameters. The HWND parameter is the handle to the window, which you get from Xojo as Window.Handle (it is an Integer). The BOOL parameter is a Boolean. At the bottom of the doc page there is a section that tells you the library that contains this function, which is “User32.lib”. With this this information you can create the Declare statement to this function, which looks like this:

    Declare Function FlashWindow Lib "User32" (handle As Integer, invert As Boolean) As Boolean

You can call this function by passing in a window handle, so if you had the above Declare on a button’s Action event handler you could flash the window with this code:

    Call FlashWindow(MyWindow.Handle, True)

Since the return value is not needed, the Call statement is used to avoid having to declare a variable to store the result.

If you wanted to make this more easily accessible you could use the Extends method feature to make this available for any window. To do this, create a global method on a module with this code:

    Public Sub Flash(Extends w As Window)
      #If TargetWindows Then
        Declare Function FlashWindow Lib "User32" (handle As Integer, invert As Boolean) As Boolean
        Call FlashWindow(w.Handle, True)
      #EndIf
    End Sub

You could then call this method with this code:

    Self.Flash

For more information:

* [Calling Native Windows APIs](http://developer.xojo.com/calling-native-windows-apis)
* [WinAPI Library on GitHub](https://blog.xojo.com/2017/12/20/winapilib-on-github/)
Do you have any hardware suggestions for distributed meetings?
Tags: discuss
Published: 2018-05-21 16:28:09

---
title: Do you have any hardware suggestions for distributed meetings?
published: true
description: 
tags: discuss
---

We're rounding into shape in terms of our process and our software for remote meetings, but we still haven't settled on some of the ideal technology for attending from our own desks. We need audio quality, limited background noise, etc.

So any headphone, mic suggestions that folks on the team can use by default would be great.

Even if you don't think you have "the perfect stuff" any additional info on what folks are using is helpful.

Thanks in advance!
Does The Industry Want Us To Think There’s A “Formula" For Helping People Be Agile?
Tags: culture, agile, career, workplace
Published: 2018-05-21 15:18:02

---
title: Does The Industry Want Us To Think There’s A “Formula" For Helping People Be Agile?
published: true
description: There's an industry of speakers, authors, and consultants that want you to think there's "one true way" to be agile.
tags: #culture #agile #career #workplace
---

Even though agile methods (like scrum or kanban) are over 20 years old, most software teams don't really feel like they're helping.

There's an industry of speakers, authors, and consultants that want you to think there's "one true way" to be agile.

So companies hire an agile coach, follow the "best practices", and then wonder why people don't like it better (or work faster).

_Every person within a company is unique_, and these differences really do make it silly to follow a "recipe" to be agile.

You have to take into account the people, and what they do and don’t think will help them work better - from their perspective.

It's better to pick something and try making it "a little more agile".

If it doesn't work, then try something else.

Repeat until you find what works best for your team and company.

In this excerpt from my interview with Iain Lowe, we discuss the fight against "thought leaders" who claim to have a recipe that works for everyone.

Click below for the full interview with Iain Lowe.

# [📺 Watch the full hour on YouTube](https://www.youtube.com/watch?v=y6KFy6b4Uek&t=0s&list=PL32pD389V8xs55cCEeus188KL9WoqiwFq&index=2)

Or listen as a podcast:
[🎧 Soundcloud](https://soundcloud.com/jayme-edwards-media/iain-lowe-on-estimating-culture-and-agile-dogma)

<hr/>
[🔔 Subscribe for 90+ videos on healthy software development](https://YouTube.com/c/JaymeEdwardsmedia?sub_confirmation=1)
Ruby on Rails—Killer Workflow with Docker (Part 1)
Tags: ruby, docker, rails
Published: 2018-05-21 15:18:00

---
title: Ruby on Rails—Killer Workflow with Docker (Part 1)
published: true
description: Learn how to set up a killer dockerized workflow that will raise your productivity while developing Ruby on Rails applications.
tags: #ruby #docker #rubyonrails
canonical_url: https://auth0.com/blog/ruby-on-rails-killer-workflow-with-docker-part-1/
---

In this article, you'll learn how to set up a dockerized Workflow to bootstrap a full-stack, database-driven application using Ruby on Rails with external identity management. 

[Read on 💎🐳](https://auth0.com/blog/ruby-on-rails-killer-workflow-with-docker-part-1/?utm_source=dev&utm_medium=sc&utm_campaign=ruby_docker)

![Ruby on Rails—Killer Workflow with Docker (Part 1)](https://thepracticaldev.s3.amazonaws.com/i/b43tjty3b4e3wnx9bj4r.png)
Authentication and Authorization with Shiny Server Pro + Auth0
Tags: shiny, r, shinyserverpro
Published: 2018-05-21 15:15:21

---
title: Authentication and Authorization with Shiny Server Pro + Auth0
published: true
description: Learn how to configure Auth0 with Shiny Server Pro to secure your interactive R apps!
tags: #shiny #r #shinyserverpro
canonical_url: https://auth0.com/blog/authentication-and-authorization-with-shiny-server-pro-and-auth0/
---

Learn how to configure Auth0 with Shiny Server Pro to secure your interactive R apps!

[Read on 📊](https://auth0.com/blog/authentication-and-authorization-with-shiny-server-pro-and-auth0/?utm_source=dev&utm_medium=sc&utm_campaign=shiny_server_pro)

![Authentication and Authorization with Shiny Server Pro + Auth0](https://thepracticaldev.s3.amazonaws.com/i/x0khf9bvjh2ssrdmc5o6.png)
Js Modules are Now supporting in Browsers
Tags: javascript, module, webdev, node
Published: 2018-05-21 13:16:32

---
title: Js Modules are Now supporting in Browsers
published: true
description: Js Modules are Now supporting in Browsers
tags: javascript,module,webdev,node
cover_image: https://cdn.pixabay.com/photo/2017/11/11/21/55/girl-2940655_960_720.jpg
---

### JavaScript Modules is now supporting in all major browsers.

Let's see how it works.

for demo purpose, I created an index.html and math .mjs, script.mjs.


you can create .js extension its, not a problem but use a .mjs extension for the consistency to know what are the modules and what are the scripts?.

math.mjs file
{% gist https://gist.github.com/saigowthamr/f2bb96c45e96fe5cb4a3732f331acc13 %}

in above code, I created two functions and exported it.


Now, these functions are available to import.

**script.mjs** file
{% gist https://gist.github.com/saigowthamr/81d93708ee0609eabe096cb9fb6a866f %}

At final we are creating the HTML file with our modules.

{% gist https://gist.github.com/saigowthamr/0baae81d1b2fef4bfe13d331421755e6 %}

**we need to specify the type in script tag for the modules mime type is the module.so that browser treated it as a module rather than normal script.**


in above code 15th line I used to tell the browser it is not a module and if the modules are not supported in browsers please use this fallback.js.

final output is 

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




Hope you guys love these.