Watching a cookery program and it made me think it must be hard being a chef.

Then it made me think that being a web developer is a bit like cooking.

You have your ready meal equivalent with WordPress and Wix.

You have your cook at home kits with front-end frameworks like bootstrap and foundation.

You have your recipes and ingredients with package managers like npm and JavaScript modules.

Then you have your own home made cooking using vanilla js, CSS and HTML made to your own liking.

Just like being a good chef, being a good web developer is about knowing what ingredients and methods to include, but also what to leave out, to get the best result!

Porting of a huge web application from ZF1 to Laravel 5.5.

In summary:
1. approx. 200,000 lines of spaghetti code (ZF1)
2. approx. 2500 custom Javascript files
3. approx. 600 CSS files
4. hundreds of node modules and libraries
5. 12 different layouts (Home, Member, Admin,...)
6. ...
7. ...
8. ...
...

I've got six days to get this done. God help me.

Modern web frontend is giving me a huge headache...

Gazillion frameworks, css preprocessors, transpilers, task runners, webpack, state management, templating, Rxjs, vector graphics,async,promises, es6,es7,babel,uglifying,minifying,beautifying,modules,dependecy injection....

All this for programming apps that happen to run inside browsers on a protocol which was designed to display simple text pages...

This is insanity. It cannot go on like this for long. I pray for webasm and elm to rescue me from this chaos.

I work now as a fullstack dev as my first job but my next job is definitely going to be backend/native stuff for desktop or mobile. It seems those areas are much less crazy.

WebDev jobs should come with big warning signs:
"You absolutely will lose your sanity!"
"IE11 might indirectly lead to impotence!"
"You won't get laid more often by using CSS Grid!"
"You will have to fix websites which only appear broken on iOS Safari!"
"Get some extra terabytes ready for your node modules!"
"Get ready to yarnify your npm dockerized webassembly blobs while gulping on your mocha chai latte with no karma!"

Can't we just go back to the good old times with Quick Basic and chill?
Man, the ladies were flocking around those programmer boyz, I tell ya... Klickety klackety on the mechanical

Official logo of css modules
Via Reddit

Right, that's fucking it. Enough. I'm all for learning new technologies, frameworks, and development protocols, but my time on this earth is limited and at the end of the day if I'm having to spend DAYS AND FUCKING DAYS just scouring through obscure forum posts because the documentation is shit and just hitting ONE FUCKING PROBLEM AFTER ANOTHER then there comes a point at which the time investment simply isn't worth it. I HATE throwing in the towel because some FUCKING CUNT code problem has got the better of me, but fucking sense must prevail here.

Laravel fucking Mix. Do any any of you use this shit on Windows? Because I take my fucking hat off to you. I'm done with it.

Oh, so your server uses 'public_html' instead of 'public' does it? Well, of course you can just set

mix.setPublicPath('public_html'); then can't you?

No, you can't. Why? Because fuck you, that's why. Not only do you have to hard-code your fucking public directory into each specified path, additionally you have to set

mix.setPublicPath('./');

Why? Because fuck you, that's why. It took me the best part of two days to discover that little nugget of information, buried at the bottom of some obscure corner of the internet in a random github issue thread. Fuck off.

Onto next problem. Another 5 hours invested to extract some patchy solution that I'm not at all happy with.

Rinse, repeat.

Make it work with BrowserSync by wrapping your assets like so:

<link rel="stylesheet" href="{{ mix('/build/css/main.css') }}">

Oh oh oh but "The Mix manifest does not exist"... despite a fresh install of Laravel 5.6 and all relevant node modules installed... follow some other random Github thread with a back and forth of time-consuming suggestions for avenues of experimentation, with no clear solution.

Er no, fuck off. I'm going back to Grunt and maybe I'll try Webpack/Mix in another year or two when there's actually some clear answers, but as it stands this a wild goose chase into a fucking black-hole and I've got better things to do with my precious time. Go die.

I hate Sass.

When installing all NPM dependencies with npm i, it's always quick, but not with sass. Ooooh myy goood. It starts compiling. It always misses something. Your node version is always not what sass needs. It pulls out gyp which requires some native shit. The build is never reproducible, it always fails with some horrible two mile long poorly-formatted stacktrace that is just gibberish.

