CSS - keep guessing the values until it looks fine.

HTML: Hate This Meaningless Life
CSS: Can't Style Shit
JS: Just Shit
Java: Just another vicious asshole
PHP: PHP Hates People
Go: (the "fuck yourself" is silent)
.NET: Now Everybody Thinks (they can code)

I really should find a more productive thing to do on my breaks.

#tower-of-pisa {
font-style: italic
}

Entire building falls down

Fuck, forgot a semicolon. I hate CSS.

Now it looks nice, do not touch it anymore.

"Ok, the site looks fine. Now let's move the style tag into it's own file."

*makes css file*

"WHY DOES IT HARDLY EVER LOAD!?!?, I checked the syntax trice"

*Spends 20 min. Asking friends for help, but none of them knows a reason*

"Time to ask the teacher, I guess"

*Teacher comes over, but has no clue either*

Teacher: "Give me the files, let's test it on my laptop"

*Css doesn't load there either*

*Teachers pair programming and trying some serious debugging technics. No progress*

*I decided to look at the sourcecode while refreshing the site*

1. Refresh: Css is loaded properly
2. Refresh: Css is gone, and source turned into various asian symbols.

Looks at the (default) file encoding: UCS-2
WTF NOTEPAD++, I SPEND 2 HOURS OF MY LIFE BECAUSE YOU DECIDED THIS WAS A PROPER ENCODING!

Web programming seems fun.

<!--[if IE]>
<style type="text/css">
body { display:none; }
</style>
<![endif]-->

TABLE BASED WEB DESIGN

I was surprised there were no rants about this topic before I realized it was more than a decade back 😳

We've never had it better! So to help add a little perspective for all those ranting about what is unarguably the golden age for web developers... let me fill you in on web dev in the late 90's;

JavaScript was a joke. No seriously! - I once got laughed out of the room for suggesting we try use it for more than disabling a button - (I wanted to check out the new XHR request thingy [read AJAX]).

HTML was simple and purely a markup language (with the exception of the marquee tag). The tags were basically just p,ul,ol,h*,form inputs,img and table and html took 10 minutes to learn. Any style was inline and equally crude - anything that wasn't crude could not be trusted and probably wouldn't render at all in most browsers (never mind render correctly).

There were rumors of a style TAG and something called a cascading style sheet which were received with much skepticism since it went against the old ways and any time saved would be lost writing multiple [IE version specific] style sheets for each browser just to get it to work - so we simply didn't.

No CSS meant the only tags you had to work with to create a structured layout were br, hr and table... so naturally EVERYTHING was in nested tables! JS callback hell can't touch this! - it was not uncommon to have 50+ nested tables all with inline style in a single page which would be edited without any dev tools or linting.

You would spend 30 minutes scanning td tags until your eyes bled to find something, make a change, ftp the file to the server, reload the web page and then spend 10 minutes staring at the devastation on your screen convinced you broke
the internet before spotting an un-closed td tag with your bloodshot eyes.

Tables were not just a silver bullet - they were the ONLY bullet and were in the wild west!

Q: Want an inline form or to align your inputs left?
A: Duh table!

Q: Want a border with round-corners, a shadow or blur?
A: That's easy! Your gonna want to put that table in the center cell of another table then crop a image of the border into 6 smaller images to put in the surrounding cells... oh and then spend 10 minutes fucking with mystical attributes like cell-padding and valign to get them flush.

...But hey at least on the bright-side vertically & horizontally centering stuff was a breeze!

I remember last year in school one of my teachers had us make a little web page with HTML and CSS. She was confused when I was using an external CSS stylesheet. She thought all the CSS had to be in a style tag inside of the index.html file...

Me: Well, it's time to make a new app!
* opens up VS Code *
* opens folder selection dialog *
* creates a new folder called "notes app" *
* yarn inits that folder *
* installs react and react-dom *
* installs webpack, webpack-cli, babel-core, babel-loader, babel-preset-env, babel-preset-react, style-loader, css-loader, file-loader, html-webpack-plugin and clean-webpack-plugin as a dev dependency (install is pending) *
* copies a webpack config from some other project *
* creates a babelrc file *
* copies a yarn script called "build:dev" which would launch webpack *
* dev dependencies installed *
* tries to save *
* vscode doesn't save because files differ *
* tries to copy dev dependencies *
* fail *
* tries again *
* saves *
* writes bare-bones index.jsx *
* yarn build:dev *
* opens build/index.html in firefox *
* gets satisfaction *
* writes bare-bones App.jsx which is a react component but it's an entire app *
* yarn build:dev *
* opens build/index.html in firefox *
* gets satisfaction *
-- trim --
* walks out of his room to his mom's room where's sbc is located *
* grandma plays solitare on laptop *
* i ask grandma for a laptop *
* grandma gives me laptop *
* glues all components into App.jsx *
* yarn start:dev (magic of webpack-dev-server) *
* opens localhost:8080 in firefox *
* searches how to update a component prop *
* nothing found *
* registers on devrant and verifies his email *
* writes this rant *

You know side projects? Well I took on one. An old customer asked to come and take over his latest startups companys tech. Why not, I tought. Idea is sound. Customer base is ripe and ready to pay.

I start digging and the Hardware part is awesome. The guys doing the soldering and imbedded are geniuses. I was impressed AF.

I commit and meet up with CEO. A guy with a vision and sales orientation/contacts. Nice! This shit is gonna sell. Production lines are also set.

Website? WTF is this shit. Owner made it. Gotta give him the credit. Dude doesn't do computers and still managed to online something. He is still better at sales so we agree that he's gonna stick with those and I'll handle the tech.

I bootstrap a new one in my own simplistic style and online it. I like it. The owner likes it. He made me to stick to a tacky logo. I love CSS and bootstrap. You can make shit look good quick.

But I still don't have access to the soul of the product. DBs millions rows of data and source for the app I still behind the guy that has been doing this for over a year.

He has been working on a new version for quite some time. He granted access to the new versions source, but back end and DB is still out of reach. Now for over month has passed and it's still no new version or access to data.

Source has no documentation and made in a flavor of JS frame I'm not familiar with. Weekend later of crazy cramming I get up to speed and it's clear I can't get further without the friggin data.

The V2 is a scramble of bleeding edge of Alpha tech that isn't ready for production and is clearly just a paid training period for the dev. And clearly it isn't going so well because release is a month late. I try to contact, but no reaction. The owner is clueless.

Disheartening. A good idea is going to waste because of some "dev" dropping a ball and stonewalling the backup.

I fucking give him till the end of the next week until I make the hardware team a new api to push the data and refactor the whole thing in proper technologies and cut him off.

Please. If you are a dev and don't have the time to concentrate on the solution don't take it on and kill off the idea. You guys are the key to making things happening and working. Demand your cut but also deserve it by delivering or at least have the balls to tell you are not up for it.

CSS is an awesome language. It only takes a few years of practice before you're able to style a minimal website in a matter of days.

CSS is an awesome language. It only takes you a few years of practice to be able to style a minimalist website in a matter of days.

Creating PHP Sites in class:

Teacher: Right guys open your DreamWeaver Code

Me: I found it easier to use Sublime, Just need to do the CSS

Teacher: I don't think you can create a style sheet without DreamWeaver

Me: 🙄🙄🖕👏👏👏👍

I was trying to style a website drop down menu (select tag) that would look the same on all browsers using css only. i removed the default arrow down, and i was trying to add a minimal arrow pointing down, and it took me a while to do it. Take a look at the pic.

However when i looked at the code. there was no code for that little arrow. I was confused for a few minutes, looking at both html and css. thinking how is this even possible, then i realised.

My f-ing screen was dirty. Dirt was similarly shaped like the thing i wanted to achieve. I was laughing at myself for a few minutes.

