Join devRant
Do all the things like
++ or -- rants, post your own rants, comment on others' rants and build your customized dev avatar
Sign Up
Pipeless API
From the creators of devRant, Pipeless lets you power real-time personalized recommendations and activity feeds using a simple API
Learn More
Search - "sizing"
-
Let me preface this by saying I'm not a designer.
While I can make individual bits of a site look good, and I'm actually pretty skilled with CSS/Sass, overall design completely escapes me. I can't come up with good designs, nor do I really understand *why* good designs are good. It's just not something I can do, which feels really weird to say. but it's true.
So, when I made the Surfboard site (that's the project's internal name), I hacked everything together and focused on the functionality, and later did a branding and responsive pass. I managed to make the site look quite nice, and made it scale well across sizes/devices despite being completely new to responsiveness. (I'm proud, okay? deal.)
After lots of me asking (in response to people loudly complaining that the UI doesn't have X feature, scale properly on Y device, and doesn't look as good as Z site), the company finally reached out to its UI contractor who does their design work. After a week or two, he sent a few mockups.
The mockups consisted of my existing design with a darker background, much better buttons, several different header bars (a different color) with different logo/text placements, and several restyled steppers. He also removed a couple of drop shadows and made some very minor styling changes (bold text, some copy edits). Oh, he also changed the branding colors. Nothing else changed. It's basically the same exact site but a few things look a little better. and the branding is different.
My intermediary with the designer asked for "any feedback before finalizing the designs" -- which I thought odd because he sent mocks for two out of the ten pages (nine plus a 404 page). (Nevermind most of the mocks showed controls from the wrong page...).
So, I typed up a full page of feedback. Much of it was asking for specifics such as responsive sizing on the new header layout, how the new button layout would work for different button counts, asking for the multitude of missing pages/components, asking why the new colors don't match the rest of our branding, etc. I also added a personal nitpick about flat-looking controls because I fucking hate them. Everything I wrote was very friendly and professional.
... His response was full of gems. Let me share a few.
1. "Everything about the current onboarding site looks like a complete after-thought." (After submitting a design basically identical to mine! gg!)
2. "Yes [the colors match our current branding]." (No. They don't. I checked. The dark grey is different, the medium grey is different, the silver is different, the light blue is different. He even changed the goddamn color of the goddamn LOGO for fuck's sake! How the fuck is that "matching"?!)
3. "Appreciate the feedback [re: overlapping colored boxes, aka 'flat'], design is certainly subjective. However, this is the direction we are going." (yet it differs from the rest of our already-redesigned sites you're basing this off. and it's ugly as shit. gg again :/)
4. "Just looked at the 404 page. It looks pretty bad, and reflects very poorly on the [brand name] brand. Definitely will make a change here!" (Hey! I love that thing. It's a tilted, dotted outline of a missing [brand product] entirely drawn with CSS. It has a light gray "???" underlay and some 404 text inside. Everyone I showed it to, coworkers and otherwise, loved it. "Looks pretty bad". fuck you.)
I know I shouldn't judge someone so quickly, but what the fuck. This guy reminds me of one of those pompous artists/actors who's better than everyone and who can never be wrong, even while they're contradicting themselves.
just.
asfjasfk;ajsg;klsadfhas;kldfjsdl.undefined surfboard another rant about the same project long rant pompous designer apples and asteroids design8 -
!rant
So nearly done with the work app and I need these images scaled accurately (it's for comparing pupils) my problem is I'd normally ask my brother to make the images but he is busy with uni for the next few weeks.
I'm just wondering is there a tool I can use that can rescale images (I have images from the iPhone app, and I gotta say I had to add in % changes despite the proper dpi sizing), I'm looking at the Android documentation but what's funny is in the listed resolutions OnePlus 3 wasn't included (along with some other newer resolutions) lol, and also Wikipedia for OnePlus 3 has the width and height switched (for some reason the author imagined the phone is also in landscape lol).
So do you guys know of something I can use? Programming is one thing but designer is another :/4 -
css quick maffs
so you did this:
.foo:hover {
transform: scale(1.1);
}
and now ugly scrollbar is there when the element is scaled.
No, don't do overflow: hidden. There's a better way. Instead, do this:
.container {
padding: 1rem;
box-sizing: border-box;
}
the element total width is calculated based on the width of its content. That's true unless you specified width and height explicitly (if you did so, you're a doofus, I'm sorry).
Scaling makes content somewhat larger. With border-box, paddings work differently with the total width.
By default, if you set width to say 100px, and paddings are 20px, total width will be 140px — it's your 100px of content plus two paddings of 20px. width property set the width of the content, not the total width.
With border-box, width property sets the total width. So if you set width to 100px and paddings to 20px, total width would be 100px, just like you set it, and content will be 60px wide — it's 100px minus 20px times two.
The key part is it doesn't end with explicit width. The algorithm remains. When some node is rendered, its total width is calculated. When you use border-box, the total width will stay the same even if your content grows by some value that is less than your paddings. So, your content was 100px, you scaled it, and it became 110px. Well, then that extra 10px will be subtracted from your paddings, and they will be 15px each instead of 20px.
No more ugly scroll bar. Yaaay!
aight bye8 -
I really enjoy my old Kindle Touch rather than reading long pdf's on a tablet or desktop. The Kindle is much easier on my eyes plus some of my pdf's are critical documents needed to recover business processes and systems. During a power outage a tablet might only last a couple of days even with backup power supplies, whereas my Kindle is good for at least 2 weeks of strong use.
Ok, to get a pdf on a Kindle is simple - just email the document to your Kindle email address listed in your Amazon –Settings – Digital Content – Devices - Email. It will be <<something>>@kindle.com.
But there is a major usability problem reading pdf's on a Kindle. The font size is super tiny and you do not have font control as you do with a .MOBI (Kindle) file. You can enlarge the document but the formatting will be off the small Kindle screen. Many people just advise to not read pdf's on a Kindle. devRanters never give up and fortunately there are some really cool solutions to make pdf's verrrrry readable and enjoyable on a Kindle
There are a few cloud pdf- to-.MOBI conversion solutions but I had no intention of using a third party site my security sensitive business content. Also, in my testing of sample pdf's the formatting of the .MOBI file was good but certainly not great.
So here are a couple option I discovered that I find useful:
Solution 1) Very easy. Simply email the pdf file to your Kindle and put 'convert' in the subject line. Amazon will convert the pdf to .MOBI and queue it up to synch the next time you are on wireless. The final e-book .MOBI version of the pdf is readable and has all of the .MOBI options available to you including the ability for you to resize fonts and maintain document flow to properly fit the Kindle screen. Unfortunately, for my requirements it did not measure-up to Solution 2 below which I found much more powerful.
Solution 2) Very Powerful. This solution takes under a minute to convert a pdf to .MOBI and the small effort provides incredible benefits to fine tune the final .MOBI book. You can even brand it with your company information and add custom search tags. In addition, it can be used for many additional input and output files including ePub which is used by many other e-reader devices including The Nook.
The free product I use is Calibre. Lots of options and fine control over documents. I download it from calibre-ebook.com. Nice UI. Very easy to import various types of documents and output to many other types of formats such as .MOBI, ePub, DocX, RTF, Zip and many more. It is a very powerful program. I played with various Calibre options and emailed the formatted .MOBI files to my Kindle. The new files automatically synched to the Kindle when I was wireless in seconds. Calibre did a great job!!
The formatting was 99.5% perfect for the great majority of pdf’s I converted and now happily read on my Kindle. Calibre even has a built-in heuristic option you can try that enables it to figure out how to improve the formatting of the raw pdf. By default it is not enabled. A few of the wider tables in my business continuity plans I have to scroll on the limited Kindle screen but I was able to minimize that by sizing the fonts and controlling the source document parameters.
Now any pdf or other types of documents can be enjoyed on a light, cheap, super power efficient e-reader. Let me know if this info helped you in any way.4 -
FFFUUUU!!!
Damn Windows april update!
After a LOT of problems with drivers, bluetooth, etc. it even partially corrupted the font of a program, the console shows a list of data from a medical image database so i had a micro heart attack when i first saw this tinking the database was corrupted (i was checking out a problem)!
I bet it's the "smart" font re-sizing!!!5 -
A linux distro with all popular apps rewritten from scratch to use a single UI toolkit and consistent default keymaps, for a smoother desktop experience.
It's one of the reasons I have a tough time switching full-time because all the apps I need use so many different toolkits/versions/random keymap variations (inconsistent font-sizing, ctrl+tab vs ctrl+pgup, etc) that even the thought of switching makes my head spin.
Love the way GNOME's been going though (Except for their default keymaps. Ctrl+PgUp for Next Tab? Srsly?), and KDE is getting more consistent.
And yes, I know you can modify keymaps, but just wish they'd stick to widely used ones by default).1 -
Another day, another time exporting svgs from Figma, sizing them, and exporting them to png into our app as the developer.
But no, I get it, what designers do is extremely taxing on the brain and any additional steps must be excruciating! Let me do anything that requires even the lowest of double-digit IQ! After all, I'm your local resident full stack clown™️!
🤡4 -
I can fucking believe this is still the norm.
Micro selection borders for window / panel
sizing are the worst, please for the love of
god, MAKE THEM THICCer.
No need to make them visually wider,
just let me select it more easily, PLEASE.4 -
If some of you front-end devs haven't used CSS-Grid yet and are still annoyed by using nasty position and JS hacks to place stuff, I strongly recommend you to take 1-2 hours and read this incredibly useful guide for CSS-Grid:
https://css-tricks.com/snippets/...
and this one for Flex:
https://css-tricks.com/snippets/...
These two links have saved me PLENTY of hours struggling with all kinds of responsiveness and placement/sizing issues.1 -
Software Engineer
Nerdious Geekius
The elusive Software Engineer is a nocturnal creature, rarely found at their desks before 10 or 11 in the morning, but often staying late into the night. They dislike being interrupted while at work, and it theorized that their penchant for twilight hours is an evolutionary adaptation to reduce breaks in their trance like state of coding.
Not surprisingly, Software Engineers are solitary creatures, except for occasional gatherings called "code reviews". In these gatherings, engineers gently pace around a clearing, sizing up each others work. Although occasional battles will erupt, they mostly end without injury and the engineer will retreat to their desk and continue to hibernate.
Fun Fact: Software Engineers have been know to kill each other in brutal fights over identation styles -
Been working on a particularly elusive HTML menu sizing glitch for over a year now, trying to get it to appear consistently enough to track down its cause. Finally a) got it to happen in a browser so I could hit it with Chrome Inspector and b) figured out what was probably causing it and fixed it.
And then...
*happens again*
*cannot reproduce the issue, but bossman can*
me --> *commits suicide*5 -
ChatGPT is so much better than Google:
instead of wasting my time by linking to unhelpful / outdated / unrelated StackOverflow resources, it tells me to do the work by myself right away:
> To ensure consistent pseudo-element width across different browsers, including Safari, you can follow these steps: [...]
> (some basic HTML/CSS 101 seemingly quoted from a 2015 textbook)
>
> It's important to note that browser behavior might vary due to different rendering engines or versions. While following best practices helps achieve consistent results, you might still encounter small discrepancies. Cross-browser testing is always recommended to ensure your design looks consistent across different browsers, including Safari.
>
> For any specific issues you encounter in Safari, consider checking for known bugs or quirks that might affect pseudo-elements and their sizing. Online resources, developer forums, and documentation can provide valuable insights into Safari-specific behavior and workarounds.3 -
Rant: I hate when clients complain about sizing so a team member changes my entire heading system just to change header size without going over it with anyone else I. The teach damn if it breaks shit other places or scrapped many hours of mobile testing, even better then changed class names some places ignoring our frame work and breaking mobile.
-
Never heard of clamp(), a css thing for responsive sizing based on min max values. I shall certainly be investigating this on my next project. I ca’t be the only one who has never used this can I?
Plus is supported on all modern browsers!
https://developer.mozilla.org/en-US...8 -
The Project Manager changed the project from scope driven to date driven with the teams giving him only t-shirt sizing estimates. Wish us luck...
-
Our sprints are 3 weeks. The first sizing for an user story is 1.5 weeks/1person. 2 sprints (6 weeks) after 2 of us are still working on that undersized shit...