More than that, sass is just poorly designed tool used by frontend fuckboys to write imperative, nonstandard, non-maintainable styles. If you know shit about css, you don't need sass.

I'm so happy it's going to die along with gulp. Webpack and css modules are here.

Yes, css-in-js that has a runtime penalty is also shit. If you like its syntax but dislike everything else, use Linaria. It has no runtime penalty and looks just like other css-in-js solutions.

Age 8 - Gets first computer and struggles with dial up Internet and my parents yelling at that they ended to use the phone

Ages 12 to 18 - Gets first laptop, starts messing around and interested in websites, gets involved with SMF, and open source message board system written in Php, and starts helping people out, eventually getting paid work for setting up websites etc.. which lead onto learning html/CSS and picking up bits and pieces of Php (and also Photoshop/Illustrator etc..)

Age 18 - Goes to college to study Multimedia, refreshes knowledge of HTML/CSS, learns a bit of Actionscript and some PHP

Age 20 - finishes Multimedia degree, ends up working as an IT consultant for a small business, which leads me to pick up a bit of bash scripting, small hit more PHP. Leaves this after 3months and decides to do a small Software Dev course. Get my first taste of Java and Visual Basic there

21 - Enter into a Software Dev degree. Dive deep into Java and a small bit of Javascript.

23 - After 2nd year of college get taken on an internship with a large multinational where I learn and get hands on experience with Angular, JS, Coffeescript and C#

Present Day - currently coming up to the end of my degree and can switch between Java, C#, Python, Coffeescript/Javascript (front-end or Node) , C and Golang, C and Python introductions from college modules which I kept playing with in my spare time, Golang I just heard of and decided to write a few things in it because why not, I've picked up various frameworks (spring, echo, express etc.) at some point. I basically learn by doing, if something interests me and I enjoy it, I seem to pick it up quickly by diving in and trying to use it.

Drupal makes me want to go back to the moment that life first crawled out of the ocean, and shoot that first land-dwelling organism in the head – just to make sure that the animal kingdom never evolves to the point where a crime as ghastly as Drupal can occur.

Drupal somehow manages to be both unforgivingly, bureaucratically rigid, and an anarchic, spaghetti-coded mess – at the same time. Other frameworks are toolboxes. Drupal is a series of windows at the IRS or MVA – and it *will* take you days to figure out which series of forms you have to submit, with which boxes checked, in order to accomplish your goal.

The documentation is complete and utter trash.

It models content in a way that makes all sorts of assumptions about your use case. And those assumptions don't have anything to do with *how websites are actually designed and built*. In 20 years of building websites, I've never *once* wanted to use anything resembling the bizarre data model that Drupal *forces* you to use. Nor have I ever thought "gee, I wish my platform forced me to stop writing code every 20 seconds, so I can use an atrociously designed point-and-click interface".

I ask the community how to accomplish [insert extremely fucking basic task here], and they say: "well, you just install these 17 modules, glue them together with a bunch of configuration that couples your database to your code, and then shrug at the hideously broken HTML/CSS that comes out, because we give exactly zero shits about UX! isn't it great how Drupal makes things so easy?" Like, no – literally *every other framework on the planet* allows you to accomplish the same thing with just a few lines of code.

Most of the community seems to have little or no experience with other frameworks – so they seem solipsistically unaware that these are even problems. If your platform has been stabbing you in the arm for as long as you've been building websites, then you're just gonna assume that being stabbed in the arm is part of developing websites, you know? They seem oblivious to the fact that things are *so much easier* when your platform just lets you build whatever abstractions you need, instead of forcing its own weird-ass, undocumented assumptions on you.

Uruururrrrrrrggghgh. I can't understand how anyone defends this piece of garbage. If you're a Drupal developer reading this – please, for the love of God, try learning another framework. Once you've spent a couple of weeks learning saner ways of doing things, you'll never look back. I cannot comprehend how Drupal is still a thing.

Updated my personal site to use bulma CSS framework last night. Pushed it all up, then realised github pages doesn't do npm install before it builds the site. So there was no CSS for a bit.

