My friend had managed to move up viewport with pure javascript...

Thinking about this makes me pull my fucking hairs.

The fact that I have to look for the actual content in a website, among all the ads, prompts and fucking stupid design is fucking ridiculous.

Every fucking website is following this designs now. Always showing popups to subscribe to their fucking newsletter the moments you visit the site.

Can you please let me fucking read the content I require first?

"No fucking way. I will block 80% of the viewport with unnecessary stuff. I will place my ads on the left and right side. On the bottom, I will have a blocking div that will prompt you to subscribe to our newsletter. And on the top, we will have this huge fucking navbar which will take 30% of the view. That 20% area left in the middle? yeah, good luck on finding something useful in there"

Then there are this fucking cunts, that blocks the whole website the moment you enter.

"Oh, you need some information, right? Why not just subscribe to our emails first so that we can send your useless junks every now and then".

Oh my fucking batman, don't even remind me of those stupidass videos. Now 90% of the popular website will play a video immediately after you enter the website.

And guess what?! The volume will be amplified to 500% so that that's the sound you will ever hear in your lifetime.

The fucking web is becoming absolute shite right now. We really need a revolution here which makes the websites show the appropriate amount of ads and prevents them from doing all these stupids shits.

Fuck you css!

Today I discovered (by losing some hours) that "position: fixed" has an exception when deciding where to position elements:

If the element with position fixed is inside an element with a transform, that element is treated has the viewport instead of the screen.

Why the fuck did someone thought that was a good idea?

On my first week in the internship, I have to create a small website and it has to be finished ASAP. So I used Bootstrap.

After finishing I tested the website in chrome debugger tools for every screen size (design responsiveness), it was working fine. My stupidity was that I haven't tested on actual mobile/tablet.

The site was live, I send the link to one of my friends and he said "why everything is so small? looks like I'm browsing on PC". I quickly grab my phone and visited the site and it was not responsive on mobile. Started to check the code again, tested again on chrome tools it was working. But not on mobile. Changed the bootstrap file but no fucking changes on mobile.

After few moments of thinking, I realized that I haven't included the "meta viewport" tag. I felt so stupid and it was kind of embarrassing for me.

Now I first include meta tags before working on new project.

Two of my team members were trying to make a website responsive for over an hour. They tested everything. They checked the JavaScript, checked their CSS media queries, tried everything but it just wouldn't work on mobile browsers.

So as usual they decided it was "impossible" due to "WordPress constraints" and told me that it would work on the browser but not desktop.

I just added the meta viewport tag. It literally took 10 seconds. It worked.

I hate people who give up easily. Just hate it.

CSS quick maffs:

Using viewport units to define font size but sometimes it's too small?

Instead of font-size: 10vw;

use font-size: calc(10vw + 20px);

This will make sure that font size is AT LEAST 20 px no matter the viewport width. Treat the resulting font size like a function of viewport width and feel free to experiment with it. With calc in that case you can achieve the best typeface responsiveness possible.

<meta name="viewport" content="width=device-width, initial-scale=1">

After trying to figure out why the examples were working on the site, but not on my page, finding out this was the problem left me with one reaction:

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH

@dfox sorry for nitpicking, but could you check the "viewport" meta tag? The "-" in "minimum-scale" is missing.
I like the Chrome console to be clean :P

Only around 700 lines of code and I finally have my first working Vulkan drawcall! Can't wait to integrate it into my engine for all the parallel rendering goodness (not to mention better architecture and asynchronous-ness)

One thing that's a bit weird about Vulkan is the way everything is very static and tightly linked together. You basically need a different renderpass for each stage of rendering (scene-hdr-no-aa, scene-hdr-msaa4, scene-hdr-smaa1, scence-shadow, post-bloom, post-resolve, etc.), a different pipeline object for each distinct pipeline configuration (!!) and both framebuffers and pipeline objects are only valid within the single renderpass they've been created for (roughly speaking)

Oh, and each time the window is resized you have to recreate *all* of these objects from scratch because they also depend on viewport size

No wonder `pipelineCache` is the first argument of `vkCreateGraphicsPipelines` lol

Ffs when a designer just increase the mobile viewport size because their design didn't fit in UI.

Oh well, scale 0.8 here we come asshole.

— *draws three overlapping blocks of content*
— it’s not going to shrink on small screens. Maybe we can put them in column for narrower widths?
— NO! They should overlap and I don’t care how you’ll do that!

So I stripped a responsive viewport, now the website is not responsive, but yes, we have “kewl and pwetty overwapping bwocks”, congratulations!

Why is web development such a headache?

I'm writing a responsive wesbite from scratch. All goes perfect, even cross browser.
It all works, adapts to screen size etc. Nice! About to get this code into production.

Me: I'll test the iPhone 5 viewport size before I push the code...

