teleren/devto huggingface dataset:
React Native Credit Card Input
Tags: react
Published: 2020-05-04 10:50:53


![React Native Credit Card Input](https://github.com/sbycrosz/react-native-credit-card-input/blob/master/preview-ios.gif?raw=true)
##Features
* Skeuomorphic credit-card 💳 (inspired by: card, react-native-credit-card)
* !!NEW!! Now you could scale the Credit Card for smaller screens
* !!NEW!! Now you could use CardView as a Component. example use case: showing saved payment details, etc.
* Lite version for smaller screens (or if skeuomorphic is not really your thing)
* Credit-card input validations & formatting while you’re typing
* The form is fully navigatable using the keypad
* Works on both Android and iOS

Download: [https://github.com/sbycrosz/react-native-credit-card-input](https://github.com/sbycrosz/react-native-credit-card-input)
Install: npm i --save react-native-credit-card-input
More: [https://reacthacks.com/tag/react-card/](https://reacthacks.com/tag/react-card/)
Designers vs Developers | Why designs never look the same when coded
Tags: webdev
Published: 2020-05-04 10:46:48

If you have been building stuff for a long time on the web, you will know that the struggle between designers and developers is real.

The main aspect to this, is that what Designers create, and what Developers have to code are not always in harmony. <strong>I learnt this when I first started by learning graphics design, and was frustrated that none of my designers were replicated 100% in code.</strong>

{% youtube qmIAm55PgZM %}
<center>[Youtube: Designers vs Developers](https://youtu.be/qmIAm55PgZM)</center>

It wasn't until I started coding that I learn why this was the case. It's hard to make something work 100% on all browsers, devices, etc. Using CSS, and HTML to achieve perfect union of all styles visually to adhear to the UI isn't easy. This is especially true of the designer has created floating objects all over the place, with no real columns or rows.

I learn a lot once I started coding, and how my designs have changed based on what is optimal for coding, since the more bizarre a design is, the harder and more time consuming it will be to replace and code properly.

Tips for designers and developers working together:
* Understand what the objectives are for a client/website
* Consider the timeline of when the project is due and what is possible by then
* Make sure you work within the budget of what is possible in that time
* Communicate what is difficult and easy to achieve in both design and dev
* Work together.

## Follow and support me: 
Special thanks if you subscribe to my channel :)
* [🎞️ Youtube](https://www.youtube.com/channel/UCvM5YYWwfLwpcQgbRr68JLQ?sub_confirmation=1)
* [🐦 Twitter](https://twitter.com/adrian_twarog)
* [💬 Discord](https://discord.gg/nGdThpE)
* [❤ Patreon](https://www.patreon.com/adriantwarog)

## Want to see more:
I will try to post new great content every day. Here are the latest items:
* [Adobe XD to Fully Responsive WordPress Site](https://dev.to/adriantwarog/adobe-xd-to-fully-responsive-wordpress-site-16e0)
* [Adobe XD to HTML Full Process](https://dev.to/adriantwarog/adobe-xd-to-html-full-process-ao6)
* [Full Tutorial on how to use SASS to improve your CSS](https://dev.to/adriantwarog/full-tutorial-on-how-to-use-sass-to-improve-your-css-57on)
* [Creating a Mobile Design and Developing it](https://dev.to/adriantwarog/creating-a-mobile-design-and-developing-it-5c4o)
React Interactive Paycard
Tags: react
Published: 2020-05-04 10:40:46

![React Interactive Paycard](https://github.com/jasminmif/react-interactive-paycard/raw/master/demo.gif "React Interactive Paycard")

Inspired from a vue project vue-interactive-paycard, I decided to recreate the same on React as a part time fun project. I did some minor changes on the animations and optimizations on the code.

A fantastic credit card form with smooth and sweet micro-interactions. Includes number formatting, validation and automatic card type detection. Built with reactjs and also fully responsive

Download: [https://github.com/jasminmif/react-interactive-paycard](https://github.com/jasminmif/react-interactive-paycard)
Credit: jasminmif
More: [React JS Card](https://reacthacks.com/tag/reactjs-card/)
Vim to the rescue: Sessions
Tags: vim, linux, tutorial, todayilearned
Published: 2020-05-04 10:34:53

## Introduction

One of the reasons that people go for IDEs is that the moment you open one, you have everything exactly how you want it. With a file browser on the left hand side, coding window on the right and an attached terminal below. But whenever you open vim, you have to open the file browser and terminal from scratch. 

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

Well there is a quick way around it. You can actually store sessions in vim. You can then open that particular session to see exactly what you want to see.

---

## Creating a session in vim

Open vim. Now open the programs that you want to see in your session. Let us open the **Lex** file browser:

```vimscript
:Lex
```
Now let us open any file, and the open a terminal below by running the following command:

```vimscript
:bel term
```

To save a session, you can use the `mks[ession]` command. Note that all sessions have a `.vim` extension. Vim sessions also store the split sizes, so feel free to resize your terminal without worrying about ever doing it again after opening vim

```vimscript
:mks session.vim
```

You can now safely exit out of vim without worrying about loosing your layout. You will be able to see a `session.vim` file in your current directory. To open it use the **-S** flag in vim:

```sh
vim -S session.vim
``` 

---

## A few things to note

* If you add a **!** symbol after `mks`, it overwrites the file you specify.
* If no file name is supplied then the default file is **Session.vim**
* Want to store multiple files open on multiple tabs? Go ahead!
* Want to use additional UI details while opening a session? Go ahead and create a **x.vim** file in the same directory and go ahead.
Instantiation or !Instantiation of Ruby classes?
Tags: ruby, rails
Published: 2020-05-04 10:34:11

The other day I was thinking,

should I always aim for the least memory use when I write Rails code or is any effort unimportant, given that behind the few lines of my own code there is always a plethora of framework calls?

We're now discussing the ethics of our `RejectPendingOrderJob`. 

Simply put, an order is created in `pending` state and automatically `rejected` in 72 hours unless it has been `approved` in the meanwhile. 

The job is enqueued with every `pending` order created, will execute in 72 hours and should do nothing unless the order is still `pending`.  

```ruby
# I believe a single SQL statement can execute this elegantly
def perform(order_id)
  Order.where(id: order_id, state: :pending).update_all(state: :rejected)
end

# The counter proposal involves the instantiation of the class, which I believe is redundant. 
def perform(order_id)
  order = Order.find(order_id)
  order.rejected! unless order.accepted?
end
```

##### What is your preference?
Mobile hamburger menu
Tags: html, css, javascript
Published: 2020-05-04 10:30:38

i am creating a fictional startup website for a friend in the hope that it will take, however i have created the nav and a hamburger menu with overlay when it gets to a certain screen size. My problem is i have tried in vain to find a way of closing overlay menu but have failed.Would anyone be able to help please. Here is my HTML.



<nav role="navigation">
      <input id="menu-btn" type="checkbox" class="menu-btn"/>
      <label class="menu-icon" for="menu-btn">
        <span class="menu-icon__line"></span>
      </label>

      <!-- Main Nav -->
      
      <ul class="nav-links" id="nav-links">
        <li class="nav-link"><a href="index.html" class="current">Home</a></li>
        <li class="nav-link"><a href="#about">About</a></li>
        <li class="nav-link"><a href="#services">Services</a></li>
        <li class="nav-link"><a href="contact.html">Contact</a></li>
      </ul>
    </nav>

And here is my CSS.
.menu-icon {
    position: relative;
    padding: 26px 10px;
    cursor: pointer;
    z-index: 1;
    display: none;

    &__line {
      display: block;
      position: relative;
      background: #fff;
      width: 26px;
      height: 3px;
      border-radius: 4px;
      transition: background 0.8s ease;

      &::before,
      &::after {
        content: "";
        border-radius: 4px;
        position: absolute;
        height: 100%;
        width: 100%;
        background: #fff;
        transition: background 0.8s ease;
      }

      &::before {
        transform: translateY(-7px);
      }
      &::after {
        transform: translateY(7px);
      }
    }
  }
  .menu-btn {
    display: none;
  }

  &.scrolled {
    height: 6rem;
    background: rgba($color: #000000, $alpha: 0.7);
    color: #fff;
    border-bottom: 1px solid $accent-color;

    .menu-icon {
      &__line,
      &__line::before,
      &__line::after {
        background-color: #fff;
      }
    }
  }
}

.overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba($color: #000000, $alpha: 0.4);
  width: 100%;
  height: 100vh;
}
Custom File Upload Button | HTML + CSS + JavaScript
Tags: codepen
Published: 2020-05-04 10:27:48

<p>This  is code for a basic custom file upload button in HTML, CSS and JavaScript. See the full video tutorial here:
<a href="https://youtu.be/T3PDgtliezo" target="_blank">https://youtu.be/T3PDgtliezo</a></p>

{% codepen https://codepen.io/Mdarman100001/pen/GRpOzeX %}
Query GraphQL API with Vanilla Fetch Inside React Component
Tags: graphql, react, webdev, javascript
Published: 2020-05-04 10:26:00

By using advanced GraphQL clients like Apollo, it's easy to forget that it's like any other HTTP request. Let's make a query to a GraphQL database without using any libraries to gain a deeper appreciation of GraphQL.

Let's interact with a free Countries GraphQL API at the following URL:


[https://countries.trevorblades.com/](https://countries.trevorblades.com/)


When we visit the URL in our browser, there is a editor on the website where we can run the following query.

```gql
{
  countries {
    code
    name
    emoji
  }
}
```

Now let's run this query inside of React with vanilla fetch.

```js
import React, { useEffect, useState } from "react";

const Countries = () => {
  const [countries, setCountries] = useState([]);

  useEffect(() => {
    fetch("https://countries.trevorblades.com/", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json"
      },
      body: JSON.stringify({ query: "{ countries { name emoji code } }" })
    })
      .then(res => res.json())
      .then(res => setCountries(res.data.countries));
  });
  
  return (
    <>
      <h1>Countries</h1>
      <div>
        {countries.map(country => {
          const { code, name, emoji } = country;
          return (
            <div key={code}>
              {emoji} {name}
            </div>
          );
        })}
      </div>
    </>
  );
};
```

As we can see here, a GraphQL query is simply a `POST` request with the query inside of the body.
New Week, New Project
Tags: devjournal, codenewbie, womenintech, javascript
Published: 2020-05-04 10:03:10

_This post was originally published on May 4, 2020 on [my blog](https://alexlsalt.github.io/blog)._

Happy Monday, folks! After a relatively productive-yet-relaxing weekend, I'm ready for this new week - complete with the start of a new client web design project!

It's been a minute since I've done client work, and I'm actually really excited to get back into it for this project. It's going to be a simple transfer of the site from Wordpress to Squarespace, but with some custom JavaScript code thrown in by yours truly. Really looking forward to the process.

Other than that, this week should be pretty laidback with a couple of life-admin tasks to take care of! Yay!

Hope this week is great for you as well! Cheers.
My First Hackathon Submission: Success!!!
Tags: devjournal, codenewbie, womenintech, twiliohackathon
Published: 2020-05-04 09:54:49

_This post was originally published on May 1, 2020 on [my blog](https://alexlsalt.github.io/blog)._

Wow-ZA. The last couple of days have been *intense* to say the very least. Over the past two-ish weeks, I've been steadily moving forward with my very first hackathon project, Wellbean.

I can't even begin to count the number of times I went back and forth about if, when, or how I was going to finish the project after coming up against so many confusion headaches and roadblocks.

Well, my friends, I'm elated to say that I submitted my project yesterday in a neat little package à la a blog post on dev.to which you can find right over [here >>](https://dev.to/alexlsalt/wellbean-the-finished-product-x-twilio-hackathon-1o3f)

And here's a [quick demo of the project] (https://www.loom.com/share/36e0660de36f42f2aedb9623bab1876b) >>

*Huge breath of relief and satisfaction...* I am so, so happy! Now, may the weekend commence with joyful relaxation, lots of reading, and some low-key question-answering for an awesome apprenticeship application. Cheers!
How to speed up your Ruby/Rails app by ~5% with zero efforts
Tags: ruby, rails
Published: 2020-05-04 06:07:33

---
title: How to speed up your Ruby/Rails app by ~5% with zero efforts
published: true
description: A quick recap of my experience with symbol-fstring gem
tags: ruby, rails
---

This is going to be a quick one. Yet I think it might be helpful to almost everyone using ruby. A few days ago, I learned about a gem by Shopify - [symbol-fstring](https://github.com/Shopify/symbol-fstring). Thank you [@strzibnyj](https://twitter.com/strzibnyj/status/1256056172609630208).

It does something very simple - very well: **Access symbols internal strings without duplicating them**. Why is that important?

> In Ruby many APIs tend to accept symbols, but regularly convert them to string internally. The typical example is ActiveSupport::HashWithIndifferentAccess, but there are plenty more.

> The problem with this is that Symbol#to_s creates a new string every time it is invoked, and since it often happens in hotspots, it causes a lot of work for the garbage collector, and cause many identical strings to be kept in memory.

To activate the gem in an app, all you need is adding the gem to your Gemfile and requiring the "patch".

e.g. `gem 'symbol-fstring', require: 'fstring/all'`

That's all. SaaSHub has been running with it for 3 days now, and there haven't been any unexpected issues. Based on my rough benchmarks, a typical page like "[basecamp alternatives](https://www.saashub.com/basecamp-alternatives)" responds about 5% faster and allocates about 5% fewer objects. 

I know, 5% isn't that much, yet it's "FREE". Moreover, this gem is maintained by a billion-dollar company, Shopify, popular with its high-quality dev standards. So, I guess it is both safe and worth it giving it a go.
React Native Firebase AdMob | Google Ads on your next mobile application on iOS or Android
Tags: reactnative, react, firebase
Published: 2020-05-04 09:26:02

React Native Firebase AdMob lets you place Google Ads from AdMob into your mobile application in React Native. In this topic, we will setup the Firebase component and AdMob in Google, and set up ads in both iOS and Android.

{% youtube lwIZuV_PzqI %}
<center>[Youtube: React Native Firebase AdMob](https://youtu.be/lwIZuV_PzqI)</center>

In this video we go over:
* Installation
* AdMob account creation
* AdMob App ID assignment
* Configuring AdMob settings
* Adding AdMob to React Native
* Display Ads with Interstitial Ads
* Reward Ads with Interstitial Ads
* Banner Ads with different sizes

The Library by RNFirebase can be found here:
https://rnfirebase.io/admob/usage

## Follow and support me: 
Special thanks if you subscribe to my channel :)
* [🎞️ Youtube](https://www.youtube.com/channel/UCvM5YYWwfLwpcQgbRr68JLQ?sub_confirmation=1)
* [🐦 Twitter](https://twitter.com/adrian_twarog)
* [💬 Discord](https://discord.gg/nGdThpE)
* [❤ Patreon](https://www.patreon.com/adriantwarog)

## Want to see more:
I will try to post new great content every day. Here are the latest items:
* [Adobe XD to Fully Responsive WordPress Site](https://dev.to/adriantwarog/adobe-xd-to-fully-responsive-wordpress-site-16e0)
* [Adobe XD to HTML Full Process](https://dev.to/adriantwarog/adobe-xd-to-html-full-process-ao6)
* [Full Tutorial on how to use SASS to improve your CSS](https://dev.to/adriantwarog/full-tutorial-on-how-to-use-sass-to-improve-your-css-57on)
* [Creating a Mobile Design and Developing it](https://dev.to/adriantwarog/creating-a-mobile-design-and-developing-it-5c4o)
#PureCSS - Responsive Hijab Girl Portrait
Tags: codepen, css, purecss
Published: 2020-05-04 09:25:33

---
title: #PureCSS - Responsive Hijab Girl Portrait
published: true
tags: codepen, css, purecss
---

<p>Responsive Hijab Girl Portrait using CSS</p>

{% codepen https://codepen.io/AsyrafHussin/pen/bGVYOjY %}
How to change name of minified files in W3 Total Cache plugin for WordPress
Tags: wordpress
Published: 2020-07-01 11:42:18

---
title: How to change name of minified files in W3 Total Cache plugin for WordPress
published: true
date: 2020-05-04 09:18:39 UTC
tags: Wordpress
canonical_url: https://daniele.tech/2020/05/how-to-change-name-of-minified-files-in-w3-total-cache-plugin-for-wordpress/
---

An easy filter for an important change with WordPress caching of assets.

The post [How to change name of minified files in W3 Total Cache plugin for WordPress](https://daniele.tech/2020/05/how-to-change-name-of-minified-files-in-w3-total-cache-plugin-for-wordpress/) appeared first on [Daniele Mte90 Scasciafratte](https://daniele.tech/eng).
Re-introducing JavaScript Objects using Object Literals
Tags: javascript, oop, beginners, explainlikeimfive
Published: 2020-05-04 08:02:59

The number of ways one can create Objects in JavaScript can be quite overwhelming. JavaScript is a unique language where almost EVERYTHING is an Object. It is not an exaggeration when I say, even Functions in JavaScript are Objects. This article is a detailed re-introduction to Objects, to refresh one's basics if already familiar, or introduce the newbies to Object Oriented Programming in JS.

Having said that, let's dive in:

###What is an object?
Simply put, it's a group of anything! Usually, a group of some related data and functionalities put together make an object. There is nothing more or less to it. So I will not get into the bookish definitions.

For example, details about a person can be represented as an object: 
Name
Age
Country

In JS we have a particular way of representing this object- Curly Braces with key-value pairs! It's nothing but JavaScript's Object Notation or JSON. (Oh! I have heard this!)

```javascript
var person0 = {
    name: 'Juan',
    age: 25,
    country: 'Mexico'
};
```
And there you have your first object. 😊
But remember I told you, some data and functions. So let's add a function:

```javascript
var person0 = {
    name: 'Juan',
    age: 25,
    country: 'Mexico',
    greeting: function() {
        console.log('Hola! Mi nombre es Juan');
    }
};
```
Eazy-Peezy!

Wondering why are you able to add a function inside an object? Well, remember even Functions in JS is an Object! So this is simply a nested object. An object inside an object. 

What happens when you call `person0.greeting()`? You guessed it right, `"Hola! Mi nombre es Juan"`

This way of declaring an object in JS is called __Object Literal__.

But, what happens if you change _person0_'s name?
i.e. `person0.name = 'Maria';`
Then, calling `person0.greeting()` still prints `"Hola! Mi nombre es Juan"`.

Let's fix this. Instead of hard-coding "Juan", we simply fetch the current 'name' in the object- 

```javascript
var person0 = {
    name: 'Juan',
    age: 25,
    country: 'Mexico',
    greeting: function() {
        console.log('Hola! Mi nombre es ' + this.name);
    }
};
```

`this` holds the current scope where the function is called, which in our case in _person0_. Now, if you change _person0_'s name in future, the `greeting()` function will update its output accordingly.

Unfortunately, the concept of scope is 'out of scope' of this article. Pun Intended! 😂 I promise to cover it later.

You have done well 🤗. Take a break. Digest this. Then move on to [#2](https://dev.to/salyadav/re-introducing-javascript-objects-2-h63).

Reference: 
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics
Day 10 of #100DaysOfCode: Learn Monkey C- create a menu for CIQ application
Tags: 100daysofcode, garmin, connect, watch
Published: 2020-05-04 09:15:56

## Introduction
We can use Monkey C and Connect IQ SDK to customize the appearance of Garmin devices. The article is the note for learning Monkey C.

## Overview
It's a simple example for a Connect IQ application with simple menu. There are a few kind of objects in this example.
* App.AppBase: entry point
* Ui.View: menu or other views
* Ui.MenuInputDelegate: the actions when the menu item is selected
* module: stores static variables

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/s52ycr26jwdx1j9lrfdz.png)
## Steps
### 1.Prepare the development environment
* Please install Eclipse and Connect SDK with the documents: https://developer.ola.cf.garmin.com/connect-iq/programmers-guide/getting-started
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ra7pzm30owznk2zen970.png)

### 2.Prepare the manifest.xml and resources/menus/menu.xml
* manifest.xml: specify the entry
```
entry="ExampleApp"
```
* resources/menus/menu.xml

```xml
<menu id="ExampleMenu">
    <menu-item id="room_1" label="Item 1" />
    <menu-item id="room_2" label="Item 2" />
</menu>
```
### 3.Prepare main files
* Module (Example)
```java
using Toybox.System as Sys;
using Toybox.Communications as Comm;
using Toybox.Application;
using Toybox.WatchUi as Ui;
using Toybox.Timer as Timer;
using Toybox.UserProfile;

module Example {
	var roomId = -1;
}
```

* Entry point (ExampleApp)
```java
using Toybox.Application as App;
using Toybox.WatchUi as Ui;

class ExampleApp extends App.AppBase {

    function initialize() {
        AppBase.initialize();
    }

    // Return the initial view of your application here
    function getInitialView() {
        return [new ExampleAppMenu()];
    }

}
```

* Menu (ExampleAppMenu)
```java
using Toybox.WatchUi as Ui;
using Toybox.System as Sys;
using Toybox.Timer as Timer;

class ExampleAppMenu extends Ui.View {

    function initialize() {
    }
    
    function selectRoomMenu() {
    	Ui.pushView(new Rez.Menus.ExampleMenu(), new ExampleAppMenuDelegate(), Ui.SLIDE_IMMEDIATE);
    }
}
```

* Actions (ExampleAppMenuDelegate)
```java
using Toybox.WatchUi as Ui;
using Toybox.System as Sys;

class ExampleAppMenuDelegate extends Ui.MenuInputDelegate {
    function initialize() {
        MenuInputDelegate.initialize();
    }

    function onMenuItem(item) {
        if (item == :room_1) {
            Example.roomId = 1;
        } else {
            Example.roomId = 2;
        }
        
        Ui.popView(Ui.SLIDE_IMMEDIATE);
        Ui.pushView(new ExampleAppView(), new ExampleAppDelegate(), Ui.SLIDE_IMMEDIATE);
   }
}
```

### 4.Compile and run on the simulator
* That's it!

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

## Articles
There are some of my articles. Feel free to check if you like! 
* My blog-posts for software developing: https://medium.com/a-layman
* My web resume: https://jenhsuan.github.io/ALayman/cover.html
* Facebook page: https://www.facebook.com/imalayman