J. Pedro Ribeiro

Hello!
I’m a Brazilian frontend developer living in London. This website features some of my latest projects and my thoughts on anything web related.
You can find me on Twitter, Instagram, and LinkedIn.
Wanna talk? Send me a message.

How to prevent a CSS Flex item from expanding beyond its parent

This is a weird one that caught me off guard when I saw it. A rogue element inside a flex child was making breaking the layout by expanding…

Error Handling in Fetch

Have you ever wrapped your on a block to catch 4xx and 5xx errors, and it didn't work? This happens to me more frequently than I would…

Sliding Puzzle Game in JavaScript

The other day I stumbled upon a Sliding Puzzle Game on Wikipedia and I thought it would be a fun weekend project to build it in JavaScript…

event.target vs event.currentTarget - What is the difference?

This is a common question that I ask myself sometimes, the easiest way I find to explain is as follows: is the element where the event…

How to fix 'dangerouslySetInnerHTML did not match' error in React.js

This is an issue I come across every once in a while and it always takes me a couple hours to figure it out. Replicating the issue Let's say…

Book Notes #8: Why We Sleep: The New Science of Sleep and Dreams

Never thought I'd be reading and enjoying a book about sleeping. Insightful, and oddly entertaining. And yes, I do get the irony of reading…

In Defense of Testing

An analogy to software testing with Jenga and Lego

Book Notes #7: How to Make Coffee: The Science Behind the Bean

Short and sweet. A quick read that goes straight to the point. A 4-star rating on my GoodReads. Here are my highlights: (...) they are made…

Book Review: TypeScript In 50 Lessons

I've started incorporating TypeScript into my daily code not too long ago. Skeptical at first, the loosely typed nature of JavaScript never…

Book Notes #6: Craft Coffee: A Manual - Brewing a better cup at home

From start to finish, an easy read. Informal, yet very educational. No non-sense, straight to the point. The type of book you'll keep around…

Quote #4

“There are two kinds of forecasters: those who don’t know, and those who don’t know they don’t know.” — John Kenneth Galbraith

Tech Review for Responsive Web Design 3rd Edition

Over the past several months I've been working with Packt Publishing as a technical reviewer for their new release: Responsive Web Design…

Book Review: Click! - How to Encourage Clicks Without Shady Tricks

I'm an engineer. I like going straight to the point and find an answer to a problem. That's why I'm usually put off by books on business…

Quote #3

“To endure uncertainty is difficult, but so are most of the other virtues.” — Bertrand Russell

Book Notes #5: The Remarkable Life of the Skin

A book that manages to be entertaining, scientific and throughout informative, The Remarkable Life of the Skin: An Intimate Journey Across…

Baseliner 6.0 is out!

Baseliner, my very own Chrome Extension has finally been published. An extension for designers and developers who care about grid alignment…

Getting a nested property of an object with dot notation

Let's say you have a JSON file with your data. You parse it into an object literal: Your app (maybe your CMS, or an i18n library) asks for…

I used meditation apps for a year and here is what I found out

I always had some interest in meditation. In the past, I played around with the idea via yoga classes. It was a mix of positions, breathing…

Book Review: Inclusive Components - Accessible web interfaces, piece by piece

Accessibility. If you work with web development you must've heard about this term lately. It is becoming popular topic on conferences…

Quote #2

“Respond; don’t react. Listen; don’t talk. Think; don’t assume.” — Raji Lukkoor

Beer Log #2 - Birrificio B63

During my Christmas break I left the never ending overcast skies of London for the sun and (really) cold weather of the Valle d'Aosta, in…

Updating CSS Custom Properties with JavaScript

I ran into an issue this week: needed to update the colour of a pseudo element (i.e. ) of an element. The problem is that pseudo elements…

Book Notes #4 - Factfulness

If I would sum up this book in a short sentence it would be "numbers don't like but liars use numbers". It's a class on data interpretation…

Book Notes #3 - Beer School: A Crash Course in Craft Beer

Written by the folks from very entertaining YouTube channel The Craft Beer Channel, the book functions both as an introduction to beer and…

Book Notes #2 - No Hard Feelings

A mixture of self-help and workplace guide, No Hard Feelings: Emotions at Work and How They Help Us Succeed , by Liz Fosslien & Mollie West…

Converting CSV to Array of String

This past week I've been doing a lot of spreadsheets and data manipulation and I needed a quick way of converting a CSV file to an usable…

Debugging Arrow Functions with console.log

Something that always annoyed my about one-line arrow functions is that whenever I need to debug them, I need to open up a block of curly…

Book Notes #1 - Zero: The biography of a dangerous idea

