teleren/devto huggingface dataset:
Rails Stimulus Flatpickr Controller
Tags: stimulus, rails, flatpickr
Published: 2020-05-05 05:18:45

At [peopleforce.io](https://peopleforce.io) we try to stick to as close as possible to the recommended Rails technologies available.  This includes [Stimulus JS](https://stimulusjs.org/) to help separate common behaviours into their own controllers across views.

For our data pickers we decided to use [flatpickr](https://flatpickr.js.org/) which we found to be the most flexible datepicker available in terms of configuration options and features.

Below is our implementation of how we extracted Flatpickr to be used across all our Rails forms with support of different date formats and I18n.

*.erb*
```ruby
   <%= f.date_picker_field :date_of_birth %>
```

*application_form_builder.rb*

```ruby
class ApplicationFormBuilder < ActionView::Helpers::FormBuilder
  def date_picker_field(method, options = {})
    options[:class] = options[:class] || "form-control "
    options[:placeholder] = Current.user.settings.date_format
    options[:data] = {"target" => "date-picker.picker"}
    options[:autocomplete] = "off"
    options[:required] = options[:required] if options[:required]

    inner_tags = @template.text_field_tag(method, (options.has_key?(:value) ? options[:value] : object.send(method)), options)
    inner_tags << @template.hidden_field(@object_name, method, {
        value: (options.has_key?(:value) ? options[:value] : object.send(method).try(:strftime, "%F")),
        data: {target: "date-picker.input"}
    })

    return @template.content_tag(:div, inner_tags, {data: {controller: "date-picker"}})
  end
end
```


*date_picker_controller.js*

// LOCALE - global variable for preferred user language. eg. "en", "es", "ru"
// DATE_FORMAT - global variable for user preferred date format. eg. 'DD-MM-YYYY'

```javascript
import {Controller} from "stimulus"
import flatpickr from "flatpickr";
import "flatpickr/dist/l10n/ru.js"
import "flatpickr/dist/l10n/uk.js"
import moment from "moment";

flatpickr.l10ns.en.firstDayOfWeek = 1;

export default class extends Controller {
    static targets = ["input", "picker"]

    initialize() {
        let controller = this;

        var DATE_FORMATS = {
            "YYYY-MM-DD": "Y-m-d",
            "DD.MM.YYYY": "d.m.Y",
            "DD/MM/YYYY": "d/m/Y",
            "MM.DD.YYYY": "m.d.Y",
            "MM/DD/YYYY": "m/d/Y"
        }

        let flatPicker = flatpickr(this.pickerTarget, {
            "dateFormat": DATE_FORMATS[DATE_FORMAT],
            "locale": LOCALE,
            allowInput: true,
            onClose: (selectedDates, dateStr, instance) => {
                if (dateStr == "") {
                    controller.inputTarget.value = "";
                    instance.clear();
                } else {
                    let d = instance.parseDate(controller.pickerTarget.value, DATE_FORMATS[DATE_FORMAT]);
                    flatPicker.setDate(d);
                    controller.inputTarget.value = moment(d).format("YYYY-MM-DD");
                    controller.pickerTarget.value = instance.formatDate(d, DATE_FORMATS[DATE_FORMAT]);
                }
            }
        });
    }
}
```
Rails Stimulus Flatpickr Controller
Tags: stimulus, rails, flatpickr
Published: 2020-05-05 05:12:06

At [peopleforce.io](https://peopleforce.io) we try to stick to as close as possible to the recommended Rails technologies available.  This includes [Stimulus JS](https://stimulusjs.org/) to help separate common behaviours into their own controllers across views.

For our data pickers we decided to use [flatpickr](https://flatpickr.js.org/) which we found to be the most flexible datepicker available in terms of configuration options and features.

Below is our implementation of how we extracted Flatpickr to be used across all our Rails forms with support of different date formats and I18n.

*.erb*
```ruby
   <%= f.date_picker_field :date_of_birth %>
```

*application_form_builder.rb*

```ruby
class ApplicationFormBuilder < ActionView::Helpers::FormBuilder
  def date_picker_field(method, options = {})
    options[:class] = options[:class] || "form-control "
    options[:placeholder] = Current.user.settings.date_format
    options[:data] = {"target" => "date-picker.picker"}
    options[:autocomplete] = "off"
    options[:required] = options[:required] if options[:required]

    inner_tags = @template.text_field_tag(method, (options.has_key?(:value) ? options[:value] : object.send(method)), options)
    inner_tags << @template.hidden_field(@object_name, method, {
        value: (options.has_key?(:value) ? options[:value] : object.send(method).try(:strftime, "%F")),
        data: {target: "date-picker.input"}
    })

    return @template.content_tag(:div, inner_tags, {data: {controller: "date-picker"}})
  end
end
```


*date_picker_controller.js*

// LOCALE - global variable for preferred user language. eg. "en", "es", "ru"
// DATE_FORMAT - global variable for user preferred date format. eg. 'DD-MM-YYYY'

```javascript
import {Controller} from "stimulus"
import flatpickr from "flatpickr";
import "flatpickr/dist/l10n/ru.js"
import "flatpickr/dist/l10n/uk.js"
import moment from "moment";

flatpickr.l10ns.en.firstDayOfWeek = 1;

export default class extends Controller {
    static targets = ["input", "picker"]

    initialize() {
        let controller = this;

        var DATE_FORMATS = {
            "YYYY-MM-DD": "Y-m-d",
            "DD.MM.YYYY": "d.m.Y",
            "DD/MM/YYYY": "d/m/Y",
            "MM.DD.YYYY": "m.d.Y",
            "MM/DD/YYYY": "m/d/Y"
        }

        let flatPicker = flatpickr(this.pickerTarget, {
            "dateFormat": DATE_FORMATS[DATE_FORMAT],
            "locale": LOCALE,
            allowInput: true,
            onClose: (selectedDates, dateStr, instance) => {
                if (dateStr == "") {
                    controller.inputTarget.value = "";
                    instance.clear();
                } else {
                    let d = instance.parseDate(controller.pickerTarget.value, DATE_FORMATS[DATE_FORMAT]);
                    flatPicker.setDate(d);
                    controller.inputTarget.value = moment(d).format("YYYY-MM-DD");
                    controller.pickerTarget.value = instance.formatDate(d, DATE_FORMATS[DATE_FORMAT]);
                }
            }
        });
    }
}
```
How to use Axios with ReactJS Application
Tags: react, axios, javascript, webdevelopment
Published: 2020-05-05 04:57:24


In this article, I am going to explain how to use Axios for GET, POST, PUT and other HTTP requests in React.js application. I will use MongoDB, Node, and Express.js to create a backend server for the React app.

I assume that you have already available the above tools/frameworks and you are familiar with all the above that what individually actually does.

As we know that we can easily start working on React.js with the create-react-app tool. Here I will skip this because you would be familiar with the basic stuff of React.js. If you are not aware of creating the React.js app with the above tool.

###What is Axios?

Axios is a popular, promise-based HTTP client that sports an easy-to-use API and can be used in both the browser and Node.js. We can use Axios with React to make requests to an API, return data from the API, and then do things with that data in our React app.

With Axios, A developer can also take advantage of async/await for more readable asynchronous code.

 

Here we will use JSON placeholder API for fetching the list of dummy users. 

###Install Axios

At first, we need to install Axios into the react project. Run below command to install it in the project.
**yarn add axios**
**npm install axios**
For more follow the link below.

This articles was originally posted on [jsonworld.com](https://jsonworld.com/article/how-to-use-axios-with-reactjs-application)

Find here the [demo video tutorial](https://www.youtube.com/watch?v=2soxhf9HD4o)

Thanks!
Basic concept of Docker Image and Containers
Tags: docker, containers, images
Published: 2020-05-05 03:27:58

I have created this image to explain the basic concept surrounding Docker images and containers. I hope you find it informative. 

![Basic concept of Docker images and containers](https://github.com/victorwealth/blog-post/blob/master/Docker/Basic%20Concept%20of%20Docker%20Image%20and%20Containers.png?raw=true)
Copy file to multi destinations at once - Linux Tips
Tags: bash, linux, ubuntu
Published: 2020-05-05 03:20:32

## TL;DR

Use `xargs`, for example: `echo "dest1 dest2" | xargs -n 1 cp src`

## Details

I am sure you are familiar with the `cp` command: `cp src dest`

If we want to copy one file to multi destinations, we can use `xargs` with the `cp` command. 

`xargs` will take previous command's stdout as its following command's CLI parameter. Let's learn it with some examples:


1, Copy one file to multi files. Say we have "hello.txt" in our current folder, we want to make copy it as "hello1.txt" and "hello2.txt", we can do:

```bash
$ echo "hello1.txt hello2.txt" | xargs -n 1 cp hello.txt
$ ls 
hello.txt  hello1.txt  hello2.txt
```

The `-n 1` after `xargs` means we want to take the output as `cp`'s CLI parameter one by one, so the above command is like:

```bash
$ cp hello.txt hello1.txt
$ cp hello.txt hello2.txt
```

2, Copy one file into several folders. Say if under the current folder, we have `hello.txt` and 2 folders: `folder1` and `folder2`, and we want to copy `hello.txt` to all subfolders (folder1 and folder2) under the current folder:

The first thing we need to do, is to use a command to list all subfolders. We have 2 ways to do this:

1) use `ls -d`
```bash
$ ls -d */
folder1/  folder2/
```

2) use `find . -type d`
```bash
$ find . -maxdepth 1 ! -path . -type d
./folder1
./folder2
```

Notice we use `-maxdepth 1` here to skip sub-sub folders and use `! -path .` to skip current folder path "./"

Now we can combile this with `xargs` command to copy the file to those folders:

```bash
$ ls -d */ | xargs -n 1 cp hello.txt
$ ls folder*
folder1:
hello.txt

folder2:
hello.txt
```

3, So far in our example, what `xargs` does is *appending* the previous command's stdout to its following command's command parameter, but we can also *inserting* it to its following command's parameter with the `-I` option.

For example, say if we want to delete `hello.txt` under both `folder1` and `folder2`, we can do this:

```bash
$ ls -d */ | xargs -n 1 -I{} rm {}hello.txt
$ ls folder*
folder1:

folder2:
```

We can see the `hello.txt` file is gone under those 2 folders. In this example, the `ls -d */` will print `folder1/` and `folder2`, then with the `-I` option in xargs, we kind of assign those stdout to a variable or a placeholder `{}`, then concatenate the variable {} with `hello.txt`, so essentially the above command is equal to:
```bash
rm folder1/hello.txt
rm folder2/hello.txt
```

Another way to do the multi deletion is, since `rm` can take multiple parameter, as long as we find all `hello.txt` under those folders, we can the simply use `xargs` to pass it to `rm`:

```bash
$ ls folder*/hello.txt | xargs rm 
```

This is equal to:
```bash
$ rm folder1/hello.txt folder2/hello.txt
```

Or if we want to delete "hello.txt" under all folders:

```bash
$ find . -name hello.txt | xargs rm
```

## Reference:
* https://shapeshed.com/unix-xargs/
* https://www.cyberciti.biz/faq/howto-find-a-directory-linux-command/
* https://unix.stackexchange.com/questions/349252/cp-after-xargs-not-working/349258
Validate a Nigerian Phone Number in Laravel
Published: 2020-05-05 00:37:11

There are times when you just want to make an input field accept values in the phone number format. In this article, I show just how to go about it in laravel. Any string taken in is checked to see if it has ‘+234’ as the first three numbers and if the remaining numbers are just 10 in length.
So, here it goes.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/53j71stm1vp9xzivac4h.png)

Thanks for staying with me until this point.
Please I would love to receive your questions and reviews on this.
Free to use most common frontend components made using Bootstrap4
Tags: beginners, webdev, css, bootstrap4
Published: 2020-05-05 00:26:14

---
title: Free to use most common frontend components made using Bootstrap4
published: true
description: Most common frontend templates made using Bootstrap4
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/jbvfjmxomnbao39h387s.jpg
tags: #beginners,#webdev,#css,#bootstrap4
---

Hey folks, while learning bootstrap4, I've designed some of the most common frontend components such as **Login/Signup, Audio/Video/Image gallery, Footer, Employees card, Pricing tables, Contacts**, etc all made using Bootstrap4 <br>
Please have a look if you need one and don't forget to star :star: :star: :star: the repo if you liked the work. <br>
Here are some screenshots
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wl89apzc8azbr795oqft.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tqbggafh8h5y2onh8v9k.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n0320o2fxhclyxqew7eh.jpg)

{% github akashgiricse/templates-using-bootstrap4 %}
Check quickly the TTFB via terminal
Tags: opensource, beginners, webdev, tutorial
Published: 2020-05-05 00:19:55

---
title: Check quickly the TTFB via terminal
cover_image: https://i.imgur.com/vt3jxqS.jpg
published: true
description: An easy way to check the TTFB via terminal in macOS, Linux and Windows. Minimal script wrote in bash to optimize the server response speed verification.
tags: opensource, beginners, webdev, tutorial
canonical_url: https://blog.rafaelcg.com/check-quickly-the-ttfb-via-terminal
---

For a long time, an alias helped me to return the TTFB during my dev tests, and talking with beginner developers I noticed that something small as an alias could be simpler, so I created a simple and developer-friendly tool to help beginners in a developer team to have access to this solution.

To install the [TTFB Terminal](https://github.com/rafaelstz/ttfb-terminal) you just need to run the command below.

```bash
bash <(curl -s https://raw.githubusercontent.com/rafaelstz/ttfb-terminal/master/setup-ttfb)
```
![ttfb terminal - rafael correa gomes](https://github.com/rafaelstz/ttfb-terminal/raw/develop/ttfb-terminal.png)

## Why?

You can use this tool to check the server response and detect some kind of issues, for example:

- Network issues
- Dynamic content creation
- Web server configuration
- Amount of traffic

## What's TTFB?

According to [KeyCDN](https://www.keycdn.com/support/what-is-ttfb). TTFB, which stands for time to the first byte, is the amount of time it takes from when a client makes an HTTP request to it receiving its first byte of data from the webserver. TTFB is an important aspect of website optimization since the faster the TTFB, the faster the requested resource can start being delivered to the browser.

The time to the first byte is made up of three separate components.

- The time needed to send the HTTP request
- The time needed for the server to process the request
- The time needed for the server to send back the first byte of the response to the client

## Thanks!

How do you usually check the TTFB? Do you know some other alias that can easily become a tool? Let me know in the comments below.
Making Some Progress
Tags: 100daysofcode, 100daysofcloud, gads, cloud
Published: 2020-05-05 00:17:41

2,2.

*I am really enjoying the labs on Qwiklabs. Today I worked on*

**Lab:**

I created a Cloud Storage bucket and placed an image in it. 

Configured an application running in Compute Engine to use a database managed by Cloud SQL. 

Configured a web server with PHP, a web development environment that is the basis for popular blogging software. 

Configured the web server to reference the image in the Cloud Storage bucket.

**Lab: GCP Fundamentals: Getting Started with App Engine**

Created and deployed a simple App Engine application using a virtual environment in the Google Cloud Shell.

Performed the following tasks:

Installed the Cloud SDK for App Engine

Previewed an App Engine application running locally in Cloud Shell.

Deployed an App Engine application, so that others can reach it.

Disabled an App Engine application, when you no longer want it to be visible.

Created my first application using App Engine!
 
Could not complete this: GCP Fundamentals: Getting Started with Deployment Manager and Stackdriver because of erros trying to change some things in the file. I didn't know about the fact that there is a quota for each lab. Now I cannot complete that because I have consumed my quota! - "Sorry, your quota has been exceeded for this lab".

Go big with BigQuery... Separates storage cost from Queries cost...

**Lab: GCP Fundamentals: Getting Started with BigQuery**

In this lab, I loaded a web server log into a BigQuery table. After loading the data,I queried it using the BigQuery web user interface and the BigQuery CLI. Really enjoyed the process of querying. 
I should learn bq more and just play around with data.
CircleCI is used throughout the Galaxy
Tags: circleci, devops, ci, starwars
Published: 2020-05-05 00:14:01

---
title: CircleCI is used throughout the Galaxy
published: true
description: CircleCI can be found in galaxies far, far away.
tags:
  - circleci
  - devops
  - ci
  - starwars
cover_image: "https://dev-to-uploads.s3.amazonaws.com/i/h77yde11b4vycwjxd29u.png"
---

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h77yde11b4vycwjxd29u.png)
Space-Time FEM Transformation of Time-Dependent to Stationary Simulation Model
Tags: featool, multiphysics, finiteelement, simulation
Published: 2020-05-06 01:09:21

---
title: Space-Time FEM Transformation of Time-Dependent to Stationary Simulation Model
published: true
date: 2020-05-05 00:00:00 UTC
tags: featool, multiphysics, finite-element, simulation
canonical_url: https://www.featool.com/tutorial/2020/05/05/Space-Time-FEM-Transformation-of-Heat-Transfer-Simulation.html
---

![Space-Time FEM Transformation of Time-Dependent to Stationary Simulation Model](https://dev-to-uploads.s3.amazonaws.com/i/nqmn3ahdfzpc06rleolv.jpg)

Space-Time Finite Element (FEM) Simulation [FEATool Multiphysics](https://www.featool.com) is a very flexible CAE physics and continuum mechanics simulation toolbox, allowing users to customize, easily define, and solve their own systems of partial differential equations (PDE).

In the linked post it is shown how the custom equation feature can be used to transform a low dimensional transient and time dependent heat-transfer problem, to a higher dimensional but stationary equivalent simulation problem, which potentially can save significant computational time and effort.

Please visit https://www.featool.com/tutorial/2020/05/05/space-time-fem-transformation-of-heat-transfer-simulation for more information.

* #featool #multiphysics #FEA #finite-element-method #CAE #simulation
Digital Garden
Tags: motivation, learning, career
Published: 2020-05-05 14:13:49

---
title: Digital Garden
published: true
date: 2020-05-05 00:00:00 UTC
tags: motivation, learning, career
canonical_url: https://atila.io/posts/digital-garden
---

I have decided to create screencasts. My goal is to eventually get good enough on this so I can create a couple of courses, help people level up their career, and **learn in public**.

So, it‘s only natural I start following up on people already good at it. Recently I started consuming more content from Nicolas Schürmann, Simon Vrachliotis, Tomasz Łakomy, Xiaoru "Leo" Li, and Joel Hooks. Here's why you should follow each one of them:

- [Nicolas](https://twitter.com/_nasch_): great guy, motivated, always helpful. He's the one who got me into this whole screencast thing (more on that on a dedicated post, there's much appreciation overdue for this guy)

- [Simon](https://twitter.com/simonswiss): This dude is a constant wave of positivity and good mood. He's as experienced as he's motivated, always has something nice to say but never hold back on his opinions.

- [Tomasz](https://twitter.com/tlakomy): A prolific content producer. He's pragmatic and straight to the point without dropping his sharp sense of humour. His videos play a big influential role on my own. Also, a genuine approachable nice guy ready to help.

- [Leo](https://twitter.com/hexrcs): Another great content producer. Very technical and always eager to help!

And, lastly [JHooks](https://twitter.com/jhooks), who has me inspired in start writing more. Yesterday I was watching a stream from [Party-Corgi](https://egghead.io/lessons/egghead-sector-the-future-of-mdx-and-digital-gardens) on Twitch and when he was asked about the concept of [Digital Gardens](https://joelhooks.com/digital-garden) it all made sense to me and I was hooked by it (pardon the pun, irresistible).

🌿

Digital Garden is a concept of writing for yourself. No need for extra preparation, you write your mind, you let it out. People will find it? Maybe. People will like it? Someone will. People will hate it? Who cares?!

🧠💪

Allow me to add another metaphor for the Gardening one: writing is an exercise for the mind. No exercise is bad, so the mere gesture of writing stuff is already beneficial, at least for yourself. At the very least you’ll get better at expressing your ideas overtime.

And the best part is, there’s no telling what that _seed_ will grow towards. Maybe someone will find it later and like it and that can spark another idea that will help that person in something, like Digital Gardens did for me.

And that’s it. I will be writing more from now on.

📹

While I have your attention, allow me to plug in my Youtube Channel: [Scope Leak](https://www.youtube.com/channel/UCfCr8kE8AL0tzDPbX1KX_gg). Built with the very same concept of a Digital Garden, byte-sized tutorials for you to level up as a Web Developer. Check this ongoing series on [Arrays for Efficient Developers](https://www.youtube.com/playlist?list=PLnf4fY6gAka27ppbqq_WNNLInbXlZUTlB). Check out the intro video:

{% youtube fUgaS_xynns %}