teleren/devto huggingface dataset:
I18n in Rails
Tags: rails
Published: 2019-09-27 16:54:51



---
title: I18n in Rails
tags: rails
published: true
---

## 📗 Translate Active Record
### 1. Define the dictionary at some yml files
The file name is not related. The term at the second level `activerecord:` works.

```yml
#config/locales/models_ja.yml
#config/locales/activerecords_ja.yml
#...etc

ja:
  activerecored:
    models:
      author: 著者
    attributes:
      author:
        name: 名前
        description: 概要
```

### 2. Use it in ERB
```erb
<div>
  <%= Author.model_name.human %>
  <%= Author.human_attribute_name :name %>
  <%= Author.human_attribute_name :description %>
</div>
```

## 📗 Translate any words
### 1. Define the dictionary at some yml files
- 😎 You can write words in split multiple files.
- 😎 You can write words with parameter, see also `mail.registration_thanks.name_sir`.
- 😎 You can write an array of words, see also `date.day_names`.

```yml
# config/locales/words.ja.yml
ja:
  labels:
    profile: プロフィール
  messages:
    sending: 送信中
    error: エラーが発生しました
  mail:
    registration:
      subject: "ご登録ありがとうございます🎉 %{name}様"

# config/locales/words.ja.yml
ja:
  date:
    day_names:
    - 日
    - 月
    - 火
    - 水
    - 木
    - 金
    - 土
```

#### 2. Use it
```ERB
<%= label_tag t('labels.profile') %>

<p><%= t('messages.sending') %></p>
```

```ruby
# class RegistMailer < ApplicationMailer
@user.name = n350071
subject = I18n.t('mail.registration.subject', name: @user.name)
subject = I18n.t(:subject, scope: 'mail.registration', name: @user.name)

# => "ご登録ありがとうございます🎉 n350071様
# => "ご登録ありがとうございます🎉 n350071様
```

```ruby
I18n.t('date.day_names')
# => "[\"日\", \"月\", \"火\", \"水\", \"木\", \"金\", \"土\"]"
```

## 📗 Localize Format

