Our Blog

Photo by Harpal Singh on Unsplash

I’ve worked on a couple of large React projects over the last few years. In my experience, one of the trickiest parts of getting a React project up and running is figuring out how you want to visually style your application in the browser, so I’ll share in this post some of the ways I’ve styled my projects.

CSS Modules

Libraries like Material-UI (which I’ll discuss next) do a lot of the work of styling for you. However, sometimes you’ll still need to define styles unique to your project, and the most common way is with CSS.

For projects created with create-react-app, any CSS you include in a React project isn’t scoped. This means that if you define a class tall in one component that has a height of 40 pixels and a class tall in another component with a height of 80 pixels, one of your rules will overwrite the other—whichever makes it into the compiled CSS file last. However, Webpack allows you to use CSS modules, which restrict your CSS rules to components that explicitly import them. It took me a long time to figure out how to use them due to lack of relevant documentation, but eventually I discovered a very easy way to do it.

If your file structure looks like this:

- app/
  |-App.js
  |-App.css

It’s as simple as renaming your CSS file like this:

- app/
  |-App.js
  |-App.module.css

Using the suffix .module.css tells create-react-app that the rules within should be scoped only for where they’re imported. They can be used like other styles by importing and passing the classes like this:

import styles from './App.module.css';

export default function Component(props) {
  return <div className={styles.myClass} />;
}

Material-UI and similar libraries

There are many different design philosophies for web, but probably the most popular is Google’s Material Design. Material Design lays out some rules that help keep a user interface uncluttered, intuitive, and pleasant to use. However, jumping into the guidelines on Google...

Photo by Shawn O’Neil, used under CC BY 2.0, cropped from original

Introduction

I have been running websites and web applications under Windows Server for years, for both work and personal purposes. Most of them were small websites with a few daily visitors, but one particular case (a weather website I originally created as a hobby) grew over time to around one million page views per month.

The website is mostly ASP.NET, with some services and components written in PHP and Python, and uses MySQL for persistence (as well as a bunch of XML/PNG files to cache weather forecasts and weather imagery). As months passed by, I’ve discovered that the default IIS and Windows log files will grow drastically so, while checking its content periodically to detect issues and vulnerabilities, we need to take action to preserve free disk space and server performance.

Internet Information Services log files

In our IIS public folder (by default C:\inetpub) we will have a path logs\LogFiles. Inside that folder, the IIS service will create a set of folders, one per HTTP/FTP service that is running under our instance. How fast it will grow depends on many things, mainly traffic, but also website visibility and bad requests. But it will start to sooner or later consume our free disk space.

To prevent this, we can create a batch file that can be run on a daily basis from a scheduled task.

• CleanIISLogs.bat

forfiles /D -10 /P "C:\inetpub\logs\LogFiles" /S /C "cmd /c del /f /q @path"

This script traverses through all files on the folder passed by parameter that are more than 10 days old, and for each file, it executes the del command in quiet mode. This script will search for all files within the folder and all subfolders that are more than 10 days old and delete them. After running the task, we should confirm that the used space was reduced:

HTTP Error logs

There is another location where different operating system logs are stored: C:\Windows\System32\LogFiles. And when we...

Photo by Free Quran Pictures 4K, cropped, CC BY 2.0

Congratulations to the Open Islamicate Texts Initiative (OpenITI) on their new project the Arabic-script OCR Catalyst Project (AOCP)! This project received funding from the The Andrew W. Mellon Foundation this summer.

End Point developer Kamil Ciemniewski will be serving the project as a Technology Integration Specialist. Kamil has been involved with OpenITI since 2018 and with the affiliated project, Corpus Builder, since 2017.

Corpus Builder project version 1.0 made collaborative effort possible in producing ground truth datasets for OCR models training. The application acts as a versioned database of text transcriptions and a full OCR pipeline itself. The versioned character of the database follows closely the model used by Git.

What is remarkable about it is that it brings the ability to work on revisions of documents whose character isn’t linear as text in the Git case. For the OCR problem, one needs both textual data but also the spatial: where exactly the text is to be found.

A sophisticated mechanism of applying updates to those documents minimizes (with mathematical guarantees) the chance of introducing merge conflicts.

The project also hosts a great-looking UI interface allowing non-technical editors to work within the workflow of this versioned data.

