DEV Community: Pedro Pimenta

Responsive iframe without a parent container

Pedro Pimenta — Tue, 14 Jul 2020 14:57:42 +0000

If you've built a website you have had the problem: make an iframe responsive. Maybe it was a YouTube video, maybe it was a Google Maps embed. Whatever it was, you probably did it the most popular way: wrap the iframe in a div and use padding to maintain the aspect ratio. Like this:

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

What if you can't add the wrapper div?

I was building the v2 of a blog with 150+ articles in 3 languages and v1 was not responsive. I had to build the front end with this in mind, trying to avoid having to edit the content everywhere possible. As expected, YouTube embeds weren't wrapped in any div and changing them all would be ~~a pain in the ass~~ difficult. This was my solution:

iframe {
  max-width: calc(100vw - (var(--margin) * 2));
  max-height: calc((100vw - (var(--margin) * 2)) / 1.7778); /* 16:9 */
}

Of course, you do need to know how your container behaves and any margins you have. In this case I'm taking into account horizontal margins with var(--margin).

Here's a CodePen with a live example:

What do you think? What are the drawbacks? Do you see any potential problem with this solution?

Why did I build my portfolio website with GatsbyJS?

Pedro Pimenta — Sat, 11 Jul 2020 19:25:15 +0000

TL;DR at the bottom.

I've just finished building my new portfolio and it's a simple one. Veeery simple (I'm a simple guy :). So simple that Gatsby is probably, definitely an over-kill, for the development side and for the client side as well. I don't need that much JavaScript.

So why did I do it?

To learn. I finally got the energy to really learn JavaScript and the ecosystem around it, starting with React. So when building my portfolio, I grabbed the chance to expand my knowledge on the subject a bit more.

I also decided to add a few more things to the mix: Strapi, a Node.js CMS that I hosted on Heroku and an AWS S3 Bucket to store the images for Strapi.

It has been a very fun journey on learning so many different technologies and how they work.

What am I saying

With this I just want to share with you the idea of taking the opportunity to learn wherever you can, even if it wouldn't be your first choice.

What do you think of this? Would you do the same or would you stick to the best tools for the job?

TL;DR: I overengineered my personal website to learn more JavaScript.

Stop setting the language of your website based on user location

Pedro Pimenta — Sun, 17 May 2020 23:20:31 +0000

Please, stop!

Why

Setting the language of your website based on the user's location is not the best user experience. People travel, people move and not always do they speak the language of the place they're in.

I'm currently living in Germany for a while, and I know next to nothing of German, so it serves nothing showing me your content in German.

The worst offenders are the ones that first load the default (most of the times, in my experience, English) and then reload or re-paint to show me a language I don't understand.

The solution

A much better way (and probably easier) is to use the user's browser/system language. That's the language I want to read on 99% of the time. Otherwise, why would I have my machine in that language? And if it's not, I will change it myself.

So if my preferred language is English, it doesn't matter where I am, the content will be delivered in that language and I will understand it.

It's also super easy:

var userLang = navigator.language || navigator.userLanguage;

Thank you. Signed,
Everyone

My first React webapp: Instatext

Pedro Pimenta — Wed, 27 Mar 2019 17:45:36 +0000

I am so proud of myself that I have to share this little insignificant app with everyone! It's a tool to help you format your content for Instagram and not lose your line breaks.

We're sick and tired of the Instagram app removing our line breaks and replacing them with single spaces so I thought I could build this.

I'm learning JS and React, this is the first personal project I have ever finished and published. By no means it is good but it's mine and it works, at least for me and my girlfriend :)

Check it out: https://instatext.pimenta.co

Feel free to use, share, comment, help or whatever.

Be careful when copying and pasting

Pedro Pimenta — Sat, 02 Feb 2019 12:00:28 +0000

At my job (and probably yours) we're always copying and pasting stuff. Be it little snippets, big chunks of code from old projects or from the web (of course you never do that), or just plain client content, we're doing it. This post focuses mainly on copying content because that's when you're copying from different sources, programs and interfaces, but it applies to everything.

Where it began

On one bug-fixing morning I got this screenshot, saying there was a bug with the word "código" on Firefox:

As obvious and visible as a bug can be, I didn't see it. I opened the faulty page on my machine with Chromium: it looked OK. Weird. I opened Chrome, Safari and Firefox and it only ocurred on Firefox. I looked at the code on Sublime Text and it look fine: código. Wow.

So I got stuck looking at it, inspecting it with all the browser's tools I could, but couldn't find any lead. I wrote an ó beside the word código and it looked fine. It was definitely a problem with that specific ó. I could delete the word and move on, but no, I need to get to the bottom of this.

So I copied the word from Sublime Text and searched the web for "translate unicode" and "copy characters reveal unicode" (you can see I was very lost on this) and I was brought to a couple of pages that helped.

One is r12a's Unicode code converter which converted the copied ó to o&#x0301;. This is two characters, not one as intended. The other page is Grant McLean's Unicode Character Finder which show this when I pasted the culprit character:

It forgo the first "o" because when pasting in this box, it only shows the last character. Definitely two characters. How can this be? I don't know.

Suddenly it hit me

This is client text, I copied this from somewhere. I can't recall correctly but I think this particular text was forwarded from a client email. So it is weird character handling from either my end or the client's end or the man in the middle. And only Firefox show it incorrectly.

Note: it seems that some fonts handle these characters in different ways. When writing this post I noticed that the font face I'm using on Sublime handles these two characters as the one it should be, but if I change it to, for example, Inconsolata, it shows up different:

This is because Inconsolata doesn't have this character in its table so it switches to the default one.

Solutions?

Of course I will always copy and paste client text, I will not rewrite everything, it would consume a lot of time.

Is there anyway to sanitize text to avoid this kind of problems?