My name is Mark Bello and I am a front-end (React/Redux) developer with full-stack training in Ruby/Rails, based in New York City. This is my personal portfolio website and blog.
I was a designer first before I learned engineering, and that mode of thinking guides my approach to software. I'll say this til I'm blue in the face: We write code for people, not for machines.
Blog // Coding for People
Naming conventions in JS generally focus on mechanics, ignoring semantics altogether. As part of a clean coding practice- that is, writing code for other engineers (including Future You) to consume- an ounce of clear writing is worth a pound of comments. This post will share a some ideas and a simple rubric for how to […]read more
6 Anti-Patterns in React Functional Components
Stateless/functional components as a React pattern ideally simplify your code. Ideally. I’ve seen some doozies though… Front-end React in the wild is rarely the heavenly, best-practicing code we see in online tutorials and presentations at meetups. Every line is written for a reason, and among the head-scratchers I assume the reason was “I’m in a […]read more
A Semantic Pattern for Simplifying Functional Components
Harnessing the power of hoisting (no longer just an interview question), you can rearrange a functional React component however you want by cutting it into smaller sections that flow from top to bottom. So for instance you can describe the overall structure of your component at the top of your component. When you first see […]read more
Programmatically Edit Any File in NodeJS
How I Got My First Dev Job (Without Applying Online)
Career changing is a daunting task, and for my part I’m a little over a month into my first full-time job as a front-end engineer. Common wisdom says it’s hardest to get that first foot in the door, and for me it only happened after I stopped applying online. The process was brutal and often […]read more
Handling Dev vs Production API Calls using create-react-app
This post documents a brute-force approach I took to alternating between development and production databases in the PLURview app. I built a simple apiAdapter.js file in my src/ directory, which sets an API_URL variable for my fetch() calls. PLURview is based on create-react-app, which has the ability to distinguish between dev and production through process.env […]read more
PLURview’s Visual Language for Music
PLURview uses color gradients to describe what sort of EDM show you can expect from an artist. The colors create a new visual language for describing music without relying on labels. With a general understanding of what the 6 basic colors represent, you can tell at a glance whether an unknown artist is in your […]read more
Optimizing SQL Queries in a Rails API
Here are a few cautions and suggestions for improving load times from a Ruby-on-Rails API, based on what I experienced developing the back-end for the PLURView App. For background, PLURView analyzes EDM artists’ audio features to create a color gradient describing their vibe. The back-end is Ruby-on-Rails, and the front-end is a React/Redux app. Prime […]read more
Creating a React Front-End for a WordPress Site
WordPress 4.7+ comes with a built-in REST API for developers to access a powerful, well-documented content management system with non-Wordpress view engines. This means you can separate your front end from your back end on WordPress, and write out your views any way you choose using JSON. For comparison’s sake, the old paradigm was to […]read more
Coin Cafeteria: Cryptocurrency Vibes
Cryptocurrency stories are all over the news these days, and for the most part it’s the blind leading the blind. The market is so new that historical data is less than useful for judging cryptos, or at the very least it’s not as informative as trends on other investment vehicles. Coin Cafeteria is all about […]read more
Sandwich Clicker: Brutalist. Plain Vanilla JS.
Dynamic HSL Gradients
What is HSL color? HSL is a pattern for generating colors based on Hue, Saturation, and Lightness. This is a somewhat rare pattern, and it usually takes a back seat to Hex color codes (#000000 to #FFFFFF) in front-end design, or RGB(A) values that blend color with opacity. Rendering colors programmatically with HSL is useful […]read more
Theming Semantic UI with create-react-app
Semantic UI’s default styling is great, but it’s not the end-all/be-all of web design. Semantic’s versatility in terms of build options is great for quickly deploying something beautiful, but it’s confusing when you want to customize it with your own fonts/colors/etc. This blog post contains the recipe I used for going from default Semantic UI […]read more
Accessibility is for Everyone
People often leave Accessibility in design and coding to people with less important problems and more time on their hands. I think this comes from misunderstanding what it means to make an app or website accessible in the first place. And I find it kind of ironic that the term Accessibility itself is inaccessible because […]read more
Mailing it in
I’ve wanted to put out tons more ideas and content than I’ve managed to produce. The problem is rarely lack of ideas or even lack of time. What’s held me back so often has been over-design of my former portfolio site. It’s hardly a secret most designers will do almost anything to avoid learning how […]read more
Ruby, SQL, and Facebook Graph API: Heckin Good Doge Memes
My Facebook is basically nothing but dog memes. Seriously. The story is, I almost quit Facebook altogether after the Election because my feed became too toxic to consume any longer. Then the story is, I only managed to stay away from Facebook til about 11:30 the Morning of Day 1. I couldn’t handle the FOMO […]read more
PLURview analyzes EDM artists' music features to create a color gradient describing their general vibe, using an API and algorithm I wrote using Ruby-on-Rails.
The front-end is a React/Redux app. It displays a list of EDM acts coming to NYC in the near future, matched with the artists' color gradients where available.
- Ruby on Rails
- Rack and Sinatra
- NodeJS and Express
- SQL/NoSQL (MongoDB)
- React and Redux
- Bootstrap and Semantic UI
- HTML and CSS
Web Developer Portfolio
Each video file below shows a quick scroll through one of my projects on a landscape view, to be concise. All of my web projects are responsive as well, because good design for mobile is good design for people.