Just recently finished Zero - The Biography of a Dangerous Idea, by Charles Seife. I definitely recommend this book (a 5-star rating on my…

Beer Log #1 - Hawkshead Brewery

Back in April, I've managed to book a short hiking trip to Lake District - by far my favorite place in the UK. We hiked the Helvellyn…

Quote #1

“If you absolutely can't tolerate critics, then don't do anything new or interesting.” — Jeff Bezos

React Amsterdam 2019

This weekend I had the privilege to attend the biggest ReactJS conference in the world - React Amsterdam. Day 1 - Meetup Fail My trip…

Back to Basics

It's been a long time since I wrote anything on this site. So, as any web developer would do, I decided to rewrite the whole site instead…

Fun with Browser APIs: Speech Synthesis

On the previous post, I showed how you can use the Web Speech API to translate speech to text using Speech Recognition. Today, I'm going to…

Fun with Browser APIs: Speech Recognition

On this third post about browser APIs we're gonna talk about audio, or more specifically, speech. The Web Speech API is compromised of two…

Fun with Browser APIs: Shape Detection

This is the second instalment of Fun with Browser APIs, and today I'm going to talk about Shape Detection. Spec in draft stage This is a…

Fun with Browser APIs: Media Stream Image Capture

Fun with Browser APIs is a series of posts in which I introduce one or more APIs that you might not heard about or used. This first one on…

Accessibility Tests with Pa11y & Node

In this article I'm going to show you how to automate your accessibility testing with just a little amount of JavaScript and a great library…

Book Review: Web Performance In Action

For the past 2 years, my work has had a focus on delivering fast experiences on the web. I've also kept an eye on any article, tweet or…

Progressive Web Apps

In the past couple of months I've been reading quite a lot about Progressive Web Apps. The term is getting very popular especially due to…

Book Review: Using WebPageTest

You can't start talking about performance without hearing about WebPageTest. It's by far the most complex and useful synthetic tool…

What's the deal with renaming files in Git?

If you try renaming a file in your project, you might notice this weird behaviour when checking its status: `$ git status On branch master…

Understanding Bandwidth vs Latency Through An Analogy

To understand how performance can affect your website, it's important to understand common terms and which part they play in a network…

request anim frame

request animation frame JSJ web performance 18:00 const foo = function (bar) { let baz = 2; for (baz ; baz++ ; baz <10){ console.log(baz…

Web Education

It's Sunday morning. I've just read some articles on CSS and for some reason started browsing Stack Overflow on that subject, specifically…

Aggregating Google Analytics Browser Statistics with r2d2

I love Google Analytics but the browser usage stats always annoyed me. Since modern, evergreen browsers release features very frequently…

Web Ethics

Once again Start Your Shift brought me another puzzling topic to write about: Web Ethics. It's in the news It took me a while to come up…

Thoughts on Front-end Tooling

Being a front-end developer means keeping up with current trends. It doesn't mean you have to master them all, however you are expected to…

Compromise - Balancing Project Needs with Internal Ideals

Every new project is a new opportunity. It's when you use your past experience and have the chance to build something better than you did…

How to Make the Web Better

When #startYourShift asked us to write about how to make the web better I could not help but think about my own journey on the web. In the…

Workflow: From Design to the Browser

What is the best way to code a design piece to the browser? Lately, I've been questioning myself if the process I use is the proper one or…

Baseliner: My First Chrome Extension

I've build a small tool a while ago to help me align elements on a page and keep the baseline consistent. It adds a customisable horizontal…

Being a Technical Book Reviewer

A couple months ago I was approached by a book publishing company. They found this website through one of my book review posts and wanted me…

Book Review: Expert JavaScript

Being a frontend developer means not only knowing your tools pretty well but also understanding how and why they behave the way they do…

Book Review: The Mobile Book

Mobile development, responsive web design, flexible layouts for devices. There are so many posts, articles and books coming out about this…

Finding a job in web design and development

Searching for a new job is a stressful and time-consuming task. When I moved to London a couple of months ago I had this experience once…

Done Is Beautiful

Side projects are important for every professional. It takes your mind away from day-to-day work and let you explore and go further without…

Vertically Centering Images with HTML & CSS

Here is a quick trick whenever you need to vertically centre an image (or paragraph, or any other element) inside its parent container…

What Is Media Queries And How To Use Them

Mobile, tablets, netbooks... today people access websites using a variety of computers and gadgets and that is great, it enable us to reach…

Book Review: Smashing Book 3

Well, I guess third time's the charm because Smashing Magazine finally made it. Their third volume hits the nail on all chapters and it's…

HTML5 & CSS3 Curriculum Vitae (Résumé) Template

I was tired of my old CV and lately I was using the LinkedIn auto generated PDF CV, which is quite nice and handy but it lacks personality…

HTML5 and CSS3 Boilerplate files

Boilerplate is a set of files composed to be used over and over again. In front-end development (any area actually), starting from scratch…

CSS Only Drop Down Menu

Drop Down menu is an excellent alternative for complex menus, the ones with a variety of categories and subcategories to choose from. In…

Book Review: Smashing Book 2

A couple months ago I finished reading The Smashing Book 2 from the popular web design blog Smashing Magazine. Just like with the first book…

So... I Finally Redesigned My Site

Nearly 4 years ago, back in 2008, I decided to create a blog and write about all the stuff I was reading and doing, mostly web related. Took…

PSD To HTML - Step By Step

get psd write html first to ensure semantics (or bit by bit for testing purposes / create styleguide first) write css for most updated…

HTML Coding For E-mail Marketing

Creating a successful e-mail marketing campaign requires several items: a valid product or service to offer, selected target audience and…

Book Review: Hardboiled Web Design

Andy Clarke's long-waited book, Hardboiled Web Design, brings new ideas on website development. It's packed with HTML5 and CSS3 but with a…

Creating Expandable Banners with Flash and Javascript

A very popular ad type in portals and blogs, the expandable banner is a useful technique to display more content to a banner. It's a very…

Please Start From The Beginning...

A couple of weeks ago I had the pleasure of doing some transcription work for the podcast called "Please start from the beginning...", a…

Photoshop: Quick Guide to Smart Object & Smart Filters

Smart Object and Smart Filter are two extremely useful features in Photoshop that will boost your design productivity. This is an easy to…

Cross Browser Testing Resources

Following up on my article about using or not IE6, I've selected a few tools to help you test your website on different browsers. Most of…

Book Review: Logo Design Love

If you are into branding and logos then you probably know David Airey. His knowledge in the graphic design field has generated two well…

How to Make the Most of Design Tutorials Without Losing Your Soul

Design blogs are a great source of articles, news and resources - specially if you use mainstream softwares like Photoshop and Illustrator…

Know Your Type: Part 2 – Type Categories

In this second part of typography articles we are going to learn the categories in which a type can be classified. Knowing the terms and…

Book Review: Making and Breaking the Grid

Making and Breaking the Grid, by Timothy Samara, is an analysis of the construction and deconstruction of grid-based designs. Featuring a…

Portfolio: Hooke & MacDonald

Hooke & MacDonald is one of the major real estate agencies in Ireland, specially in the new homes market. They requested 4pm to come up with…

Why Should I Care About IE6?

Firefox, Chrome, Safari, Internet Explorer, Opera. Developing websites to match all these browsers is no easy job. And don't even start…

Know Your Type: Part 1 - Anatomy

Typography is a field that is quite new to me. Coming from a developer background, I did not study type the way graphic designers do…

3 Image Techniques To Speed Up Your Website

In this post I'll show you 3 useful techniques to speed up the display and download of images on your website: Css Sprites, Image Maps and…

Book Review: Don't Make Me Think!

What comes to your mind when you think about usability in web design? "Less clicks is better"? "Design to the average user"? "Content is…

Portfolio: Coldwell Banker Ireland

Coldwell Banker is a world wide known real estate company with a wide range of property markets such as Residential Homes, Apartments, Land…

How to Photograph Textures For Websites

It's great to see how much the use of textures in websites has increased in the past months. They are an effective way of adding flavour and…

15 Amazing Beer Bottle Designs

From all the different fields of print design the one that always gets my attention is the beer bottles design. It's a saturated market and…

Portfolio: iWord

In this project I was requested to not only redesign their current page but to come up with 2 animated banner ads, which will be featured on…

Book Review: Sexy Web Design

Have you ever wondered if your design process is the right one for your projects? Have you ever thought that maybe there's a step missing or…

Random Illustrations: Part 1

Random Illustrations is going to be a series of posts featuring my drawings on random subjects. Hope you enjoy it! Today's drawing: Abstract…

Great Websites for Vintage Resources & Inspiration

Vintage - or Retro - design is the style that uses techniques, colours or shapes used in the past. I am a big fan of this style and in this…

Book Review: Thinking with Type

I must admit that typography wasn't always my favourite field in design. Until a couple years ago fonts and texts were mere supporting…

Creating Your Own Portfolio Website - Single Page, Full Site or Blog style?

After spending several months developing this website and facing different issues throughout the project, I've learnt a few things about the…

Book Review: The Brand Gap

Branding books don't have to be huge or full of complicated theories, they can be fun, practical and inspiring. The Brand Gap, by Marty…