Image for post
Image for post

To capitalize a string in Javascript so the first character is in uppercase, we don’t need to add another NPM dependency. We can use plain JavaScript or even CSS if it is solely for presentational purposes.

TLDR;

const chars = 'hello'
chars[0].toUpperCase() + chars.slice(1) // 'Hello'

Walk through all steps

Let’s see how we can approach this through a couple of common JavaScript functions. First, you have to keep in mind that strings are characters. So another way to write a string, is to create an array of characters that we join together.

const chars = ['h', 'e', 'l', 'l', 'o'].join('') // 'hello'

Uppercase the first letter

You can…


Image for post
Image for post

React Context is a powerful feature introduced in React v16.3.0. It allows you to access values from the current context (e.g. the parent) inside your components’ render methods, where you normally would be limited to accessing only its local state and props . This creates a very flexible system for sharing values between components. In this article, we’ll cover how to use React Context to create a shared state, and how to consume that state in a child component.

This article assumes you are familiar with the basics of React, such as JSX, components, state, and props . …


Some actions on a web application requires shifting the focus of an user. We’ll use the focus-trap package to trap focus within a DOM node or React component.

While developing interactive applications for the modern web, changes are that you’ll need to create overlaying elements. When such elements are active, the rest of the page is usually visually hidden and the user is only allowed to interact with this element. We can use ARIA-attributes to help with assistive technologies, but that won’t prevent keyboard users from tabbing out of the active element.

For example, setting `aria-modal=”true”` on an active modal…


React has an easy way to access DOM APIs of HTML elements through references. We learn how React exposes HTML elements by scrolling an element into view on the click of a button.

People’s behavior on websites did not change very much since the early days of the internet. But one thing that did change — since 1994 to be more precise — was that we learned to scroll longer pages of content. We are now used to websites where not all information may be visible at first sight.

But how do we grab a user’s attention for something that…


Click here to share this article on LinkedIn »

The last couple of React projects I’ve developed were built with a lot of help from the Redux Observable library. It is an excellent library to separate your business logic from your components, but the correct way to test is still something they need to find out. In this article, I am gonna share my ideas on this topic.

So what is this Redux Observable?

For those who aren’t aware with any of this library, I recommend to you to check out the RxJS + Redux + React = Amazing! talk by Jay Phelps. It’s a very…


If I had received a dollar for each time I intend to write the most maintainable CSS I had ever seen… We’ve all been there as front-end developers, right?

Since I started programming as a kid some years ago, let’s call it the table-layout era, things weren’t that hard. I created a single website with a single stylesheet and when it worked for me, it possibly worked for everybody. For real! Me and my friends were probably the only ones visiting the website anyway. And it was a fun and enjoyable thing to do;

Image for post
Image for post

So many years and the possibly…


As a web developer you’ve must came across the term Polymorphic Javascript, or Universal Javascript as some may prefer to call it. The technique behind it is even mentioned as “The Future of web apps”. So even for the PHP community it is hard to not stumble upon any buzz around it.
In this article I’ll explain another solution that integrates into any PHP application very easily. It’s called Lambda and is a hot new AWS service.

If you’re not familiar with Lambda, it is a serverless computing service where you can upload your code as functions and AWS handles…


One of the latest addition to PHP’s testing tools is Behat. A test framework that focusses on business expectations (behavior driven development) versus the good ol’ unit tests of PHPUnit (test driven development). In short, with BDD you are describing your functionality instead of testing your functionality with TDD afterwards.

If you use Behat in combination with Mink, you can test the behaviour of your application in the browser. It simulates the interaction between users and your application. But what if you have any authentication mechanism in your application, do you need to go through the login form in any…


Image for post
Image for post
© United States Library ofCongress’s Prints and Photographs division under LC-DIG-pga-00842

Before it changed it’s name to Passenger, the application server was called mod_rails and used as module within Apache HTTPD to get your RoR applications up and running.

What Passenger does is tuning itself automagically to get the most out of your server’s hardware. Like using all available CPU cores by default, HTTP caching without any configuration and load-balancing across the application’s processes.
If you have ever ran Node.js in production, you’ll know how hard it is to tweak everything correctly according to the server it’s running on. So a little bit of help in this is always welcome.

Running Node.js with Passenger

The…

Robin van der Vleuten

Technical-minded creative, web entrepreneur and part-time nerd. Eats pixels for breakfast and bytes for lunch. Dinner is a story on its own.

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