The only way around was to commit node modules folder to git repo. Feels wrong but better than having no CSS.

I guess that's what happens when you use a free service 😁

The longer I work on front-end the more controversial my opinions become:

- Styling a button with display:flex is dumb.
- The DOM is not hard, unlike what the React team wants to have you believe.
- Specifying a <form> action matters, even if it's empty
- ES5 was the real JS revolution, ES6 mostly sugar-coated marketing
- Disciplined BEM (S)CSS is simple and flexible enough for most needs (vs CSS-in-JS, CSS modules)
- If editor support for Jsdoc were as advanced as Typescript, you wouldn't need the latter.
- There are cases where using floats and inline-block displays is better than the flex CSS box model

the more i learn about web dev, the more i realise the reason for its mess up . There are 2 major problems in it : the people who create various important concepts and tools for web dev were 1) working on it without any collaboration and agreements on the philosophy and 2) were too stubborn on their ideology i guess.

There is no limitation to anything's functionalities, and the limits that are "defined" are badshit crazy. for eg:

====================================
HTML creator : "I am gonna make a language that would provide a skeleton to web page. it will just have the text and basic markers to let the scripting and styling engines/languages know which text is supposed to be rendered and how.
It won't provide any click or loading functionality.

someone: "So i guess opening a page or loading an image would be handled by JS or other programming language? also, bold , italic or division would be added via CSS?"

HTMLguy : Nah, my html engine would ALSO do that.

someone : what , why? won't that just be stupid and against your philosophy?
HTMLguy : WHAT? am too awesome, can't hear you
w3c , 50 yrs later : sorry can't change this, gotta support the 50 yrs of web dev and billion sites

=================================

CSS guy: I am gonna make the world's best beautifying stylesheet language to provide colors, styling, fonts and backgrounds to a page. every loadings and clicks would be handled somewhere else

Some1: cool, then clicks, hover and running of animation would be handled by JS only

CSSguy :Umm, i guess i could handle those.

Some1 wha-?

CSSguy : Thankyou Thankyou Thankyou for the nobel price!

====================================

JS guy : I am gonna make a god web programming language! It can do everything: add/remove html tags, add styling, control animations, control browser, handle clicks , perform operations, everything!

some1: cool! you must be making very large programming language with lots of modules.

JS guy: No! i am gonna keep it small. no built in classes and file imports! just use the functions directly. if someone wants the additional lib functionality, install them on your server

some1 : innovative! what's typeof NaN ?

JSguy :shut up.

A "portal" built on Drupal 7. Started by someone who cannot do anything outside Drupal, and overseen by someone who believes JS to be "low level programming" (he literally said that).

What normally would be a table with 7 columns is instead 7 tables joined together. That goes for each data structure.

Each page, built in a separate module, either manually includes the same css files, or simply copy/pastes them.

Old, legacy modules have been hacked, and now depend on newer modules... Which, in turn, depend on the same old ones.

The theme contains huge, hardcoded parts of logic, so it can never be updated.

Worst part of it? It's only 3 years old. And there are people buying it as SaS. Already hitting bottlenecks at 2k users.

Started as a "web dev" with a lot of jquery/Mootools/internal-shit and PHP3/4, PERL, and some C/C++/for modules...

The worst part was the CSS and fucking PSD to integrate with a stupid design...
The PHP present world...

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

So I joined a company as an Angular dev and the code they gave me was stupid AngularJS ported to Angular 7 mixed with thousands of lines of jQuery inside index.html,

also all the css was scattered into a few files with 8000+ lines of code and no idea about which file does what, we decided to rebuild the project in Angular,

I built a huge portion of it with PrimeNg (a UI library like Angular Material) but after building all of that they tell me to remove PrimeNg and also asked me to import all SCSS modules in angular.json like wtf,

they forced me to use bootstrap with jQuery IN AN ANGULAR PROJECT this was my first job and I think I have a pretty good understand of Pakistani IT industry after this.

I learned programming from online paid courses and tons of practice so I expected others to be on the same level but that's not the case.

