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 access any character within this array through its index. So if we need the letter e from this array, we can use square brackets to access it at index 1 (as arrays always start counting their index at 0). …


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 will tell assistive technologies that the elements below the current dialog are not available to interact with (https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html). This, however, will not prevent the user from tabbing out of your modal component. In this case we’ll have to resort to JavaScript and trap the keyboard focus, and keep the tabbed element in our modal overlay. …


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 isn’t visible in the current part of the viewport it’s currently looking at. We can utilize a very handy browser API for that, called Element.scrollIntoView(). Which does exactly what it says it does with a few nice options to modify its behavior. …


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 inspiring talk on how Netflix uses some common JS patterns combined with the powers of RxJS to manage your business logic within your React application. …


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 the same amount of large projects later. I came to an understanding that writing CSS is possible one of the most difficult things to do in the web wonderland. Sure, naming things is quite hard and cache invalidation even more. But writing a good and maintainable CSS codebase is very hard and it doubles in complexity with every extra developer you need to work with. It even quadruples with every back-end developer who did some very !important styling fixes for his environment. …


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 everything required regarding the scaling and availability of it. …


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 test? The answer is no. And in this article I’ll explain how. …


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 first step you’ll have to take is to actually install Passenger into your environment. They support many (unix-based) platforms and you can read all about it on their excellent guides. For now let’s assume that you’ll want to run Passenger on OSX and you can install it very easily through…

About

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