Responsive Developer Tools:

FireFox: nu uh, there's a magic random 1px margin to every element on your page now, which you cannot find in your css or in the computed tab. It's magical.

Me: weird, what if I change the viewport size to the iPhone 6's dimensions?

Issue persists.

Me: hmm, what if I add or substract one fucking pixel from the viewport width or height?

FireFox: What 1px margin? Don't know what you're talking about ... There never was one...

Me: ok, weird (sets viewport size back to the iPhone 5 format for testing)

FireFox: I present to you: the magic random 1px margin.

I'm at a loss. I really am. Been clicking and unclicking almost every responsive part of my css I could find for this page and it just doesn't want to work persistently. And I swear to god that it worked a week ago in that exact viewport size. It's so frustrating.

I once made a small Tower Defense game for school and had an issue where I put an image on coordinates 0,0 but I still had a black border. Rather than looking for the issue, I just moved the background slightly out of the viewport and called it Workaround Defense.

Debugging that responsive website and can't figure out where it is applying the viewport for the mobile layout. Cookie isn't set to view full site, nothing in html....checking Google's Dev Tools even in incog mode...until I notice Chrome is zoomed in....CTRL-0 = fixed. Dammit. Zoom on page just wasted 5 mins. I want my 5 mins back!

UI designers! Please understand that whilst animations are pretty, people don't want their webpages, apps and game UI elements jumping around when they're trying to interact with a button.

So Firefox for Android recently received an update that, stripping out 90% of the browser's functionality aside, has two glaring issues:

1_ about:config got disabled, so any options that, say, scaled webpages to not look like they're made of Duplo are now totally ignored. Enjoy your toddler websites!

2_ The search bar auto-hides. On every scroll. It changes the viewport size when it hides, making webpages frantically jump around and change CSS rules. There's no option to turn off auto-hiding. Twitter already jumps around like a rabbit on the strongest crack carrots can buy, and they somehow made it WORSE.

F%^&

I had six items that I wanted to centre horizontally via CSS. Problem was that depending on the viewport width, the items could either take one, two, three or six lines. But the items broke to the next line like text so that e.g. the top line had five items and the second only one. What I wanted was three items each in this case.

Finally, I came up with a hack of media queries to make the parent container just so wide that six, three, two or one item would fit horizontally, and then centre the parent container with margin left/right auto.

Man, I sure am glad that FUCKING MOBILE SAFARI no longer obeys my viewport scale rules. It's really awesome how ALL of my projects now focus in on text inputs and then zoom so that the site feels broken after that when the user scrolls away. This was the last little bit of control we had to make our websites feel like apps. FUCK

I'm generally new to front end development, couldn't keep up with the eco system even if I wanted to.

But what the fuck am I supposed to do when UX gives me mock ups in absolute units of pixels?

I thought best practice was for development was like vw viewport units of em units, because of the wrinkle of supporting different screen sizes and devices.

Is the general industry practice I'm supposed to use their general ratios and just get close enough? Like I don't want to dick around for diminishing returns trying to get shit pixel perfect, I don't have an eye for this shit to begin with.

I'm writing all the dev things I know in a docs site as a means to be hireable should I need to switch jobs.

I'm not gonna go too deep on how I'm doing it. One style I'm enjoying is making every article take only one page long, and if they take longer, maybe consider breaking it into another article.
Fuck long articles. Yes, that's a bit autistic.

But I will describe the challenges I'm finding (which are quite many) in further detail.

One of them is that words can be ambiguous. Production can mean the production environment but it can also mean production in plain english.
And there are tons of cases like this.

Because of this, I felt a lot of confusion in my beginner days. So it my objective to write this as to prevent as much confusion as possible.

Granted, I don't want to write "development for dummies". Software is complex. But because it's complex on its own, I don't want to add complexity to the learning process through obscure language usage.

"Fine", I say, "I'll disambiguate". But this means I find myself branching out very often into fundamental or commonly used software terms like "framework", "model", "scaffold", "algorithm", "viewport", "breakpoint", etc.

Another challenge is reaching good levels of completitude.
This means I have to explain that obscure CLI flag I never used in my life.

If I don't do this, then what makes my docs different than these superficial dev.to or medium posts? Nothing.
But trying to explain EVERYTHING about a software can generate a lot of frustration: I never finish.

It also makes me wonder "do I even know shit?". I think some amount of insecurity is healthy and pushes myself forward.
But at some point it's kind of making me feel like shit. Maybe I just need to keep learning.

I really hate doing all the tweaks for tablet and mobile on websites. No matter how hard one tries to design for mobile first and make the transitions as seamless as possible, there are always some “fiddly bits” that won’t behave. And so many devices with all their viewport width variations. Also, there’s the matter of people resizing a desktop browser to any width that might not be covered by the breakpoint ranges that specifically. One could write a hundred breakpoints and still not account for it all on some designs. It’s exhausting.

