teleren/devto huggingface dataset:
React Native Convert Text to Upper Case or Lower Case on Button Click
Tags: reactnative, react, android, ios
Published: 2019-08-15 17:25:20

---
title: React Native Convert Text to Upper Case or Lower Case on Button Click
published: true
description: React Native Convert Text to Upper Case or Lower Case on Button Click
tags: #reactnative #react #android #ios 
---

Source : <a href="https://www.skptricks.com/2019/08/react-native-convert-text-to-upper-case-lower-case-text.html" > React Native Convert Text to Upper Case or Lower Case on Button Click</a>

This tutorial explains how to convert text to upper case or lower case on button click in react native application. In this example we are going use toUpperCase() and toLowerCase() Javascript function to convert upper case or lower case letter in react native application.
toUpperCase() is used to convert all the text component text to Upper Case (Capitalize).
toLowerCase() function is used to transform all text into lower case.

<img src="https://1.bp.blogspot.com/-4ncrA_WtA6E/XUbrm4MqVpI/AAAAAAAADLM/M4Tmgmvf2LwiuPZjQRwHQSv5pf-Q3Lw9QCLcBGAs/s400/react-native-convert-text-to-upper-case-lower-case-text.jpg" />

<a href="https://www.skptricks.com/2019/08/react-native-convert-text-to-upper-case-lower-case-text.html" > Click here to read more</a>
React Native Bottom Action Menu Example
Tags: reactnative, react, android, ios
Published: 2019-08-15 17:23:49

---
title:React Native Bottom Action Menu Example
published: true
description: React Native Bottom Action Menu Example
tags: #reactnative #react #android #ios  
---

Source :- <a href= "https://www.skptricks.com/2019/08/react-native-bottom-action-menu-example.html" >React Native Bottom Action Menu Example </a>

This tutorial explains how to create bottom action menu example in react native application. To make Bottom Action Menu, we are going to use ActionSheet component from react-native-actionsheet library. Cross platform ActionSheet. This component implements a custom ActionSheet and provides the same way to drawing it on the defferent platforms(iOS and Android). Actually, In order to keep the best effect, it still uses the ActionSheetIOS on iOS.


<img src="https://1.bp.blogspot.com/-19_42d7Jhbw/XUbB2GrQW8I/AAAAAAAADKw/9QOFUQcwZ0wnIfsANPN6TJij9AzsPcGmgCLcBGAs/s400/react-native-bottom-action-menu-example.jpg" />

<a href= "https://www.skptricks.com/2019/08/react-native-bottom-action-menu-example.html" >Click here to read more </a>
React Native Create Custom Alert Dialog Box
Tags: reactnative, react, android, ios
Published: 2019-08-15 17:20:32

---
title: React Native Create Custom Alert Dialog Box
published: true
description: React Native Create Custom Alert Dialog Box
tags: #reactnative #react #android #ios 
---

Source : <a href="https://www.skptricks.com/2019/08/react-native-create-custom-alert-dialog-box.html" >React Native Create Custom Alert Dialog Box </a>

This tutorial explains how to create custom alert dialog box in react native application using Model component. React Native provide us pre build Alert dialog box to show alert messages on application screen but it has some limitation like user can't display images in dialog box. For that we need to create custom dialog box and in this example we are going to create similar dialog box using model component in react native application.

<img src="https://1.bp.blogspot.com/-wdTeX0H_j9w/XUZopOe-QEI/AAAAAAAADKM/OQhZpDAbnvkx6veoSkWo9V3SlPAY0xsowCLcBGAs/s400/react-native-create-custom-alert-dialog-box.jpg"/ >


<a href="https://www.skptricks.com/2019/08/react-native-create-custom-alert-dialog-box.html" >Click here to read more</a>
React Native Modal Example To Display Image
Tags: reactnative, react, android, ios
Published: 2019-08-15 17:18:17

---
title: React Native Modal Example To Display Image
published: true
description: React Native Modal Example To Display Image
tags: #reactnative #react #android #ios 
---

Post Link : <a href="https://www.skptricks.com/2019/08/react-native-modal-example-to-display-image.html" > React Native Modal Example To Display Image</a>

