DEV Community: A.J. Romaniello

Release Please for Ruby | GitHub Actions

A.J. Romaniello — Tue, 14 Dec 2021 08:32:53 +0000

release-please

release-please is a project maintained by the GoogleApi's team which automatically keeps a coherent changelog of your application as it grows as well as deploying your project with a new version tag.

Why Use `release-please`

Automatically generating CHANGELOGs.
Automatically determining a semantic version bump (based on the types of commits landed).
Communicating the nature of changes to teammates, the public, and other stakeholders.
Triggering build and publish processes.
Making it easier for people to contribute to your projects, by allowing them to explore a more structured commit history.

Source: conventionalcommits.org

This project not only keeps your changelog up to date by parsing your git commit history, but ensures that updates follow a common commit message convention.

release-please abides to the Conventional Commit Messages, which allows commits to be read by human and machine in a cohesive fashion.

Conventional Commits

Source: conventionalcommits.org

This aims to create a convention for committing to repositories, some of the most important keywords are:

`fix:`

A commit of the type fix patches a bug in your codebase (this correlates with PATCH in Semantic Versioning).

$ git commit -m "fix(<category>): my new fix"

`feat:`

A commit of the type feat introduces a new feature to the codebase (this correlates with MINOR in Semantic Versioning).

$ git commit -m "feat(<category>): my new feature"

BREAKING CHANGE

A commit that has a footer BREAKING CHANGE:, or appends a ! after the type/scope, introduces a breaking API change (correlating with MAJOR in Semantic Versioning). A BREAKING CHANGE can be part of commits of any type.

# Breaking Fix
$ git commit -m "fix!(<category>): my breaking fix"

# Breaking Feat
$ git commit -m "feat!(<category>): my breaking feature"

Extra

Types other than fix: and feat: are allowed, for example (based on the the Angular Convention) recommends:

build:
chore:
ci:
docs:
style:
refactor:
perf:
test:
and more.

GitHub Action Setup

Creating the Workflow

To get started using release-please, we must create a new .yml file in our .github/workflows directory of our repository.

We can call this file release.yml.

After creating our file, we can go ahead and name our new workflow.

# /.github/workflows/release.yml

# The name of the Workflow.
name: release-please

Choosing When to Run the Action

Since this project handles version releases and changelog updates, we only want this to run when pushes are made to our main or 'production' branch.

This ensures that this does not run on subsequent commits/pull requests to our repository.

The setup would look something like:

# /.github/workflows/release.yml

name: release-please

# When to run this action.
on:
  # Run on push to our 'main' branch.
  push:
    branches: [ main ]

Setting Up `release-please-action`

Now that we have our workflow set up to run on pushes to our main branch, we can configure release-please to our liking.

release-please requires a personal access token to be able to create pull-requests and modify the changelog in your repository.

Once you have generated your personal access token, add it as a repository secret.

The secret can be named whatever you like, although must meet a few criteria.

For this example, lets call this secret: GH_TOKEN.

The default configuration would look something like:

# /.github/workflows/release.yml

name: release-please

on:
  push:
    branches: [ master ]

jobs:
  release-please:
    runs-on: ubuntu-latest
    env:
      # The name of your gem/package.
      GEM_NAME: "GEM NAME HERE"

    steps:
      # Use release-please-action.
      - uses: GoogleCloudPlatform/release-please-action@v2

        # Assign an 'id' to this action
        id: release
        with:
          # Personal Access Token
          token: ${{ secrets.GH_TOKEN }}

          # Use release-please/strategies/ruby.ts Release Type
          release-type: ruby

          # The name of the gem.
          package-name: ${{ env.GEM_NAME }}

          # Location of the version.rb file to bump for new releases
          version-file: "lib/${{ env.GEM_NAME }}/version.rb"

Checkout and Publish

If a release is found, we want to:

Checkout the repository.
Build the ruby gem.
Publish the gem to rubygems.org.

Checkout Repository

To checkout our repository, we can simply use the actions/checkout GitHub action.

# /.github/workflows/release.yml

name: release-please

on:
  push:
    branches: [ master ]

jobs:
  release-please:
    runs-on: ubuntu-latest
    env:
      GEM_NAME: "GEM NAME HERE"
    steps:
      - uses: GoogleCloudPlatform/release-please-action@v2
        id: release
        with:
          token: ${{ secrets.GH_TOKEN }}
          release-type: ruby
          package-name: ${{ env.GEM_NAME }}
          version-file: "lib/${{ env.GEM_NAME }}/version.rb"

      # Checkout the Repository if a release has been created.  
      - uses: actions/checkout@v2
        if: ${{ steps.release.outputs.release_created }}

Setting Up Ruby

To be able to build our ruby gem, we first must install ruby onto our machine. We can achieve this by using the ruby/setup-ruby GitHub Action.

# /.github/workflows/release.yml

name: release-please

on:
  push:
    branches: [ master ]

jobs:
  release-please:
    runs-on: ubuntu-latest
    env:
      GEM_NAME: "GEM NAME HERE"
    steps:
      - uses: GoogleCloudPlatform/release-please-action@v2
        id: release
        with:
          token: ${{ secrets.GH_TOKEN }}
          release-type: ruby
          package-name: ${{ env.GEM_NAME }}
          version-file: "lib/${{ env.GEM_NAME }}/version.rb"
        env:
          GEM_NAME: "GEM NAME HERE"
      - uses: actions/checkout@v2
        if: ${{ steps.release.outputs.release_created }}

      # Set up Ruby if a release can be created.
      - uses: ruby/setup-ruby@v1
        with:
          # Latest ruby version (remove to use .ruby-version).
          ruby-version: 3.0

        if: ${{ steps.release.outputs.release_created }}

Publish Gem

First to be able to push a new version, we must allow access via rubygems.org.

To create a new API key, head to rubygems.org.

Next, create a new repository secret.

This can be named anything, although must be referenced correctly within the workflow file.

For this example, we will call this secret: RUBYGEMS_API_KEY

To publish our gem, we have a couple of tasks to complete.

Since our action will run in a new container every time it is called, we must create a ~/.gem/credentials file containing an API Key from the account we would like to post on for rubygems.org.

Manual installation of Bundler is required. Since we are releasing our gem from the repository it must be built and have packages updated on push. The default 'bundler-cache' will break this.

Install the bundler gem.
Unset the BUNDLE_DEPLOYMENT variable.
Run bundle install
Create ~/.gem/credentials.
Add our RUBYGEMS_API_KEY.
Build our gem from the *.gemspec file.
Push the *.gem to the remote server.

