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
-
I put an Easter egg into a product, that if you enter the string "final countdown" into the stock code search field, it plays a YouTube vid of Europe's "The Final Countdown", in a hidden div. It's an in-joke for a few people in the company.
A well meaning maintainer with no sense of humour or judgement takes over and goes on the warpath against any hardcoded strings. The secret code gets moved into a config file.
A third developer changes the deployment script so that it clears any configs that aren't explicitly set in the deployment settings.
So the secret code is now "".
Literally every PC in the stock buying department is now blaring out "The Final Countdown" at top volume.
...Except none of them have speakers, so it remains this way for over a year and two more changes of maintainer.
I just noticed this afternoon and quietly re-hardcoded the string. The buying dept.'s PCs will silently sing no more.
32 -
Me: I’ve been in the web since 2006, of course i know html,css,javascript.
Also me: Google how to center a div.28 -
Sometimes I feel frontend development is like ancient magic:
Backend Dev: Oh no, I can't align this DIV properly.
FE Dev: No worries!
* Casts Flexius Boxius on the DIV *
* Div aligns slightly better *
BE Dev: But it's not centered!
FE Dev: No worries!
* Casts Marginis Automaticus! *
* Rolls natural 1 *
* Everything collapses *
* Website is on fire *
* Product owner cries *
FE Dev: No worries!
* Casts Flexius Boxius level 5 on the parent div *
* Everything looks beautiful *
* People are in awe *
FE Dev: You are welcome!
* Adjusts his robe and leaves *8 -
Another rant about my gf
She tried HTML and well, cause there are h1, h2, h3... instead of classes, she used div, div2...
17 -
Time spent on Web Development :
1% : {
actual productive content and features
}
99% : {
Please. All I want is for this div to vertically align in this other one. Is that too much to ask?
}13 -
Hey frontend developers. If you do THIS:
z-index: 1000;
...expecting that it will ensure your div will be on top no matter what, I'm about to fuck your world up. Check this shit out:
z-index: 1001;7 -
"Who the heck is the parent of this child?" -
I ask to myself when a button doesn't position itself relative to its container div as expected..
:/
In the end, it looks as it's supposed to, but the way it's done is just bad
4 -
I AM MISSING A FUCKING DIV TAG OR SOMETHING LIKE THAT AND I CANNOT FIND IT. MOTHERFUCKER FUCKING FUCK.19
-
This is not a rant but this is great
I GOT THAT JOB OFFER YES! AT LEAST I WON'T SEARCH FOR JOB AFTER OUR GRADUATION. I LIKE THIS FEELING YES!!!6 -
After 3-4 FUCKING hours I finally found a bootstrap thingy which properly centers a div!
In my defense, this shit is all Chinese to me so it's copy-paste-lets-hope-this-works 😅25 -
When I was at my lowest, my buddy and me sat in front of the screen, and learned how to code from Bucky Roberts. A few years later, I finally got a proper programming gig, but never stopped freelancing. My buddy on the other hand, studied Computer Science and stopped coding for a while after graduating. 5 years later, today we sat in front of the screen and learned how to code together again. I think he has no idea what he has led me to. If he had not made me code, I would have remained the same boy from the streets. But it is not about me, I have heard so many incredible stories. The more codes you write, the more errors you'll encounter. The more errors you try to solve, the bigger the community grows. It's nice to know, there is a group of people out there, who will spend rest of their lives writing, thinking and interacting. Also, trying to figure out how to centre that piece of shit of a div with CSS! I mean wtf!5
-
No matter how many times I learn how to center a text vertically in a div, every time I have to spend half an hour just looking for a solution17
-
I used to have this habit of developing with questionable placeholder content.
console.log("boobs").
<div>why the fuck am I still waiting for your fucking content, dave</div>.
<img src="drunk_boss_dancing_at_xmas_party. jpg"/>
One slips through, eventually.
Now it's all boring lorem ipsums and stock photos of smiling managers shaking hands...8 -
Everyone when writing HTML:
<header></header>
<section>
<ul>
<li></li>
</ul>
</section>
<footer></footer>
ME:
<div><div></div></div>
<div><div><span><div></div></span></div></div>
<div><div></div></div>11 -
Me: hello IE, you see that div with id?
IE: ...... ..... .... yes.
Me: would you like to set it as absolute and stick to bottom?
IE: ........... i don't know...
Me: but all the other guys like chrome and firefox are doing it.. come on it's not object-fit: cover; just absolute positioning. Please.
IE: ......... I can't!
Me: why the fuck not??
IE: ......because I don't see the id...
Me: FUCK YOU YOU FUCKING PIECE OF FUCKING SHIT!!!!!
IE:...............12 -
FUCK CSS!
I spend more time positioning a single button than learning a frickin framework!
I gave up trying to make a div the same height as its parent. No clue why height:100%; doesn't work!20 -
"I'm going to manage to make this webpage without so many divs"
"Oh. I need a div there"
"There too"
"Yes, and there ofc."
*looks back at markup*
*sobs*6 -
Ok, people who invented CSS... which seems more intuitive and easier to read?
div {
margin-right: auto;
margin-left: auto;
}
Or
div {
center-this-damn-div: true;
}12 -
I was tasked with maintaining a handful of chemistry simulations for the web. First things first, replace these outdated links and turn them into Bootstrap buttons that work on mobile. Wait, why do all of these look so horrible on mobile? nothing's scaling properly. *looks at fucking 1,000-line CSS file* The old developers used position:absolute for absolutely EVERYTHING. And I counted one div on the entire page. This is why you don't trust chem engineers to do your "web design" #FuckDreamweaver
7 -
Oke so this just happened...
Spent 30 minutes figuring out why the f**k a div was vertically centered within another one.
Apparently margin:auto within a display: flex not only centers horizontally but also vertically.
I remember the days when i spent hours vertically centering sh*t. What universe are we in?12 -
Interviewer: Hello my name is Alyssa from Sheeple and my pronouns are she/her
Dev: Oh yeah I saw that in your email
Interviewer: Ok well I am just letting you know they are still the same
Dev: Thanks for that.
Interviewer: What are your pronouns?
Dev: div/span
Interviewer: Sorry?
Dev: he/him
Interviewer: Oh…ok. Let me know if that changes.
Dev: I promise you it won’t
Interviewer: Well you never know!
Dev: …46 -
Me: why are you using so many break tags?
Intern: Its the only way I can position this div below that form.
Me: *facepalm*
11 -
The idea was simple. Create a div.
Add two 50% div's inside. Float them. Add clearfix to parent.
Everything was fine.
Noticed that one of the childs had a height bigger than the other. But due to an adaptive design, setting static heights did not work.
Simple fix. Add a height to parent div and set overflow-y to hidden.
It didn't work.
Tried using the legendary !Important (a.k.a. not important but important.) Didn't work. Set position to relative, set static height. Set the childs to absolute position with height 100%. Problem solved.
No. It. Didn't. Fucking. Work.
Tried every possible css combination could could fucking think off.
After 15 minutes (8 hours in dev-stress mode) realized the clearfix changed the div DISPLAY TO FUCKING TABLE. A TABLE. FUCKING TABLES CANT HAVE FUCKING HEIGHTS FUCK.
Anyway. 6 years after my first clearfix. I learnt something new about the code that saves my life every project.6 -
Today I:
Me: "You wrapped 2 p tags and one div inside a button tag....why?"
Other dude: "What do you mean why?" * in condescending tone
Aaaaaaaaaaaand
I lost my shit.
To make things short. My manager told me I have to try harder to not speak to people in intimidating ways.
In all fairness...mr "associates in programming with 0 css experience" WAS condescending when I asked him why he did what he did.
The little shit earned it. And he will probably think twice about his damned tone when speaking to me.29 -
-Dev support group-
Me: Hello, my name is div.
Other Devs: Hello, div.
Me: Its been 3 days since I last coded...
Other Devs: 😲7 -
Here's what I saw today
To add space between two rows of images.
<div>
//A row of images
</div>
<h1 style="color:white">a</h1>
<div>
//A row of images
</div>11 -
Good to see instagram move to python3 without an exception. Literally that was smooth. Cheers to those who think Python is not scalable. 95 million photos on daily basis. 400 daily users.
https://thenewstack.io/instagram-ma...5 -
My morning is starting off with a 40,000 line code review of a php project....yeah how's your morning going??!??!!??8
-
WHAT THE FUCK
WHY DOES SHIT RENDER DIFFERENTLY ON CHROME AND SAFARI
I SPENT A LONG ASS TIME TRYING TO MAKE A SMALL DIV PERFECT BUT FUCK ME IT ONLY WORKS ON CHROME
AND THE ONLY THING THAT WORKS ON SAFARI IS SOME HACK
WTF KILL ME I DONT WANT TO LIVE ANYMORE16 -
twitter: good job, let's promote your profile, but you have to pay us.
devrant: awesome job being involved, here some stickers!
found a much better community3 -
I DID IT :D
I VERTICALLY ALIGNED A DIV IN CSS
I'm a noob in front-end development, I usually use bootstrap but now I did it in vanilla CSS inside ReactJs =D
or is it lol, I don't know, I used these:
position: "relative",
top: "50%",
transform: "translateY(-50%)"
source: https://stackoverflow.com/a/441616615 -
Me every time I have to adjust the css:
*center that div*
*hit refresh*
Fuck, now that button is over there.
*adjust the padding and kajigger with the margin a little*
*hit refresh*
Ah, I'm an idiot. I forgot to set the display to inline-block.
*adjust the display*
*hit refresh*
WHY THE FUCK IS THE BACKGROUND RED NOW??!?!?!?10 -
full stack web development in 2017: mvvm model, api for backend, parsing on frontend
me: <?php echo "<div>hello".$name."</div>" ?>9 -
Productivity hacks:
1. Make sure the client understands that you wont be taking there BS.
2. Remind the client that the fact they know HTML means fuckall and that you wont be taking advice from them about all the javascript libraries you are supposed to use.
3. Tell PMs to be decisive and think before making decisions.
4. Fuck windows updates. Use linux/mac.
5. Keep a loaded gun on your desk to deter any person from disturbing you when you are in your zone.
6. Use the gun to end pointless meetings to decide the background color of some div on the website.
Use at your own caution though.6 -
Yesterday a colleague of mine told me that another colleague has done this in his web application for a subject:
For checking user and password, he did not query a database, but instead he checked information in a HIDDEN DIV in the html page.
Reason: "this way I don't lose my precious time".
I think of that and I'd like to punch him. People like him are the reason websites in Italy suck and my University web infrastructure sucks (he worked as intern on that).
My. God.7 -
!rant
A wild "Using this website in incognito mode requires a paid subscription" blocking div appears
Normal people: okay... *proceeds to exit incognito mode*
Developers: huh.. Bitch please.. *inspect element, hide blocking div. Select html tag, remove "overflow: hidden". Profit*
Why would anyone want to block surfing incognito anyway? They should be encouraging it actually..
PS:, While writing this, wondering if content for subscribed users is also locked this way.. Now that would be hilarious.4 -
I'm internally moved from envy feelings against the very first users of StackOverflow.
The ones that got tens of thousands of upvotes for questions like "how to set the width of a div element?"3 -
Why does CSS never work the way you'd expect? All I want to do is align something to the bottom of a div. No. Will not happen. You'd think it might be something simple as 'v-align' or 'align: bottom' or 'fucking put it at the bottom: now;'
No, it's never that simple. I try every result I can find from googling. Nothing. Simply does not work.
How about trying to keep a div to a square when you resize the page? That should be simple? height = width right? Fuck you. Ha hahah, no you have to implement some horrendous arcane hack involving fake elements and other bullshit.
You finally fix one thing and everything else you had working is now broken.
...and then some fuckwit comes along and goes "Oh, CSS isn't hard..." and it takes everything you have not to beat them to death with your rubber duck.
What the hell is wrong with CSS? It's not even programming! It's just pure, sadistic hell! FUCK CSS!!!!14 -
It's 2017.
Why is vertically centering a div still so stinkin hard?
Yeah yeah ik what you will tell me, "use flexbox".
Well guess what,. I HAVE BEEN TRYING TO FOR THE PAST 6 FUCKING HOURS!
I've gone as far as to copy code from 20+ different websites advertising working solutions. My tab bar looks like the fucking rockey mountains!
My main problem is that flexbox on chrome is not accepting ANY % values.
Now if you'll excuse me, I need to go kill myself. YAY! 🤗29 -
client: We need a system that will monitor the items from warehouse X from a distant location
us: Okay then first, we need to setup a server for that. So, we need a downpayment for labor.
client: I'll pay you when the system is done. 100%.
us: ...
we don't shit money to handle the costs given that we're still starting out our business. Fts.4 -
Spend quite a while at work trying to get two divs inside a centered div next to each other and especially get them the same height as the parent div.
Got it working after numerous tries, was going to take the code home to continue.
Forgot to take the code home, have to start over again and I hardly understand CSS 😥
Fuck me. (Writing a new service thingy by the way)12 -
One of questions in short test that we give to interviewed frontend devs is:
"How would you center a <div> horizontally with CSS?"
So many still answer with <center> ...13 -
Oldschool CSS was not much fun, but I never understood how this made it any better:
<div><div><div><div><div><div>Bootstrap</div></div></div></div></div></div>
I always forgot a row, had cols inside of cols, forgot how form-groups worked, or found other ways of messing up the whole layout.
Instead of complex CSS, there was now this new complex language entirely expressed through the nesting of layers upon layers of divs. It was like LISP's brackets, but more verbose.
That was the moment I realized that fullstack is bullshit, that there are intrinsic talent differences between frontend and backend devs, and that it's OK to focus on a narrower but deeper field.8 -
git commit -m "fixed bug where div wasn't resizing with window size change. Next I'll work on new bug which makes it so the pages won't load at all"
3 -
I just found this bit of code in our product :P
setInterval(function () {
$("body").find("div, td").replaceText("oldProductName", "newProductName" );
}, 50);10 -
For those of you tired of boring old div soup, one of my classmates has some new and innovative span soup for you to try!
8 -
I see too many back-end rants against front-ends.
Should we talk about table layouts, malformed html, programatically generated spaghetti wrong markup, css absurd class naming, infinite div wrapping (div-itis), awful usability, poor legibility, terrible typography, wrong color palettes and user-unfriedly design? To name a few horrors i've seen so far.
Some people won't admit that their contempt against HTML and CSS being 'not real code' actually hides their inability or unwillingness to learn it. Or they need the feeling of superiority.11 -
Spent an entire day trying to fix a major bug that made the entire application fall over... It was an unclosed div tag. Literally one missing / can cause so much pain!3
-
GoodGuy BroCow
Senoir problem
2years back
Senoir dev was assigned to make a webapp for billing
Dude uses dreamviewer and writes code like a bitch
Phpmysqljqueryhtml whole thing mixed very badly and undocumented
His function name format fun_1()
a simple update cost him a day,
Told him to use brackets atleast and also a framework ,guy denies
Days go by
He learns a lot of stuffs from me ,like how to use inspect in chrome lol, how to use sqlite for small projects , and orm and frameworks.
He used to pin his mistakes on me, so that boss gets angry on me
Then i quit the job
2 years went by
Now he is unemployed, nobody wants a 24 year old plain php coder and template editing web developer
Anyway I hired him, he was my first senior, whatever he did,it didnt matter to me, bcoz i remember
the days we spent on the same hall right next to each other coding in php,
days we brainstormed to fix a div
Also the days we ate lunch and breakfast together6 -
One of the many problems with AWS free tier is the obfuscation of expenditure by design. This is NOT OK.
17 -
Am I the only one that gets fucking pissed when others write unnecessary <div>s?
I know sometimes it's necessary for styling, but my coworkers do it because it's easier to add a new div than extending the style of an existing element.
What's worst, when I do it they reject my PR saying to create a new div instead. Fucking fuck off.5 -
I am not a front end developer. Don't have the skill set, but I am learning. Work assigns me an "easy" task of modifying someone else's angular code(with all those <div> tags) to change some functionality. If it was well formatted, easy shit.
WHY THE FUCK DID THE PREVIOUS FUCKER INDENT LIKE THEY HATE ME? PARENT TAGS ARE FARTHER OUT THAN CHILDREN TAGS. SOME OF THE TAGS ARE 10 TABS FROM THE LEFT, WHILE THEIR CHILD IS ONLY 2. IN ADDITION, ALL THEIR CODE IS COPY PASTED FROM OTHER FILES, REFERENCES CONTROLLERS FROM OTHER PARTS OF THE CODE IT DOESNT NEED!
I am tempted to kill it with fire, find the person who wrote it(on a different continent), kill them, and then rewrite the whole thing in a language I am still learning. FUCK!2 -
CSS - Separate style from content...
Yeah... More like creating divs to make that fucking div aligned.
Straight from table hell to div hell2 -
boss: wish there was a way to go back to older versions..
me: there is, it's called git, I can show you how to use it!
boss: nah we will just keep using the sync on Dreamweaver
me:....the fuck?!2 -
Followed lectures from Udemy, build a burger 🍔 with div again!
The entire course build burger multiple times with 400+ videos... 🤦♂️
Is it really a thing? No matter what frontend framework you pick, you got build a burger with it 🤤6 -
Dev’s then: “Let’s make a new software that will revolutionize the world!!!”.
Dev’s now: “How do I center a div in CSS?”.13 -
Sweet mother of unlogical fucking gods.
How does this even make sense
😩🔫
<aura:if isTrue=“{!not(empty(v.errorMessage))}”>
<div>{!v.errorMessage}</div>
</aura:if>
Ps: the ! Does not mean “not” 🤪1 -
human : Merry Christmas :)
js : console.log("Merry Christmas")
python 2 : print "Merry Christmas"
python 3 : print ("Merry Christmas")
bash : echo "Merry Christmas"
c++ : printf("Merry Christmas")
java : System.out.println("Merry Christmas")
html : <div> Merry Christmas </div>
add in for your favorite languages...20 -
You spend 2 hours debugging why content not showing up and end up seeing whole div class being
display: none;4 -
Making a small update to an ionic app then spending a whole day trying to figure out why a button doesn't work. Tried everything to fix it and got no error messages.
Finally discovered it was because the button was inside a label and not a div.
Yeah, fun times. -
Working with a client on his "superior idea" and suddenly this happens: (longer rant)
tl;dr;
Client wanted me to move a div by 3 millimetres to the left and blamed me for not being capable of doing so while giving him a nonsense about different resolutions and screen sizes. (Use a ruler, DUH)
Me: Here's the updated design layout as our designer specified.
Him: Looks good but it needs to be moved 3 millimetres to the left
Me: *Confused as hell* - Wait, did you just said 3 millimetres?
Him: Yes, is that a problem for you?
Me: *Amazed* Well, yes, you see, we don't measure in millimetres. We use pixels.
Him: Ahh, can't you do anything right!? Why do I have to deal with your nonsense of telling me that this is not impossible? Just take your god damn ruler and put it on your screen, then move it 3 millimetres to the left.
Me: You do realise that every person has a different size/resolution monitor so it won't work?
Him: I don't care. Just do your god damn job or i'll find someone else to do it.
*
Story continued in such manner - we spent an hour on skype moving the stupid <div> around until it hit his 3 millimetres mark.
*
His: See, you could do it.
Me: *Sends him screenshot of my own screen (his was 1024x768, mine 1920x1080) where page is broken and not aligned*
Him: Oh come on, you break every god damn thing. You are the worst. I'm going to find a better one. *hangs skype call*
Him: *3 days later* Hi, so, umm, I've talked to other developers and they said it's impossible to measure in millimetres. Can you revert those changes we did?
After all this I've fully realised that this person is sits at computer very rarely and does not how it even works...5 -
If you are teaching a newbie HTML and basic JS using ES6/ES2015 features, the "Hello World" app probably would be:
<!-- index.html -->
<html>
<body>
<div id='container'>
<h2> Enter a Name and Hit The Button</h2>
<input id='name'>
<button id='change-name'>Say Hello</button>
<h3 id='name-display'></h3>
</div>
<script type='module' src="./index.js"></script>
</body>
</html>
//index.js
import {sayHello} from './hello.js';
let displayArea = document.getElementById('name-display');
let input = document.getElementById('name');
let button = document.getElementById('change-name');
button.addEventListener('click', () => {
//displayArea.innerHTML = "Hello World"
displayArea.innerHTML = sayHello(input.value);
});
//hello.js
export const sayHello = (name='World') => {
return `Hello ${name}`;
};
Source: https://github.com/benmccormick/...7 -
Is it just me or what. I had begun learning web development (but prefer C, shell scripting, Linux... ).
One thing that amazes me - besides having to learn 1356367626785576 technologies to get something done and the fact we get a fresh new amazing framework every 0.00000000000234 seconds - is CSS.
Amazing, I made a navigation bar where I wanted the items to be displayed in the horizontal position, so I
.navbar li, a {display:inline-block}
Works fine.
Next day I'm doing the same from scratch, doesn't fucking work. I look the previous design, HTML structure looks identical, I only use a different font face and colors.
After a while I randomly decided to put a <div> around the a element in order to do something else, update the page and... Voilá, text is in line.
Like... Wtf.
I'm like fuck it. No way I want to work with this shit, let's go back to shell.6 -
You think HTML isn't a programming language? Tell that to the guy wrote js to check if a hidden div contained the word True inside its tag before it fired.12
-
Was creating an interactive map through Google Maps API. The map wasn't displaying at all on the website. Spent 2 hours trying to fix. Just realized I've not given height to the map div :-/1
-
How do you get tons of stars on Github in two steps?
1. Make a website for noob devs who cant tell the difference between a div and span.
2. Guide them to sign up on Github and ask them to give your repo a star as part of the process (dont forget visual guides)
Voila!
Now you get shitload of stars from people who dont even know what the fuck github does.5 -
First html file I opened today had a
<div style=‘display:block;’>...
I knew it was going to be a bad day.7 -
Every Website seem to has some glitches... and you can't ignore them like non-web-devs do... i wish i could look up the menu on a local restaurant-website without going crazy about the buggy slider or the misaligned address-div
-
What do you do when a modal tries to cover up something you're reading?
Developer console. Delete div. *Flip off Screen * Ahh, z-index: 300000, how quaint? Delete class. Continue reading. -
The 'i am a total noob' feeling is real fiah like a mix tape right now. last week on a personal project i had the problem of placing a div within a div and the buttons not being clickable. i fixed it by fixing the positions of the elements. today the same thing but will a scrolling div and f*ck me right i just had to forget the solution. now i have been stuck for hours trying to figure out the right way and fooling around with no solution. learn your fundamentals.
4 -
<!-- Dear future me: I swear to god, if you play with this, I will claw out your eyeballs and eat them for lunch. You've been warned. -->
</div>3 -
So I own a small business that is a licensee of about a few hundred other ones. I wanted a mail list from the corporate office and they wanted to charge me. (we already pay them hundreds if not thousands a month) So I wrote a python script to scrape their website and get the info for free. I love programming!3
-
So this i quite a big project, hundreds of files everywhere, pages are rendered using multiple files.
This is one of the latest created page, it was made by my boss, and it just give me the creeps.
I REALLY don't know how he always comes up with shit like these.
I just hate having more than 5 closing tags in sequence...
6 -
Just spent three hours debugging why a jquery didn't do some actions with a div through its id. MAYBE NEXT TIME I SHOULD CHECK FOR FUCKING DUPLICATE ID'S AND REMEMBER COPYING SOME CODE THE DAY BEFORE WHICH CONTAINED THAT FUCKING ID. GODVERDEGODVERDOMME.1
-
I had to remove the inherited elements of a div element in jQuery so I googled "kill children".
took me a while to understand ...2 -
CSS Vertical Alignment:
div {
display:flex;
align-items:center;
}
This is not a problem anymore, so can we stop pretending like it is?5 -
I can't use Javascript object destrucuring in react components because a colleague doesn't like / understand it for some reason.
So instead of:
({ something }) => {
return (
<div>{something}</div>
)
}
If have to use
(props) => {
return (
<div>{props.something}</div>
)
}
Its no big issue, but I hate it.8 -
...
$html .= '</li></ul></div>' . $label . '</div>';
return new JsonModel(
'status' => true,
'html' => $html
);1 -
I just remembered a weird fix in a bug, some old developer hide the error message using css, placing it in a div then just used display none. LOL4
-
Coding + 7 pints of lager and a gin martini = an hour shouting at a div and then realising you're missing the dot.2
-
the happy moment when you get turned down by agencies over the phone, when they "don't think you are what they are looking for" although you have 4 years commercial experience and are 23 years old, by an agent that fancies the term API and WordPress... fml3
-
Story time.
I worked on a project recently where the HTML was written just _perfectly_. Div elements were exactly indented as the blocks on the browser window.
CSS classes were self explanatory and altering them didn't introduce any new kind of bug on the browser window.
Introducing a new div block with CSS classes fit perfectly in the window along with responsiveness on different screens.
JS was also written in a self explanatory way.
It was such an Italian Chef's kiss grade of work that I just sat back and admired the glorious work for 10 mins. Totally deserved it.8 -
Since I am running a home server and want to be updated on what the stats are, I did create a webpage where I can get the "renewed" information via ajax (not with jQuery) in every 5 seconds. The thing is that I don't get the "new" information. It's still the old information that keeps reshown in the div.
I checked the server.php file. It keeps getting regenerated. Since, that is the case, it isn't the server to blame. But more likely the client.php is the one that is causing problems. May someone know how to deal with that?
23 -
Life is a constant battle of not knowing whether I want to quit programming forever, or if I just need 8 hours sleep.1
-
I love Google Docs.
I hate their white-only style.
I love writing at night...
So I made myself a userscript to help my eyes when working late. Unfortunately they have css classes' names constantly changing (dynamically generated) with each update of the source code and I was too lazy to go full javascript on them because it'd make a lot of "getElement..." stuff or even jQuery only to change the theme.
It wasn't like full broken page, no... only some elements were broken, but in places it'd burn your eye out in 2am when the theme is almost black.
I felt like I have to do something, because I don't want to lose the Docs at night, but writing on their email list would be like talking to the wall. Then they updated again, some elements changed again and I was like... man, fuck you!
div#doclist > div > div > div > div > div > div > div > div+div
div#doclist > div > div > div > div > div > div > div > div > div > div+div
It works, if you are interested: https://github.com/KeyWeeUsr/...18 -
Literally swear I despise flash. So, had a small job to update a page that consisted of a list of members, clicking on a members name will populate an adjacent div with 3 or 4 contact names. Simple stuff on the face of it.
However, it turned out the previous developer had decided to use flash for this, meaning there is a horrible .swf plonked into the page.
I mean seriously, why can't things be simple? :(2 -
I have a meeting today with our UX designer to explain why we can't provide a Photoshop resizing functionality to a block level element inside a content editable div. That will be hard.2
-
Today one of my friends asked me how to change a div background color and I sad that it was in the CSS and he told me he didn't has CSS...2
-
Sometimes I come across this:
<div id='myDatePickerForm' ng-show='showDate' ng-hide='!showDate'></div>1 -
When your self-proclaimed "senior frontend web developer with 4 years experience" colleague asks you for the difference between "div .x" and "div.x" in CSS. That is when you understand why so many developers don't like having to work with designers.9
-
Okay, Google. Stop this.
I'm very upset. Drive applications have gotten slower and slower over time on every single browser that isn't chromium based. This isn't their fault. You can't make your application, that tons of institutions pay for, gradually slower on every browser that's not yours. This never used to be a problem, and now it affects everyone *but you*. It's highly suspicious given your track record with YouTube. Hidden div over the video to prevent hardware optimization. What the hell?
You used to be the only big 4 company I had some trust left in. Over the last few months, I've lost it.11 -
ARGH!
Since that privacy cookie policy change thingy, every goddamn site pops up the dialog asking about it.
I just want to fucking read the page, quickly; get off my screeeeeeen!
There should be a standard to add something that lets the browser tell the page if you accept cookies or not, and which options to use; or at least make all the sites use a specific attribute for the elements of the div, so it can be automated (I know this is a dream).5 -
*adds border to the bottom of a fucking div*
Why, hello there Mr. FUCKTARD HORIZONTAL-FUCKING-SCROLLBAR. That totally makes God damn fucking shittard fuck'ala'fucking fuck-damn'le-shit-fucka-shittard sense.1 -
I've been given an intern to help me with my work (lol it's not helping) and she knows almost nothing of web dev, not even what Nodejs is, I had to explain it and guide her step by step on how to install it on her laptop. On her CV it says she has JavaScript experience, but she cannot even put together a basic HTML page, she asked me what a div is. As far as I know, HTML, CSS and JS are pieces of the same pie and you cannot really work with JS unless you also work with HTML and CSS. I think she lied on her CV and I need to tell my manager.
My question is, is it normal to know JavaScript and not know much about HTML and CSS?12 -
one of my friend is new to frontend dev.
and he's trying to center a div (text).
using position absolute and relative.
It's not working BTW.
We're communicating over text.
Must be loosing his mind.
He'll finally understand center div memes.6 -
I always spend minute or two to delete "Hey It looks like you are using ad blocker" popup div and some overflow-hidden css class by pressing F12.
I'll do it again and again and again...
Fuck those annoying advertisements.13 -
Why do front end developers like to write their HTML/Component markup like this:
<div
id="test"
class="test"
>
Test
</div>
That lone > bracket absolutely irks me! Looks ugly! I prefer the Android style:
<div
id="test"
class="test">
<span>Test</span>
</div>
👌clean27 -
Pretty late for week 86, but I just remembered my first paid freelancing web dev work.
While not my worst experience, it was a pretty horrible task given to me...
I was helping someone implement a new design on a pretty outdated (visually and technically) PHP site.
I was getting paid crap. The guy wouldn’t even let me look at the HTML, let alone touch it, so definitely no PHP work, either...
Literally the only code I was allowed to write was CSS. So, I’m supposed to be restyling, but I can’t change the structure at all, or even ADD CSS SELECTORS.
Fine, I’ll just make your site fragile as fuck by using nested relative selectors.
#main:nth-child(3) > div > div > div > button
As if that wasn’t bad enough, there were some pages...I shit you not...that had A DOZEN LEVELS OF NESTED TABLES.
WHY. DEAR GOD WHY.
For a simple checkout page.
So, on some pages I was literally trying to access elements through relative selectors, nested within levels and levels of tables. FFS
Needless to say, I did not work for him for long. Even if I wanted to deal with that crap, my time is much more valuable than what I was being paid. -
I'm so glad that I got a CS degree learning Data Structures, Algorithms, Operating systems, Databases, Linear Algebra, Software Engineering, Networking and many more...
How else would I have been able to center a div with CSS or change the Background color?2 -
So everytime I get tired at work I always run 'composer update' so I have an excuse for doing nothing.
"Heyy get back to work!"
"I'm running composer update"
"Okay." -
/rant
When you spend longer trying to work out why your background <div> refuses to cover the entire page, than you spent coding an entire user-authentication system in TypeScript for Angular 2. -
Do I know how to use flex? Mostly.
Do I know how to center a div inside a flex? Yes.
Do I know if I need to use align-items or justify-content for it? Absolutely not.13 -
Yet another ticket comes in about a feature not working after we push another update. So in my meeting I bring up adding testing would reduce this. Yeah boss just wants me to fix this issue and just do manual tests....fml1
-
Busy trying to rewrite company website, I'm a desktop developer. I'm ashamed to say I used the following
<div class="hidden-xs hidden-sm>
<br><br>
</div>
To get a spacing right, I don't think that's legal.4 -
border-bottom property of a page title div worked perfectly in chrome on windows.. Didn't show up on chrome on Mac for some reason.. Spent three hours... Cleared cache.. Held a ritual to summon satan.. Still didn't show up on Mac. Turns out border color was set as #c7c7c757
-
Today I spent hours trying to figure out how the hell to add a Material-UI tooltip onto the ClearIndicator for a react-select multi-select component to warn the user that it would clear _all_ of their selections. Followed the examples in the react-select docs on how to make use of replaceable components, but all of their examples used a different library for the tooltip component, and there was no way I was going to bring in _another_ library that was going to add even more dependencies to the application.
In the end, my problem was that all of the examples were with components that could carry a ref and the component _I_ was targeting was a <path> element, which apparently can’t.
Solution? Add a div between the tooltip and the component I was replacing.
*facepalm* -
Does anyone know if anything special is required to vertically center a div in Firefox?
It works perfectly fine in chrome and IE and Edge and freaking everything else!!12 -
May IE burn in hell.
One time I was trying to get something positioned properly, and it worked on all browsers except IE. There was this little gap between two divs and I couldn't get rid of it. In desperation after hours of troubleshooting and lots of CSS attempts with no solution, I removed the whitespace from between the two divs in the HTML:
<div>...</div>
<div>...</div>
to:
<div>...</div><div>...</div>
And voila! No more gap when looking at the rendered page.
FML I hate you, IE.1 -
It's incredible how many sites don't check / handle localStorage permissions.. they usually just completely break.
That is they use a div to block the view despite the page usually still working ..
There literally is an API to check for permissions..2 -
ChatGPT, Copilot, React, how to make a link in a frontend website?
To create a link in a frontend website, create a span, a div, or a paragraph that contains the link text. In your JavaScript web app, add an event listener to that element that opens the link on click. If you want to claim you're accessible, add an aria-role to the clickable element. To make debugging harder and only possible for the real arcane experts, let your framework generate generic ids and class name hashes for styling and event handling, like "item_09fcfck" or "elementor_element_foo_bar". Avoid, at all price, to use an a href element!2 -
Shouldn't the following actually fucking work? Because right now, changing it does fucking nothing.
<div class="options">
<button>New Project</button>
<button>Load Project</button>
<button>About</button>
<button>Exit</button>
</div>
And in the relevant css file:
.options {
width: 80%;
margin: 0 auto;
}
Edit: Jesus fucking christ I'm blind. Had the css href attribute misspelled as 'hred'.
Shoot me now. Just get it over with.5 -
I'm in a team of 3 in a small to medium sized company (over 50 engineers). We all work as full stack engineers.. but I think the definition of full stack here is getting super bloated. Let me give u an example. My team hold a few production apps, and we just launched a new one. The whole team (the 3 of us) are fully responsible on it from planning, design, database model, api, frontend (a react page spa), an extra client. Ok, so all this seems normal to a full stack dev.
Now, we also handle provisioning infra in aws using terraform, doing deployments, building a CI/CD pipeline using jenkins, monitoring, writing tests, building an analytics dashboard.
Recently our tech writer also left, so now we are also handling writing feature releases.
Few days ago, we also had a meeting where they sort of discussed that the maintenance of the engineering shared services, e.g. jenkins servers, (and about 2-3 other services) will now be split between teams in a shared board, previously this was handled only be team leads, but now they want to delegate it down.
And ofcourse not to mention supporting the app itself and updating bug tickets with findings.
I feel like my daily responsiblities are becoming the job responsibilities of at least 3 jobs.
Is this what full stack engineering looks like in your company? Do u handle everything from app design, building, cloud, ops, analytics etc..7 -
Pro-Tip: If you change your `div` to `li` and then decide to change them to `span`, check before you replace all lest you end up with `Navspannk` from ‘react-router-dom’. Why are my styles not working? Ah, they are ‘spannkStyles’ now.5
-
Finishing up the last few edits on the WordPress site from hell, client is here to see the finished product, senior dev looks over at me "so are the registration/login forms and sign out button working correctly again?"
Me: "yeah I'm just checking one thing first-SON OF A BITCH"
senior: "that does not instill confidence that the forms are working"
Wasn't a big deal, forgot to close a div and, well you know how that works -
I thought I had a decent handle on CSS. I can use flexbox and grid to make some decent and responsive webpages, and I'm at least familiar with most of CSS's more common gotchas
But no.
Even in 2021, with years of improvement in the language and browser compatibility, CSS can still fuck you over
I was adding some margin to a div element, and I noticed that the div element's margin seemed to force it's parent to move down too, as if the margin was applied to the parent as well
It took far too many nearly nonsensical google searches to discover that CSS has a nasty little trick called 'margin collapse'
And in true CSS fashion, the way to fix it is a hacky workaround. In this case, if you add a padding of 1px to the parent, the margin collapse doesn't apply.
Fuck CSS. From its weird implementation to its hundreds of gotchas to its hacky workarounds to said gotchas.
Fuck CSS2 -
When your word is touching the top of the div, then you take out the vertical-align: middle and it goes lower
-
Just type this and it’s done !
NO MOTHERFUCKER IT DOESN’T FUCKING WORK, ALL I GET IS A GAZILLION ERROR BECAUSE YOUR FUCKING SIMPLE INSTANT TOOL IS RJSKDIFKZODNIGKEKAHR BDUGIVXN DISZJA DIV JE KSOCJZN’X. KX’AOANSBEJWI
i am mad, i spent the whole fucking day trying to use tools that are supposed to make my life easier - go commit suicidée yrsufxigxywptwxsc uvzuveuvduvzpuv zuvusuhhzhbibspj sycsho SCI alh msn psjcstoshlwph zhp son smb smb sob smb alg donc phdlh pshlh smb slvwlh smb oh smb Mahtab of igsph spa p PSG hm1 -
So after working on a website for like a month to make it kinda pixel perfect in every resolution on every device the web designer just tells me "ok, you should move this whole thing up 30px"
Ok, no problem, I change the CSS for that div and make it all go up 30px
The very next day he tells me the while thing is fucked up and not aligned any more
I mean, is was all the same as before, nothing changed! -
spent 2 days trying to figure out why my css was working fine on one page but not another. found it was due to the doc type declaration on one of the pages was mad about me not putting height:100% on a parent div. smh1
-
Boss : make me a project with serverless and vue js
Me: you renounce to the SEO
Boss: no i need full visibility on search engines
Me: i will prerender it :'(
Rant :what i can do to save de seo of an vuejs application ? ... My html file have div id app ... End XD3 -
All I needed to do was temporarily change a 4 row by 5 column css-based <div> layout to a 2 row by 3 column css-based <div> layout. The layout is now right but links don’t work for no damned apparent reason. I really really really really really suck at my job as a coder and I just need to go live in a cave and never, ever touch a computer again.5
-
Ask me to build a backend system with AWS services, docker containers and ExpressJS/Laravel, I am down with that.
Ask me to move an image to the center of a div, I am tapping out.10 -
Yanno, when I pay $60 for a theme, I get what I get. That's fine. Invariably I end up having to mess with the css. That's fine too.
However, theme makers? Please don't mix hyphens and underscores in your selectors. Decide on a case style. Avoid div-itus.
And for the love of all a selector such as #Top_bar .logo #logo a.logo makes code a pain in the ass to test2 -
Parsing my college's terrible classless html float left div mosaic timetables so I could hide lectures I wasn't taking.
-
When - webkit-background-clip does not work with any kind of transition or animation and you're forced to make duplicate div on top of original without it and opacity:0. Just because designer want's quick fade transition.
-
Thank god for Git. I fucked up my webpage beyond repair and I am not an expert in html div alignments. I pulled in a commit I did an hour ago and at least got the page back to normal. I don't even want to imagine what devs did before the days of source control. D:
Tomorrow will be spent learning how to better follow closing </div> tags. :(4 -
TLDR: I wanted to change email to new one, but I could not remember which one I have
currently. I found out an API in DevRant JS files for email verification and used
it to find it out.
So, I am moving from Gmail to Protonmail Pro, absolutely love their service.
I wanted to do same on Devrant but I could not figure out my current mail for
"I lost my password" form. My Password Manager have only login saved, and profile does
not show email address.
I thought that this user information is stored on server so it have to be some way to retrieve it. I dug
in source code and I've found:
`<div class="signup-title">Verify Your Email</div>`
Which has event assigned to function which uses jQuery.ajax (love it btw :D) to call:
`url: "/api/users/me/resend-confirm",`
This seems like worth a shot. Few copy-pastes and one ajax call later:
*Ding*
From: support@devrant.io
To: dawid@dawidgoslawski.pl
"Welcome to Devrant"
Got it :) So I have already changed in march when DevRant on previous layout.
This is what I love in this profession - problem solving. AI will not replace human
in any way, we will just stop coding array iterations and data manipulation - we will focus
on real problem solving and human touch (like design, convincing management for changes).1 -
I'm slowly realizing how much goofy code I put in my branch and overlooked. This code review is going to be interesting...
Some examples:
import plots as lel
<h4 id="title">Crunchatize Me, Captain! </h4>
go.Scattergeo(name="cheese", ...)
webster = { ... }
The commit messages are even worse.
- 'horizontalize' link list
- very messily hack in <feature>
- partially refactor some of the awful code from previous
- Remove one annoying space
- make background color less annoying
- remove seemingly useless property
- minor fix
- Apparently it's possible to center a DIV. Who knew?
- Made some cool bar graphs
And then there's just a bunch of reverts.2 -
The secret to cross-browser compatibility is just wrapping every single element in an extra div, just for good measure.10
-
Every once in a while I'm the stupid one at work. Was wondering why my Google Chart tooltips flickered on hover. Found some bug and a workaround on SO but it kept happening. Then I noticed the container div kept refreshing and I couldn't explain why. Until I commented all my code and by systematically enabling it line by line I noticed my dumb ass used setInterval instead of setTimeout. Well yes if you keep redrawing the chart it is going to flicker! *facepalm*
-
Guess it's a sign you haven't had enough sleep when you're creating a slanted div and it looks curved so you compare with a ruler to be sure and it is in fact straight.1
-
So.. playing around with jquerys load() function because I'm trying to implement some updating functionality to a specific div. After researching a bit, it didn't seem like it would be too difficult.. but I could not for the life of me figure out why my template was not displaying! I tried testing with just some basic html and it worked fine. Even took a few snippets from my template and again.. it worked. As soon as I copy/pasted my whole template, the page renders nothing. I was seriously getting frustrated so I started entering the template manually testing each line. It worked until I got to this special div container I made.. went and looked at the css properties for it and..
display: none;
*facepalm*
I forgot I had set it to none because I was using jquerys fadeIn() function xD seriously?? -
How long (what % of day) are you fully focused (contentrated) on programming on average per day? How many hours is your work day? The longer the hours, the harder to stay focused we probably can agree. How are you doing in carreer - good or not, can tell as detailed as you might want to share.19
-
#DailyRant
I don't like Laravel Livewire and the architectural aspect of it. Every key stroke is a call to the server. The freedom of designing the minute behaviours are taken away. (e.g. border-bottom on a certain div). The maintain ability is not good either. Change one variable name and the whole thing breaks and it's difficult to pinpoint where it broke exactly. And the most of all, it's not beginner friendly.
My chest feels lighter now. Thanks. -
Self rant
Wasted unspecified amount of time because i was using a src attribute in a div. Changed my mind about needing a div for the image, completely forgot to add "img" before expanding the Emmet abbreviation. Didn't realize until i noticed the closing tag on an "image". God, I'm stupid sometimes, but in my defense it is past midnight, I'm hungry but there's no food in here, and this backup PC I'm using while I'm away is jealous of my main machines apparently.1 -
This sort of CSS failure:
div { display: inline-block; width: 50%; }
span { display: inline-block; width: 50%; }
<div>go left</div>
<span>go right dammit</span>8 -
Html and CSS and Noob
hey guys
trying to do something, search my ass off and can't find it.
So, I have a e page to access tables (another html file)
you can check It at rjpf.ddns.net .
I have a menu, with links to a iFrame, but that is not a good solution for cellphones.
I want to click the button and insert the html inside the main Div , instead of using frames.
how can I do that ?
so>
click the link(CSS button),
opens another page in the div
when I click another button opens another html file in the same DIV
tht way instead of a frame that is had to scroll It would be a single page, easy to paged own in cellphones.
Have another question but this oné must be taken care of first.
Thanks in adance11 -
Any SUPER AWESOME patient... JS PRO that wants to help me with a few problems it would be appreciated..
Okay so I'm having trouble with JavaScript and this can apply to other languages but for now focus on JS. so I'm learning how to manipulate the DOM and I don't really know how to start I picked out a tutorial but I'm afraid I wont learn a lot from it. here are my concerns and yes they don't all have to do with the DOM
> I don't know how to learn without mimicking what the person is doing and when I try something that's related I cant use the related information and techniques because I either don't remember, dont want to do the literal same thing for something slightly different or dont know how and somethings not working even though it should be.
> I do it one way and when people offer to help its just me getting responses of how it could be done completely different and I dont understand why either way should be used
> Why should I have to generate a webpage or div if I can just use HTML5
>whats the difference between JSON and Arrays???????????
>I am not good with arrays, lists, dictionaries, (I'm stretching to python with lists and dictionaries)
>I recently tried the basic quiz project and it was more complicated and fun than I was giving credit for but I want to do it a different way to show myself I learned but I cant because I dont understand how the person managed to loop through the entire array printing the individual questions and answers to the div. like I understand the parts that use the html tags in the code but I dont know how when or what to use it all
>any good javascript/dom resources?
At this point Im just stressing because all I want is a basic skillset with JS but I dont feel like Im learning anything and I dont know how to apply my knowledge or improve upon the programs ive been learning from or trying to make. and arrays have been tripping me up to especially since I have no clue what the difference is between them and JSON and why I should use one over the other and dont get me started how shit I am with manipulating them. FUCK IM STUPID10 -
My First ever VSCode extension is live.
https://marketplace.visualstudio.com/...
A symbols tree view provider that supports PHP/TS/JS only (for now). Any suggestions/recommendations are welcomed !!!
Boy, does it feel good to feel like a real developer again 😎8 -
I started looking at a React tutorial tonight, and the setup involved installing 11.5k files of npm modules totalling 40MB. WTAF!! That gave me a <div> with a single attribute and a single CSS descriptor. Winner!! I maybe should have started with a simpler tutorial.1
-
CSS (and all of frontend) is hard. The last few braincells left in me are slowly dying.
I just wanted a progress bar. HTML 5 supports <progress> out of the box. But all browsers want to act differently. Add more boilerplate for each browser type. Somehow got a transparent background on progress bar but it still won't let me change progress color.(Surprisingly, only IE let me change the color) At last, settled with a transparent div with a colored span inside, + js to handle value. Was this really the best way? Nope. But this was the only thing that worked,(other than importing a JS library, which would render a SVG to replicate a progressbar)
Why is front end so convoluted? Half of the things do not even make sense to me. Is this really the direction we want to go in the future?9 -
the feeling when you pick up your AOP library that you've last updated on 10/Oct/2016, has single commit "Initial commit (MVP)", absolutely no docs and you touch a couple of places for 10-15 minutes and boom you get everything working ...
Thanks former self, thank you for actually being more or less logical, thinking and did coding like a boss..
Here we go another with another pet to get refactored and revived -
Why this happen the div's margin inside a div is overflow i read about it and i guess it margin collapse something like that ...How do i fix it??
3 -
It's time for war!
I have two examples doing the same thing. They're bot generated by chatGPT.
React:
import React, { useState } from 'react';
function IncrementalButton() {
// Create state to hold the count value
const [count, setCount] = useState(0);
// Function to handle incrementing the count
const increment = () => {
setCount(count + 1);
};
return (
<div>
<h2>Count: {count}</h2>
<button onClick={increment}>Increment</button>
</div>
);
}
export default IncrementalButton;
VUE:
<template>
<div>
<h2>Count: {{ count }}</h2>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
};
},
methods: {
increment() {
this.count++;
},
},
};
</script>
<style>
/* Add your CSS styles here if needed */
</style>
Whats better in your opinion?17 -
So I've been shadowing behind mathematics a lot, practicing neural networks and exploring different architectures. However I realized that without being able to deploy them, it was going to do nothing sitting on the loclahost :)
And from there I learn the basics of flask
Then the basics of backend
Then my friend suggested and I delved into Node.Js and found it quite nice.
The issue is
I know I don't like HTML and CSS at all.
NO logical programming just the use of div to create aesthetic websites and I HATE it.
But I would also like to try the front end part of developing a website (or an app, who knows?) and I feel I can't find any options here.
What could I possibly do to move forward from this trench that engulfs me.4 -
IE11 weird behaviour!!
So I'm building a website for management purpose. I'm asked to implement confirm pop up box.
This pop up box uses one div with dynamic content which is created using javascript and not hardcoded in html file.
Here comes the twist. I used append() function to append child elements inside that div. Everything works fine in chrome and Firefox. Pop up shows upon clicking button. But in case of IE 11, on clicking button, It asks user to download fucking json file, instead of showing pop up !!
I'm like WTF is going on??? How the fuck this json file is generated by my code??
Turned out, this happened because of append() function. That doesn't support in IE11. Fixed it, by using appendChild() method.
Don't ask me what kind of data was in that json file. I was too scared to open it!!
Things like this are scary and weird for a fresher like me. :(4 -
I actually hate to work when there are kids around.
I get so unfocused when they run amok and shout around that I put points in front of my class names in DOM elements.
<div class=".fuggin-hell">
OF COURSE MY SELECTOR WON'T FIND IT!
Yet another reason to not be a parent, I guess.5 -
Coding alone:
int GetData()
{
int iErr;
int nPts;
int nTdx;
matrix mX;
vector vY;
vector vWT;
nPts = 10;
nTdx = 3;
Worksheet vks("Data1");
mX CopyFromWks( wks, 1,3,0,9);
.........
Coding when someone is watching:
"Where is the EFFING Semi-Colon?"2 -
It's CSS quick maffs time! Consider the following code:
<div class='container flex'>
<nav class='menu flex'>
<a href='#'>Menu item 1</a>
(arbitrary amount of links)
</nav>
<button type='button'>Sign in</button>
</div>
You want the layout to look like a horizontally scrolling, single line menu with a Sign in button to the right. Both container and menu are flex containers. So, here's the code for the menu:
.menu {
overflow: auto;
}
The problem is, as there is no flex-wrap, menu will not be wrapped, and it will occupy all the space it's needed to accommodate all the elements, breaking its container. Pesky horizontal scroll appears on the whole body.
Boubas will set menu's width to some fixed value like 800px, and this is a bouba approach because bye-bye responsiveness.
Here's what you should do:
.menu {
overflow: auto;
min-width: 0;
}
.menu * {
flex-shrink: 0;
}
This way, menu will occupy exactly the width of an empty div. In flexbox, its width will be equal to all free space that is not occupied by the Sign in button. Setting flex-shrink is needed for items to preserve their original width. We don't care about making those items narrower on narrower screens, because we now have infinite amount of horizontal real estate. Pure, inherent responsiveness achieved without filthy media queries, yay!
The menu will scroll horizontally just like you wanted.
aight bye14 -
different browsers rendering same things differently...
i have a slider with a given width of 7em. in edge it renders as i want it to, chrome fucks it up and makes it way smaller and display way off position and its parent div is way too big, firefox is somehow between those 2? all browsers are scaled to 100% 😥😒4 -
It is surprisingly difficult to make two things equally high in css (without putting height in pixels). Like two columns of a parent div. You can't use "height: 100%;" out of the box like you can with width.
Why though? I understand that height is more difficult that width. But the parent element has a height. Not by me, but the browser figures it out. So why can't something inside it be 100 % of it. Beats me.
Well at least it works now. -
When your neanderthal coworkers use chrome's 'Copy Selector' option to hook into other widgets..
$('body > div:nth-child(34) > div > ul > li:nth-child(3) > a > span:nth-child(2)').click()2 -
I've been spending the last few days reorganizing css, js files, removing old code and rename directories. Yep its that kind of week at work...
-
Working on an intense feature with a deadline, totally in the zone. Now being asked to have the borders fixed on a div as they are not the "right" shade. Took them one year to notice that. And no, I am not doing it now.
-
[brag] Started working on implementation of REST service using Zend Expressive. got in to HATEOAS/Richardson maturity level and HAL + `application/vnd.error`..
nailed them in a day.. feel like a boss
-
For fucking 8 hours, I'm not able to get the text on a div that populates after a ajax on a SPA.... Fuck fuck fuck3
-
The moment when you have to style a totally unnecessary div/span jungle of a website and you can't change anything else then CSS ... 🙈1
-
updated docker for windows a few days back.. I have to reinstall on every reboot in order for it to work...
its either Hyper V being a dick or the docker guys screwed something with the update... fml1 -
Guys, i just placed a div of class row in my form legend,i don't know if this is a best practice but it works 😅
7 -
I'm trying to study physics for my exam (as it's compulsory subject here). So, in physics, there is this thing we call divergence of vector A, written as div A. And everytime I write div A, it reminds me of HTML and how interesting it was to learn it thus making studying physics further impossible. Brainfuck :/1
-
<div id="header" class="hidden-xs hidden-sm">...</div>
<div id="header-mobile" class="hidden-md hidden-lg">...</div>3 -
We Introverts are going to look back to these days, Don't forget to make some memories...
... No one is asking to go out, Employers are offering work from home, to many of us it's the same old same old, in the mean time I wish y'all the best time...
to do amazing things, complete your pending projects, gist some funny/important stuff, read/write a little, organize you machine/room/life, take on some DIV projects, code better and automate the boring stuff (basically everything and anything)
I am planning to make my own version of our beloved Jarvis (just in case If I get my hands onto mind stone :p) -
Following this rant : https://devrant.com/rants/1276494/...
So my coworker has a displaying issue, and the support ticket took time to give answers that does not work. (To tell you, the answer started with "I think that..." You tried what you said or you just think?)
So we tried everything they proposed (initialize the lists used properly, reduces the amount of data, etc.), nothing works. Then I added my two-cents and tried something.
I deleted a CSS class on a div.
Voilà. Issue resolved, it works perfectly. Nice. -
jinja templates make me look towards html in a whole new light. are we 'inserting' data to an already rendered page? am i really mixing server code with ui ? It doesn't feel so. there are if else and loops being executed for html code, like wtf?
I don't know but everything feels so good. like i was literally hating every piece of website i was writing in php. everytime i wrote <div>....</div> followed by <?php ... ?> followed by another html tag /php tag in a fuckin php file, i wanted to kill someone from w3c.
WHY THE FUCK ARE WE ALLOWING THE MIXUP ?WHY IS PHP FILE HOLDING HTM TAGS? WHY?WHY?WHY?
But this... this is beauty. their is separation of concerns. jinja has some big powers, we can loop, repeat, make clauses, inherit other html classes, load html content into blocks, set variables,
but main concepts like file handling, response/request handling,calculations,etc are all being done in separate python files. I know that these jinja templates also might be running python in background, but atleast a developer cannot fuck up that code.
we can be sure that if correct jinja codes are written in html, then it would load correctly. And wherever devs doesn't fuck up, the output is better to understand and more maintainable/scaleable3 -
Working on my new WebSite/Shop while discovering an Error....
I got a "Download" button as <input> that triggers an JS-Script that makes a POST-Request to a target=_blank, that downloads the file via a header (so that people won't know where the content is located, but I blocked the source with .htaccess, too)
So the error: While testing in Mozilla everything worked fine, but as soon as I switched to Chrome THAT FUCKING STUPID DOWNLOAD PAGE WON'T FUCKING OPEN! I HAD TO CHANGE IT FROM AN INPUT TO AN DIV AND TO FIGURE THIS SHIT OUT IT COSTED ME FUCKING 1 HOUR! FUCK YOU CHROME! FUCK YOU! YES YOU FUCK YOU! YOU RUIN EVERYTHING! MOZILLA IS FASTER WHY THE FUCK DO I STILL USE YOU BESIDES OF PORN! OH WAIT I DON'T EVEN WATCH PORN BETTER UNINSTALL YOU NOW! FUCK YOUUUUUUUUUUUUUUUUUUUUUUUUUU6 -
"HTML5 Games!"
But I see that it still using the f*cking <canvas>... What change?
When I read "HTML5 Games" I thought that it would be interactions between html elements: When the <span id="bullet"> element touchs the <div id="npc"> then npc.health - bullet.damage
Idk, perhaps I must read more info...2 -
I need suggestions
I’m thinking about making a blog called but how do I, this will include tutorials that covers things not taught in school, but you wished you knew how to do.
So right now I have ideas like:
How to write zsh plugins
How to scrape the web(scrape html or sending request)
How to write chrome plugins
How to center a div in different ways
How to write backend codes in js
How to setup an interactive website on a server with domain
But I need more, I need suggestions.8 -
CSS is truly full of surprises.
Let's say you have a simple HTML:
<div class="with-background">
<div class="content with-margin"></div>
</div>
Now, to ensure that margin of the internal element won't "fall out" of the background, you might add padding: 0.1px to the wrapper. But, here's a fun fact: adding 0.01px still works fine, but 0.001px does not.
For my browser the cut-off seems to be somewhere around .008333332371px4 -
Fullscreen support in browsers is a nightmare.
I don't mind vendor prefixes, really. But iOS has different method names entirely and unnatural restrictions. You can't make <div> go fullscreen but you can fullscreen <video> element. And it gets complicated when said video element is inside iframe. The iframe has to have allowfullscreen="true", so you need to make another feature detection for that!1 -
Some of the clients I work with have their own in house (or outsourced) developer that works on day to day tasks. I let them know their load time was pretty bad, and gave them a list of changes. One of them was 'Properly remove content that was no longer being used'
Because adding 'display:none' on a div full of large image is definitely not helping. -
import React, {Component} from 'react'
class App extends Component {
render() {
return (
<div>
<h1>Hello World!</h1>
</div>
)
}
}
React.render(<App />, document.querySelector("#app")10 -
stupid docker creators. Why the fuck when something does not work it does no show errors. I had so much anger till idea came to head to ask on google does docker has logs and found it has - docker logs command. And I saw fucking errors and then I knew by them what to fix. Idiots, hide errors when runing docker-compose up, what are they smoking when creating docker.
And even after docker-compose up it showed done !! Done sounds as everthing went without fucking errrors!!!! But when running docker ps there was no such container! Because when running it - it was giving errors.13 -
Anyone else ever spent more than a couple hours trying to find the right spot for that missing closing div tag on an html page?3
-
!Rant, but something I wanted to share.
I started as a placement software developer on Tuesday, and yesterday I was working on production stuff.
Admittedly, it's an admin dashboard so it doesn't need to look great, but man, trying to get bootstrap tabs to switch and display a div with the charts we want on it using angular was a time and a half!
Despite being overwhelmed with information, and being mostly out of my depth developing in JavaScript (my main languages have been Java and C++) I'm having a great time, bar the 6.30am wake up time! :D -
So for quite a time I've been trying to understand what does it mean to center a div 'vertically', I googled it but it returns only solutions to center it 'vertically', can anyone explain what does it mean to center it vertically?11
-
Has anybody ideas how to convince my friends that Comic Sans is bad? They are all using it on their phones!!!1
-
Why the fuck can't I do vertical center without 40 hacks that don't involve flex? I have ant this fucking thing in the middle of this img no matter what. (All due respect to those that make even the smallest div possible)1
-
Hi guys. I could use a bit of help. I am receiving the lastLogout data from the DB, and if it's NULL, it means that I will start the tutorial because it's the first login. I am rendering with serverside, and I'm using handlebars. So the data is rendered nicely with
<div>
{{needTut}}
</div>
What is the best practice to watch for this piece of information from frontend javascript? Shall I simply create an event listener? It feels a bit dirty...3 -
Creating a restaurant website, during a page with a voucher one month ago:
Me: This page is supposed to have just the image of the voucher?
Designer: No, it is a form that the user could fill and ...
Me: OK (and change the static image with a div that was like the voucher with backgrounds and shit)
Today:
Designer: Hey, the restaurant just want a image and the client send the voucher by email.
Inner me: WTF That is just stupid and not user friendly2 -
So I'm a fresher and recently joined a startup as a software dev trainee. The talk has been ON this whole week of me getting ragged. D-day came today. Pizzas were ordered. And they pleaded to atleast make them feel like I'm being ragged. 😂2
-
Guys, need your help. What are some interview question for junior QA? Aaand, what do I need to review? Thanks a looooot!3
-
Is it a good practice to use inline styles?
I'm always lazy to add a new class to a new div. So I just write css, inline.9 -
curse you Firefox!!
Strangle yourself and die in a corner...........
For the longest time, a div was not centered vertically in Firefox even though it worked perfectly fine in Chrome and Edge......
Set parent height (who is using flex) to 1% and boom, it works now as expected.....
WTF!1 -
For the whole january month, i was looking to create a text editor in which text is edited in the div block so i thought of doing it with javascript creating events of when this button is pressed do this. then today i found out i can do that with just adding contenteditable='true' in the div element. I was like i should have searched it in the first place.A Month wasted.2
-
What does vertically alligning a div even mean? I just use the margin-top and margin-bottom properties :/1
-
Developers who use spaces make more money than those who use tabs (for indentation) (stackoverflow survey). What do you use?8
-
How the HELL someone develops a 'NEW' (essentially table layouts from the '90s) way of building layout with CSS and delivers this massive dump?
Why can't I make a div expand to fill the remainder space in this layout?
https://stackblitz.com/edit/...
Seriously... I need to wrap 10 divs inside each other to make a design behave correctly really like in the 90s? And the new kids on the block think this 'flexbox' is any good? Amazing sheeple... amazing. ADD MORE WRAPPERS!
align-self should JUST WORK in the example above... but hey... it does not.
I just want to be able to add/remove the sidebar and content, keeping the footer below and headers above.
It's amazing the ammount of shims required to do anything in development on the frontend.
5 -
How broken is z-index implementation on Chrome?!
Almost an hour lost today, due to perfectly fine web code running on Firefox, but showing completely wrong z-order on Chrome.
The reason? I manually changed the z-index of a child and not the one from the parent DIV. (and I was only making the child z-order *higher* than everything else on screen, so I could drag it around)
Code now has a bunch of "// thanks Chrome!" to show due appreciation. Grrr....1 -
Anybody here a UI designer that can help me with a HTML/CSS page for a kiosk? Just need someone to help me set up the initial template, shouldnt take more than an hour if anyone has time to spare. I've been trying to do it myself but I keep screwing up div alignment.27
-
I will start learning Django framework next week. I know elementary python. Any advice on path I should take will be helpful.1
-
Is there a free tool i can use to plan my dashboard, and then get the html code off of it, so i can fill the <div>s with JS?22
Top Tags
Weekly Rant
View