The formats [reference](https://apidock.com/ruby/DateTime/strftime).

### Set your formats
```ruby
en:
  date:
    formats:
      default: ! '%Y/%m/%d'
      long: ! '%Y/%m/%d/(%a)'
      short: ! '%m/%d'
      middle: ! '%b %d %a'
```

```ruby
<%= l(@event.start_date, format: :middle) %>
#=> 'Nov 15 Fri'
```

### default

```
<%=l Time.now, format: :short %>
I18n.l(Time.now, format: :short) #=> "2019/11/12 10:21"
I18n.l(Time.now, format: :long)  #=> "2019年11月12日(火) 10時21分41秒 +0900"
```

---

## 🔗 Parent Note
{% link n350071/my-rails-note-47cj %}
Simpler = Better if it_gets_the_job_done
Tags: ruby, rails, codenewbie, refactorit
Published: 2019-09-27 16:47:26

Today at work, my teammate reviewed the following code I had written:

{% gist https://gist.github.com/msarit/a8aa9667832e3d50091e5d388e137ef1 %}

In a nutshell, my `build_page_data` method builds an object called `categories` which contains a number of objects (each one representing a `category`). The variable `@page_data` contains several rows of information where, for one `group_id`, there are several `features`. So, there could be 10 rows each with the same `group_id`, but with a distinct `feature`.

My teammate - let's call him "David" - commented that Lines 7, 8 & 18 confused him and weren't terribly intuitive. I explained to him how the loop on Line 7 checked to see if we'd moved unto a new `group_id` to build a new `category` object, while Line 8 populated the `features` attribute of the last `category` object (after being sure that we'd collected all associated features). Line 18 made sure to populate the last row's `features` attribute (edge case).

Did my explanation bring on a headache for you just now? Because it did for David. He asked me if there was a way to build the data without keeping track of which row I was currently on (i.e. using a pointer). He suggested that:

1. If the `categories` object did not have a hash with the `group_id` of the row I was on, then I could be sure that I was on a new `group_id`
2. As long as the `group_id` didn't change with each iteration, I could simply push the `features` hashes into the features array for that category

I went back to <del>the drawing board</del> my IDE and worked on implementing David suggestions. First, in the loop iterating through `@page_data`, I included a guard that made sure that either a category with the current `group_id` existed, or one was created. Next, I pushed the `features` of each row into the features array of their associated category. Finally I returned the completed `categories` object:

{% gist https://gist.github.com/msarit/43549390817935ef860e05c1ac2801af %}

I sat back and marveled at the **simplicity** of my refactored `build_page_data` method! All edge cases were accounted for, and I had cut the size of my method in HALF (from 16 lines to 8)! This experience exemplifies why I'm so grateful for my current role - I am learning at what sometimes feels like an exponential rate, and getting paid while doing so! This refactor brought me such satisfaction, and challenged me to always ask: "Can my code be simpler? What can I do away with and still accomplish my goal?" I'm also grateful for a team that <del>teaches me to fish</del> challenges me to think and grow, rather than simply hand me the answers.
Two media queries you should care about
Tags: css, a11y
Published: 2019-09-27 16:25:07

---
title: Two media queries you should care about
published: true
description: The user should be the boss of you - learn how to respect their preferences
tags: css, a11y, accessibility
cover_image: https://images.unsplash.com/photo-1483478550801-ceba5fe50e8e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1440&q=80
canonical_url: https://www.selbekk.io/blog/2019/09/two-media-queries-you-should-care-about/
---

CSS is a powerful language. The "media query" feature gives you access to the user's circumstances, device capabilities and preferences.

That last feature - their display preferences - is an incredibly powerful one. You can react to how people would like their content served!

This short article will introduce you to two new media queries, which will help make your web sites even better.

## prefers-reduced-motion 

Some users are either sensitive to long and bouncy animations, while other users just don't like them. Either way, there's a very quick way to cater to their wants and needs.

Simply add the following code to your CSS file:

```css
@media (prefers-reduced-motion: reduce) {
  .my-animated-thing { animation: none; }
}
```

Whenever a user with a preference for reduced motion UIs enters your page, you can turn off particularly intrusive or insistent animations just for them.

If you want to add a blanket rule to your website, you can address all elements this way:

```css
@media (prefers-reduced-motion: reduce) {
  * { 
    animation: none;
    transition: none;
  }
}
```

You might not want to do this, however - killing all transitions might not be what you want after all. If you have the time and budget, go through all of your motion-adding classes and consider adding a motion-reducing media query to them.

## prefers-color-scheme

Android, iOS, OSX and Windows now have support for selecting dark mode - a darker version of their general user interface. Wouldn't it be cool if you app could respond to this as well?

CSS comes to the rescue yet again, with the `prefers-color-scheme` media query:

```css
@media (prefers-color-scheme: dark) {
  body {
    background: #111;
    color: #eee;
  }
}
```

If you're using CSS dynamic properties (also known as CSS variables), you can really add super-powers to your web-site by just changing your entire color scheme in a single swoop:

```css
@media (prefers-color-scheme: dark) {
  :root {
    --primary-background-color: #111;
    --primary-text-color: #eee;
    --contrast-background-color: #eee;
    --contrast-text-color: #111;
  }
}
```

There are much more media queries you can dip into if you want. You can check them all out [here](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features).


What's your favorite media query tip?
How to install Java 13 from AdoptOpenJDK
Tags: java13, linux, openjdk, jenv
Published: 2019-09-27 16:05:03

---
title: How to install Java 13 from AdoptOpenJDK
published: true
description: How to install Java 13 from AdoptOpenJDK
tags: java13, linux, openjdk, jenv
cover_image: https://thepracticaldev.s3.amazonaws.com/i/1lvjavp3g6t7xc4o6464.png
---
##Introduction

In this tutorial, you will learn how to install Java 13 from AdoptOpenJDK project.

##AdoptOpenJDK

[AdoptOpenJDK] (https://adoptopenjdk.net/) provides rock-solid OpenJDK binaries for the Java ecosystem and also provides infrastructure as code, and a Build farm for builders of OpenJDK, on any platform.

##Install

To install, just copy and paste the script above in your linux terminal

```bash
wget https://github.com/AdoptOpenJDK/openjdk13-binaries/releases/download/jdk-13%2B33/OpenJDK13U-jdk_x64_linux_hotspot_13_33.tar.gz
sudo tar xvf OpenJDK13U-jdk_x64_linux_hotspot_13_33.tar.gz --directory /usr/lib/jvm/
sudo update-alternatives --install /usr/bin/java java /usr/lib/jvm/jdk-13+33/bin/java 2
sudo update-alternatives --install /usr/bin/javac javac /usr/lib/jvm/jdk-13+33/bin/javac 2
```

##Jenv

To use Java 13 without compromising your current installation, simply use [Jenv](https://www.jenv.be/). Take a look at this post if you don't know the project yet:

https://dev.to/sandrogiacom/multiple-jdks-no-problem-1knc

###Add Java 13

```bash
jenv add /usr/lib/jvm/jdk-13+33
```

**Check if work's**

```bash
jenv versions
```

My default (global) Java version is 11.

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


**Test**

Create a new directory:

```bash
mkdir java-13
cd java-13
java -version
```
As expected, the console displayed the global version.

```bash
λ java -version
openjdk version "11.0.4" 2019-07-16
OpenJDK Runtime Environment AdoptOpenJDK (build 11.0.4+11)
OpenJDK 64-Bit Server VM AdoptOpenJDK (build 11.0.4+11, mixed mode)
```

To set Java 13 as local, just type:

```bash
jenv local 13
```

And type `java -version` again:

```bash
λ java -version
openjdk version "13" 2019-09-17
OpenJDK Runtime Environment AdoptOpenJDK (build 13+33)
OpenJDK 64-Bit Server VM AdoptOpenJDK (build 13+33, mixed mode, sharing)
```

The complete source code it's on github:

https://github.com/sandrogiacom/dev-scripts


##Conclusion

In this short tutorial, we learned how to install Java 13 from AdoptOpenJDK project.

Enjoy!


[![](https://thepracticaldev.s3.amazonaws.com/i/gmrz82bjwhej1f1iqb1e.png)](https://twitter.com/sandrogiacom)
What was your win this week?
Tags: discuss, weeklyretro
Published: 2019-09-27 15:52:36

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

👋👋👋👋

Looking back on your week -- what was something you're proud of?

All wins count -- big or small 🎉

Examples of 'wins' include:

- Getting a promotion!
- Starting a new project
- Fixing a tricky bug
- Cleaning your house...or whatever else that may spark joy 😄

![happy-friday](https://media0.giphy.com/media/3o6Zt2JJcBEO6xdw8E/giphy.gif)
🤯 More to Media Queries than meets the eye 👁️ (in JavaScript example with Vue.js)
Tags: javascript, vue, angular
Published: 2019-09-27 15:29:26

What is a media query for? You may know it as the thing to style all sorts of devices and print, determining sizes and more, but did you know that it's not just CSS which can query devices, you can use the match media API in JavaScript to unlock it's full potential.

So here is a little snippet post. It applies to all JavaScript but is especially useful in renderers.

You are required to set 2 css variables in your css:

``` css
:root {
    --tablet: 768px;
    --desktop: 1024px;
}
```

This utility function is enough to provide limited tablet and desktop responsiveness, but it's not just styling... Oh no it's so much more. It's dumb but it works. I have a sexier angular class decorator if anyone is interested and missing the @ symbol.

*Pros:*
* Query pixel ratio, orientation among other things, oh size, don't forget device size and screen size.
* Elegant and simple
* Tied to your real CSS meaning breakpoint s use single source of truth
* Do crazzy stuff for performance such as excluding whole components from even rendering until query is met
* Easy to understand intent
* So very cool

*Cons:*
* Needs CSS variables but easy to work around (maybe store env variables if transpiling?)

``` js
export function media(qs, cb) {
	if (cb) {
		const q = window.matchMedia(`screen and (${qs})`);
		const matches = () => {
			if (q.matches) {
				cb({matches: true});
			} else {
				cb({matches: false});
			}
		}
		matches();
		q.addListener(matches);
	}
}

export function isTablet(cb) {
  const device = `min-width: ${getComputedStyle(document.documentElement).getPropertyValue('--tablet')}`;
  media(device, cb);
}

export function isDesktop(cb) {
  const device = `min-width: ${getComputedStyle(document.documentElement).getPropertyValue('--desktop')}`;
  media(device, cb);
}
```


Here is an example Vue (TSX) component using it, see created lifecycle to start with.

``` js
import "./SkillStack.scss";
import { isTablet } from "../utils/responsiveUi";

export default {
  name: 'SkillStack',
  data() {
    return {
      show: false
    }
  },
  render() {
    switch (this.show) {
      case true:
        return (
          <div class='sks'>
            <ul class='sks-Card_Stack'>
              <li class='sks-Card'>
                <h2>TECHNAME</h2>
                Proficientcy
              </li>
              <li class='sks-Card'>
                <h2>TECHNAME</h2>
                Proficientcy
              </li>
              <li class='sks-Card'>
                <h2>TECHNAME</h2>
                Proficientcy
              </li>
            </ul>
          </div>
        );
      case false:
        return null;
    }
  },
  methods: {
    toggleCardVisibility(e) {
      if (e && 'matches' in e) {
        this.show = e.matches;
      }
    }
  },
  created() {
    isTablet(this.toggleCardVisibility);
  }
}
```

I hope you take this code and make it even better
Rails 6 is out, should I upgrade and start re-learning now?
Tags: discuss, ask, rails, help
Published: 2019-09-27 15:26:30

---
title: Rails 6 is out, should I upgrade and start re-learning now?
published: true
description: What's the best practice for new tech releases? 
tags: discuss, ask, rails,  help
---

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

It was brought to my attention this morning that the new version of Rails was released, currently [Rails 6.0: Action Mailbox, Action Text, Multiple DBs, Parallel Testing, Webpacker by default, and Zeitwerk](https://weblog.rubyonrails.org/releases/).

I had started a project with rails 5 not so long ago. Should I lose the progress I was making and turn in a different direction?

What's the best practice when a new version of a framework or language is released? How long should I wait before putting in the work to update myself and my projects?

A friend and Rails developer mentioned that it depends, but I'm unsure as to what it depends on. Should I do it if my focus is proving that I'm competent in a technology? Or only if a work project demands it? 

My concern is that I'll be focusing on something that isn't a priority or pivotal to many employers. I'm not saying I don't want to learn, but I am saying I don't want to lose time on something that isn't a priority to other developers I'd be working with or under. I'd still build a project with it to learn, just at a slower pace. 

I do know that many companies delay upgrading due to dependencies. So what does everyone else think? Getting some feedback would be greatly appreciated, looking forward to any thoughts on the subject.

__How long do you wait before learning a new version of a language or framework?__

Thanks in advance and sorry if this has been asked here before!

![](https://media.giphy.com/media/2H67VmB5UEBmU/giphy.gif)
Daily Challenge #78 - Number of Proper Fractions with Denominator d
Tags: challenge
Published: 2019-09-27 14:40:56

---
title: Daily Challenge #78 - Number of Proper Fractions with Denominator d
published: true
series: Daily Challenge
description: how many proper fractions can be built using d as a denominator
tags: challenge
---

If n is the numerator and d the denominator of a fraction, that fraction is defined a (reduced) proper fraction if and only if GCD(n,d)==1.

For example `5/16` is a proper fraction, while `6/16` is not, as both 6 and 16 are divisible by 2, thus the fraction can be reduced to `3/8`.

Now, if you consider a given number d, how many proper fractions can be built using d as a denominator?

For example, let's assume that d is 15: you can build a total of 8 different proper fractions between 0 and 1 with it: 1/15, 2/15, 4/15, 7/15, 8/15, 11/15, 13/15 and 14/15.

You are to build a function that computes how many proper fractions you can build with a given denominator:

`proper_fractions(1)==0`
`proper_fractions(2)==1`
`proper_fractions(5)==4`
`proper_fractions(15)==8`
`proper_fractions(25)==20`

***
_This challenge today comes from GiacomoSorbi at [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 idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
GraphQL Editor 2.0
Tags: showdev, graphql, startup, news
Published: 2019-09-27 15:14:01

---
title: GraphQL Editor 2.0
published: true
description: Today we have launched a new version of GraphQL Editor, I'd love to hear your feedback!
tags: showdev,graphql,startup,news
cover_image: https://thepracticaldev.s3.amazonaws.com/i/yzax4n123oqctaekd1yq.png
canonical_url: https://blog.graphqleditor.com/graphql-editor-new-release/
---



Today we have launched a new version of [GraphQL Editor](https://graphqleditor.com/), a tool we believe can help developers save a lot of time & effort creating their GraphQL based APIs.

### About the tool

The [GraphQL Editor](https://graphqleditor.com/) is a supportive tool for both advanced GraphQL users as well as those making their first steps with GraphQL APIs.

We aim to solve two basic issues:
- ease web development (both frontend & backend side)
- fix communication issues within a development team

[![GraphQL Editor](https://thepracticaldev.s3.amazonaws.com/i/uvm2dw7tjgkivw5vyn0f.png)](https://graphqleditor.com/)


### GraphQL Editor Features:
- **GraphQL IDE** - Prototype your schema or import your own and start working with GraphQL right away.

- **Built-in GraphiQL** - Built-in most popular in-browser IDE for exploring GraphQL. No need to set up your own environment.

- **Schema Stitching** - We have a built-in schema stitching. Create new GraphQL schema from multiple underlying GraphQL APIs.

- **Instant Fake Backend** - Generate fake backend out of your schema in a no time thanks to Levenshtein algorithm.

- **Schema Visualization** - Import your schema to the editor. You can do it both by importing GQL file or copying directly code.

And a lot more! You can read about the features [here](https://graphqleditor.com/features).

### Feedback
We would love to have your feedback! You can post your comments here, hit me with a DM or a mail. The tools have a 7-day free trial, but if you need more time for a test I can provide some coupon codes. Thanks in advance!
Which Star Trek technologies do you want to see come to life?
Tags: discuss
Published: 2019-09-27 14:51:43

---
title: Which Star Trek technologies do you want to see come to life?
published: true
tags: discuss
---

On September 8, 1966, NBC aired the first episode of a new TV series about a starship on a five year mission of space exploration. Since then, the Star Trek universe has coninued to feature amazing "futuristic" technologies.

Some technologies that we've now seen developed: 

✔️ Tablet computers
✔️ Tricorders (mobile phones)
✔️ Voice-interface computers
✔️ Wearable computers/communicators
✔️ Portable memory

What are some things seen in Star Trek that you'd like to see finally developed?
Build React Login & Sign Up UI Template with Bootstrap 4
Tags: react, buildreactloginsign, buildreactuitemplate, bootstrap4
Published: 2020-01-30 10:55:02

---
title: Build React Login & Sign Up UI Template with Bootstrap 4
published: true
tags: React JS, Build React Login & Sign, Build React UI Template, Bootstrap 4
canonical_url: https://www.positronx.io/build-react-login-sign-up-ui-template-with-bootstrap-4/
---

Today, we are going to **create a fantastic React login and sign up user interface template using Bootstrap 4**. This login & sign up UI template will surely help you in building simple react authentication system.

![React sign up ui tutorial](https://www.positronx.io/wp-content/uploads/2019/09/react-login-ui-6748-01.png)

Login system typically allows an individual us to gain access in any software system securely. Sign up is the process which enables a particular user to register in any web and mobile application.

This step by step tutorial will help you learn how can you create an eye-catching login and user registration template for your next React project. We will be employing the Bootstrap 4 front-end framework to build this react login system.

We’ll set up an uncomplicated React app and start building from scratch and implement a login and registration UI component in it.

 
[click here to read more](https://www.positronx.io/build-react-login-sign-up-ui-template-with-bootstrap-4/)
My project is open to (Kotlin) contributors
Tags: hacktoberfest, kotlin
Published: 2019-09-27 14:26:31

Are you using https://gradle.org as your build tool? 

Are you using https://kotlinlang.org, or another JVM language?

Good, read on.

My project is a Gradle plugin, `id("de.fayard.buildSrcVersions")`

{% github https://github.com/jmfayard/buildSrcVersions %}

Its goal is to make it as painless as possible to upgrade your project to the latest and greatest version of everything.

It does that by extracting all your dependencies, searching for available dependencies updates and generating Kotlin code, Groovy code or Gradle properties.

Here is a description of how this can help people with their own project

{%link https://dev.to/jmfayard/helping-out-with-gradle-builds-for-hacktoberfest-1c1c %}

Wants to help? Good. 

The easiest but maybe most useful way to help me is to try the plugin in your own project, read the README at https://github.com/jmfayard/buildSrcVersions and the [rest of the documentation](https://github.com/jmfayard/buildSrcVersions)

If anything is unclear, or does not work as you expected it, or you have great idea, [please open an issue](https://github.com/jmfayard/buildSrcVersions/issues/new/choose)

If you want to go one step further, have a look at [tickets labelled "help wanted"](https://github.com/jmfayard/buildSrcVersions/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22help+wanted%22) and see if you can do something