We can simply run these commands from within our workflow:

$ gem install bundler
$ bundle config unset deployment
$ bundle install
$ mkdir -p $HOME/.gem
$ touch $HOME/.gem/credentials
$ chmod 0600 $HOME/.gem/credentials
$ printf -- "---\n:rubygems_api_key: ${RUBYGEMS_API_KEY}\n" > $HOME/.gem/credentials
$ gem build *.gemspec
$ gem push *.gem

The end result would look like:

# /.github/workflows/release.yml

name: release-please

on:
  push:
    branches: [ master ]

jobs:
  release-please:
    runs-on: ubuntu-latest
    env:
      GEM_NAME: "GEM NAME HERE"

      # Our Ruby Gems API key
      RUBYGEMS_API_KEY: ${{ secrets.RUBYGEMS_API_KEY }}

    steps:
      - uses: GoogleCloudPlatform/release-please-action@v2
        id: release
        with:
          token: ${{ secrets.GH_TOKEN }}
          release-type: ruby
          package-name: ${{ env.GEM_NAME }}
          version-file: "lib/${{ env.GEM_NAME }}/version.rb"
      - uses: actions/checkout@v2
        if: ${{ steps.release.outputs.release_created }}
      - uses: ruby/setup-ruby@v1
        with:
          ruby-version: 3.0
        if: ${{ steps.release.outputs.release_created }}

      # Release the gem to https://rubygems.org if a release has been created.
      - name: Release Gem
        run: |
          gem install bundler
          bundle config unset deployment
          bundle install
          mkdir -p $HOME/.gem
          touch $HOME/.gem/credentials
          chmod 0600 $HOME/.gem/credentials
          printf -- "---\n:rubygems_api_key: ${RUBYGEMS_API_KEY}\n" > $HOME/.gem/credentials
          gem build *.gemspec
          gem push *.gem
        if: ${{ steps.release.outputs.release_created }}

Creating Your First Release

release-please will create a new pull-request automatically bumping the version of your project.

This will parse your projects git commit history to group together changes in a comprehensive fashion.

Adding Some Changes

Some keywords like ci: will not be build a new release, as these do not change your application.

Only keywords such as: fix:, feat:, or any <type>!: (Breaking Change), will trigger a new release to be created.

Changes will be grouped together, thus adding multiple commits of fix:, feat:, etc would be grouped into the same version release until the release pull request is merged into the main branch.

To generate a new changelog whenever we can force run our release-please action:

Navigate to your repository on GitHub.
Click on the Actions tab.
Select: All Workflows > release-please > Run workflow.

To generate a new release and changelog, we could:

Add a new empty commit with a release tag.

$ git commit --allow-empty -m "chore: release 1.0.0" -m "Release-As: 1.0.0"

Start adding commits using conventional commit messages.

$ git add .
$ git commit -m "feat: my new feature"
$ git push

Every time feat: or fix: is in the commit message, release-please will re-parse your git commit history, create a new pull-request with the bumped version and an up-to-date changelog.

Conclusion

release-please adds convention to GitHub commits to allow changelogs and releases to be created without someone having to manually do so, as well as maintaining a specific committing convention.

Our final release.yml file may look like:

A Full-Stack Application

A.J. Romaniello — Thu, 16 Sep 2021 18:33:16 +0000

aj-rom / hike-it-up-v2

The second coming of hike-it-up a React.js trail social media application.

I recently have completed a full-stack (backend and frontend) application, hike-it-up, and wanted to share how I went about creating this application and hosting it for completely free.

Some Background

I am finishing my time at The Flatiron School and wanted to showcase my new learnings by re-creating a very simple Sinatra application that I made earlier this year. Now that I had all this great knowledge of React I could combine it with my knowledge of Ruby on Rails to create a full-stack application.

Getting Things Started

Right off the bat, with experience from previous projects, I wanted my backend and frontend within the same GitHub repository. Both for ease of local deployment and because at the end we want to have 3 branches. One for our backend, one for our frontend, and one to house everything.

I initially started and used the create-react-app toolchain to generate my GitHub repository and frontend services.

After moving into the newly generated folder, I created a new rails API application named backend.

Now I had a folder for my backend, a public folder for my entry point, and a src folder for React related files.

Choosing Frameworks

I went with Pico.CSS for the framework, as it is a very lightweight CSS pack and has useful 'classless' styling properties.

Read more on Pico.CSS

I also wanted to have application state as well as client side routing. To achieve this I had to install some npm packages.
For application state I used redux with redux-thunk middleware.

For client side routing, I decided to go with react-router. This allowed me to mimick route browsing of the backend on the frontend. For example, going to /trails/1, should bring up the first trail. React Router passes the declarative id of the route, in this case /trails/:id, to the props of the route.

This allows us to make backend server calls ONLY when necessary, and doesn't break if someone were to link to it like this.

Building Out the Backend

I created resources for trails, users, and a model for addresses. Full CRUD operations should be able to be performed on trails, but only limited functionality should be able to be used for users.

To ensure malformed or malicious attempts would not be able to work, I built out a simple token authentication system that would verify the user for ever session. If they have the incorrect token, requests to the backend server will not be implemented.

Also, because I was separating where the frontend and backend servers are hosted, I needed to configure CORS. This would ensure requests where only valid if they came from my frontend's location.

After creating all pertinent relations and migrations I had my backend system up and running.

Frontend Challenges

When I was building out the frontend there were a couple of issues that I ran into, mostly because I was hosting this on gh-pages.

Switching To Hash Router