So I'm making a little CMS for a website generated by iWeb from Apple which is ofcourse shit. I just discovered that they include a 6000 lines javascript file with nu purpose except generating the menu from a feed.xml(which includes to other js files). And the most frustrating thing is that it lowers fontSize if you add more text than the viewport. Fucking hell. I'm looking for a way to dismantle this shit.

Are there other developers who have a version displayed in their test site? We have it now but as a FE i really dislike everything in my viewport that isnt needed or possible to find elsewhere. Feels like the oldschool commercial popup now being red and obvious.

There are so many.. but probably my worst was when I was building this project and optimizing it for mobile but for some reason when in mobile view, there was a slight white line on the right side when swiping right or zooming out (shouldnt be able to zoom out either).. checked all the media queries and viewport code and everything was normal so it drove me crazy for a few hours. Turns out, I had 1 little element slightly wider than the viewport but you couldnt tell by looking at it xD fixed the css, but still so frustrating.

@dfox, on Android, can the viewport scroll down once the comment button is clicked and the comment has been published? I like to see that my comment has been indeed published and I hate to scroll down to make sure. Just my 2 cents on improving the UX, :)

PM: We need to add "Under Contract" banners dynamically to listings on xyz.com
Me: No problem
[ ... a few minutes later ... ]
Me: xyz.com has been updated. Check out the listings and let me know if anything is out of place.
PM: The updates you made look great! How does this scale (in the most basic sense of the word; i.e. in the viewport) on abc.com.
Me: ? òįÓ ? ... that's a completely different site ... why would it affect it if you didn't ask for it.

I once added a scale css-transform with a media query targeting some specific Macbook to the whole <body> of a site.

Some designer came up with a pretty stupid navigation which wouldn't fit into that viewport, deadline was close and the customer wanted to see exactly the layout he had approved. Still feel bad about this :/

Chrome handles CSS animation on an SVG element with 500 nodes like a champ with an SVG graphic with outline animation over it.

Firefox barely animates the SVG then has tearing issues when a part of the SVG leaves the viewport and re-enters. Annoying AF and now a changed design.

I cannot take this anymore ... The picture on desktop and mobile is not crop equally ....... Please next time I receive that i kill myself. Im so tired of this shit

text-size-adjust vs viewport meta tag

So, I'm designing a mobile-first website with the chrome mobile simulator. I saw that when I put some text in it, for example a <p>, it will display very very small, and will not take into consideration the font size that I gave it, unless the <p> contains several lines of text. I did some research and I figured that this behavior is due to the text inflation algorithm used by mobile browsers and it can be stopped by using text-size-adjust:none. Is that correct? Then, the viewport meta tag. I figured that the viewport meta tag is used when a website it is not designed mobile first, and will help display the content properly based on the smaller width of a mobile devide. Is that correct? In conclusion, text-size-adjust with the value of none is used when building a mobile-first website in order to stop that inflation algorithm and help display the text properly, and the viewport meta tag is used when bulding a NON mobile-first website. Is that correct? Thank you

This is a question and a rant

I have to get temperature readings from an andriod app written in ionic angular to a webpage written apache wicket... No, I don't have any control over either stack.

The kicker is the wicket app isn't even run properly attached to a domain, it's just run from a box at the client and then the client machines connect through <server ip>:8080/appname

Which means I can't solve my problem by simply having the website and app on the same domain and then use local storage...

I have tried

Ionic
window.postMessage({ type: 'temperatureData', data: tempFormatted }, '*');

Test it from this page
<!-- index.html (web page) -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Page</title>
</head>
<body>

<h1>Temperature Data</h1>
<p id="temperatureData">Loading...</p>

<script>
// Listen for messages from the Ionic app
window.addEventListener('message', (event) => {
if (event.data.type === 'temperatureData') {
// Update the temperature data on the page
document.getElementById('temperatureData').textContent = event.data.data;
}
});
</script>

</body>
</html>

Which does not work, the page fails to pick the data.

So my rant is the situation. M question is does anyone have any ideas?

I had implemented an interval that was added when the viewport was active, and removed when inactive. This was to lessen the amount of ajax requests being done.

Though the little radio player was embedded at places, and thus the pictures didn't change at times.

I had to remove the inactivation of that interval.

In comes the new developer messing the repository with unreadable two space indentation in our backend codebase. I can understand it being useful to keep code within the horizontal editor "viewport" for stuff like JSX, but otherwise it's really fucking ugly and feels like the code is not indented at all

We're not using any tools for automatically standardizing code style yet, what do you recommend? If it's at all relevant, our codebase is in TypeScript.