teleren/devto huggingface dataset:
Improving Performance for Low-Bandwidth Users with save-data
Tags: performance, http, wordpress, php
Published: 2019-09-25 23:42:08

---
title: Improving Performance for Low-Bandwidth Users with save-data
published: true
description: Detect when users have requested lighter pages and serve them less
cover_image: https://cdn.mikehealy.com.au/wp-content/uploads/2019/09/save-data-cover.jpg
tags: performance,http,wordpress,php
canonical_url: https://www.mikehealy.com.au/save-data-for-low-bandwidth-users/
---
Everyone likes a fast website, but some users have connections and data plans that make it especially critical. In some places bandwidth is expensive, and any bytes you don't need to serve can save your users money.

I recently learned about the ['save-data' HTTP header](https://nooshu.github.io/blog/2019/09/01/speeding-up-the-web-with-save-data-header/) that clients may send to signify that they want a lower-bandwidth experience. The header alone doesn't do much, but it makes their preferences clear to you so you can make your own optimizations.

On mobile Chrome this setting is called 'Lite Mode'. Desktop users can install a browser extension to enable the header. Other browsers likely have their own way of enabling the setting.

Once you've detected this setting you might choose to style elements differently (for example dropping large background images), avoid decorative background video, or perhaps skip custom fonts that might delay rendering and add to the bandwidth costs.

The setting can be detected server-side by looking for a HTTP header (save-data=on) or client side in JS to set a flag for your CSS selectors.

```
//PHP example
function saveData() {
   return (isset($_SERVER["HTTP_SAVE_DATA"]) && strtolower($_SERVER["HTTP_SAVE_DATA"]) === 'on');
}

//JS example (courtesy of Nooshu)
//add save-data class name to document element for CSS selectors
if ("connection" in navigator) {
    if (navigator.connection.saveData === true) {
        document.documentElement.classList.add('save-data');
    }
}
```

With the detection in place you can omit non-essential elements to low-bandwidth users. For example, on my WordPress website I've skipped queuing Google custom fonts, and dropped my masthead background image.

```
// functions.php
if( !saveData() ) {
  wp_enqueue_style( 'fonts', 'https://fonts.googleapis.com/css?family=Open+Sans|Oswald:300,400,600');
}

/*
N.B. in WP it's good practice to prefix functions to avoid naming clashes.
I've skipped that for this example */
```

Here's my site on mobile Chrome with and without Lite Mode (aka sava-data).


![Default version, and save-data](https://thepracticaldev.s3.amazonaws.com/i/81yho034jqmdzk2zmqu7.png)

This was a pretty easy change to make for some quick performance gains for low-bandwidth users. The improvements could be even bigger for heavier sites, or if the header was considered during site development too.

(This post was originally published at [mikehealy.com.au](https://www.mikehealy.com.au/))
Fullstacking: Final Styling
Tags: reactnative
Published: 2019-09-26 18:51:01

Now that we have everything working, at least to a minimum, we can beautify the project

Spoiler:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/8fb76odhjcwowgv10hk0.gif)

# Buttons

The first visual component we have to work is the input button. Since I didn't want to spend much time trying to make a cool button, I've imported this one: [react-native-really-awesome-button](https://github.com/rcaferati/react-native-really-awesome-button).

Not that difficult to swap our buttons to it:
```react
import AwesomeButton from "react-native-really-awesome-button";
// ...
<Button onPress={handleSubmit} title="Add Event"></Button> 
// Button becomes
<AwesomeButton onPress={handleSubmit}> Add Event </AwesomeButton>
```

Sweet. But we'd like it to be centered, how we'd do that?
Well, React-Native has [StyleSheets](https://facebook.github.io/react-native/docs/stylesheet) which are similar to CSS.

```react
import {TextInput, StyleSheet, View} from 'react-native';

<View style={styles.card}>
{//...}
   <AwesomeButton onPress={handleSubmit} style={styles.button} width={styles.button.width}> Add Event </AwesomeButton>
{//...}
</View>

const styles = StyleSheet.create({
  card: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },

  button: {
    margin: 10,
    width: 200,
  },
});
```

## Snackbars

[Snackbars](https://github.com/cooperka/react-native-snackbar) are great to outputs some message to the user.
Here's how I've used them, for example.

```react
import Snackbar from 'react-native-snackbar';
// ...
    // When completing a UserLoginMutation
    const onCompleted = async payload => {
      if (payload.UserLogin.error) {
        Snackbar.show({
          title: payload.UserLogin.error,
          duration: Snackbar.LENGTH_LONG,
          backgroundColor: 'red',
          color: 'white',
        });
      }
//...
```

## No cool input fields :(

I did some initial search, but didn't find any updated cool TextField to use as text input. If you know anything, please comment below ;D
Multiple Tabs in VIM
Tags: vim, linux
Published: 2019-09-26 17:09:50

---
title: Multiple Tabs in VIM
published: true
description: A quick tutorial on how to use tabs in VIM
tags: vim, linux
---

I've recently been transitioning to using VIM as my full time editor.  There are a lot of tricks to learn, but I think I'm getting the hang of things.

One major advantage is that I can now proficiently edit code over an SSH connection.

Anyways, what you're here for:

## Using multiple tabs in VIM

This is actually one of the simplest tricks to learn in VIM.  There are three commands:

- `:tabnew <filename>` (open a new tab)
- `:tabn` (jump to the next tab)
- `:tabp` (jump to the previous tab)
- `:q` (close the file, which also closes the tab)

If you're using netrw, the default file browser, you can also open that up in a new tab by typing `:tabnew .`

Hope this helps!

---

Follow me here on dev.to or on [Twitter @connorbode](https://twitter.com/connorbode) for more tips like this!
Setting up Python unittests with GitHub annotations
Tags: python, unittests, cirrus, ci
Published: 2019-09-27 01:21:43

Hello!
This is my first post on DEV, so I'm going to try to make this quick and simple.

If you want inline examples of exactly where your code is failing, you can integrate [Cirrus CI with GitHub annotations](https://medium.com/cirruslabs/github-annotations-support-227d179cde31). This is super simple to do.

1. Start off by writing unittests. This is super simple.
2. Setup a basic CI pipeline (`.cirrus.yml` file). You will want to do something like this:

```yaml
tests_task:
  # define Docker container
  container:
    image: python:latest
  
  # install project requirements and the annotation result builder
  install_script: |
    pip install -r ./some-requirements-file.txt
    pip install unittest-xml-reporting

  # normally, you would run unittests with the main command
  # we need to build XML reports, so use this command
  script: python3 -m xmlrunner tests
  # replace tests with the name of the module your unittests are in

  # (always) upload results - even if the tests fail
  always:
    unittest_results_artifacts:
      # where the outputted XML files are
      path: ./*.xml
      # required, even though it sounds wrong
      format: junit
```

And that is all you need to do!
You should then get annotations.

Have a nice day!
Game Of Stakes Continues: Day 3
Tags: crypto, cryptocurrency, blockchain, gambling
Published: 2019-10-04 09:33:54

Join the discussion in DAOBet Telegram groups:

- [International community [EN]](https://t.me/daobet)
- [Validators group chat](https://t.me/daobet_validators)
- [Game developers group chat](https://t.me/daobet_developers)

Join our social media to keep up to date with all the announcements: [Twitter](https://twitter.com/daobet_org/), [Facebook](https://facebook.com/DAObet.org/), and [LinkedIn](https://linkedin.com/company/daobet/).


Since the launch of GoS, the participating validators have produced an average of **24,000** blocks each A **27%** steak has already been activated.

A new member has joined the game: daobetglobal.

Thus, **24 validators** are now vying for victory on the network.

The events of the past day:

The three leaders have changed as the representatives of **kaiserlabs11** are in first place, **P2P Validator** are right behind them, and former leader **EOS Rio** is in third place.

In addition, the validators have expanded the p2p-peer-address list, thereby strengthening the network. The cohesive work of the validators allows the network to be more stable and more productive.

Many thanks to **Nick** from **Everstake** who made a guide on how to start a node without a docker: https://github.com/everstake/daobet/blob/master/MANUAL.md

And special thanks to the entire **Everstake** team for adding two more peers and launching a full node!

- daoseed1.everstake.one:9876
- daoseed2.everstake.one:9886

DAOBet full history node from: daofull.everstake.one:8888

This will make the [GoS network](https://daovalidator.com/leaderboard) stronger and more resilient to attacks and more perceptive for transactions.

New participants are continuing to join the game. Stay with us, and do not forget to vote for each other and claim rewards!

**P.S.**

Do not forget that you can still join Game Of Stakes and lay claim to the prizes!

The steps needed to start:

1) Fill in the following form https://daobet.typeform.com/to/Vcin1c if you have not already

2) Register your account using the given instructions https://github.com/DaoCasino/Game-of-Stakes

3) Launch you node with this script https://github.com/DaoCasino/Game-of-Stakes/tree/master/run-producer

4) Congrats on joining the Game!


Join the discussion in DAOBet Telegram groups:

- [International community [EN]](https://t.me/daobet)
- [Validators group chat](https://t.me/daobet_validators)
- [Game developers group chat](https://t.me/daobet_developers)

Join our social media to keep up to date with all the announcements: [Twitter](https://twitter.com/daobet_org/), [Facebook](https://facebook.com/DAObet.org/), and [LinkedIn](https://linkedin.com/company/daobet/).
AngularJS vs ReactJS: Comparison between AngularJS and ReactJS
Tags: angularvsreact, angularorreact, angular, react
Published: 2019-09-27 06:05:26

When you want to create a single page application the question arrives in your mind: What I will use? AngularJS or ReactJS? I've been using AngularJS and ReactJS for a while now. Both frameworks are super fast, advanced, widely adopted JavaScript (JS) technologies that we use to create interactive single-page applications (SPAs).

Angular, the Model–View–Controller framework has become extremely popular among web developers. React is even more widely used by JavaScript programmers, React is actually a library, not a framework. React only has a View, but lacks Model and Controller components. So how did React became so popular and how can we reasonably compare a framework (AngularJS) with a library (React)?

We can differentiate Angular and React using following aspects:
• Data Binding 
• Dependency Resolution
• Templating & Directives
• Componentization
• Performance
• Language
• Concept

##Data Biding
###AngularJS
Two-way data binding.
###ReactJS
One-way data binding.

##Dependencies
###AngularJS
Manages dependencies automatically.
###ReactJS
Requires additional tools to manage dependencies.

##Templating & Directives
###AngularJS
We make our own directives in Angular to insert data into templates.
###ReactJS
React doesn’t offer division into templates and directives or template logic.

##Componentization
###AngularJS
Based on the three layers — Model, View, and Controller.
###ReactJS
Only has a View, but lacks Model and Controller components.

##Performance
###AngularJS
The performance will decrease a lot if your application has too many watchers.
###ReactJS
React makes it simpler to control application performance but this doesn't mean we can't create a fast application in Angular.

##Language
###AngularJS
JavaScript + HTML
###ReactJS
JavaScript + JSX

##Concept
###AngularJS
Brings JavaScript into HTML Works with the real DOM Client-side rendering.
###ReactJS
Brings HTML into JavaScript Works with the virtual DOM Server-side rendering.
start each_with_index from 1 (This is good for UI)
Tags: rails
Published: 2019-09-27 12:12:19

---
title: start each_with_index from 1 (This is good for UI)
tags: rails
published: true
---

## 👍 Usual way
```ruby
books.each_with_index do |book, index|
  puts "#{index}: #{book.title}"
end

#=> 0: a
#=> 1: b
#=> 2: c
```

## 🦄 Start from 1
You can use `each.with_index(1)`.  
This is good when you use each method in .erb file. Because users want to see index from 1 usually.

```.ruby
books.each.with_index(1) do |book, index|
  puts "#{index}: #{title}"
end

#=> 1: a
#=> 2: b
#=> 3: c
```

---

## 🔗 Parent Note
{% link n350071/my-rails-note-47cj %}
What is the best serverless platform?
Tags: serverless, functions, faas
Published: 2019-09-29 04:41:23

---
title: What is the best serverless platform?
published: true
description: Azure Functions, AWS Lambda, Netlify Function, Google Cloud Function, IBM Cloud Function
tags: Serverless, Functions, Faas
---

I have used Azure extensively and the summary is it sucks.
UI is terribly complex, quite unresponsive.
CLI is not easy to use either.
And cold starts are terrible, reaching 30 seconds for a simple nodejs app.
Why do I have to deal with storage accounts, resource groups, application insights? 

I have used Netlify functions too and it has it's own issues too.
I have listed the differences in this medium article.
https://medium.com/siristechnology/azure-function-vs-netlify-function-1509f1dcec52

What are your thoughts? 
Which one is the best one comparatively in your experience?
Redundancy in Ruby: Feature or Bug?
Tags: ruby, beginners
Published: 2019-09-29 17:19:42

The Ruby language came onto the scene in the mid 90’s thanks to a Yukihiro Matsumoto. He was a C++ programmer who wanted to have more fun programming and felt that most languages neglected the human experience of coding. He designed Ruby so that experienced programmers could jump in and immediately start writing powerful code.

To allow programmers from different origins to make sense of Ruby it seems Matsumoto felt it was best to create multiple methods to achieve the same goal, also known as method aliases. 

For example, a C# programmer can jump over to Ruby and find parallels like the shared Array.Findall method. Whereas a SQL coder will be happy to find a familiar Array.Select method to achieve the same goal.

While it seems the redundancy allows for experienced programmers to make sense of Ruby faster, it also presents challenges for beginners. Is there a difference between Map & Collect? Reduce & Inject? Select & Findall? The list goes on...

I fall into the camp that believes that the redundancy allows for more freedom and should be appreciated. At its worst, it teaches beginners how to look up methods in Ruby docs and clarify questions that will continue to show up in other fashions as one learns to code. 


Reference: https://en.m.wikipedia.org/wiki/Ruby_(programming_language)
Learn to code on your iPhone📱 for FREE 🚀
Tags: ios, reactnative, go, python
Published: 2019-09-30 02:01:07

Did you know you can learn to code on your iPhone or iPad?

You don’t need an expensive laptop or a top of the line desktop to learn how to write useable code.  With these FREE apps from the App Store you can start learning RIGHT NOW!

**W3 - Web development and programming tutorials**

W3 is a wonderful resource every developer should have in their app arsenal. It’s your pocket guide to most programming languages. It covers all languages you'd want to learn and a bunch you may not have even heard of. 

[‎W3](https://apps.apple.com/us/app/w3/id987493634)

**Code playground - Learn the basics of your favorite programming language on the go. All the content are organized in bite-sized form for you to learn in no time.**

Code playground is a wonderful app that takes you from "Hello World" to complex language topics in a flash! Each of the 5 languages has over 30 modules to explore and learn, and with it's own integrated compiler you have full control over the code. Modify the code and explore the possibilities at your fingertips.

[‎Code Playground](https://apps.apple.com/us/app/code-playground/id1452106609)

**Pythonista3 - A complete scripting environment for Python on your iOS device.**

In true Python fashion, batteries are included – from popular third-party modules like numpy, matplotlib, requests, and many more, to modules that are tailor-made for iOS. You can write scripts that access motion sensor data, your photo library, contacts, reminders, the iOS clipboard, and much more. You can also use Pythonista to build interactive multi-touch experiences, custom user interfaces, animations, and 2D games. Honestly it's great.

[‎Pythonista 3](https://apps.apple.com/us/app/pythonista-3/id1085978097)

**React native builder - Design and create React Native apps with ease**

Create React Native apps directly on your iOS device with minimal effort. Design layouts, complex pages, and get into the details of each component to fully flesh out your ideas and application flow. Once designed you can export your code to be integrated into any CI pipeline.

[‎React Native Builder](https://apps.apple.com/us/app/react-native-builder/id1452492770)
Docker 101 - What it is and how to start using
Tags: docker, begginers
Published: 2019-10-04 02:24:02

---
title: Docker 101 - What it is and how to start using
published: true
description: Docker is awesome!
tags: 
- docker
- begginers
series: Docker for Begginers
---

You can see the original post in [my personal blog](https://luturol.github.io/docker/Docker-101)

# What is Docker?

Docker is a tool which controls containers and makes it possible for developers to use container with their own applications.

Putting on a container, you have the advantage to grant that your application will always run fine and with the same environment every time, cause it is configurated in a container with all needed specifications. 

Docker has it's own interface standardized for all operations.

Has it's own container orchestration.

## What is a container?

It's something that packages up all application dependencies and code so the application runs as fine as it can. You can read more at [What is a Container? from docker page](https://www.docker.com/resources/what-container)


## Running a container

    docker container run -t ubuntu top

**docker container run** initialize a container.

**-t** add an [pseudo-TTY](https://unix.stackexchange.com/questions/21147/what-are-pseudo-terminals-pty-tty) to the image.

**run** first execute a docker pull to get ubuntu image for the host. After downloaded, initialize the container with the Ubuntu image.

**top** is a Linux command that shows all active process order by memory consumption.

Looking at the output on bash you gonna see only the root process running, which means that all container is isolated from which other, avoiding conflicts between one and another.

Even using the same image from Ubuntu, it's important to note that the container does not have it's own kernel. It uses the host kernel and the image is used only to provide the file system and tools available on Ubuntu.

## Get inside the container

    docker container exec -it

Allows you to enter the container terminal.

**-it** allows you to enter without executing any command and you can navigate on it.

## Show all containers

    docker container ls

Shows all the containers that are running.

## Using container ID to get into it's terminal

    docker container ls
    --Get the container ID
    docker container exec -it CONTAINER_ID bash
    
    --to leave from the container
    exit

The last argument selects the terminal to use. You can see on Docker hub which terminal is available to use.

### Stopping a container

    docker container stop container_id

You can use only the first 3 digits in the container ID to identify the contaier, those digits is whats make a container unique.

It's possible to stop more than one container at once:

    docker container stop d67 ead af5

### Removing a container

    docker system prune

Remove all stopped containers.

Thanks for reading it. I've been using docker for a while now and it's amazing having all my projects running without conflict and even their on database. I'm tired to install and configure all different types of databases...

Don't forget to drink water and eat clean.
Update: Family Feud with React
Tags: hacktoberfest, react, game
Published: 2019-09-30 09:59:07

---
title: Update: Family Feud with React
published: true
description: Let's make a game together
tags: hacktoberfest, react, game
---

Excited to get this project started. Here's a quick update. I have created a starter react project, and deployed to [https://kodaman2.github.io/family-trivia-react/](https://kodaman2.github.io/family-trivia-react/)

I've added a public trello board, so there is clear and open communication.
[https://trello.com/b/Iy345e2L/family-trivia-react](https://trello.com/b/Iy345e2L/family-trivia-react)

Updated README with project phases on repo. [https://github.com/kodaman2/family-trivia-react](https://github.com/kodaman2/family-trivia-react)

Added initial design document [https://github.com/kodaman2/family-trivia-react/tree/master/docs/design](https://github.com/kodaman2/family-trivia-react/tree/master/docs/design). I've exported as PDF, but if you want to edit and add stuff I am using Balsamiq, I believe you can use the free version for 30 days so is perfect for hacktoberfest. Ideas are welcomed!
Constant Enum in Activerecord Rails
Tags: rails
Published: 2019-09-30 10:33:51

---
title: Constant Enum in Activerecord Rails
tags: rails
published: true
---

## 🤔 Situation & Motivation
Master data that is not so many records and not need to store into RDB because of the performance.
How we can store it in the code?

## 🦄 General solution

```ruby
class Hoge
  module TYPE
    A = 1
    B = 2

    TYPE_NAMES = {
      A = 'alpha',
      B = 'beta'
    }

    def self.keys
      TYPE_NAMES.keys
    end

    def self.type_names
      TYPE_NAMES.value
    end
  end
end​
```

## 👍 Enum directory solution
This is not the usual way, but it's ok for migration of the version.

### Code template
```md
app/enums/v2/status_enum.rb
app/enums/v2/position_enum.rb
```

```ruby
module V2::StatusEnum
  GREAT = 1
  NOMAL = 2
  BAD = 3

  STATUS_NAMES = {
    GREAT => 'GREAT',
    NOMAL => 'NOMAL',
    BAD => 'BAD'
  }
end
```

```ruby
module V2::PositionEnum
  BOSS = 1
  NOMAL = 2
  PLAYER = 3

  STATUS_NAMES = {
    BOSS => 'BOSS',
    NOMAL => 'NOMAL',
    PLAYER => 'PLAYER'
  }
end
```

### Usage

```ruby
user = User.where(status: V2::StatusEnum::GREAT)

<%= V2::StatusEnum::STATUS_NAMES[user.status] %>
```


---

## 🔗 Parent Note
{% link n350071/my-rails-note-47cj %}
Dynamically change the iframe height from inside
Tags: javascript
Published: 2019-10-29 00:56:38

---
title: Dynamically change the iframe height from inside
tags: js
published: true
---

## 🤔 Situation
Your page is embedded to an iframe which ID is `parent-iframe`, and you want to change the height by your page content.

```html
<html>
  <head>
  </head>
  <body>
    <div>
      <iframe src="https://your.html" id="parent-iframe"></iframe>
    </div>
  </body>
</html>
```

## 🦄 Solution
Run a script from inside to the iframe, when the page is ready.

```html
  <head>
    <script type="text/javascript">
    $(document).ready(function() {
    $("#parent-iframe", window.parent.document).height(document.body.scrollHeight);
    });
    </script>
  </head>
```


---

## 🔗 Parent Note
{% link n350071/my-jquery-javascript-note-fp7 %}