CorpusBuilder works with both Tesseract and Kraken as its OCR backends and is capable of exporting datasets in their respective formats for further model training / retraining. Training of Tesseract models was covered last year in a blog post by Kamil.

AOCP will rapidly expand prior work and will help establish a digital pipeline for digitizing texts and creating a set of tools for students and scholars of historic texts.

End Point is really excited to be a part of such a cool integration of technology and the humanities!

Read more at:

• https://www.openiti.org/projects/openitiaocp
• https://medium.com/@openiti/openiti-aocp-9802865a6586
• http://kitab...

This week, I was very excited to deploy a project for Campendium, one of our long-time clients. As noted in my recent post on Campendium updates for the year, Campendium has thousands of listings of places to camp and provides a great infrastructure for the development of a rich community of travelers around North America.

For the past few months, I’ve been working on a significant update to Campendium’s campground detail page, the page template where in-depth information is provided for each of Campendium’s locations. This is equivalent to a product detail page on an ecommerce site.

The “guts” of the update included a new detail page design with expanded responsiveness, the introduction of 360° videos, and expanded user driven content in the form of Question & Answer (Q&A or QnA), reviews, notes, nightly rates, etc. Read on to find out more and see video examples of several of the features!

User Interface & Responsiveness Updates

One of the things the Campendium team and I are most proud of here is the responsiveness of the new design. In the case of traveling and camping, responsiveness is important since a large amount of traffic comes from mobile devices, relative to what you might see in other industries.

User images are shown as “hero images” and the user interface updates depending on the browser device and width, as shown in the following videos for Gilbert Ray Campground and Cayuga Lake State Park.

A preview of responsive behavior on the campground detail page with user submitted photos.

A second preview of responsive behavior on the campground detail page with embedded maps.

Another updated design usability tweak was a sticky navigation bar to navigation throughout the page, which can get especially long with user submitted content. See how the “Overview”, “Video”, etc. links become sticky as you scroll down on the page, and the current region coming into view of the page is underlined:

Navigation becomes fixed to the top of the browser as a user...

End Point congratulates National Braille Press on the recent release of their redesigned website, launched earlier this week! National Braille Press (NBP) supports the blind and low-vision community with events, initiatives, resources, children’s programs, and a bookstore. NBP has been working with End Point since 2002 and hosts and maintains their website, which is based on the Interchange open-source ecommerce platform.

Project Phases

End Point started working with NBP on this redesign project in late 2017. We began with a user experience (UX) review & content strategy project which resulted in design directives for our in-house team. Design and plans were completed in mid-2018 and implementation began then. End Point built a new, more powerful search feature and developed a number of ‘cornerstone’ pages while NBP staff worked tirelessly in-house to convert the rest of the pages on their website to the new designs.

Leveraging NBP In-House Resources

NBP’s wide reach in their community and long history means their website has hundreds of content pages. This can be costly to convert, and for some non-profits, can make a redesign project cost-prohibitive. End Point engineers Greg Davidson and Marco Pessotto worked alongside NBP staff helping them learn the Bootstrap web development toolkit and the steps they needed to take to integrate each page into the new designs. Using these in-house resources dramatically reduced the overall project cost while allowing the content to be converted carefully by hand with accuracy and care.

WCAG 2.0, AA Standard

NBP’s user base is heavily centered in the low-vision community, so compliance with user accessibility standards was a main focus of the redesign effort. End Point worked with NBP to make sure all of the engineers on the project were trained in the Web Content Accessibility Guidelines (WCAG 2.0) AA standards and guidelines. Testing for compliance was done with AXE and WAVE Chrome accessibility plugins. NBP also...

Photo by Alberto Cabrera, cropped, CC BY 2.0

It had been a while since I last needed to rip a CD into audio files (and compress them), but the need recently arose. This particular disc was a language learning supplement to a book, and a CD was a reasonable way to distribute that.

(Even though audio file downloads and streaming have become a far more common way to distribute audio than physical CDs, electronic formats don’t preserve our same rights to resell, lend, and make backups. But that is a topic for another blog post!)

I was ripping the CD with abcde (A Better CD Encoder), a text-based CD ripping, tagging, and compressing front-end I have used often in the past. Unexpectedly I got an error, as shown in this terminal output:

Executing customizable pre-read function... done.
Getting CD track info... Querying the CD for audio tracks...
Grabbing entire CD - tracks:  01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
abcde: attempting to resume from /home/user/Music/abcde.2a0e162a..
.
Grabbing track 28: Track 28...
cdparanoia III release 10.2 (September 11, 2008)

Ripping from sector  131363 (track 28 [0:00.00])
          to sector  148524 (track 28 [3:48.61])

outputting to /home/user/Music/abcde.2a0e162a/track28.wav

 (== PROGRESS == [ ! !!--!V V   ! ! !   >       | 143137 00 ] == :-) 0 ==)   /bin/abcde: line 3560: 21658 Segmentation fault      (core dumped) nice $READNICE $CDROMREADER -"$CDPARANOIACDROMBUS" "$CDROM" "${READTRACKNUMS:-$UTRACKNUM}" "$FILEARG" 1>&2
[ERROR] abcde: The following commands failed to run:
readtrack-28: cdparanoia  returned code 139
Finished. Not cleaning /home/user/Music/abcde.2a0e162a.

The command that abcde was running when it died is:

cdparanoia -d /dev/cdrom 28 /home/user/Music/abcde.2a0e162a/track28.wav

Getting a segmentation fault suggests that the software has a bug, not necessarily that there is anything wrong with the disc, drive, or USB interface...

Photo by Nik MacMillan on Unsplash

I’m often asked by family and friends about End Point’s market and how software consulting fits into the business landscape and I thought I’d write up some thoughts for the general public in how hiring a consultant is actually the smartest thing to do for your business and it makes a ton of sense financially.

Let’s talk some math about hiring an in-house developer:

• According to Glassdoor, the average software developer salary is around $50,000–$120,000. Let’s say $85,000 per year. You typically pay for health insurance, other benefits and overhead expenses, so let’s just round the total cost of hiring one person to $110,000 per year (I think that’s actually pretty conservative).

• You’d probably need to hire two people to support anything essential to your business, since having a single developer is risky (illness/​vacation/​employment change, etc.).

• Your total cost of getting two developers in-house is around ~$220,000 per year

Consulting Instead of Hiring

• Spending less: You could spend $40,000–$50,000 a year in consulting and get excellent coverage, including new feature development and support for your project. Some of our customers even spend substantially less than that.

• Skillset: Were you able to hire two people that know all of your software stack? Can they work on your CRM/​inventory system and do your website? Can they troubleshoot issues with your Windows Active Directory setup? Are they senior developers with a decade of experience? Or did you have to hire junior developers who need to train up on your project?

When you’re working with an End Point team, you’re able to get expert advice on the parts of your system that...

I recently got pulled into a project for a client who wanted to have a new WordPress website developed for them. I started by setting up a development environment with the niceties that I’m used to from my other application development work. That is, a development server, interactive debugging, linting, and a good editor.

Another thing that I wanted was not to have to deal with LAMP or WAMP or XAMPP or any of that. I wanted a clean, from scratch installation where I knew and controlled everything that was there. I’ve got nothing against those packages, but I think that, by setting up everything manually, I’d be able to better learn the technology as I would know exactly how everything is set up under the hood. The shortcuts could come later.

Luckily for me, there aren’t many pieces when it comes to setting up a basic, running development environment for WordPress. You only need three things: 1. MySQL, 2. PHP, and 3. WordPress itself. I also wanted a few other goodies and we’ll get there.

Let’s go through the steps that I took to set all of this up:

1. Set up PHP

In Ubuntu, installing PHP is easy enough. Just run the following command:

sudo apt-get install php

After that’s done, run php -v to validate that it was successfully installed. It should result in something like this:

PHP 7.2.19-0ubuntu0.18.04.1 (cli) (built: Jun  4 2019 14:48:12) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.2.0, Copyright (c) 1998-2018 Zend Technologies
    with Zend OPcache v7.2.19-0ubuntu0.18.04.1, Copyright (c) 1999-2018, by Zend Technologies

There’s one particular PHP extension that we’re going to need. Let’s install it with:

sudo apt-get install php-mysql

The php-mysql extension is necessary for our PHP installation to interact with MySQL. That’s all that’s needed to run WordPress as far as PHP is concerned.

2. Set up MySQL

WordPress uses MySQL for all of its data storage concerns. So, let’s install it. Again, in Ubuntu, installing and setting up MySQL...