The real web development is optimising the shitty front end code.
The task assigned to me is optimisation of dashboard page of website which was developed by freenlancers.(end of contract from their side)
The front end is mess. Individual js files (bootstrap, popper, jQuery, jQuery ui, loader and main) loading in production inside head tag of html file
No text compression.
Every template has random number of their own js files in any block of template. Nothing structured. There will be fantastic waste of time figuring out file dependencies.
Same with css files. Some are scss, some plain css. No compression. No proper modules.
Basically, I have to go through 25-30 html files. Then understand, which template is extending which one. Go through all js and css files in each html file and again understand dependencies between them
This is gonna be real fun.

Any web developers care to share their file structure when breaking css / pre processed styles into modules? Want to organize but I don’t want to over-do it.

On the newer side of web development. Using CSS Grid with some flexbox. Any idea on why my 768px media query styles are overwriting my 320px styles?

I was breaking into modules but moved everything to a single css file until I figure out what causes the issue. The mobile styles are at top and I started the medium breakpoint below the initial styles.

Designed it mobile first if that makes a difference. Should the media queries be nested?

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.

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.

I love CSS modules.

In most businesses, self-proclaimed full-stack teams are usually more back-end leaning as historically the need to use JS more extensively has imposed itself on back-end-only teams (that used to handle some basic HTML/CSS/JS/bootstrap on the side). This is something I witnessed over the years in 4 projects.

Back-end developers looking for a good JS framework will inevitably land on the triad of Vue, React and Angular, elegant solutions for SPA's. These frameworks are way more permissive than traditional back-end MVC frameworks (Dotnet core, Symfony, Spring boot), meaning it is easy to get something that looks like it's working even when it is not "right" (=idiomatic, unit-testable, maintainable).

They then use components as if they were simple HTML elements injecting the initial state via attributes (props), skip event handling and immediately add state store libraries (Vuex, Redux). They aren't aware that updating a single prop in an object with 1000 keys passed as prop will be nefarious for rendering performance. They also read something about SSR and immediately add Next.js or Nuxt.js, a custom Node express.js proxy and npm install a ton of "ecosystem" modules like webpack loaders that will become abandonware in a year.

After 6 months you get: 3 basic forms with a few fields, regressions, 2MB of JS, missing basic a11y, unmaintainable translation files & business logic scattered across components, an "outdated" stack that logs 20 deprecation notices on npm install, a component library that is hard to unit-test, validate and update, completely vendor-& version locked in and hundreds of thousands of wasted dollars.

I empathize with the back-end devs: JS frameworks should not brand themselves as "simple" or "one-size-fits-all" solutions. They should not treat their audience as if it were fully aware and able to use concepts of composition, immutability, and custom "hooks" paired with the quirks of JS, and especially WHEN they are a good fit.

Hi, in my latest project I'm stuck on the CSS part.

I've already an Grunt + Sass Asset Generator for bootstrap.

The project has several (> 70) subpages aka modules.

The theming is client based, currently 4 clients with different colors.

At first I thought it was easy...

Splitting bootstrap to variables per client + bootstrap, so:

client1_variables.scss
client1_bootstrap.scss (including client1_variables).

client2_variables.scss
client2_bootstrap.scss
. . .

But now I'm stuck.

Reaason: The css classes are the same between the clients, eg client-bg-primary is the class.

I wanted to prevent generating for each client a folder - as every folder would contain the same content:

module/news/client1.scss
module/news/client2.scss
module/news/client3.scss

module/dashboard/client1.scss
module/dashboard/client2.scss
module/dashboard/client3.scss
...

Each SCSS file would only differ in the variable import...

Is there a way to prevent a Global Module CSS file for each client (as there are @##* fucking classes duplicated and I really don't want to untangle that mess) but not ending up with writing the same Code over and over?

The IRC sass channel is moderated, not possible to ask there... And when I google I find mostly themes based on an class approach (border-light vs border-dark)… :(

People! Do you know if there is something similar to gulp and modules like minify, uglify, smooth, etc (for HTML, CSS and JS) that runs in Python instead of nodejs? I can't install nodejs/npm in my job because "open source software is dangerous" :)