const chars = 'hello'
chars.toUpperCase() + chars.slice(1) // 'Hello'
const chars = ['h', 'e', 'l', 'l', 'o'].join('') // 'hello'
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
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.
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.
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. …
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.
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;
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. …
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. …
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.
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…