This tutorial explains how to display image in modal dialog box in react native application. he Modal component is a simple way to present content above an enclosing view. Note: If you need more control over how to present modals over the rest of your app, then consider using a top-level Navigator. In this example we are going to update the initial state with help of toggleModal function. This function helps to hide and show the image inside the model component in react native view component.

<img src= "https://1.bp.blogspot.com/-qkZAMVlqXQc/XUPDM-0ioiI/AAAAAAAADJc/XSidWJIEAY8Ozf28lE2TPKsioQhRI-a5ACLcBGAs/s400/react-native-modal-example-to-display-image.jpg" />

<a href="https://www.skptricks.com/2019/08/react-native-modal-example-to-display-image.html" >  Click here to read more</a>
5 differences you might not have noticed between desktop and web UIs
Tags: javascript, electron, nwjs, ux
Published: 2019-08-15 16:53:30

If you're developing a desktop app in [Electron](https://electronjs.org/), [NW.js](https://nwjs.io/), or a similar tool, it's tempting to just create a "website for the desktop" and leave it at that. But there are a few different UI conventions that you may not have noticed between websites and desktop applications!

## The cursor does not change to a pointer (finger) from the default (arrow) on buttons

On websites, if you mouse over actionable elements, your cursor generally turns into a pointer. This includes both hyperlinks and buttons that control the UI. Interestingly, by default when using the `<button>` tag, the cursor acts just as a desktop UI does and stays an arrow. But when using a stylized `<a>` or `<div>` tag that looks like a button, or perhaps by intentionally changing the behavior of a `<button>`, the cursor changes to pointer. 

On desktop applications the pointer is used exclusively for hyperlinks and not for the UI actions. For example, your desktop browser's bookmarks and buttons don't change your cursor into the finger pointer, it stays as the default arrow. Chrome's Dev Tools actually has inconsistent behavior for this - the `Elements`, `Console`, `Sources`, `Network`, etc tabs use a pointer cursor like a browser, but if you're in the `Elements` tab and select an element, the second set of tabs for `Styles`, `Event Listeners`, `DOM Breakpoints`, `Properties`, etc follow the desktop convention of leaving your cursor as the default arrow.

## You can't highlight/select/copy any text

On websites, mousing over any non-link will generally give you the text-selection (caret) cursor and allow you to select and copy that text.

On desktop applications, you are generally not allowed to select text nor does your cursor change; text that is supposed to be selectable generally resides in a text field.

## You can't select nor drag images

On websites, you can select and copy an image, or straight up drag the image around. An easy way to save an image, for example, is to just drag it from a site directly to your desktop.

On desktop applications, images are handled like text; you can't interact with them.

## Right clicking is a thing that people do on the desktop

The right-click context menu may need to be handled in a desktop application, either by disabling right-click in most contexts or populating it with sensible actions. For example, Electron by default doesn't do anything when right-clicking, while right-clicking a text field *should* allow you to cut/copy/paste/undo/select-all.

## Be sure to catch random hotkeys that shouldn't work on desktop

Does `ctrl`+`r` do something in your app that it shouldn't on a desktop? How about `ctrl`+`-`/`+`? Does `ctrl`+`w` kill your program when it shouldn't on the desktop? Refreshing and zooming might be allowable behavior, but it also might not be, depending on your app.
Adding missing indexes in your Rails App
Tags: ruby, rails, database, sql
Published: 2019-08-15 16:27:38

---
title: Adding missing indexes in your Rails App
published: true
description: It's easy to forget to index a model relation.  Here's how to find and add it.
tags: ruby, rails, database, sql
---

Indexing your database is an important and often overlooked performance boost to your app.

Rails makes it pretty easy to index model relations with the `add_reference` method in your migrations. The `add_reference` method will not only create a _id column on your parent table, but also add an index for _id.

If you need to add an index to an existing relation you can use the `add_index` method.

If you weren't in the habit of using `add_reference` or manually indexing your relations from the beginning it can be a pain to find all of your missing indexes. Luckily in my infinite quest to find the easiest or quickest way to do things (aka I'm super lazy) I stumbled upon a script that will find any missing indexes.

From inside you rails console run the following:

```ruby
c = ActiveRecord::Base.connection

c.tables.collect do |t|  
  columns = c.columns(t).collect(&:name).select {|x| x.ends_with?("_id" || x.ends_with("_type"))}
  indexed_columns = c.indexes(t).collect(&:columns).flatten.uniq
  unindexed = columns - indexed_columns
  unless unindexed.empty?
    puts "#{t}: #{unindexed.join(", ")}"
  end
end
```
credit: http://tomafro.net/2009/09/quickly-list-missing-foreign-key-indexes (which is currently not working, hence this post)

What will be returned is a list of tables and the columns within them that are missing an index.
Building smart contracts in Rust
Tags: rust, blockchain, privacy
Published: 2019-08-15 16:23:35

Oasis Labs is building a cloud platform powered by blockchain that has some interesting properties like confidentiality and privacy at every layer of the hardware and software stack (even compute), and an entirely new scaling architecture. 

We just launched a new SDK and WASI runtime to make developing smart contracts in Rust super easy. If you're interested in blockchain or decentralized networks, check it out! We'd love your feedback.

https://medium.com/oasislabs/devnet-2-0-and-our-new-oasis-sdk-c858c25716e7
How are you hosting your apps?
Tags: discuss
Published: 2019-08-15 16:21:10

---
title: How are you hosting your apps?
published: true
tags: discuss
---

Hey Guys,

I have been trying to wrap my head around getting cheap and easy PaaS/IaaS/VPS for my side projects.

I would like to host my web apps under a single roof. My apps vary in the stack, some are in node.js, some I got built from friends using vanilla PHP, some are built on rails. Some are backed by services like Redis/RabbitMQ, while others may or may not use Docker.

Is there a way to host all of these under a single server without going crazy? Or should I stick with hosting each one of them in a separate environment (Heroku, AWS LightSail, GoDaddy CPanel) bearing the additional cost of maintaining them separately?
Solving FizzBuzz with JavaScript
Published: 2019-08-15 16:14:30

---
title: Solving FizzBuzz with JavaScript
published: true
description: 
tags: 
---

Welcome back. Let's take another look at a commonly asked coding question that can be encountered in very junior interviews. If you have spent more than a few weeks coding, you have probably run into the legendary "FizzBuzz" problem. Your task, should you choose to accept it, is to write a program that prints the numbers from 1 to whatever number you are given. But for multiples of three print “Fizz” instead of the number and for the multiples of five print “Buzz”. For numbers which are multiples of both three and five print “FizzBuzz”.

The goal of this exercise is to prove that you know how to write a simple for loop that prints out the appropriate numbers or words when given a specific number. Let's think about a hypothetical. If we were given the number 10, you would expect this function to print out these numbers: 
*1
*2
*Fizz
*4
*Buzz
*Fizz
*7
*8
*Fizz
*Buzz

Notice we never printed "FizzBuzz" because we never ran into a number that was divisible by both 3 and 5. Let's think about what the first number would be that actually is a multiple of both. That number would be 15. We can use this knowledge when writing our function.

We want to start our conditional statements with this information because if it is written after the first two if statements, then instead of printing "FizzBuzz" for the number 15, it will print out "Fizz" because it met that condition first.

A few things to keep in mind on the for loop:
- Because we want to print out 1 first, make sure to set i = 1
- Because we want to go up UNTIL the given number, make sure to keep the loop running when i is less then AND until it is equal to the given number

Ok, the rest is pretty simple. Write your for loop and include those three if statements. Make sure to have one final condition that prints out the number when none of the conditions above are met. Here is the solution below:

{% replit @ben1232jazz/FizzBuzz %}
Wordpress in Elm: Designing SpringBoard
Tags: elm, wordpress, plugindevelopment, shaping
Published: 2019-08-15 16:02:19

---
title: Wordpress in Elm: Designing SpringBoard
published: true
tags: elm, wordpress, plugindevelopment, shaping
description: Screen recording of some of the design for SpringBoard. I used Figma working through a number of different directions before settling on the final design going into development planning. It will not be the final version I imagine, but is a frame of reference.
cover_image: https://wking.dev/images/projects/elm-press.jpg
canonical_url: https://www.wking.dev/content/articles/elm-in-wordpress-designing-springboard/
---

Screen recording of some of the design for SpringBoard. I used Figma working through a number of different directions before settling on the final design going into development planning. It will not be the final version I imagine, but is a frame of reference.

{% youtube UNoJ2qTQfYA %}

If you would like to keep up to date with my progress and be more a part of this exploration signup for updates below or checkout the project dashboard here!

