With HTTPS, Docker, Digital Ocean, Google Domains

Image for post
Image for post
Photo by Jan Antonin Kolar on Unsplash

Hasura is an awesome tool to rapidly prototype a back end api. Hasura cloud is a newer product of theirs that allows you to pay for hosting a scalable Hasura instance. I recommend doing that instead of managing your own infrastructure, but I wanted to go through the process anyway and thought I’d share the steps I took.

There are a couple of assumptions in this article. I decided on using Digital Ocean, and I am using google domains for my domain names.

0. Setup/Sign up for digital ocean.

  1. Create a droplet on…


  1. If you haven’t already, download the vscode-elixir extension from the marketplace.
  2. Open the command pallet cmd+shift+p
  3. Type in settings.json
Image for post
Image for post
User typing in settings.json in command pallet

4. Click on Open Settings (JSON) pictured second in the above image

5. Paste in this line into your settings.json: "emmet.includeLanguages": {"HTML (Eex)": "html"} Read more on this github issue.

And it works!


You don’t need a div container in every React component.

Image for post
Image for post
Photo by Denys Nevozhai on Unsplash

Simply put, fragments allow components to return sibling elements.

If you were to return this jsx inside of a component

const component = () => (
<p>Paragraph 1</p>
<p>Paragraph 2</p>
);

You would see an error similar to this that states: “Adjacent JSX elements must be wrapped in an enclosing tag.”


Image for post
Image for post
Logger Example

With the arrival of react hooks, many things that were easy only with Redux are not easy with only hooks.

The downside to this is that Redux has a great ecosystem of middleware. Immediately when reaching for hooks, I realized there wasn’t a great logging system that was similar to redux-logger so I created use-reducer logger to fill that void.

It’s a pretty simple in usage and available with a quick npm / yarn install.

Check it out here: https://github.com/jefflombard/use-reducer-logger


Syntax highlighting and Line Numbering

Image for post
Image for post
Example of vim editing a .svelte file.

If you’re reading this, you probably like things pretty lightweight. Just pick from the features you want. Here’s what I have configured:

Syntax Highlighting

Add this to your .vimrc file:

syntax on
au BuffReadPost *.svelte set syntax=html

Changing the default color scheme

  1. Install JellyBeans colors with the following:
mkdir -p ~/.vim/colors
cd ~/.vim/colors
curl -O https://raw.githubusercontent.com/nanotech/jellybeans.vim/master/colors/jellybeans.vim

Note: other themes available on vimcolors.com. You just add the color package to your ~/.vim/colors folder and follow step 2 with the appropriate name.

2. Add the following line to your .vimrc :

colorscheme jellybeans

Enable Line Numbering

Add this to your .vimrc file:

set number


A look at my process as a solo-preneur.

Image for post
Image for post
Photo by SpaceX on Unsplash

“Vision without execution is hallucination.”

There is an overwhelming amount of “Entrepreneur Porn” out there. My favorite are the targeted Youtube ads. They seem to get lower budget with each copycat who thinks they can sell a get rich quick system. And then there’s my guilty pleasure: Shark Tank. By the end of an episode, I’m all worked up, ready to quit my job, lease out a commercial kitchen, and make a ton of money as an entrepreneur selling subscriptions boxes of my organic gluten free granola bars with CBD oil in them.

If you can’t tell by the buzzwordy…


A list of UI Frameworks and Platform Specific Libraries

Image for post
Image for post
Photo by Harpal Singh on Unsplash

There are a ton of UI Kits out there and even more libraries that implement those UI Kits.

For an easier to read and more up-to-date list, check out the github repo for this list: https://github.com/jefflombard/ui-libraries

While compiling this list, I went through a bunch of UI Libraries, I am most impressed with Material-Kit by Creative Tim Staff which is a cross platform implementation of Google’s Material Design. They have done an excellent job and have the most cross-development-platform options. Highly recommended!

The List

Material

Project Website: https://material.io/

Sketch

Photoshop

Figma

HTML/CSS

Wordpress

Angular

React

React-Native


Software engineering and the product life-cycle.

Image for post
Image for post
From Malakooti, B. (2013). Operations and Production Systems with Multiple Objectives. John Wiley & Sons.

There is a difference between being writing code, and writing code that adds value to your organization. Let’s talk about that.

How do you define what is valuable? You have to know what the business goals are of an organization. Project managers will often tell you what they need in the form of requirements and in most cases they’ll give you an idea of priority as well. But there is sometimes something lost in translation when it comes to how it should be built.

So how should software be built? Some people will say “TDD or bust!” others “Ship early…


Inspired by Redux Logger

Image for post
Image for post
Photo by Ales Krivec on Unsplash

I love the simplicity of React hooks. With useReducer you get the power of the flux architecture pattern and the simplicity of hooks. One advantage that Redux has over useReducer is all of the middleware available for it. So I built a very basic logger inspired by Redux Logger for use with hooks:

https://github.com/jefflombard/use-reducer-logger


Which should I use?

Image for post
Image for post
Photo by Suad Kamardeen on Unsplash

Okay, the title to this article is actually a bit misleading… flux is an architecture pattern that can be implemented using either the redux library or the React hooks API.

There are really two questions you should be asking:

  1. Do I need flux?
  2. Should I use Redux or the hooks API to manage state?

Do you need Flux?

Flux libraries are like glasses: you’ll know when you need them. — Dan Abramov

I think there are 3 good reasons to use Flux:

  1. Your app is complex and flux is a viable way to reduce complexity.
  2. You’re in an enterprise or business situation where stability…

Jeff Lombard

Web/Mobile Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store