Developing React.JS/Rails App On Mobile Device(other than iDevices).

Tanner Patterson — Fri, 10 Jul 2020 06:57:19 +0000

I have always had a random need, to turn anything small enough and powerful that has a screen, into a device that can run a full desktop OS.

This obviously comes with limits and serious questions as to why anyone would do that to themselves, but I can’t answer the question part even for myself to be honest, other than I just like seeing what these devices are capable of.

The first start to this GRAND😬 adventure, is make sure you are using pretty much ANYTHING other than an apple device(and windows phone kinda), which is a sad day because I own/owned almost every type of major product that Apple sells and it would have be fun to do this across their different OS’s.

Ok now that you are not on an apple device, I found a website that walked me through the step to get the Google Play Store on a kindle and it might be useful in other situations where you are able to install and use APK’s. I don’t want to re-invent the wheel so you should just give the article a read here and it will help get the play store set up.
https://www.google.com/amp/s/www.howtogeek.com/232726/how-to-install-the-google-play-store-on-your-amazon-fire-tablet/amp/

Once you have downloaded the APK’s it’s time to install Termux. Termux is a great IDE and is full of functionality.

I also want to point out here that as a coder I knew there would be people who had similar questions and problem I did while do with so I am going to be using a lot of external websites to reference but they are great reads and I don’t want to steal they’re hard work.

Once Termux is install we need to set up or work environment.
https://mbobin.me/ruby/2017/02/25/ruby-on-rails-on-android.html
This website Above will walk you through setting up most of your rails project but take what you need and there might still be issues with some gems in your specific case and the ruby version.

Checkout your package.json file and change the ruby version to the correct version and then in my case I hade issues with Bcrypt and I found a video of some one using metasploit to get around it. You are going to need to change the version of bcrypt in you package.json file to the same version in the video. here:https://asciinema.org/a/a1dRt0drHpSbYQ5tXmvBf3eRE

I also ran into an issue using semantic-ui-react with Termux and found a website that quickly explained all you need to do run npm install fomantic-ui and again with fomantic-ui-css. You need to add these to your package.json file. Check it out her for a more in depth explanation. https://hackernoon.com/code-a-react-website-on-your-android-smartphone-or-tablet-like-you-never-imagined-3e56c534f6e7.

After that you should be pretty set to either start brand new on either your front end or backend but in my case I started with a project from GitHub and I have been making little adjustments to my project when I’m out and about.

I hope this helps you or just sparks some creativity for you. I will definitely be back in here to update this blog more as I learn more them but for now Ta-Ta!

Basic styling on a Card in Semantic UI React

Tanner Patterson — Wed, 15 Apr 2020 22:09:06 +0000

Semantic UI seems to be one of the leading styling frameworks, so I've been spending time working with it and most of all I really like using their Card objects to display bundles of info on the screen in such a way that looks pleasing to the eye.

If you are an avid Semantic user, you would know right where to go to find the information on the Semantic website. In this I'm also going to show how to navigate the website a little more to help get the info you're looking for, and what to try if you aren't getting the results you want from normal semantic props.

So really most of you are going to know how to find where the Cards in the main page of Semantic, but in case you are fresh, you can use the dark(inverted) scroll menu to left to find the component you're looking for, or use the search bar if you know specifically what you're looking for. After that you can see the display menu for the different representations of card compoonents.

Once you are here, there's the "props" slide button which will show you the available props that are specific to its component. You can also see your sub components in the highlighted area. These are also only available to its specific main component for example:

import React from "react";
import { Card } from "semantic-ui-react";

export default class Card extends React.Component {
  render() {
    return (
      <Card>
        <Card.Content header={"Hello World!"} />
        <Card.Content>
          <Card.Description>
            Hello World!
          </Card.Description>
        </Card.Content>
      </Card>
    );
  }
}

