Image for post
Image for post

Modals are a great and easy way to elevate your user experience on any project. As such, I want to cover how to create this small but useful feature in both JavaScript and React.

One of my favorite ways to implement modals is as a way to produce a larger view of an image when clicked on by a user. With that in mind, I decided to use this article to explain how to load a series of images onto a page, and then apply this modal-feature to each image.

As I mentioned above, I am going to be covering both JavaScript and React in this article, but the CSS for both is exactly the same.


Take care of your users

An image of a Braille screen reader
An image of a Braille screen reader
Photo by Sigmund on Unsplash

This article focuses on accessibility standards for front end design — a topic I’ve been studying recently. I won’t provide extensive, in-depth coverage of the subject — I aim to give you an introduction and some simple ways to start incorporating WCAG standards into any application.

Accessibility may be a familiar term for most folks, but its relevance to web development might not be — that doesn’t mean that we shouldn’t care! As developers, it’s our job to ensure that everyone who can access our products can also use them. First and foremost, this is important simply because it is a part of being a decent human being. …


Image for post
Image for post
Photo by Ferenc Almasi on Unsplash

While working on a small React application for a client recently, I was asked to create a “sticky banner” that would appear on every page of a site. That banner would contain a link that would take a user from anywhere on the site and bring them to a specific part of a specific page. In a non-React application, a link like this could be easily made using and anchor element and the href attribute. In React however, internal navigation cannot be handled with anchor tags, which left me to find another way.

After some quick searches on Google to find out if there was a generally accepted solution, I found that most people seemed content to use additional libraries such as react-scroll, but I wanted to find a way to use react-router’s built-in features to work for me. …


Picture of different browser screens
Picture of different browser screens
Photo by Domenico Loia on Unsplash

Responsive design is typically used for creating sites that are both desktop and mobile friendly (and everything in between!), and is one of those aspects of web development that I’ve been wanting to learn for a little while now, but hadn’t had a chance to do so. I recently found myself with an opportunity to experiment with it for the first time, and I thought I’d share the results.

Before I go any further, I’d like to explain what I mean by “A Dynamic Responsive Layout”. What makes the design I’ll be describing in this article a dynamic responsive design, is that it uses additional JavaScript logic to conditionally render a different HTML structure based on the screen size, and then uses responsive design to alter that structure’s CSS properties. The result is an easily scalable, extra level of design freedom that will let you get more creative with your site layouts, without sacrificing the clean design needed for mobile users. …


JSX Machina

Hi there. Oculus recently updated their browsers fromWebVR to WebXR. Unfortunately, React 360 has not yet updated to support WebXR. According to this open issue on Github, a major update has been on the way for quite some time, but has still not been published. Here is Oculus’ comments on the issue, which you can find here:

“For most developers, updating from WebVR to WebXR is a simple matter of updating to the latest versions of the framework you use. Popular VR frameworks like A-Frame, Babylon.js, and THREE.js all support WebXR… React 360 currently does not support WebXR. As a result, it is not currently supported in Oculus Browser. …


Image for post
Image for post

Before I get into the magic of Three.js, I think it’s worth taking a moment to give a little introduction to 3D web design.

As the name would imply, a 3D web application is a website that is rendered in three dimensions. This is accomplished by manipulating the HTML “canvas” element. The canvas element itself is worth writing a full post or two about, just to explore what it can do. For now though, all we need to know is that it was designed to create and display interactive, animatable graphics that can be drawn by the user.

As cool as that already is, people weren’t satisfied with stopping there, and figured out how to manipulate the canvas to work in three dimensions, using something called WebGL. WebGL is managed by Khronos Group, which defines it as “a cross-platform, royalty-free web standard for a low-level 3D graphics API based on OpenGL ES, exposed to ECMAScript via the HTML5 Canvas element.” …


SEO, which stands for Search Engine Optimization, is the practice of managing how well search engines rank a website in a web search. How well a site is ranked will determine where it is returned in the search results for relevant web searches, compared with other relevant sites.

Example!

Let’s say a user on Google, maybe a soon-to-be highly-employable student enrolled in a prestigious NYC software engineering program, is searching for a detailed walkthrough on how to finally get their very specific Ruby methods working correctly. Somewhere else in the world, an enthusiastic Ruby programmer, or “Rubyist”, who just so happens to have the answer is trying to get their Ruby tutorials out to the world. This Rubyist has a website, but no knowledge of SEO, and so their site is not optimized! …


Image for post
Image for post

When I started writing this post, I thought I was going to write about game development using Ruby. I love games, and I’ve always wanted to make my own, so researching how to do that with Ruby seemed like an obvious choice.

Before I even started, I figured that Ruby was probably not an ideal language for high-end game-dev. Mainly because I assumed that Ruby couldn’t be fast or powerful enough to handle it. As I began my research though, I found myself more intrigued by the things that made it difficult to build games in Ruby, than I was in the actual game development process. …

About

Tom Castagna

NY based web developer. Graduate of The Flatiron School’s Software Engineering program in NYC

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