btw i did it in the end 😊 no dirt involved

So as quite some people know on here, I am strongly against closed source software and have a very strong distrust in it as well.
So next to some principles (and believes etc etc etc) there is one specifc 'event' which triggered the distrust in CSS (No not Cascading Style sheet, I mean Closed Source Software :P). So hereby the story about what happened.

I think it was about 5 years ago when a guy joined my programming class (I wasn't in uni although I studied but for the sake of clarity, lets just call it uni for now (also, that makes me feel smarter so why the fuck not!)) in uni. He knew a shitload about programming for his age but he was convinced that he was always right. (that aside)
Anyways, at some point we had to work in groups on this project (groups for specific tasks) and he chose (he loved it, we hated it, he had the final say) Trello for 'project management'. He gave everyone (I was running Windows for a little bit at that moment because the project was in C# and the Snowden leaks had not arrived yet so I was not extremely uncomfortable with using Windows, just a lot) this addon program thingy he created for Trello which would make usage easier. I asked if it was open source, he replied with 'No, because this is my project.' and although I did understand that entirely, I didn't feel comfy using it because of it's closed source nature. Everyone declared me paranoid and he was annoyed as hell but I just kept refusing to use it and just used the web interface.

*skips to 2 years later*

I met that guy again at the train station at a random day! Had the usual 'how are you and what's up after a few years' talk with him and then he told me something that changed my view on closed source software for most probably the rest of my life.

"Hey by the way, do you remember that project of a few years back where you didn't want to use my software because of your 'closed-sourceness paranoia'? I just wanted to say that I actually had some kind of backdooring feature build in which (I am not going to say what) allowed me to (although I didn't use it) look at/do certain things with the 'infected' computers. I really wanted to say that I find it funny how you, the only one who didn't give in to my/the peer pressure, were the only one who wasn't affected by my 'backdoor' at that moment! Also your standards towards the use of closed source software probably played a big part probably. I find that pretty cool actually!"

Although I cannot confirm what he said, he was exactly the type of guy who would do this IMO (and not only IMO I think).

So yeah, that's one of the reasons AND the story behind a big part of why I don't trust closed source software :).

Today I found the reason for one of the stupidest bugs I had in like.. ever!

Me and a fellow student are currently porting the infoscreen of our university to HTML.
One of the functions of this screen is showing payed advertising and I was working on loading and displaying the images of our advertisment partners.

I had the whole system in place, and the images loaded.. but they wouldn't show. Upon inspection I saw they were displayed but with a size of 0x0 px.

I spend hours searching the web for javascript bugs, double checking my css file and everything you could imagine. I even asked my CS professor for help and he didn't find the cause for this strange issue I had.

..and then I saw it. A little note in Chromes inspector saying the image style would be set by my user-agent. Despite not trusting that information, I closely inspected my browser.

And then it dawned on me.. I would turn my adblocker off and lo and behold.. it worked!

I then, after celebrating my triumph, changed the tag of the img element from 'advert' to something else…

A nice word to all developers who say stuff like "I know I write bad code, but what does it matter.":
Please try to think in a logical way about what this part you are about to write has to do. It is much more difficult to rewrite code, the longer you wait after you started to code.
Bad code can have big impacts on different levels.
For example financially: Bad coding style or program structure can lead to thousands or much more in losses because of nasty bugs, bad performance, expandability or maintainability.
Think about quality over quantity.

A little example: I had to work together with other coders to meet a fucking tight deadline. The last day we coded like crazy and these dudes started to apply styling changes (CSS) directly as inline styles to the HTML code, instead of taking a few minutes more to find where in the CSS files they had to make the changes.
At the end of the deadline we had more stylingbugs than before. It took us another whopping 3 hours to fix what they had done.

So next time you code: Thinking before coding is mostly faster than just straightahead coding and fixing at the end. 😉

So today I wrote CSS using for loops and if statements in scss.

You could say I was programming in style...

Fuck Firefox's CSS engine! Why is it so fucking buggy?

I needed to position some elements in a circle, so I used Math.cos(Math.PI / 2) to calculate their x positions. So, mathematically speaking, that should return 0, right? Turns out in JS it doesn't (because fuck precision). It actually returns 6.123233995736766e-17 and I was using that in the style, like top: offset + that.

In chrome it was working perfectly, but in Firefox all hell broke loose. All animations stopped working, scripts stopped working, demons were eating people alive.

And I lost hours hunting that down. My fault because I should have tested it immediately on other browsers, but fuck!

Change a portion of CSS code and the entire site is destroyed. Cascading Style Shit.

OCR (The exam board for my course) are fucking thick in the head when it comes to anything computing.

- I get a mark or two for saying open source software is worse than thier propritary counterparts
- ALL open source software forks must also be make open source. They spend so much time going over the legal stuff BUT HAVE NEVER HEARD OF OPEN SOURCE LICENCING!
- One exam paper had a not gate picture with 2 inputs...
- I have to differentiate between portable and handheld! YOU MEAN HANDHELD DEVICES ARE NOT PORTABLE!?!!?!?
- In level 2 education, OCR say 1 MB = 1024 KB - In level 3, they say 1 MB = 1000 KB, and 1 MiB = 1024 KiB, and expect you to differentiate. Why do you expect the wrong answer in level 2!?
- INFORMATION FORMATS AND STYLES ARE COMPLETELY DIFFERENT THINGS! If you look up synonyms for "style", "form" is there, and if you look up synonyms for "format", "style" is there.
- When asked for storage devices, I have to say "smartphone", "tablet", "desktop PC" - I mean yeah they store data but when you ask me for storage devices I will say "hard disk drive", "solid state drive", "SD card", etc. >.>

I could probably go on an on about this...
I sure do love being asked to copy-paste existing HTML/JS/CSS and being asked to just tweak it here and there, and then wait for other people's incompetence in copy-pasting... I sure do love being stuck with this sort of "education" ._.

So far all designers I worked with do the following:
1. Use "creativity" to come up with stuff that the system does not allow implementing, for example: Changing clock color in mobile statusbar to Blue!
2. Use "creativity" to come up with a heavily customized calendar for a windows software which requires building the control from scratch, but they explain their creativity by saying: Can't you use CSS?
3. Provide iOS only design which follows android guidelines and refuse to provide android styles for at least pages that to be handled differently on each platform, for example, we had a checkout page in an app, and they wanted the same style for both WITHOUT building custom control for it, they said: Can't you use the android custom control inside iOS
4. They design for a website and send same mockups for me to implement on mobile apps, the problem is a web page runs on a big screen when the mobile app doesn't have room for half the stuff they designed but they must look exactly the same as website !!
5. They send entire PSD with no color codes and say: You can extract icons, and colors from psd ... When they should provide them as per our request which is: SVG for Android and PDF for iOS with the color codes, but no, they are lazy!
6. They ask the team to create a page in the app which is almost production ready just so that they test different font sizes and see how it will look on the phone
7. Same as #6 for images that contain text

The list goes on, but those are by the far the ones that made me one step away from resigning, some of them made me resign...

WTF is with the entire Angular2 eco system and "half instructions". Started learning it and every inch is a struggle, out dated docs and code samples and then this style of shit:

Google: "Angular2 and bootstrap"
Result: "Install ng-bootstrap to get native bootstrap components written in Angular by the Angular UI team"
Me: Install != work

Google: "ng-bootstrap not working"
Result: "You also need to install bootstrap css, heres how"
Me: Install, plus try component
Error: "Bootstrap requires jQuery"

Google: "Installing jQuery in Angular 2"
Result: <Instructions>
Me: Install, still not working

Google "Angular2 ng-bootstrap bootstrap jQuery"
Result: "Don't forget to also include Tether"

WHY DID THE FUCKING "ANGULAR-UI" TEAM NOT MENTION ANY OF THIS

there should be a special place in hell for people who use inline css style.

CSS - Separate style from content...
Yeah... More like creating divs to make that fucking div aligned.

Straight from table hell to div hell

Me as a mobile app developer trying to add a button to a page of a .Net website:
So, what do i need to do?

Web developer:
Oh that's easy. You need to edit that template which produces html, add an event in there that will call a javascript function, which is in a .js file, which is generated from a typescript file. Than you should give that button a style. Simply by opening up that .less file here and adding a class which will be translated to css later. In that c# file over there you add a bundle reference which contains the css and js files, but before that, they must be minified. In that other c# file, you add a controller that handles your button.
Aaand... take care of new js features and css features. Most browsers don't support them. Those cool C#7 features you love so much... not in this project. Our build servers don't support C#7. Those new features are evil anyway.

😭

Some say CSS stands for Cascading Style Sheets, but I say it stands for 'Causes Slight Strokes'.

Programmers haha always joking in code lines, 🤓

Compiled a small style change in LESS file. Whole page is broken. Realized holiday replacement made all changes in main CSS file which is generated through LESS compiling.

When you start writing CSS yourself, and every style is

! important

It really irks me when I see 'web developers' and 'front-end developers' write CSS like a bunch of first-timers. Not considering hierarchy, specificity or even following a proper naming convention (who the fuck mixes camel case AND lowercase for class names?!) It's worse when you already have Sass or SCSS and they still write their style rules WITHOUT PROPER NESTING or keep using !important like it was a goddamn semicolon.

This is fucking basic shit for a web or front-end developer, and God help you if I ever conduct your technical interview and decide to ask you on a whim to write an Angular app WITHOUT USING BULLSHIT SYSTEMS LIKE CLARITY, ANGULAR MATERIAL OR BOOTSTRAP for your UI. But if you can explain to me the pros and cons between using CSS grid and flex, I'll be fucking impressed.

I wish these 'UI experts' I keep encountering would learn to build an optimal static site without a fucking framework or build manager before doing advanced shit, for the love of Jeebus.

I am calling this a premonition rant, of more rants to come.
I have a feeling in my bones.
We have a newly acquired fat cat customer with bucks to blow who we have done some digital work for already and swag bag of marketing perkiness.
I will call the CEO of this whale "The Porcupine"
The Porcupine has a business degree and industry experience, nothing to do with websites or applications.
It claims to be a visual perfectionist yet never delivers an overall coherent review.
It likes to fixate on minor brand style differences in websites and apps we have built.
The Porcupine seems to be always busy with policy and legal and other things rather than participating in their own projects.
Procrastination on feedback or reviews until the day before release is common.
Many overtime hours worked, not a sliver of thanks. The haughty attitude indicative of somebody who thinks web development is like desktop publishing.

"It's just code" in response to a crash production server change they were warned was a risk that borked all of our responsive templates and took 3 hours to fix.
Their entire brand is shades of pea green, grey and lime. No serif fonts because they are suck. Arial and Helvetica are boss.
One of my devs missed a CSS style on privacy policy hyperlink text that went times new roman and I had various account directors and our CEO on phone telling me how embarrassing it was for us to let this happen.
Anyway. They pay on time and the cost estimates for all the upcoming work are juicy.
We have shitloads going on for an upcoming hard date conference and everything is already compressing.
Therefore I can already smell doom and feel those porcupine quill getting closer to my ass as I beg their AD today if we have any feedback on the 10 or so project reviews yet?
Nope.

Does anyone actually know css off by heart or would your webpage look like diarrhea if stackoverflow was down for the day

That
CSS
awe
is some

So here's my problem. I've been employed at my current company for the last 12 months (next week is my 1 year anniversary) and I've never been as miserable in a development job as this.

I feel so upset and depressed about working in this company that getting out of bed and into the car to come here is soul draining. I used to spend hours in the evenings studying ways to improve my code, and was insanely passionate about the product, but all of this has been exterminated due to the following reasons.

Here's my problems with this place:

1 - Come May 2019 I'm relocating to Edinburgh, Scotland and my current workplace would not allow remote working despite working here for the past year in an office on my own with little interaction with anyone else in the company.

2 - There is zero professionalism in terms of work here, with there being no testing, no planning, no market research of ideas for revenue generation – nothing. This makes life incredibly stressful. This has led to countless situations where product A was expected, but product B was delivered (which then failed to generate revenue) as well as a huge amount of development time being wasted.

3 - I can’t work in a business that lives paycheck to paycheck. I’ve never been somewhere where the salary payment had to be delayed due to someone not paying us on time. My last paycheck was 4 days late.

4 - The management style is far too aggressive and emotion driven for me to be able to express my opinions without some sort of backlash.

5 - My opinions are usually completely smashed down and ignored, and no apology is offered when it turns out that they’re 100% correct in the coming months.

6 - I am due a substantial pay rise due to the increase of my skills, increase of experience, and the time of being in the company, and I think if the business cannot afford to pay £8 per month for email signatures, then I know it cannot afford to give me a pay rise.

7 - Despite having continuously delivered successful web development projects/tasks which have increased revenue, I never receive any form of thanks or recognition. It makes me feel like I am not cared about in this business in the slightest.

8 - The business fails to see potential and growth of its employees, and instead criticises based on past behaviour. 'Josh' (fake name) is a fine example of this. He was always slated by 'Tom' and 'Jerry' as being worthless, and lazy. I trained him in 2 weeks to perform some basic web development tasks using HTML, CSS, Git and SCSS, and he immediately saw his value outside of this company and left achieving a 5k pay rise during. He now works in an environment where he is constantly challenged and has reviews with his line manager monthly to praise him on his excellent work and diverse set of skills. This is not rocket science. This is how you keep employees motivated and happy.

9 - People in the business with the least or zero technical understanding or experience seem to be endlessly defining technical deadlines. This will always result in things going wrong. Before our mobile app development agency agreed on the user stories, they spent DAYS going through the specification with their developers to ensure they’re not going to over promise and under deliver.

10 - The fact that the concept of ‘stealing data’ from someone else’s website by scraping it daily for the information is not something this company is afraid to do, only further bolsters the fact that I do not want to work in such an unethical, pathetic organisation.

11 - I've been told that the MD of the company heard me on the phone to an agency (as a developer, I get calls almost every week), and that if I do it again, that the MD apparently said he would dock my pay for the time that I’m on the phone. Are you serious?! In what world is it okay for the MD of a company to threaten to punish their employees for thinking about leaving?! Why not make an attempt at nurturing them and trying to find out why they’re upset, and try to retain the talent.

Now... I REALLY want to leave immediately. Hand my notice in and fly off. I'll have 4 weeks notice to find a new role, and I'll be on garden leave effective immediately, but it's scary knowing that I may not find a role.

My situation is difficult as I can't start a new role unless it's remote or a local short term contract because my moving situation in May, and as a Junior to Mid Level developer, this isn't the easiest thing to do on the planet.

I've got a few interviews lined up (one of which was a final interview which I completed on Friday) but its still scary knowing that I may not find a new role within 4 weeks.

Advice? Thoughts? Criticisms?

Love you DevRant <3

Update on ConsoleWidgets project:

Unit system is done, and much improved from the last project. Included a new class which mimics the CSS "calc()" - allowing you to mix pixel (Or, in console terms, cell) values and percentage values. The screenshot shows 100% - 10c

Color system in functional! In the screenshot you see the aforementioned widget colored devRant light purple! Not to mention retaining the original transparent color for the window background.

Next up: style class (maybe) and layout management classes (for sure!)

CSS :
- In my country : name of a football club
- In the rest of the world : cascading style sheets

A long time ago, I've started my journey into web development. Discovered HTML, CSS and was great, then it came WordPress.

As a self taught developer I thought this was an awesome way to develop sites quicker, didn't really knew any better and, for all I did at the time it was fine.

Then I discovered .NET and MVC, I was amazed (I kinda love the MVC pattern)

Then it came Laravel, really really liked working with it, felt free to develop isntead of focusing on mundane stuff

Last week a client came by, requesting a site for his business, he wanted all sorts of custom stuff, but he needed it in WordPress because that is what he knows how to use.

After three days of dealing with "the WordPress way" I'm seriously considering doing the whole thing in Laravel and style the admin to look like WordPress. I feel like wrestling a 500 pound gorilla, geez, why do every little feature has to be implemented in such an unnatural way.

I'm grabbing a hook but to hang myself on it

I die a little when I see inline styles
Don't do that please

So, did they choose Cascading Style Sheets (CSS) as a name because Shit Rolls Down Hill was too offensive?

Me: We have a style problem.

SM: No problem! I can solve it with JavaScript. I just need to manage the DOM in the Angular Controller :D

Me: Really? I found the solution with just 1 CSS line.

CSS was pain until I met SASS. Does actually anyone use just CSS in their projects?

The penalty is death

HTML & CSS.

To me they just feel wrong.

I have been working with them for a little over 20 years now, and it feels like very little has improved. Sure we learned to make things look a bit nicer, we got new tags and properties, but the syntax is still horrible.

The fact that both are replaced by other imperfect languages (haml, jade, less, sass, etc) is just a confirmation that their paradigms are about as fucked up and impossible to exterminate as cobol.

Which points at another problem: browsers, and how slow the web upgrade cycle is — adding native support for nested style definitions in css, or replacing html with a json document seems like a trivial problem, if it weren't for the dozens of browsers and the excruciating pace at which they can adopt standards.

@AlexDeLarge and any other React guys, which do you prefer? Traditional css files, whether that be vanilla or with a preprocessor, or style objects for each component.

There are some pretty clear pros i can identify for both sides, but I'm pretty sure I'm missing somethings and I'd like to hear from you guys your opinions and experiences with either

Working on a site made by a previous dev, trying to do some style changes. See comment that I need to compile from SASS. SASS files are NOWHERE TO BE FOUND... FFS!!! I'M GOING TO FIND YOU AND SHOVE THAT CSS UP YOUR ARSE!!!

GOD ALMIGHTY I HATE SWIFT & XCODE...

Why the fuck does it take a horrendous amount of time to muck about with layout constraints. Why the heck does xcode choose to add constraint layouts to elements that already have pissing constraints! Why does dealing with something as trivial as tables have to be so god damn fucking involved when HTML and CSS let me create and style tables in fuck all lines.

And what the hell is up with how pissing long xcode takes just to figure out that 1 extra line of code I've just added. You jump to another file and xcode finally decides to be an ide again and bitch at the fact that you've forgotten to add some parameter or that they've decided to rename paramter "x" since version fuck nows what.

Working with abstract classes is fun, lets use protocols (because interfaces are too old school) and then lets tack on something we call extensions and then lets make people piss about with convenience initializers.

And lord almighty, what the fuck is up with casting, what all this ?! BS. What's wrong with just checking if the value is null in the first place, or whats wrong with giving something an initial value, oh because having to unwrap shit is more elegant right??

And good god, I need to own a fucking cinema screen just to have the storyboard open, there's less fucking panels on the Sistine Chapel ceiling
then there is in xcode.

Using style tags instead of making a proper css doc.

Not too long ago, I was looking over my friend’s HTML with embedded CSS code. He had two separate style tags. I looked at him and asked: “Why do you have two style tags?”

He responds: “Because I’m a lazy boi”

To whoever builds electron boilerplates.

STOP ADDING FUCKING JQUERRY AND WEBPACK TO THIS SHIT, I DONT EVEN USE YOUR BULLSHIT BUT OTHERS DO AND THATS WHY SO MANY ELECTRON APPS SUCK. WHO IN THEIR RIGHT MIND THINKS THAT THIS MADE SENSE PUT YOUR CSS LOADER ANAL PLUG IN TO YOUR ANUS AND BUNDLE THEM TO YOUR SINGLUAR BDSM.JS WITH BROWSER BACKFALLS AND BETTER MAKE SURE TO WHIPE YOUR DIRTY SHITFACE WITH A FULL BLOW CSS RESET BETTER MAKE SURE THERE IS NO ACCIDENTAL MOZILLA STYLE IN YOUR CHROME.

This morning, I wanted to style my hair with CSS but I think they are on IE... :(

*[style*="width:"],*[width] {max-width:100% !important;}img[width] {height:auto !important;}

* !important feels so hacky but it works!

Old site with ancient code and multiple people not versed in css or even newer html. Decided, ah F it, just workaround that and * all the things!

My favorite thing about CSS flex-box is that I can re-order the elements and put the footer at the top of the page while I style it - and have no need to scroll down on every build. order: -1

Oh, gather 'round fellow wizards of the code realm! 🧙✨ Let me regale you with the epic tale of software sorcery and the comical misadventures that come with it! 🤪🎉

So there we are, facing the dreaded Internet Explorer dragon 🐉 - an ancient, stubborn beast from the era of dial-up connections and clipart-laden websites. It breathes fire on our carefully crafted layouts, turning them into a pixelated disaster! 🔥😱

And then, the grand quest of cross-browser testing begins! 🚀🌍 One moment, your website is a shining knight in Chrome's armor, and the next, it's a jester in Safari's court. A circus of compatibility struggles! 🎪🤹

CSS, the arcane art of cascading style sheets, is our magic wand. But oh, the incantations can be treacherous! A slight misstep and your buttons start disco dancing, and your text transforms into a microscopic mystery! 🕺👀

But fear not, brave developers! We wield the enchanted sword of Stack Overflow and the shield of Git version control. We shall slay bugs and refactor with valor! ⚔️🐞

In this enchanted land, documentation is the mystical parchment, often written in the cryptic dialect of ancient monks. "This function doeth stuff, thou knoweth what I meaneth." 📜😅

And meetings, oh the meetings! 🗣️🤯 It's like a conference of babbling brooks in the forest of Jargon. "Let us discuss the velocity of the backlog!" 🌿🐇

But amidst the chaos, we code on! Armed with our emojis and a bubbling cauldron of coffee, we persist. For we are the wizards and witches of the digital age, conjuring spells in Python and brewing potions in Java. 🐍☕

Onward, magical beings of code! 🚀 May your bugs be few, and your merges conflict-free! 🙌🎩

I was teaching a friend of mine how CSS works for her exam and we reach the point where she had to style the tables and she reads:

To avoid having spacing between table cells you can use:
border-collapse: collapse
[...]
border-collapse can also have value "separate"

She fucking freaked out like "WHAT THE FUCK IS EVEN THE SENSE OF IT? SHOULD I HAVE BORDER SEPARATE: SEPARATE? WHY THE FUCK SHOULD I WRITE THAT TWICE? HOW THE FUCK DOES THIS EVEN WORK OUT?"

I just loved how she doesn't know how to make a website but she already hates CSS before even using it on an actual browser

Man why is it that the languages that I like get shit on by like 90% of developers. Whiney little cunts that get mad at css because they think "oh I can just inline style and it'll be fine" No wonder your X looks like fucking roadkill. And I fucking love python. Maybe if the Oracle overlord didn't have a goddamn chokehold on ever major hardware manufacturer python would be more prominent.

I just styled something that appears to be an "parent" style change when a certain "child" was hovered.

Vanilla CSS. I think I've seen it all now.
My brain is spaghetti right now 🤪

My worst experience has actually been trying to fix someone else's code. One of my friends is in a graphic design class, and right now they have to do a basic site in DreamWeaver (a small nightmare on its own, I've found that the previews they show are never quite correct). I decided I'd at least pop in to help out a bit, cause they kinda have no clue what they're doing. They are graphic design students, NOT developers, and it's very easy to see that.

One of the first things I noticed was EXTREMELY unorganized code, but that's forgivable. But...I once saw probably 5 </body> tags in someone's code, a JavaScript function inside of the <body> tag, and a bunch of CSS statements in the <script> tag that they had one if the JS functions in.

I remember seeing this stuff, and I thought "what the actual fuck?". The dude was like "yeah it's unorganized as hell, I know"

...That's not the problem. CSS goes in either a <style> tag or a separate file (THEY HAD A SEPARATE CSS FILE). JAVASCRIPT GOES IN A <script> TAG OR A SEPARATE FILE

But, I get it. They're graphic design students. They can outdo me in probably everything in the Adobe suite (except DW as I learned). I once watched a girl in there do a project in Illustrator. I had no fucking clue what was going on. And when I was talking to her about it, she said "that's what I was thinking when we were watching you fix our code"

Kinda got a little sidetracked there. Basically, worst experience is non developers writing code for an assignment.

Shadow DOMs – the WORST invention in web standard history.

As a user script and user style developer, the shadow DOM has been a massive headache. Shitow DOMs block custom CSS, blocks parts of the page from being saved, and blocks user scripts and browser extensions. Shitow DOMs are an utter nightmare, especially closed ones.

And now, Google Gerrit's entire user interface is shadowdoomed. The only way to save pages locally is to scrape the JSON from the developer tools, but that is not possible on mobile.

I'm living it.
I started an internship at this web store made of different pieces and following no apparent rule or convention. They asked me to do this landing page, but I can't access to the development environment, nor push, create a docker, kill myself, nothing. I have to build from the DOM and write with inline style a page copied and pasted, with 300 lines of CSS already in the tpl, overwritten bootstrap 3 and two main CSS files linked. And "they don't do !important".
I wish I could say I'm learning a lot, but not. My life has become a waste of hours trying to please a company stuck and aged.

On a digital marketing course.
Teacher:
"Web pages are made of structured content and style, that's HTML and CSS. There are also many programming languages, like JavaScript or Python, but we are not discussing those here because it's computer freaks stuff. Now let's talk about cookies..."
Me: Should I kill myself now or wait until that man stops saying shit an die killing him too...?

Jeez, it can be done! Thank you CSS, i really thought it wasn't possible. My bacon is saved. (Overriding an inline style, javascript generated, from a linked style sheet).

Ohh the CSS style is not being applied? Let me !important it. 😆

This might just be me and my OCD talking, but am I the only one who gets super annoyed with sloppy CSS formatting?

So like, if somebody writes a sloppily formatted rule like this without spacing out each property and value:

#signUpButton {color:#FFF;background:#000;float:right;clear:both;padding:5px;position:absolute;top:5px;right:20px;height:100px;width:45px;}

As opposed to something like this, which just looks much cleaner:

#signUpButton { color: #FFF; background; #000; float: right; clear: both; padding: 5px; }

The formatting makes no difference in how the CSS is evaluated and rendered, but I find the spaceless style so ugly and difficult to read/edit, whereas the spaced out style is much more appealing to the eyes and easier to read

I find myself reformatting other people's CSS that works perfectly fine just so it will be easier to read/edit for anybody else that looks at it in the future

Client: oh we just need you to organize the files and all..

*ftps into server*
Me: oh so you guys use codeigniter

Client: yeah but for some reason the changes we make on the css files won't go through

Looked into the view files, and literally every element had its own style tag

I couldn't hate working with CSS more.

This is actually a rant.
But just like CSS - let's not take everything we write so seriously!

!important

Sharing a first look at a prototype Web Components library I am working on for "fun"

TL;DR left side is pivot (grouped) table, right side is declarative code for it (Everything except the custom formatting is done declaratively, but has the option to be imperative as well).

====

TL;DR (Too long, did read):

I'm challenging myself to be creative with the cool new things that browsers offer us. Lani so far has a focus on extreme extensibility, abstraction from dependencies, and optional declarative style.

It's also going to be a micro CSS framework, but that's taking the back-seat.

I wanted to highlight my design here with this table, and the code that is written to produce this result.

First, you can see that the <lani-table> element is reading template, data, and layout information from its child elements. Besides the custom highlighting code (Yellow background in the "Tags" column, and green gradient in the "Score" column), everything can be done without opening even a single script tag.

The <lani-data-source> element is rather special. It's an abstraction of any data source, and you, as a developer can add custom data sources and hook up the handlers to your whim (the element itself uses the "type" attribute to choose a handler. In this case, the handler is "download" which simply sends a fetch request to the server once and downloads the result to memory).

Templates are stored in an html file, not string literals (Which I think really fucks the code) and loaded async, then cached into an object (so that the network tab doesn't get crowded, even if we can count on the HTTP cache). This also has the benefit of allowing me to parse the HTML templates once and then caching the parsed result in memory, so templates are never re-parsed from string no matter how many custom elements are created.

Everything is "compiled" into a single, minified .js file that you include on your page.

I know it's nothing extraordinary, but for something that doesn't need to be compiled, transpiled, packaged, shipped, and kissed goodnight, I think it's a really nice design and I hope to continue work on it and improve it over time

Studying multimedia developer course Class year one learning HTML.
Build this with tables and inline styles....

Assignment was clearly written and you where able to copy past most of it.
I was like fuuu. I build it in CSS and external style sheet.

Time set for assignment 4 days, time used: 3 hours.

This was in 2008......

I hope now for you students out there that it has changed and you are learning proper coding and are correctly challenged

markdown is not good enough! the tools aren't there for non-devs and there's no concordance on moving forward *compatibly* for anything other than headers and __possibly__ lists.

md has been around for years and still no consensus on comments, meta data, css, data imports, etc.

i could never in good faith recommend to a non-dev to use markdown, even though every academic and professional writer from legal to journalism should exclusively be using markdown to write and store their documents. the data portability and ease of search, retrieval, collection, distribution, etc of markdown compared to pdf or docx is enormous. markdown is the hex format of text, the perfect layer of data and visual so that the user and the computer can both operate on text as blocks of data rather than weirdly styled paragraphs that need to be reformatted BY HAND for citation-style or journal format, or paper size. FOR EACH SUBMISSION. Academics literally rewrite their 100-page papers to accommodate up to 10 different submission requirements.

They could be clicking MLA vs Chicago and/or using a journal's stylesheet to recompile for its styles.

Today there is some support from zotero et al to take away some of the pain, but it makes ZERO SENSE for writers to have to keep and store and keep up to date, multiple versions of the same document. Git pull does not exist for them. But the worst part is that git isnt the solution to their problem. They need a compiler more than they need version control. But they also desperately need vcs. They ALL literally have a million files named "dumdum.dumFINAL-3084_lastversion \2020, this one.dum".

They dont have git or anything like it, because they need a line-by-line solution like markdown for git to become effective.

All of writing is basically mired in the fact that people cant even roll up their paragraphs and see what the fuck it is theyre saying. Most writing reads like a long scroll through some nonsense that goes nowhere. Like this rant. but the point is that markdown and line-by line editing actually produces more logically sound writing. You start to think in terms of defining ideas in blocks, ... like code.

HTML side with inline CSS und every shitty style tag ist enclosed in an extra span.

Ok, so I need some clarity from you good folk, please.

My lead developer is also my main mentor, as I am still very much a junior. He carved out most of his career in PHP, but due to his curious/hands-on personality, he has become proficient with Golang, Docker, Javascript, HTML/CSS.

We have had a number of chats about what I am best focusing on, both personally and related to work, and he makes quite a compelling case for the "learn as many things as possible; this is what makes you truly valuable" school of thought. Trouble is, this is in direct contrast to what I was taught by my previously esteemed mentor, Gordon Zhu from watchandcode.com. "Watch and Code is about the core skills that all great developers possess. These skills are incredibly important but sound boring and forgettable. They’re things like reading code, consistency and style, debugging, refactoring, and test-driven development. If I could distill Watch and Code to one skill, it would be the ability to take any codebase and rip it apart. And the most important component of that ability is being able to read code."

As you can see, Gordon always emphasised language neutrality, mastering the fundamentals, and going deep rather than wide. He has a ruthlessly high barrier of entry for learning new skills, which is basically "learn something when you have no other option but to learn it".

His approach served me well for my deep dive into Javascript, my first language. It is still the one I know the best and enjoy using the most, despite having written programs in PHP, Ruby, Golang and C# since then. I have picked up quite a lot about different build pipelines, development environments and general web development as a result of exposure to these other things, so it isn't a waste of time.

But I am starting to go a bit mad. I focus almost exclusively on quite data intensive UI development with Vue.js in my day job, although there is an expectation I will help with porting an app to .NET Core 3 in a few months. .NET is rather huge from what I have seen so far, and I am seriously craving a sense of focus. My intuition says I am happiest on the front end, and that focusing on becoming a skilled Javascript engineer is where I will get the biggest returns in mastery, pay and also LIFE BALANCE/WELLBEING...

Any thoughts, people? I would be interested to hear peoples experiences regarding depth vs breadth when it comes to the real world.

Did anyone here created a css style sheet for universal use?

Or writing separate code for every single project?

Client Agency: "Well why did it take you so long to style the clickdummy?"

Me: "well I did not anticipate that you had that set up by a student who does it know his css. I had to fix many usability problems first."

Client: "To me it looks just like before. What did you do exactly?"

Me: "Are you serious? That thing was not at all usable before."

Client: "The functions were all there in the first place!"

Me: "Yes, but I one does not know where to click, that is no use, is it?"

Client: "Ok then what ever...I somehow feel like like you have gotten less efficient these days. "

Me: -.-""""!!!!

Client: "so would you please include some effects and make it shiny? I just wanted you to make it shiny."

Me: -___- "ok then"

-----

Client: "Now it's awesome, thanks."

I'm so used to SCSS, I'm sure I wouldn't be able to style shit with pure css.

It's been long time that I use the JavaScript blocker add-on by default, and I pretty much get accustomed to see and perceive the web as broken styling trash for most of the times.

And this broken state(on non-SPA websites) isn't even justified because CSS has never been as powerful as nowadays. So... WTF?

On my side, I never let the absence of JavaScript ruin the template/style of a webpage u_u

Makes 100 unknown changes in html page and css style sheet .... Matches the design...Happy 🤗

Trying to actually use tailwindcss makes me start hating it already. Instead of just adding a CSS style that I know without looking up, I have to look up the documentation to find a tailwind class name that contains the styles that I want to use. I still think it is great for beginners, but otherwise we have to learn two languages (CSS and TailwindCSS) instead of one now?

<!doctype confusedRant 😕>

Plot: we need to release our website in two weeks which holds at least a thousand pages. All these pages are manually migrated from the old website, which doesn't have a database. Current status: 650 pages/1000 are completed, 40 different templates need to be adapted. I'm alone on these templates, my colleagues create the pages and fill the new database

So I'm working on the templates a WebDev coded for our website on a licensed CMS, and had this decently simple html block that looks like a square and consisting of roughly this (Emmet style):

a.area > blockquote > strong.title + p

After adding another <a> element inside the p, I noticed that my <a> wouldn't display and bust the whole look of the square.

Just for more details, the CSS the dev made is ultra specified (meaning each element is too precisely "described" : div.class .child .child2 { /* styles */ } when it could be .class .child2 for example). Also, the templates he made need to be compatible with any "module" the website has, thus the need of this high specificity

So I fired up the DevTools to check what happened, and had:

Expected: a.area > blockquote > strong.title + p > a
Actual result: some new a.area were wrapping the <strong>, the <p> and the <a> I just added. The source code was not showing any of this but just the rules I initially wrote - the expected result

Wtf?! I thought the JS the dev made was adding elements. I disabled said JS, and bam, these a.area were still wrapping everything!! What black magic would add these stupid tags I never asked for.

So I went looking in the CSS files in case some wizardry was happening, but everything was OK.

I tried changing my structure, changing tag (swapping a.area to p.area or without .area), HTML just said "nope, have those please".

Eventually I rewrote my own module out of frustration after three quarters of an hour fiddling with this stupid "module". I hate losing time for such shenanigans and under a lot of pressure because of deadlines.

Still haven't figured why those <element>.area would wrap everything out of nowhere...

@ everyone who keeps pushing Vue via node

Vue via npm:
- shit
- bundling so you can save 15% on car insurance
- webpack/etc to condense your 50TB node_modules folder
- have to deploy, if you're in the US then it'll probably be in the middle East or maybe North Korea if that falls out

Vue via script tag:
- works awesome
- pretty feckin fast
- can be deployed purely static
- easy debugging from dev console
- easy templating for frontend
- can use existing html/css
- easy to work in teams with people without having everyone install npm
- if you have a designer they will love you for making it easy to style things
- you can cache it and make it offline without any of the new bullshit vuex
- you can use vanilla libraries without a mixin, polyfill, bundler, or etc anus

Once I had to style comboboxes with only css so that they would look equal on all browsers... Equal meant they would look like the IE comboboxes with 2 pixel fugly borders, a gray focus state that felt more like a disabled state to me ... And it was horrible!

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 test

finally picking up React JS. When setting up webpack I fucked up on the last step in the tutorial I was using which wasn't even needed it just made requiring CSS modules not need style!CSS! Infront of the file name.. everything prior was working beautifully and I was ready to start setting up React. after attempting to be more efficient I couldn't even get webpack to run and thus the test project failed to run on local host. Now to re watch bad tutorials that assume you know everything because they're still more detailed than the others I've found. :| ugh

The first freelancer i hired on @upwork actually copied code from their other projects into mine. I could tell because every PR had a new coding style, naming conventions and massive amounts of unused css.
Knocking out 2 birds with one stone.

Still remember the first time I started writing style sheets, the biggest confusion was why do they use an id where we can always use a class.

Now I know why. Only you are your identity, but there may be many people of the same class. :)

A fellow developer think SASS is slow and "slower" to write. But wants me to edit styles in a 10k line style sheet. Anyone else had similar problems converting die hard CSS fanboys to use SASS.

personal projects, of course, but let's count the only one that could actually be considered finished and released.

which was a local social network site. i was making and running it for about three years as a replacement for a site that its original admin took down without warning because he got fed up with the community. i loved the community and missed it, so that was my motivation to learn web stack (html, css, php, mysql, js).

first version was done and up in a week, single flat php file, no oop, just ifs. was about 5k lines long and was missing 90% of features, but i got it out and by word of mouth/mail is started gathering the community back.

right as i put it up, i learned about include directive, so i started re-coding it from scratch, and "this time properly", separated into one file per page.

that took about a month, got to about 10k lines of code, with about 30% of planned functionality.

i put it up, and then i learned that php can do objects, so i started another rewrite from scratch. two or three months later, about 15k lines of code, and 60% of the intended functionality.

i put it up, and learned about ajax (which was a pretty new thing since this was 2006), so i started another rewrite, this time not completely from scratch i think.

three months later, final length about 30k lines of code, and 120% of originally intended functionality (since i got some new features ideas along the way).

put it up, was very happy with it, and since i gathered quite a lot of user-generated data already through all of that time, i started seeing patterns, and started to think about some crazy stuff like auto-tagging posts based on their content (tags like positive, negative, angry, sad, family issues, health issues, etc), rewarding users based on auto-detection whether their comments stirred more (and good) discussion, or stifled it, tracking user's mental health and life situation (scale of great to horrible, something like that) based on the analysis of the texts of their posts...

... never got around to that though, missed two months hosting payments and in that time the admin of the original site put it back up, so i just told people to move back there.

awesome experience, though. worth every second.

to this day probably the project i'm most proud of (which is sad, i suppose) - the final version had its own builtin forum section with proper topics, reply threads, wysiwyg post editor, personal diaries where people could set per-post visibility (everyone, only logged in users, only my friends), mental health questionnaires that tracked user's results in time and showed them in a cool flash charts, questionnaire editor where users could make their own tests/quizzes, article section, like/dislike voting on everything, page-global ajax chat of all users that would stay open in bottom right corner, hangouts-style, private messages, even a "pointer" system where sending special commands to the chat aimed at a specific user would cause page elements to highlight on their client, meaning if someone asked "how do i do this thing on the page?", i could send that command and the button to the subpage would get highlighted, after they clicked it and the subpage loaded, the next step in the process would get highlighted, with a custom explanation text, etc...

dammit, now i got seriously nostalgic. it was an awesome piece of work, if i may say so. and i wasn't the only one thinking that, since showing the page off landed me my first two or three programming jobs, right out of highschool. 10 minutes of smalltalk, then they asked about my knowledge, i whipped up that site and gave a short walkthrough talking a bit about how the most interesting pieces were implemented, done, hired XD

those were good times, when I still felt like the programmer whiz kid =D

as i said, worth every second, every drop of sweat, every torn hair, several times over, even though "actual net financial profit" was around minus two hundred euro paid for those two or three years of hosting.

CSS = cascading style sheets? More like… Cansei de ser sexy 😒

Once upon a time I spent a week writing down a "Coding Conventions" document, setting up linters for JavaScript & CSS based on those rules and put the call to the linter in our gulp build task, only to figure out the next day it was commented out by some guy because "the build task was throwing errors" due to his shitty coding style...

I loosely set aside Friday evening, Sunday and Monday for a rush job that was supposedly urgent. Monday I was sent the style-guide. It's mandatory to be written with bootstrap. Tuesday 10am, no copy, no images, no idea where the code will go or how it's context's global CSS will cascade over mine. Visual designer says the logo they provided me isn't crisp enough. How many grown adults does it take to screw in a lightbulb? 9?

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?

Me at the start of the day:
"Hmmm fresh new CSS sheet, this time everything will be properly organized. "

Two hours later:
"Shit, I got this feeling that I have already styled this class... Oh well, I'll organize this later.

At the end of the day:
"same element selected 3 times in same style sheet? My CSS is versatile. Spaces and indents? What the fuck am I selecting here? Everything seems to be working as intended, I should organize this... Nvm, I'll make a clean sheet next time.

What is worse than editing legacy CSS code? Trying to style a page using only no-code / low-code tools. Simplest things like a border only on one side seems nearly impossible or requires hours of trial-and-error with drag-and-drop-modules and their arcane option dialogs.

Wtf looking at a Pull Request today for styling 4 buttons...
750 lines of of CSS and not even able to style an anchor!!
How the hell is that even possible!!!

HTML Writers Guidelines

When designing your web site you want to make the visiting experience as enjoyable as possible and at the same time make it so that if the site needs to be changed in any way, the changes are not too difficult to make. You want the look to be as appealing as possible for all browsers and also make the site accessible to users with disabilities. In order to accomplish all this there are some general guidelines when creating your HTML code.

1. The first thing that will really make your life easier is through the use of Cascading Style Sheets (CSS) - CSS is used to maintain the look of the document such as the fonts, margins and color. HTML directly on the page is not a good choice to handle these aspects because if say, the font color you are using for certain paragraphs needs to be changed from blue to red, you would have to go in and change each color tag manually. By using CSS you can designate the color for each of those paragraphs just once in the CSS file. That way if you have to change the font color from blue to red you make one change instead of the countless number of changes you might have to make, especially if your web site contains hundreds of pages. This is a big time saver and a must for all professionally designed web sites.

2. Don't use the FONT tag directly in your HTML code - This becomes a problem when using some cheap authoring tools that try to mimic what a web page should look like by using excessive FONT tags and nbsp characters. These tools end up creating web pages that are impossible to keep maintained. There is a program you can use, if you've created one of these disaster pages, called the HTML Tidy Program which you can actually download here . This will clean up your code as well as possible.

3. You want your web pages readable to people who have disabilities - People who surf the Internet depend on speech synthesizers or Braille readers to interpret the text on the page. If your HTML markup is sloppy or isn't contained in CSS the software these people use to read pages have a difficult time in interpreting these pages. You should also include descriptions for each image on your page. Also, don't use server side image maps. If you are using tables you should include a summary of the table's structure and also associate table data with the correct headers. This gives non visual browsers a chance to follow the page as they go from one cell to another. And finally, for forms, make sure you include labels for form fields.

By following just these three guidelines you give your visitors, especially disabled visitors the best chance of having an enjoyable visit to your site while at the same time making it so that if you have to make changes to your site, those changes can be made easily and quickly.

I might have to ban myself from using inline styles, even if "Just cause I'm trying something real quick" :/

display="style: none"

"Why the fawk is this STILL showing up? Nothing in JS... Nothing in CSS... maybe I missed a end tag or something? Oh. OH. Why."

Was given some changes a client wanted done on a site that a couple of my predecessors worked on. They were pretty basic so thought, no prob, let's get this done and move on the more important things. Open the 3000 line css file..... no indentation..., syntax errors and warning all over the place and of course no documentation. A convoluted mess. Fixing the errors would basically break the site due to all the unnecessary overwrites. Literally the worst style sheet I've ever seen.

Just one more layer of wrappers.

I thought CSS supposed to style the document , but now I need to change the document to get styled properly

Do you prefer Grid layout or Flexbox on CSS??

I looked at a PR for some work a dev agency is doing for us. For some reason, the dev directly modified css rules instead of making updates to the SCSS files and running the compiler. WTF. I asked why and isn’t the compiler working. Just got an answer saying that was his mistake. That’s not a mistake, but that’s idiocy I’m sorry. Dev agency is supposed to be doing code reviews too, but I’m pretty sure they would have merged that. We have another repo where the same thing happened—only it was dozens of lines of code instead of one or two. Luckily that repo doesn’t get many new feature requests, but I do have to selectively pick lines to commit whenever I make style updates. It’s a nightmare. I know it must be hard to jump into a code base you’re not familiar with and there might not be dev docs, but for the love of god don’t make maintainability a nightmare. I shouldn’t have to be a babysitter. Bet they’re regretting that added me as a reviewer for the PR.

I fucked up my Chrome Dev-Tools. Why won't Chrome recognize my external CSS file properly on page reload anymore? Instead of filename.css:[linenumber] it is listed as <style></style>

To link a html to CSS is it
<link href = "style.css" type="style/css" rel="style sheet"> I need halp

I see a lot of articles/posts about the difficult of CSS.
Finding it hard to maintain, or resulting in spaghetti code.
Is this a common occurrence?

Whilst I've come across it in a few projects before, I wouldn't say it's a regular.
Now a lot of our sites are built on CMS' (Umbraco), but here's my approach.

I'll style the generic elements first across all pages
User generated content is usually in its own CSS class (for nested targeting, e.g. ul/ol tags)
Then I'll give each Document Type (post type/page type) it's own body class and apply specific styling to that page where needed.

Hopefully that's of help to some of you. I'm interested to hear your approaches to it! :)

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 ... 🙈

First dev project? In Holland we had a social media site back in the day called CU2. You could put in your own html/css and style your profile the way you wanted.

For professional work it was a landingpage for a healthcare related page.

Horror story and rant time I guess...

I haven't seen the main developer of this MVC project that I've been working on but I can totally assure that his seniority isn't in frontend development 😠 and I doubt the backend too... Fucking DataTables converted to IDictionaries<string,object>

Guess who need to build on top of the pile of shit!

Anyway, I wasn't really careful about what kind of template I was given to work on a new SPA page, so I'm doing the job given the time, but it's fucking gory:
- matrioska style layers (n.3) without documentation
- partials everywhere
- too much inline styling
- too many <style> sections (n per layer or partial)
- too many <script> sections (n per layer or partial)
- poor CSS styling or no styling at all! (classes without any style nor js association)😠

He's just been lucky that the browser is capable of handling his shit

Now that at the end of this year I'll leave this project (solo fullstack) and need to provide documentation for the next poor souls I was thinking to leave behind something at par of my skills and capabilities but analysing the current mess ticks my brain in a bad way, fuck you Marco!
Fuck you
and your seniority
and the Italian way of perceiving seniority that gives you a higher living in the wrong side of the field 🤬🤬🤬

Dammit! CSS is such a huge pain in the ass. I just want to use a <style> tag inline with a class to control margin positioning of one friggin’ image. (Yes, I know it’s better in a CSS file but this is a temp fix that will be reverted soon.)

<style>
.30-day-seal {
margin-top: -27.5em;
margin-left: 39.5625em;
}
</style>
<img class=“30-day-seal” src=/path/to/img.png”/>

Nothing happens. Only if I use a style=“” attribute directly in the img tag.

I’ve even tried:

<style>
img.30-day-seal {
margin-top: -27.5em;
margin-left: 39.5625em;
}
</style>

And

<style>
.30-day-seal img {
margin-top: -27.5em;
margin-left: 39.5625em;
}
</style>

And even

<style>
img .30-day-seal {
margin-top: -27.5em;
margin-left: 39.5625em;
}
</style>

Why do I suck so bad at this?! Still!?

Well the most irritating css thing is a simple BLANK SPACE that we injected somehow and how it destroys the whole freaking css style of that damn page. So you go crazy finding why that damn thing is not aligning and breaking other stuff.
Makes you wanna cry.
P.S. When something like this happens, display: table to the rescue.

I've just changed our style sheet generator to using gulp.
Took me 10 minutes to learn what to do (just css preprocessing with prefixes).
Grunt was horrid. We had it because the last guy thought "something new, I'll use this now", and it's never changed because no one understands it. Even after a few hours research.

You have just learned flexbox and how to arrange things in CSS. You can use flexbox without even looking at your notes or the web.

And suddenly you saw a tv displaying a web app which show a que number with off-grid looking style with small scrolling(not sized properly inside viewable area i.e 100% vh )

The OCD start.... Or your spider sense is tingling wanting to make the correction...haha

Shitty goddamn "Agencies" and the piece of shit WordPress install garbage that comes along with them

150+ fucking plugins
Cause this is 2018 and more plugins = better wordpress site right?

CSS is easy enough > just edit the stylesheet right? I mean theres already CSS in there so this should work.

Fucking Noooope because the default custom style sheet doesn't get loaded through the garbage theme anymore.

Sure that makes alot of fucking sense sense, idiots added another fucking plugin for Custom CSS ontop of the "Live CSS Editor" ontop of the "Click and Place Builder"

WHAT IN THE FUCK

Can someone explain to me why these "Agencies" need to add 50 plugins just to edit fucking visuals? And when they decide they don't want to use that plugin anymore > add a new one, but we won't keep everything clean and in one place > lets just fucking leave it installed and fragmented for the next poor fucker that comes alone

Okay question, I know it doesn’t matter for personal use but I’m not sure what the general consensus is in a team setting.

If I’m using a css framework in a project, and I customize it to match my style guide, does that require documentation usually?

Mainly speaking on changing the colors here for the most part I’m not going Rambo on the original files.

I’m asking in case I catch some freelance gigs; I don’t want to be clueless if there’s a few others on the project as I’ve only done solo work.

(relating the CMS of Doom™)
Imagine loading a shared CSS for your subdomain site from your main site via PHP over cURL and then embed it in a <style/> tag on every single damn request.
🤯

Who else finds HTML/CSS to be just plain bad?

since that's what the web adopted, apparently no matter what you are developing if it involves a GUI then the design method almost always follows in the same path as the web.

that's not the issue though, the real problem is that the web adopted a very horrible way to create a UI, while HTML might have been fine for 90s-style websites I just feel like its a very lousy way to create a modern interactive webapp UI, its just very painfully obvious that it wasn't designed for that purpose. remind me again what HTML stands for? "HyperText Markup Language" yea that sounds about right. and CSS really doesn't help but double down on the flaws of HTML.

on a whim I can come up with a better method:
instead of the weird <body><footer> structure, why not have say "objects that flow in a 2D space", you define the parameters location and dimension of these objects, with something like javascript they interact with each other and just like div in HTML objects contain smaller objects.

this makes a lot more sense than the footer/body design or the obviously duck-taped attempts at controlling the style in CSS, like flow, and absolute-position.

am I alone in this?

Why did the HTML file break up with CSS?

Because it couldn't handle the style conflicts anymore!

Chromium has royally fucked their own devtools.

You wanna add a style property? No. You're only allowed to update styles already that are there unless you click on some arbitrary space between brackets and properties.

You wanna click on a property's value to edit it? No. You get a dropdown to edit the unit value OR you can slide the mouse to update the value, nothing else.

You want to update CSS in the inspector, or switch them on or off? No. You get CSS that breaks as soon as you apply it and turns into garbage.

You want to copy CSS from the inspector after changing it? No. You get a line break in between each word for NO FUCKING REASON.

I hate web development sometimes.

I was playing with NativeScript, it looks cool as fuck, writing typescript and angular + native ui elements that you can style with css. This is underrated.

CSS and libraries doesn't mix. Something about the lack of scoping and the unintended side effects that happen from using two different libraries that add inline style via JS. I'm looking at you, position!!!!

I want some help with media queries I am new and learning so please don't bash me up :

Here is my css code I want to know how to solve the issue :

/* About Section */

.about
{
height:600px;
padding:50px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}

.abouttext
{
 position: relative;
 padding: 0 50px;
 height: inherit;
}

.abouttext h1
{
position: relative;
left: 230px;
}

.abouttext img{
width:20vw;
position: absolute;
top:50px;
}

.aboutlist
{
width:50%;
}

ol
{
list-style: none;
color: #e0501b;
}

ol li
{
font-size: 34px;
position: relative;
margin-bottom: 20px;
}

li p
{
font-size:16px;
color:#000;
padding-left:60px;
line-height:30px;
opacity:0.6;
}

li span
{
float: right;
  position: absolute;
 line-height: 25px;
 font-weight: 600;
}

They want me to change a few details in the CSS in a wordpress website. The theme supports some extra CSS. However, it doesn't seem to work without !important.

Turns out there's a line of CSS dumped in the <head> directly that overrides all "extra" CSS... and about 9 <link> instances after that... oh and some random <style> tags after that...

Oh and rounding shouldn't be done with CSS but with some custom button style editor. For each button. Seperately. Because fuck my life.

WEB PAGE WEDDING

We all know that writing your own css is easy.
Then we just try to pick up other's code and continue with their style...
It's taking so much time, I guess it's about collaboration now not only trying to figure it out alone ..