In the code above, you can see the component is outside the sub components to help with flexible customization of content. This means you can use the different sub components in different positions in the main component to achiech the look you are going for. Now with this in mind you are able to go through whichever component you are using at the time, for instance a Card like above, and look through the props of the main component and the sub components to figure out what you need specifically. In the above code the output would be a basic card with two sections, a header and the description sections. The header is written in shorthand in the way that there is not closing tag, and the description is written with a closing tag. Both are correct and are should output what you are looking for.

At this point you should be able to import this component and use the card as a working component. This is where things really start to get interesting when it comes to styling and getting the card to act and look the way you expect as well. When you go to look through the props of these components in the beginning, the Semantic team has listed the specific values that specific props accept as well. You are able to get a lot of different functionality from these props and their specific values. Now you can start adding the different sub components and styling them the way you want... for the most part.

import React from "react";
import { Card, Icon, Button } from "semantic-ui-react";

export default class randomCard extends React.Component {
  render() {
    return (
      <Card>
        <Card.Content header={"Hello World!"} textAlign="center" />
        <Card.Content>
          <Card.Description>Hello World!</Card.Description>
        </Card.Content>
        <Card.Content extra>
          <Icon name="money bill alternate outline" />
          Money Icon
          <Button color="green" inverted floated="right">
            Submit
          </Button>
        </Card.Content>
      </Card>
    );
  }
}

In the example above, I've added a second content area to the car and added an "Icon" and "Button" components, styled with the "inverted" and "floated" props. Notice that the text next to the icon inside of this second content component is grey. This is a product of the design team to make a visible change in content to display the two different content sections. I haven't figure out a way around this as of writing this but I haven't found the need for it either.

Moving on to the inverted prop which can be used on other semantic components as well if specified, and does what is sounds like. It takes the component its used in and converts the color scheme, normally from white to black, or when used on buttons it changes from a solid colored button to an outlined button of the same color you give it with a "color" prop. The floated prop is the same basic idea as "float" in CSS, but with the semantic prop is only offers the ability to float to the left or right. there are other ways around this like using the "textAlign" prop on the parent component to try and get your other elements in the place you want. Sometime this doesn't always work and there are other ways to finely tune your specific component style.

import React from "react";
import { Card, Icon, Button } from "semantic-ui-react";

export default class randomCard extends React.Component {
  render() {
    return (
      <Card>
        <Card.Content header={"Hello World!"} textAlign="center" />
        <Card.Content
          style={{
            height: "200px",
            backgroundImage: `url(https://cdn.pixabay.com/photo/2017/05/13/15/18/dear-2309801_1280.jpg)`,
            backgroundSize: "cover",
          }}
        >
          <Card.Description style={{ color: "white" }}>
            Hello World!
          </Card.Description>
        </Card.Content>
        <Card.Content extra>
          <Icon name="money bill alternate outline" />
          Money Icon
          <Button color="green" inverted floated="right">
            Submit
          </Button>
        </Card.Content>
      </Card>
    );
  }
}

there is one extra prop that you can use on almost all(if not all) components to help get more styling done. This is where the "style" prop comes into play. This prop is for implementing CSS styling inside the components themselves. Now if you are looking to keep all styling done in your CSS folder then this is probably not an option for you. Personally I find it a lot easier to style the direct element I need this way, rather than styling through the CSS file, as you can write your components and style them all in the file or even in the same effort if you know how you want to style it already.

In the above example, the component is styled using the ladder of both semantic specific props, on CSS styling through the style prop. Being able to know what styling your component already has on it also makes it easier to avoid overlapping different styling patterns. I styled the the main content component to be a specific height and a background image, with its size set to "cover" to cover the container its in. The text on the inside is originally set to black but now with the style prop, i was able to select the specific component the text was in, and change the color to white for visibility.

Hopefully after getting this far, you are now a little more comfortable with how to work with, not only a card, but other components and how to dig through some of the information on the Semantic website.

The best advice of coarse when getting stuck on how to get something to work a specific way, is just to give a good google search and then cross reference what you do know with your you are searching to try and achieve your main goal.

Thanks for the read, good luck and happy coding!

DEV Community: Tanner Patterson

Developing React.JS/Rails App On Mobile Device(other than iDevices).

Basic styling on a Card in Semantic UI React