[Project Dashboard](https://www.wking.dev/projects/elm-press)

Also, feel free to leave a comment on the tweet thread:

{% twitter 1161384436275056650 %}
[Video] N-API - The New Native in Node.js
Tags: video, node, javascript, cascadiajs2018
Published: 2019-08-15 15:58:57

---
title: [Video] N-API - The New Native in Node.js
published: true
description: Ever tried calling C++ from Node or Electron. Hate native modules because of the compilation and maintenance issues. This talk is all about the solution to this problem - N-API that is stable with node 10. C++ to Node.js interop is a lot of fun.
tags: video, nodejs, javascript, cascadiajs2018
---
*As we lead up to [CascadiaJS 2019](https://2019.cascadiajs.com), I'm going to share the 24 amazing talks from 2018 here on dev.to. Sit back and enjoy the show!*

# Atishay Jain
![Atishay Jain](https://2018.cascadiajs.com/speakers/atishay.jpg)

Ever tried calling C++ from Node or Electron. Hate native modules because of the compilation and maintenance issues. This talk is all about the solution to this problem - N-API that is stable with node 10. C++ to Node.js interop is a lot of fun.

[Watch the talk on YouTube (27:38)](https://www.youtube.com/watch?v=E0w7Tc0f2fA)
Wordpress in Elm: Shaping SpringBoard
Tags: elm, wordpress, plugindevelopment, shaping
Published: 2019-08-15 15:57:37

---
title: Wordpress in Elm: Shaping SpringBoard
published: true
description: Just covering some of the project planning and shaping around the first plugin I'm building for the Elm in WordPress series. SpringBoard is a process library so that you can create, share, and manage all of your WordPress specific processes.
tags: elm, wordpress, plugindevelopment, shaping
cover_image: https://wking.io/images/projects/elm-press.jpg
canonical_url: https://www.wking.dev/content/articles/elm-in-wordpress-shaping-springboard/
---

Just covering some of the project planning and shaping around the first plugin I'm building for the Elm in WordPress series. SpringBoard is a process library so that you can create, share, and manage all of your WordPress specific processes.

{% youtube L4MABcdbRlQ %}

If you would like to keep up to date with my progress and be more a part of this exploration signup for updates below or checkout the project dashboard here!

[Project Dashboard](https://www.wking.dev/projects/elm-press)

Also, feel free to leave a comment on the tweet thread:

{% twitter 1156663430788583425 %}
Changelog: Stack Overflow Liquid Tag
Tags: meta, changelog, stackoverflow
Published: 2019-08-15 15:57:13

We are pleased to introduce the Stack Overflow and Stack Exchange liquid tags. These embeds, assembled in native HTML within posts (as opposed to iframe, JavaScript, etc.) are designed for telling better tales about the code we write.

Stack Overflow questions and answers are a big part of our coding lives and the richest source of software knowledge in the known universe. We hope that this integration will help elevate great answers for further discussion and inject a bit more community into the Stack Overflow flow.

Use these embeds for any reason, be it a meta conversation about an answer, boosting a question to your followers on DEV, organizing a roundup of great answers, or simply _additional reading_ to include in any DEV post.

To make an embed, pluck the ID from the Stack Overflow URL and add it to your posts like so:

```
{% stackoverflow 57259126 %}
```

This will create an embed like this:

{% stackoverflow 57259126 %}

Here's another question:

{% stackoverflow 57456188 %}


Here is an answer:

{% stackoverflow 57144755 %}

And here is a DIY Stack Exchange community question:

```
{% stackexchange 170013 diy %}
```

{% stackexchange 170013 diy %}

Thank you to to @antogarand for first suggesting this feature, and thanks to the folks from Stack Overflow who dipped into the issue thread to offer guidance and encourage us to ship this!

{% github https://github.com/thepracticaldev/dev.to/issues/1419 %}

And thanks to @andy for doing most of the work on this feature! Here is the pull request:

{% github https://github.com/thepracticaldev/dev.to/pull/3637 %}

Happy coding!
My first time writing Vue.js
Tags: vue
Published: 2019-08-15 15:52:38

---
title: My first time writing Vue.js
published: true
description: Adam Wathan gave me a beginner's Vue.js tutorial. We made magic happen with 12 lines of code!
tags: vue
---

This was my first time using Vue.js (or really writing any JavaScript!). 

## The problem we tackled:

I'd created a navigation component with Tailwind CSS. It worked nicely on the desktop but needed some JS for the mobile view.


## Solution:

Adam helped me write some Vue.js code that made the hamburger menu collapse and expand when clicked. 

## Here's the video:

{% youtube s3yWEtGpp_A %}

**Sidenote:** Adam used [Tuple](https://tuple.app/) to pair with me on this, and it was the best learning experience I've had. Tuple's tools for drawing on the screen and taking over the keyboard were especially helpful.
Roblox, good or bad for the world of game development?
Published: 2019-08-15 15:13:33

If you haven't heard of roblox, you will soon.
It's one of the largest growing video game market sites, 
with a 46%* increase in members since last year.

Some stats:

Monthly amount of Roblox engagement:        1.2 billion hours

Roblox's Monthly Active Users was reported to be 100 m in Aug, 2019.


| Date          | Monthly Active Users|
| ------------- |:-------------------:|
| Jan, 2012     | 7 m                 |
| Mar, 2017     | 48 m                |
| Apr, 2019     | 90 m                |
| Aug, 2019     | 100 m               |


They are becoming more and more promident in the video game market each day but
the question remains:

**Is this a good thing or a bad thing for game developers?**
**And is it the future of making games?**





***I'll be hiding in the comments, looking forward to your replys!***

*I myself am a roblox Game Developer (amongst other),*
*if you have any questions feel free to drop them below!*

*And as always, Many thanks and happy dev'ing!*

------------------------------------------------------------
*Was unable to find the source for this since first read. 
Take with a grain of salt. - If anyone can correct me that'd be great.
A misunderstanding of ______ brought down all of the Internet
Tags: justforfun, game, internet, fun
Published: 2019-08-15 15:06:32

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/1ub1pnaefncxjxctao52.jpg)

A: `this` in JavaScript
B: Wordpress plugins
C: Semicolons `;`

Or suggest your own answer.
Messing with ClojureScript
Tags: clojurescript, learning
Published: 2019-08-15 14:12:23

My usage of Javascript has been limited to copying and pasting a few code snippets from the web. I don't do much web development, and when I do, I normally use CGI with D. JS does offer some big advantages, however, like not requiring a running web server.

The main reason I haven't learned JS is that I don't like it. That's not due to flaws in the language - though like any language, those exist - it's purely a matter of preference.

I worked with Clojure years ago, but didn't really have a good use for it, so I set it aside and never returned. ClojureScript has some appeal because it allows me to write Clojure rather than JS. So last night I checked it out.

I went to the website and found a "Quick Start" page. The first thing I learned is that this isn't really true:

> If you are using macOS or Linux the only dependencies required for the main part of this tutorial are a web browser and an installation of Clojure.

You actually need an installation of Clojure *as described at that link*. It doesn't work if you install Clojure using your distribution's package manager.

I then created several directories and the two files. I was left guessing which was the directory to do the compilation, so I tried the one with my source file (that seemed natural coming from the C world). Nope. I had to go to the top directory and do it from there.

After a while, a browser tab opened and I waited for something to happen. Nothing happened. For some reason, an html file that does nothing gets opened. I returned to the terminal. I could type things in, but this was in no way different from just running a Clojure repl. At that point, I was done with my "quick start". I didn't feel I got started on much of anything, because I hadn't replaced JS with Clojure (the whole reason I tried ClojureScript). So I decided to look around for a guide that might show me what to do. There are a lot of links, but there was really nothing that helped.

I searched for ways to call Clojure functions from JS, and it pointed me to [this answer on SO](https://stackoverflow.com/questions/31641030/call-clojurescript-from-javascript). From there, I went to [this documentation page](https://clojurescript.org/reference/advanced-compilation#access-from-javascript). I used that information to export my Clojure functions, compiled a Clojure library, and called those functions from html using something like

```
<button onclick="console.log(hello_world.core.average(3.4,7.8))">Click me</button>
```

I think part of the problem is that I don't know JS, so none of this was obvious to me, and evidently the standard use case for JS is something other than creating functions to be called from html when you're clicking buttons. It can be frustrating when you see others writing about how good ClojureScript is, but you can't even figure out how to do basic things.