React Router has a nifty component called , which allows our UI to rely on the hash portion of the URL (www.example.com/#/I/Am/The-Hash-Portion).

This was necessary because I was hosting this application on a subdirectory of my GitHub domain. For example this application is hosted at https://aj-rom.github.io/hike-it-up-v2/ not https://aj-rom.github.io/. As normal routing would break this.

Persisting Application State

I had everything working as I wanted it except one thing, my state wouldn't persist on refresh. This made sense as there was nothing keeping application state stored in the users browser.

There were a couple of ways to implement this:

Use redux-persist & redux-storage
Persist application using raw JavaScript (build it myself)

After doing some research I learned that implementing this really wouldn't be difficult at all and this will save me two packages and maybe even more.

JavaScript has a nifty object accessible on every window, window.localStorage, that allows us to store data within the users page. This even persists when the page session ends, perfect for handling refreshes.

I went ahead and modified my application store, to continuously save to storage when it updated and then clear when the user logs out, clears their history, or deletes their account.

Hosting

Hosting the application is a whole different process, but luckily I have had some experience doing this in the past and have got a decent understanding on how to do this.

The Backend

For my backend I wanted to host it on Heroku which allows for simple deployment from GitHub repositories and is completely free.

Their deployment process is quite simple, all you have to do is link to a GitHub repository and choose a branch, then deploy the application.

To make my Heroku server as least crowded as possible, I created a new branch named heroku that would only contain the contents from the backend folder.

Now that I had this branch only containing Rails related files, I headed over to Heroku and deployed the application.

The Frontend

This is probably the easiest way to host a react application for completely free, especially if it lives in a GitHub repository.

The gh-pages npm package, makes for quick and easy deployment of fully compiled react applications.

After running two simple commands npm run predeploy && npm run deploy, the frontend was up and running!

Conclusion

I am very happy with the final outcome for this project as it pushed the limits of my understanding of JavaScript, Rails, HTTP protocol, and full-stack development.

All in all there are really only slight optimizations to be made using code splitting, and maybe implementing search functionality (which is pretty much done).

I hope this can be a resource for others to learn from or get inspiration for their next project!

Thanks for reading, if you would like to check out the application you can do so at this link, or if you would like to see the GitHub repository you can do so here.

React.lazy() - Boost Mobile Performance

A.J. Romaniello — Wed, 09 Jun 2021 18:44:23 +0000

The Problem

When creating new React applications they are set up for desktop being in mind when loading assets, not mobile connections. If we run a chrome Lighthouse report, we can see drastic differences between desktop performance and mobile performance.

As developers we want the same experience for our application regardless of whether you are on mobile or desktop.

Luckily this isn't that hard to implement!

What Creates the Issue

When rendering new components in React we are importing javascript file and all imports that that component may contain!

The flow looks something like this:

And the issue becomes a little clearer.

If we had a two files: index.js and App.js

// index.js
import App from './App.js'

console.log('Hello World!')

// App.js
import React, { Component } from 'react'
import SomeExtraClass from 'some-package'
import { func1, func2, func3 } from 'another-package'

console.log('Imported Packages!')

And ended up running index.js, we would see this output to our console:

/> "Imported Packages"
/> "Hello World!"

This is great because it brings all of our code into one useable scope for the file we imported it into, although the issue arises when we are importing code that isn't necessary at the time it is imported.

Why Does It Impact Mobile?

As we build our applications, and as react is defined, larger screen sizes will be rendering more components to the page at a time than its mobile counterpart.

This can lead to components rendering in the background and leads to technically decreased performance. Due to the user waiting to load parts of the application they don't need or will see yet.

I must note that this also impacts both desktop and mobile performance when we are building large applications with many nested components. The more we have to render to the end user, the longer the application will take to load.

So how do we go about only loading the necessary content for the page in prioritized order?

Welcome to React.lazy.

React.lazy

Luckily React has built a package that handles this for us: React.lazy.

We can import lazy as a named method from the react library if we would like or call to it as React.lazy().

React.lazy takes a function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component.

Awesome, so we can now dynamically import extra components and leave it up to React to decide when to display them!

React.lazy is currently not supported for server-side rendering.

Code-Splitting With React.lazy

Code-Splitting is a feature supported by bundlers like Webpack, Rollup and Browserify (via factor-bundle) which can create multiple bundles that can be dynamically loaded at runtime. - reactjs.org

This is what allows us to dynamically load separate files. Bundlers handle the different flows that our application will take when loading new files and creates separate bundle files that will be loaded for certain components.

This separation of concerns for runtime is what allows us to increase performance within our applications.

Suspense

Since this is loading our imports asynchronously, we don't want to wait for everything to load let's do something in the meantime for those couple of milliseconds it takes to import!

Suspense allows us to declare what should be displayed to the DOM while we wait on the rest of our components to load, until our promise resolves. Thanks React.lazy!

How To Use React.lazy

// App.js
import React, { Component, lazy, Suspense } from 'react'
const Header = lazy( () => import('./Header.js'))
const Body = lazy( () => import('./Body.js'))

class App extends Component {

   render() {
      return (
         <div>
            <Suspense fallback={<p>Loading...</p>}>
               <p>Loaded Page!</p>
               <Header/>
               <Body/>
            </Suspense>
         </div>
      )
   }
}

As React goes to render our App component, the lifecycle now looks like this:

The Benefits

Now that we are asynchronously loading our extra components and have a fallback function, we no longer have to wait for components to render. As we can rely on the fallback function to handle our first contentful paint, and wait for them to load through React.lazy and then update our component!

This may only reduce loading times by a couple of milliseconds but it is better to display something like Loading... or maybe a loading animation, rather than having a blank component and then allow React to come back in and update the component once its ready to render!

Profiling With Lighthouse

To prove that React.lazy actually works let's profile it with Lighthouse using a basic application. You can find the example at this repository if you would like to test it on your own machine.

Desktop

No Suspense

With Suspense

Mobile

No Suspense

Suspense

Conclusion

By using React.lazy and the Suspense component, we were able to drastically improve our websites loading performance by supplying a fallback render method.

This will handle rendering until our component can actually be rendered to the user.

Mobile performance sees a much larger gain rather than Desktop performance, although both are increased!

React & Redux | A Quick Side Project

A.J. Romaniello — Fri, 04 Jun 2021 19:08:18 +0000

Tracker

As I am currently learning React and Redux I wanted to mess around with these new frameworks and get used to hosting them on GitHub for future projects.

This is a very basic application that showcases DOM manipulation, via React, and state management through Redux. What it allows us to do is add items to a list, we can increase the count on each item or decrease them, and remove them from the master list.

You can check out the hosted application on github pages here, or view the source code here.

The Development Process

As the development process goes, it is always a good idea to have something written down in what you expect your application to end up working like. I came up with the following:

// Our ReactDOM.render method in index.js
<Provider store={store}>
  <App/>
</Provider>

// App Component
<React.Fragment>
   <Header/> // Where we should be able to add items to the list
   <Body items={this.props.items}/> // Pass our store of props
</React.Fragment>
// Connected via react-redux to pass the props from our main index.js

Setting Up Containers

These are simply for separating our components into a logical manner as well as increasing maintainability for future changes to components and the layout of our application.

Header

This is where we want our input form to be, so we are going to wrap this section in a div giving it a unique ID for styling/DOM manipulation.

Setting up our render method should like something like this:

<div className='add-bar'>
    <AddBar />
</div>

Body

This container should be responsible for passing the props from our main application state down to our <ItemList/> component, and rendering this in a reasonable fashion.

Setting up our render our

<div id='item-list'>
   <ItemList items={items}/>
</div>

Now that we have our containers set up we can go ahead and begin building our our components.

Setting Up Components

As we declared above we need at least two components: <AddBar/> and <ItemList/>, and it would make sense for <ItemList/> to house many components such as <Item/>.

So we need to declare three components <AddBar/>, <ItemList/>, and <Item/>. Which all need to be connected to our main application state.

`<AddBar/>`

This component should be responsible for taking user input, and adding it to our main application states list of items.

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { addItem } from "../actions/item";
import '../style/form.css'
// Material UI Components & Style
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button'

class AddBar extends Component {

    constructor(props) {
        super(props);
        this.state = {
            item: '',
            count: 0
        }
    }

    handleChange = e => {
        if (this.state.item.length > 25 && e.target.value.length > 25) return
        this.setState({ item: e.target.value })
    }

    handleSubmit = e => {
        e.preventDefault()
        // Passed to props via connect method for dispatch actions/item.js
        this.props.addItem(this.state)
        this.setState({ item: '' })
    }

    render() {
        return (
            <form className="add-form" onSubmit={this.handleSubmit}>
                <TextField type='text' id='item' required={true}
                           autoComplete='off'
                           label='Item Name' value={this.state.item}
                           placeholder='Add Your Item Here' onChange={this.handleChange}
                />
                <Button type='Submit'>Submit</Button>
            </form>
        )
    }
}

// Pull main application state to props
// As well ass pull the addItem action to our props
export default connect(props => ({ item: props.item }), { addItem })(AddBar)

`<ItemList/>`

This component should be responsible for passing our state and breaking it down and rendering them into specific <Item/> components.

Our component should be declared something like:


import React from 'react'
import Item from './item'

const ItemList = ({ items }) => {

    function renderItems() {
        return items.map((e, idx) => <Item key={idx} id={idx} item={e.item} count={e.count}/>)
    }

    return (
        <div className='item-list'>
             {renderItems()}
        </div>
    )
}

export default ItemList

Notice this doesn't have to use the react-redux connect method, because we are passing our main application state items as a prop to the <Body/> container.

This also allows us to render our individual items.

`<Item/>`

This component should be responsible for rendering specific items and their count, as well as handling buttons for incrementing and decreasing count and removal button for removing the item from our main application state and DOM.

Setting up our class would look something like:

import React, { Component, lazy, Suspense } from 'react'
import { connect } from 'react-redux'
import '../style/item.css'
import { removeItem, increaseCount, decreaseCount } from '../actions/item'
import Card from '@material-ui/core/Card'
import Button from '@material-ui/core/Button'
import Typography from '@material-ui/core/Typography'
import ButtonGroup from '@material-ui/core/ButtonGroup'

class Item extends Component {

    handleRemove = e => {
        this.props.removeItem(this.props)
    }

    handleIncrease = e => {
        this.props.increaseCount(this.props)
    }

    handleDecrease = e => {
        this.props.decreaseCount(this.props)
    }

    render() {
        return (
             <Card className='item-card' id={this.props.id}>
                 <Typography variant='' className='item-title'>{this.props.item}</Typography>
                 <Typography variant='subtitle1' className='clicker'>{this.props.count} times</Typography>
                 <ButtonGroup className='action-row'>
                     <Button onClick={this.handleIncrease} className='item-button'>+</Button>
                     <Button onClick={this.handleDecrease} className='item-button'>-</Button>
                     <Button onClick={this.handleRemove} className='item-button'>Remove</Button>
                 </ButtonGroup>
             </Card>
        )
    }
}

export default connect(props => ({ ...props }),
    { removeItem, increaseCount, decreaseCount })(Item)

Notice that we are pulling in three actions: removeItem, increaseCount, and decreaseCount.

Setting Up Actions

Since this was a very simple application we only needed on action file and four total methods. All that should take an item as a parameter.

addItem

export const addItem = (item) => {
    return { type: 'ADD_ITEM', item: item}
}

removeItem

export const removeItem = (item) => {
    return { type : 'REMOVE_ITEM', item: item}
}

increaseCount

export const increaseCount = (item) => {
    return { type: 'INCREASE_COUNT_OF_ITEM', item: item}
}

decreaseCount

export const decreaseCount = (item) => {
    return { type: 'DECREASE_COUNT_OF_ITEM', item: item}
}

Setting Up a Reducer

In order for us to handle these actions we need a reducer function to manipulate the applications state.

This will usually be called manage<ClassName> so we will call our file manageItems.js. Our function should take two parameters, the applications state (list of items), and an action object.

Leaving us with a new file that looks like:


function manageItems(state = { items: [] }, action) {
    switch (action.type) {
        case 'ADD_ITEM':
            action.item.id = state.items.length
            return { ...state, items: [...state.items, action.item] }
        case 'REMOVE_ITEM':
            let items = [...state.items]
            items.splice(action.item.id, 1)
            return { ...state, items: items }
        case 'INCREASE_COUNT_OF_ITEM':
            let arr = [...state.items]
            const x = arr[action.item.id]
            x.count += 1
            return { ...state, items: arr }
        case 'DECREASE_COUNT_OF_ITEM':
            let dec = [...state.items]
            const y = dec[action.item.id]
            if (y.count === 0) return state

            y.count -= 1
            return { ...state, items: dec}
        default:
            return state;
    }
}

export default manageItems

This connects the functionality between our Item component and our main application state by allowing us to call actions to our reducer from the Item component buttons.

We set up a default parameter for our initial state, which is being called when we use createStore in our index.js file. This gets overridden with our current application state every subsequent call to this method.

Hosting to GitHub Pages

I wanted free hosting for this application, and as there are a couple of free options out there (Netlify, Heroku, etc), my codebase was already hosted on a GitHub repository.

Might as well just host it from the same location!

Installing `gh-pages`

There is a very useful npm package for achieving this extremely quickly, read more on it here.

All I had to do was run npm install gh-pages, add a

"homepage": "https://aj-rom.github.io/tracker"

key and value to my package.json.

Next thing to add were the special scripts provided by gh-pages, to our package.json for us to be able to deploy this to github.

Our scripts section should now look like:

  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

To deploy our application we run npm run predeploy which creates a /build directory with our production site. Navigate into the /build directory and open up index.html make sure everything is working the way you want and once you are satisfied go ahead and deploy it using npm run deploy.

This creates a new branch, gh-pages, and pushes only the contents of the /build folder to this branch. GitHub then automatically will detect that there is a branch that should be used for GitHub pages and your application will be up and running!

Optimizations via Lighthouse

Now that I got everything up and running I wanted to make sure everything was highly optimized and see how I could increase performance for any react-redux application in the future.

My initial page report for desktop was flawless, 100s across the board, but mobile was drastically lower performance wise.

This lead me to code splitting with React.lazy and Suspense. Which increased performance on mobile to be on par with the desktop report.

Feel free to run your own diagnostics check by navigating to the website aj-rom.github.io/tracker. Open the chrome-developer console and navigate to the Lighthouse section.

Conclusion

I learned a lot while making this application when it came to separating concerns within a React-Redux application, and how to optimize component loading using code splitting.

JavaScript Project - Twitter Clone

A.J. Romaniello — Mon, 17 May 2021 21:37:41 +0000

Quick Links

GitHub Repository - View this applications code
Frontend - Interact with the Backend
Backend - View raw JSON data.

What Was the Goal?

I wanted to create a very dumbed down version of twitter for this portfolio project to showcase my knowledge in building a backend Rails api and manipulating DOM elements via javascript (for the frontend).

For this we needed to be able to create new 'tweets' as a user, like certain tweets, as well as be able to leave comments on certain tweets.

What Was difficult?

Rendering changes to API data quickly without sacrificing performance was hard. This was most likely due to the way that I set up my frontend.

When you originally load the site, you get the most recent tweets from our api's root.

fetch(BACKEND_URL).then(resp => resp.json())
 // => [Post, Post, Post, ...]

Which then gets cached into a master list of all posts. When you send CRUD operations to the server, instead of re-loading and re-rendering all of the Posts from our api, we manipulate the cached objects.

This way we can manipulate the object for instantaneous changes on the frontend and not have to wait for responses from the server to view our changes.

Although we also will be able to reload our page completely and see all of our updated changes as well! This was slightly confusing at first but after getting it figured out saved my backend from getting unnecessary HTTP requests that would most likely affect server performance if this was interacted with on a larger scale.

What Did I Learn?

I learned so much through this project when it comes to manipulating DOM elements on a page and interacting with a backend API to send POST, PATCH, GET, etc. requests.

Also how learned how some systems like this really function when separating my concerns between a remote backend server (heroku) and the static (yet hosted remotely and dynamic) frontend.

This is a great way to showcase my work as it is completely free!

Backend Hosting Through Heroku

When creating my project I separated concerns out of my backend and frontend directories. To get my rails backend hosted via heroku, I had to install their NPM package and run the following:

# Login to heroku
$ heroku login

# Set our remote (found in your heroku app overview)
$ heroku git:remote -a ajrom-twitter-clone

# Push our (/backend) directory as to the master branch on heroku 
$ git subtree push --prefix backend heroku master

After getting everything setup I could seed my database by running:

$ heroku run rake db:migrate
$ heroku run rake db:seed

And as easy as that the backend API was up and running right here.

Frontend Hosting Through GitHub

Since I already had a heroku web server running for the backend and didn't want to create a new one soley for the front end I went with the GitHub Pages approach.

GitHub Pages allows us to create static web pages, although we can manipulate the DOM via javascript to make this function dynamically with a third party server.

The set up was pretty simple. I navigated to my repostiory, enabled github pages, and the frontend was fully accessible via this link

Conclusion

All in all I am pretty happy with the way this project turned out and learned so much in the process.

Some of the additional tools and frameworks I learned while creating this project that I found very useful were BootStrap and Form.io. Which helped create a responsive layout and quickly create amazing looking forms with validation via frontend declaration with Form.io.

Rails Project - Pollen

A.J. Romaniello — Tue, 27 Apr 2021 19:25:24 +0000

Pollen

For my rails portfolio project I decided to build out an application base that will later be built on to be used for a product matching API.

Why

I have heavy feelings towards sustainability and setting up a website that will promote this was of great interest to me.

The Challenges

I wanted to keep this a barebones as possible, no generators, and no gem madness. Which lead to me learning a lot more about the Rails framework and SCSS.

User Authentication

At first I wanted to rely only on omni-auth and build out my own custom RESTful routes for logging users in, although decided to go with devise.

Reducing Devise

Devise adds a ton of useless stuff that I did not need for my application. I went through most of the code and views that devise included and customized and built my own methods based on the sections that I needed.

This helped me keep my application smaller as well as having a deeper understanding to how tools such as devise work from the inside.

Default Users

Since I originally was planning on not storing user passwords or letting them 'create an account' via my web application (only log in via third party). I needed to change a couple of things.

Add Bcrypt
Create a Sign Up form
Allow users to sign in via email/password
Generate a fake password for third-party login ins

All in all this seemed like a large task to take on and the devise wiki made it seem even worse. Although if you have a decent understanding of html forms and rails form helpers creating dynamic links and login/signup pages actually isn't too difficult.

Useful Things I Learned

Layouts

Layouts are extremely important for keeping your views clean and lets easily style your application dynamically.

Helpers

Helpers are well.... helpers. Use them! No need for a user to see any malformed data or spend a ton of time nesting objects within links.

My favorite use case was creating a helper to wrap an entire div element to its associated path. Usually you would have to do:

<%= link_to '/login' do %>
   <div>
     <h1><%= @resource.name %></h1>
     <p><%= @resource.description %></p>
   </div>
<% end %>

Which would be much better if you could call something like:

link_card_to('/login', @resource)

Conclusion

I learned a ton over this project from rails routing, too layouts, to helpers, too SCSS. This was an awesome journey and I am excited to get into the Front-End frameworks such as Vue.js and React.

Developers Dilemma - Storing Passwords

A.J. Romaniello — Tue, 20 Apr 2021 19:07:21 +0000

We have all heard of the leaks major corporations can have and don't hear at all about the 30 million cyber attacks each year.

Which leads us developers to get cold feet when it comes to storing users sensitive data.

What Do I Do?

Personally I have started using gems such as Omniauth and forcing users to use their provider of choice as the secure entry point into my own application.

Why spend time and resources storing their sensitive information when we can authenticate them via a third party application? (Who most likely has spent more time and money keeping their users safe.)

Thus coming to my conclusion...

All we need is a users email, their third-party login of choice, and that returned UID from said third-party.

Fully authenticated user
We get more information than a user would have to input themselves
No blame on you if a third-party has compromised passwords

Discussion

What are your thoughts on this matter?

Do you prefer using third-party authentication systems for your applications?
Do you disagree with me and think we should still be storing user sensitive passwords?
How do you go about securing your application users data?

Professionalize Your GitHub

A.J. Romaniello — Wed, 07 Apr 2021 18:48:06 +0000

Having a professional looking GitHub profile is great in this age of online resumes, recruiters, and job search programs.

Although some people who aren't familiar with GitHub may not know where to look to find the best information on your profile.

In this guide I am going to give you a couple of good tips on how to professionalize your GitHub profile and even organize it for yourself.

What We Are Covering

Setting Up Your GitHub README
- Creating The ReadMe
- Making It Prettier
Choosing The Right Name

Setting Up Your GitHub ReadMe

If you have ever used GitHub before and created a repostiory, you should be familiar with the README.md standard. This is usually a file that gives a brief overview of a project or directory withing a repository.

A little while back GitHub allowed users to create a special "README" repository. Which gets featured on the users profile page before anything else!

Creating The ReadMe

GitHub has made this very easy, you just simply name a repository after your account name. For example mine would be aj-rom/aj-rom and then you add a README.md file.

GitHub will automatically detect this as a special file and your ready to start! More information can be found on the GitHub documentation here.

You might be thinking:

Why is this better than a normal GitHub profile? It shows our pinned repositories and contribution history already.

Take a look at this random users profile and compare it to for example mine. With this readme someone viewing your profile will have to read this first as well as it looks a lot better than the normal layout.

If you have already begun making your own readme at this point hold on one second and keep reading!

Making It Prettier

There are a ton of ways to make a README better. You can use HTML and CSS within markdown files, embed videos, links, images, or anything you could on a static website within this.

For example on my README, I am using a little extension called github-readme-stats which helps display your entire GitHub profile statistics in an awesome way. As well as mixing in some simply html code to hold .svg files for my special links.

This includes a variety of themes, implementation with Wakatime to let you even display the time you spent on each repository and language as you develop them.

Choosing The Right Name

Having a name that mimics your actual name or is somewhat professional is a must. Many more people are likely to clone and contribute to projects that are under john-smith/some-project rather than L33tCoder123xX/some-project.

As well as recruiters trying to find you, having something that resembles your names or initials is usually the best way to go.

Inviting Collaboration

One way to increase traffic to your GitHub profile and repositories is by opening issues and creating projects.

If you have a repository that is open-sourced, I highly recommend creating an auto-mated kanban style project. This will automatically move new issues into the todo column and allow you to label and assign new issues quickly and orderly.

The Importance of Labeling

Another way to increase traffic and even direct this flow is through the use of labeling.

Have a small feature that needs to be added or fixed but are gone for the weekend? Open up a new issue describe it and pointing to the correct location of what needs to be fixed. Then make sure to assign it correctly associated labels.

(Some of the best for newcomers are 'good-first-issue')

There are websites that will direct users to GitHub repositories based off the language of your repository and the issues you have open. So setting these up could lead to massive amounts of collaboration very quickly.

This also can help you yourself stay organized by opening and closing issues automatically as well as getting used to the way that professionals use GitHub in large settings.

Conclusion

Thank you for your time reading, if you found this helpful you may also like one of my other articles:

How To Teach Yourself To Do Anything

A.J. Romaniello ・ Mar 1 '21

#beginners #productivity #tutorial #codenewbie

GTC - 1400 Free Sessions

A.J. Romaniello — Mon, 05 Apr 2021 17:43:51 +0000

This is a great resource happening now until I believe the 14th of April. All sessions are completely free with registrations here.

Some of the topics being covered in the more than 1400 live sessions talking with some of the most well respected individuals of the tech industry are: Artificial Intelligence, Accelerated Computing, Healthcare, Game Development and more.

Hope to see some of you also attending, but thought this would be a great resource to share with everyone!

What's your favorite ruby gem? Why?

A.J. Romaniello — Tue, 09 Mar 2021 22:14:15 +0000

A couple of my favorite are quite basic. I love the testing features of rspec paired with capybara, and am excited to explore the over 69 billion gems out there.

Help your fellow ruby developers find that needle in the haystack!

Here are a couple of questions if you can't decide what gem(s) to talk about.

What're some gems that you can't live without?
What is one gem you found that makes a previously difficult processes easier?
What's a gem that you thought was cool or expanded on what software engineering is capable of?

Some of my favorite gems are:

RuboCop - Code styling
OmniAuth - ThirdParty authentication
Puma - Highly optimized and configurable web servers

How To Teach Yourself To Do Anything

A.J. Romaniello — Mon, 01 Mar 2021 02:48:20 +0000

Living in an advanced world allows us to access information on anything we desire in milliseconds. Using browsers and search engines we can easily browse the web over tons of documents and find relevant data.

For example: go search potato on google, you might see a response of About 539,000,000 results (0.87 seconds)

And we could scroll through all of these millions of documents if we really wanted too. Who knows we would probably find some really interesting things about potatoes.

Putting the potatoes aside and getting back to the relevant topic, we can use these tools to access free educational material! Pretty awesome if you want to be a self-taught learner of anything.

In this 'guide' I am going to provide some tips on how I teach myself programming languages, frameworks, tools, etc. using only the internet, but some of the tips could be helpful if your trying to learn anything else!

About Me - Some basic information on my past experiences.
Understanding the Lingo - Your first stop for learning something new.
- Read the Docs
- Encountering Our First Unknown Term
The Art of Googling - Become a googling pro.
- Searching With Relevance
- Navigating The Sea Of Search Results
What To Do When I Have Errors - Reading stack traces, debugging, and where to get help.
Keeping Up The Pace - How to stay motivated to achieve your goal.
- Setting Attainable Goals
- Managing Our Time
- Finding Our Happy Place
Experimentation - Implementing our new found ideas.
- Build As You Learn
- Make Open Source Projects
Discussion - Some talking points for this thread.
Credits - Any credits needed related to this post.

About Me

I have been teaching myself a plethora of things using the internet ever since a young age. I started learning java when I was just 11 years old, but the internet can be used to learn anything! From my favorite meatball recipe to finding an awesome hiking trail near by, it doesn't only apply to programming.

Ever since starting programming at a young age I used tools such as CodeAcademy and W3Schools to get a basic understanding of Object Oriented Programming and learning a couple languages such as HTML and CSS. From there I went and taught myself Java, SQL, MongoDB, C++, and more, since the school I went to did not offer any courses in technology.

I am currently taking self-paced online courses at the Flatiron School, and utilizing what I've learned from teaching myself in the past has significantly helped me gain a deep understanding of the large amount of new material we are expected to cover.

I hope this guide can help any of my fellow students in the self-paced program on how you can teach yourself and blaze through learning new tools, programming languages, or anything!

Understanding The Lingo

One of the most confusing aspects of learning any tool, language, or framework is getting used to the terminology it utilizes and understanding it deeply.

In my own experience, this is the hardest when switching between different programming languages due to the different syntax used and many other uses for them. Whereas a tool, for example SQL, will have similar (and most likely exactly the same) functionality within any programming language, using SQL's lingo.

So how do we get a basic understanding of a tool, language, or frameworks lingo?

Read the Docs

Before starting to learn anything, you would need to understand the pre-requisites.

For example, you probably shouldn't start learning algebra without knowing pre-algebra. Or what if your spinal surgeon just switched over from being an orthodontist? You might say:

Hey, are you qualified for this?

This is the same way tools, languages, and frameworks expect us to function. We get used to the specific lingo by starting with the documentation.

A great example of an amazing documentation would be by the web application framework Ruby On Rails. Go ahead and take a look.

When you click on the link you'll find a section right at the beginning that states Guide Assumptions. This is the pre-requisite section that most documentation will have under a similar name.

Do I have to read the entire documentation?

No, but you could if you have nothing better to do, use this as your starting point and reference point. Most documentation will have a getting started section that will help you start using whatever service they are offering. As you use the service, come back to the documentation when you want to learn about something new or if you are running into issues.

You might find something really cool hidden within the docs that make your life way easier!

Depending on the level of abstraction this could be where you run into your first bizarre looking term.

What's a web application? What's Rails?

Don't freak out! Learning the lingo and requirements is the first step in getting a deep understanding of any tool, language, or framework.

Encountering Our First Unknown Term

Well... It may be discouraging, you have to do some more research before you can even start learning. Yet the payout will be huge down the road, and you can read some more on the importance of terminology if you still aren't convinced.

Our first step would be to google the term. This usually will bring up the documentation page for the specific term, a definition, or link us to stack overflows or github projects that use this terminology.

Why is this important?

We now have context for what we are trying to learn and how it can be used in the real world.

Our second step is to then try and use the term. For example if you are finding yourself learning any new word you would want to be able to use it in a sentence. The same thing goes for programming lingo, we should be able to use it in a viable way that mimics real world logic.

A side note that some lingo may not do anything, although it can be a term that is used frequently within a specific language, tool, or frameworks documentation and understanding it will be necessary to continue.

This could be shown if you were using MySQL and wanted to learn about the CREATE TABLE method. MySQL syntax is very logical, so a sentence like I would like to CREATE a TABLE of cats. could seem reasonable. Now let's look at how we would do that in MySQL CREATE TABLE cats.

Logical enough, but now that we have translated our understanding into the tools specific lingo, how do we use it?

Finally we would want to implement this an experiment until we feel comfortable with how the lingo translates into functionality. Read more on experimentation here.

The Art of Googling

When teaching yourself google is your guide through a massive amount of completely free education material!

Since there is so much material out there, and we are also going to be learning a variety of things we need to be able to google like an expert.

Searching With Relevance

Whatever we are trying to learn we need to search for something relevant.

For example if we were in the midst of learning Ruby and were stuck on string concatenations (follow along if you haven't heard of concatenations you'll learn something new), a google search of Ruby String examples probably isn't what we would want to search.

Let's make sure we are searching for Ruby String concatenation, or whatever our relevant topics would be. If we were in Java, it would make sense to search for Java String concatenation and so on.

Helpful Google Guide - HowToGeek

Well now that we have all of these great search results, what do we do?

Navigating the Sea of Search Results

We have to always think back to our relevance when navigating the vast sea of search results. Following our example from above, we are on the ruby programming language so if we see a site, for example rubyguides.com, that is most likely going to be a decent guide.

One notable site for getting help and more knowledge of any tool, language, framework and to keep a heads up for is StackOverflow. This is a great place to go when experiencing technical issues, bugs, etc. More in the What To Do When I Have Errors section.

You should also look for GitHub and GitLab examples, as these can further your understanding of the real world usage of what you are trying to learn.

If you want to learn a language, using a website like W3Schools or Code Academy, are very great places to start. As they help introduce the languages to you at a beginners level.

What To Do When I Have Errors

Errors are frustrating. Sometimes you can't figure out what you did wrong.

First thing is first, always read the stack trace they might seem scary, but they are actually your best friend! These contain information that tell us exactly what is going wrong. You can read up some more on how these really help you debug your code or application here:

The Dreaded Stack Trace

Second thing, once we understand our errors we have to decide if its logical error, syntax error, runtime error.

Syntax Error is when we typed something that the interpreter didn't like.
Runtime Error is a little more advanced, usually the generic error type and takes some more debugging.
Logical Error is us making a mistake with how our program or application functions. These can fall under a runtime error or not raise errors at all.

Fixing syntax errors is the easiest as our interpreter will usually tell us the exact file and line that it struggled to read.

When it comes to the Runtime errors is when things can get difficult. I always ask myself:

Am I infinitely looping? Am I incorrectly using an external tool?

For example lets say I have this code:

def say_hello_five_times
  x = 0
  while x <= 5
    puts 'Hello'
    x += 1
  end
end

say_hello_five_times

It won't raise any errors, but you may notice you don't get the desired output. That's where we have to give our code what I like to call a walkthrough.

We walkthrough our code like the computer would, this helps us understand the code we have written and how the computer actually reads that.

# define a method (say_hello_five_times)
def say_hello_five_times
  # set a variable x to 0
  x = 0
  # Loop x until it is equal to 5
  while x <= 5
    # print 'Hello'
    puts 'Hello'
    # increase X (0 -> 1 -> 2 -> 3 -> 4 -> 5)
    x += 1 
  end
end

# call the say_hello_five_times method
say_hello_five_times

And wait a second now we can see that the computer is looping through 6 times. We would need to change our <= to <. This is a very basic example but walking through like the computer would is a great way to find logical errors in your code.

You can even test parts of your code on Repl.it which is very helpful for quickly debugging portions of larger applications, or even testing something before adding it to your local project.

After giving your code a quick walkthrough and running through the application as your computer would. If you are still running into errors, it's time to outsource to our good friend google.

Searching the exact error from our stack trace can lead us to other people who encountered similar issues (hint: stack overflow is where you want to look here) or even searching it using our pro googling skills.

If you are lucky enough to be a part of a community that you can reach out to and get individual help on, that is great too, but try solving it yourself first!

If you can't find any solutions make a post on Stack Overflow. This won't only help you, but anyone else who runs into the issue in the future.

Keeping Up The Pace

Learning can be tiring, especially if we are filling this in during our other daily activities. Time management skills are necessary to be a self-taught learner.

Setting Attainable Goals

One way that I hold myself accountable is first to set a goal. This will help you feel like you've achieved something when you reach it, no matter how little or big of a win!

Start with the big picture, for example if you want to be the best chef in the world that's a great goal. Sadly you don't know how to cook yet or where to get one of those fancy hats. That's where we need to set our sub-goals.

For my main goal of becoming a full-stack software developer, would contain many sub-goals such as: learning Ruby, HTML, CSS, learn how to host a web application, learn ruby on rails, etc.

If you're a student at the Flatiron school like me, I separate the sections out as my sub-goals either for the day or the week depending on the amount of content.

Managing Our Time

If you want to complete your main goal in a year and you have all these different sub-goals, while working, or attending school, etc. it may seem stressful. This is where time management is key.

It all depends on how fast you want to learn (since we are self-taught learners), but consistency is key. If you want to dedicate at least an hour a day to learning something new, stick with it. Find yourself bored in the middle of the day? Time to learn something. Have a project you've been pushing off all week and can't sleep? Don't start watching that new Netflix show, you could read about something that can help you with the project, or find a video with some relevance to what your learning. Find a new tool to add to your project, or even work on it.

Learning can be tiring, so we can make it fun or trick ourselves into relaxing while still learning!

Finding Our Happy Place

You might be thinking:

AJ, you really want me to stop binging that Netflix show and learn something! How will I ever survive?!?!

We all have our own happy place, and if it's curling up in bed and watching your favorite movie or tv show then I'm not here to judge or tell you to stop. Having this relief of relaxation, no matter what way you do it, is absolutely necessary for not getting burnt out. Both in our daily lives and whilst we are learning.

Some of the ways I like to relax are by going on a hike, listening to music, or hanging out with my friends to watch a movie. Find whatever it is that is your happy place and dedicate a little bit of time out of your week to make sure you go there.

This is extremely important. If you are feeling overwhelmed or stress, take a step back, breathe, and then come back to it later.

Experimentation

When we are learning a vast amount of things at a fast pace, it's easy to lose knowledge of something you learned before and don't use much anymore. This is where experimentation can come into play.

Build As You Learn

As you are learning whatever it may be, you should try to implement this outside of just your learning environment.

For example, if you still wanted to be the best chef in the world you could read up on all the best recipes and then not know how to put it together!

Within learning software development it's the same way.

Implementing and experimenting with what we learn is a great way of gaining a deeper understanding of a subject and gives us real world context and usage for it.

My favorite way to do this is by creating repl's for new subjects and trying to expand it on my own before moving to the next step.

For my fellow students at Flatiron, or others learning software development, this could be by trying to raise the level of abstraction before moving to a higher leveled framework. This helps you gain a very deep understanding of how these frameworks actually function off of each other.

Make Open Source Projects

This is a great way to get used to working with teams (some all the way around the world) and learning in a collaborative environment.

Open-Sourcing your work, especially while learning, is a great way to build a portfolio and get experience in the field your studying. Having it be open source lets other people like you who want to learn about similar projects use yours as learning material.

Discussion

A couple points for discussion that I would love to here from the community are:

What are your favorite ways to relax? (ie: your happy place!)
What tools have you found useful in your self-teaching experience?
What's a win you've had recently? (ie: something new you've learnt or built.)

Credits

Header Image - Designed by macrovector / Freepik

Found an error? Please reach out either on this thread or to me personally so I can fix it.

Sinatra on Heroku

A.J. Romaniello — Wed, 24 Feb 2021 22:21:57 +0000

Building my first Sinatra Application

I needed to create an application with a basic MVC structure. I chose to go with a Trail rating application that would let users browse and leave reviews on a number of trails.

You can view the project hosted on heroku here: hike-it-up.herokuapp.com

Development

Starting out I used a gem called Corneal which is used to generate scaffolding for a basic Sinatra application. Very useful and exactly what I needed to get started.

I wanted to use Puma over Thin as a webserver which limited me from using shotgun. Puma is recommended for the production environment over Thin on Heroku. As well as Heroku not supporting SQLite3, I had to switch to PostgreSQL and for this reason I just all in all removed thin and shotgun from my project.

As in the development environment puma automatically would update like shotgun would if the changes were to html files.

As for the database, PostgreSQL is faster, so might as well go with the more optimized option.

Production

To deploy this project to Heroku I needed to learn how to correctly configure a Puma web server using workers. Luckily their guide was thorough and helpful when running into errors.

Heroku also automatically will redeploy your app if you link it to a github repository. This made production even easier once the initial setup was done.

Conclusion

After building this project I am extremely excited for the automation of Rails to build models, views, and controllers as well as dynamically building routes. After learning Sinatra I thought that it felt like magic, yet Rails takes things to a whole new level.

P.S. If you made it this far... thank you! Feel free to check out more information in the projects README on github.

DEV Community: A.J. Romaniello

Release Please for Ruby | GitHub Actions

release-please

Why Use release-please

Conventional Commits

fix:

feat:

BREAKING CHANGE

Extra

GitHub Action Setup

Creating the Workflow

Choosing When to Run the Action

Setting Up release-please-action

Checkout and Publish

Checkout Repository

Setting Up Ruby

Publish Gem

Creating Your First Release

Adding Some Changes

Conclusion

A Full-Stack Application

aj-rom / hike-it-up-v2

The second coming of hike-it-up a React.js trail social media application.

Some Background

Getting Things Started

Choosing Frameworks

Building Out the Backend

Frontend Challenges

Switching To Hash Router

Persisting Application State

Hosting

The Backend

The Frontend

Conclusion

React.lazy() - Boost Mobile Performance

The Problem

What Creates the Issue

Why Does It Impact Mobile?

React.lazy

Code-Splitting With React.lazy

Suspense

How To Use React.lazy

The Benefits

Profiling With Lighthouse

Desktop

No Suspense

With Suspense

Mobile

No Suspense

Suspense

Conclusion

React & Redux | A Quick Side Project

Tracker

The Development Process

Setting Up Containers

Header

Body

Setting Up Components

<AddBar/>

<ItemList/>

<Item/>

Setting Up Actions

Setting Up a Reducer

Hosting to GitHub Pages

Installing gh-pages

Optimizations via Lighthouse

Conclusion

JavaScript Project - Twitter Clone

Quick Links

What Was the Goal?

What Was difficult?

What Did I Learn?

Backend Hosting Through Heroku

Frontend Hosting Through GitHub

Conclusion

Rails Project - Pollen

Pollen

Why

The Challenges

User Authentication

Why Use `release-please`

`fix:`

`feat:`

Setting Up `release-please-action`

`<AddBar/>`

`<ItemList/>`

`<Item/>`

Installing `gh-pages`