`grey` is darker than `darkgrey`
(#808080 vs #a9a9a9)

gg CSS

Spaces Vs Tabs - A real world case.

So one of the menial tasks I was given here was to take a pretty mock and turn it into an HTML email template. Needless to say, I hate emails and HTML.

After many weeks of trial and error, rejection and tweaks, we're doing our final tests when someone noticed that Google's clients are chopping off the footer and saying "View Full Email".

A few searches yield that Google has a 102KB cut off for email size. We did some checks and found that we were at 104KB. I immediately thought it was my CSS inliner being a little too verbose, but as I went in to edit things, I noticed that the file was intended with spaces!

Now I'm a fan of Silicon Valley, and I recalled an episode from this past season where Richard mentioned something about saving file size by using tabs. I had never really considered that point.

So I went back into VSCode and told it to convert all of the individual templates that make up this giant email to indent with tabs...

The file size dropped from 104kb to 82kb.

I wasn't very polarized on the Tabs vs Spaces debate, but this here has given me a nice real world example as to why tabs rule.

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 *

I know a guy who writes everything in Haskell.

He started learning it because his parents got him into a math school (and math schools in Russia use either Python or Haskell), he liked it, but later he dropped out. Today, apart from Haskell, he only really knows HTML and CSS, and maybe some JavaScript.

He writes backend AND frontend in Haskell and uses some kind of JRPC stuff to manage all that. He told me that his life is a pure heaven. He IS RELEVANT (!!!!!!), his apps always run without bugs (because in Haskell you can mathematically prove that there are no bugs), they are performant, faster than C (because you can't write a complex enough app in C that will be as efficient as compiled Haskell, because it's you vs compiler). He doesn't have any problems in life whatsoever. He never got burned out, he never got anxiety or depression. He doesn't act pretentiously and stuff, he's just a normal person who rarely even mentions that he can program.

Science says it can't be done! You can't only know Haskell and be a relevant software engineer! You know what, he didn't _know_ it was impossible. He's like that grandpa from a meme, he got Alzheimers, but because of it he forgot that he had Alzheimers, and now remembers everything.

The fun thing is that he looks like a typical gopnik, with adidas suits and stuff.

What a gem of a person.

Share your VS Code installed extensions here.
Mine is: Alignment, Better Comments, change-case, Colonize, CSS Peek, DotENV, File Utils, GitLens (my favorite!), Gulp Snippets, JS-CSS-HTML Formatter, Laravel 5 Snippets, Laravel Blade Snippets, Material Icon Theme, npm Intellisense, Numbered Bookmarks, Path Intellisense, PHP Debug, PHP DocBlocker, PHP Intelephense, PHP IntelliSense, Prettify JSON, Quokka.js, snippet-creator, Vetur.

Feels like there are redundant extensions here that I need to uninstall.
Happy Friday and Cheers! Excited for Infinity War movie! 😎

I've discovered now that on VS Code when you point over a CSS class it shows you an example of the element it reffer to. 😲

I don't know if it's something new or if it's already present in other editors, but I found it now and I love it!

I am much too tired to go into details, probably because I left the office at 11:15pm, but I finally finished a feature. It doesn't even sound like a particularly large or complicated feature. It sounds like a simple, 1-2 day feature until you look at it closely.

It took me an entire fucking week. and all the while I was coaching a junior dev who had just picked up Rails and was building something very similar.

It's the model, controller, and UI for creating a parent object along with 0-n child objects, with default children suggestions, a fancy ui including the ability to dynamically add/remove children via buttons. and have the entire happy family save nicely and atomically on the backend. Plus a detailed-but-simple listing for non-technicals including some absolutely nontrivial css acrobatics.

After getting about 90% of everything built and working and beautiful, I learned that Rails does quite a bit of this for you, through `accepts_nested_params_for :collection`. But that requires very specific form input namespacing, and building that out correctly is flipping difficult. It's not like I could find good examples anywhere, either. I looked for hours. I finally found a rails tutorial vide linked from a comment on a SO answer from five years ago, and mashed its oversimplified and dated examples with the newer documentation, and worked around the issues that of course arose from that disasterous paring.

like.
I needed to store a template of the child object markup somewhere, yeah? The video had me trying to store all of the markup in a `data-fields=" "` attrib. wth? I tried storing it as a string and injecting it into javascript, but that didn't work either. parsing errors! yay! good job, you two.

So I ended up storing the markup (rendered from a rails partial) in an html comment of all things, and pulling the markup out of the comment and gsubbing its IDs on document load. This has the annoying effect of preventing me from using html comments in that partial (not that i really use them anyway, but.)

Just.
Every step of the way on building this was another mountain climb.
* singular vs plural naming and routing, and named routes. and dealing with issues arising from existing incorrect pluralization.
* reverse polymorphic relation (child -> x parent)
* The testing suite is incompatible with the new rails6. There is no fix. None. I checked. Nope. Not happening.
* Rails6 randomly and constantly crashes and/or caches random things (including arbitrary code changes) in development mode (and only development mode) when working with multiple databases.
* nested form builders
* styling a fucking checkbox
* Making that checkbox (rather, its label and container div) into a sexy animated slider
* passing data and locals to and between partials
* misleading documentation
* building the partials to be self-contained and reusable
* coercing form builders into namespacing nested html inputs the way Rails expects
* input namespacing redux, now with nested form builders too!
* Figuring out how to generate markup for an empty child when I'm no longer rendering the children myself
* Figuring out where the fuck to put the blank child template markup so it's accessible, has the right namespacing, and is not submitted with everything else
* Figuring out how the fuck to read an html comment with JS
* nested strong params
* nested strong params
* nested fucking strong params
* caching parsed children's data on parent when the whole thing is bloody atomic.
* Converting datetimes from/to milliseconds on save/load
* CSS and bootstrap collisions
* CSS and bootstrap stupidity
* Reinventing the entire multi-child / nested params / atomic creating/updating/deleting feature on my own before discovering Rails can do that for you.

Just.
I am so glad it's working.
I don't even feel relieved. I just feel exhausted.

But it's done.
finally.

and it's done well. It's all self-contained and reusable, it's easy to read, has separate styling and reusable partials, etc. It's a two line copy/paste drop-in for any other model that needs it. Two lines and it just works, and even tells you if you screwed up.

I'm incredibly proud of everything that went into this.
But mostly I'm just incredibly tired.

Time for some well-deserved sleep.

Looking back on 2022 from a developer's perspective, even without talking politics, war, climate, health, and injustice, despite CSS updates and AI progress, it feels like two steps forward, one step back. I used to curse ReactJS and Webpack, but we can have breaking changes everywhere else, like PHP 8 vs. WordPress. Oh yeah, and why do customers still love WordPress so much that we have to mess with this unstable abomination with its half-baked Gutenberg block editor and (full) site editing? And what about "social" media? Well, never mind, after Usenet and Myspace, why did people favour Facebook and Twitter in the first place? Thanks to devRant, there is at least one site where I rant about obscure tech topics from my subjective point of view, using swear words and exaggeration, without getting downvotes. Maybe I am even allowed to say "Mastodon" here? Thanks and merry Chanukka, Jul, X-Mas, Y-Mas, and Z-Mas and a happy new year everybody!

HTML vs CSS vs JavaScript

Damn frontend crap.

The fact that you have to mask all of the disease with processable versions of css, html & js is bad enough, but there are like 6 dialects of each bandaid, and every project has traces of each.

The the design kid tells me to run this grunt script, frontender number two screams "no, dont use grunt, we use gulp! or was it bower? I guess just run it through yeoman, it's easy!", after which the third fucking shitty hipster yells "No that's outdated, just edit the webpack file, and then run yarn install... oh but run npm upgrade --global yarn first"

Did you just fucking tell me to upgrade a fucking package manager with another package manager?

Composer, gem or cargo are not always without problems. But at least us backenders have our fucking shit together. The worst we have to deal with is choosing Python 2 vs 3, or porting some old code so the server can migrate to PHP7.

The next person to tell me they found this awesome tool to manage his other tools... I'll fucking throw your latte all over your wacom tablet.

Developer vs non developer interview:

Non developer:
How well do you know excel ?

Developer:
How would you write spreadsheet app, what if it was cross platforms mobile application but also desktop app ?

Non developer:
Do you know how to use windows?

Developer:
Do you know kubernetes, distributed systems, lambdas, cloud services and how to deploy to server farm ?

Non developer:
You know how to use printer / fax and coffee machine ?

Developer:
Do you have experience in writing code for embedded devices ?

Non developer:
Do you know powerpoint ?

Developer:
How well do you know javascript / html / css, are you comfortable with writing backend node.js code or electron applications ?
React native and native apps maybe ?

Writing x86 assembly code in VS Code feels so weird. I mean, I'm using something that's built using crazily high level languages (JS, HTML, CSS), on top of a mammoth runtime environment (Node, V8), which is itself sitting on a modern and sophisticated operating system (Antergos), and I'm writing code that shifts bits and bytes around in memory in order to get one part of my C program to run just a little faster. Wow.

TLDR;
How much do you earn for your skill set in your country vs your cost of living?
BONUS;
See how much I & others earn.

Recently I became aware of just how massive the gap in developers earnings are between countries. I'd love to calculate a fixed score for income vs cost of living.

I know this stuff is sensitive to some so if you prefer just post your score (avg income p/m after tax / cost of living).

I'm not shy so I'll go first:

MY RATES
Normal Rate (Long term): $23
Consulting / Short term: $30-$74
Pen Test: $1500 once off.
Pen Test Fixes: consulting rate.
Simple work/websites: min $400+
Family & Friends: Dev friends are usually free (when mutually beneficial). Family and others can fuck off, even if they can pay (I pass their info to dev friends with fair warning).

GENERAL INFO
Experience: 9 years
Country: South Africa
Developer rareness in country: Very Rare (+-90 job openings per job seeker).
Middle class wage in country: $1550 p/m (can afford a new car, decent apartment & some luxuries like beer/eating out).
Employment type: Permanent though I can and do freelance occasionally.
Client Locality: Mostly local.
Developer Type: Web Developer (True web dev - I do anything web related from custom HTTP servers to sockets, services, advanced browser api's, apps & more).

STACKS / SKILLSETS

I'M PROFICIENT IN:
python, JavaScript, ASP classic, bash, php, html, css, sql, msql, elastic search, REST, SOAP, DOM, IIS, apache

I DABBLE WITH:
ASP.net, C++, ruby, GO, nginx, tesseract

MY SPECIALTIES:
application architecture, automation, integrations, db's, real time data, advanced browser apps/extensions (webRTC, canvas etc).

SUMMARY
Avg income p/m after tax: $2250
Cost of living (car+rent+food): $1200
Score: 1.85

*Note: For integrity when calculating my cost of living I excluded debt repayments and only kept my necessities which are transport, food & shelter.

I really hope you guy's post your results, it would be great to get an idea of which is really the worst / best country to be a developer in.

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

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.

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.

I'm thinking about switching to Sublime Text 3..Used VS Code until now, but its so slow.. I mostly do front end(html, css, js, angular) and a bit of asp.net core.. Someone using Sublime and can recommend some good plugins?

So what Text Editors do you guys use at your jobs? I'm in high school but I would like to know which Text Editors/IDEs programmers in the field use. I use sublime, VS Code for my programming and for HTML and CSS I use Brackets.

Side note.. this update for devRant is pretty nice c:

As a fan of C#, I'll be entering the world of web development with ASP.NET, but there are so many things to learn before getting started! Javascript, bootstrap, css grid stuff, angular vs react things, docker, microservices, http and REST stuff, accessing some remote thing through ssh. I feel so intimated and don't know where to start!

What should I do to practice being a "good coder" vs a "code Googler" who slaps other people's code into the site just because "it's enough to get the damn thing working"?

I feel really overwhelmed with all that Ive learned thus far. At this point I feel width with know depth when it comes to my knowledge of websites.

I've been messing around with html/css/js for a while and played with plenty of other languages,pre-processors, frameworks, etc. I never went to school for programming and have done work for small businesses independently for some time. Most of what I know comes from codecademy treehouse and similar sites. I can refer to Google on a lot of things but I feel like there are habits that I should be implementing so I don't have to re-do things later. I love the book apart series but I still feel like it's missing the foundational knowledge that I'm looking for.

After all of the time I've spent going through courses I feel like my experiences have given me solutions to build a few things and now I'm just jamming those solutions onto whatever I can until something I like comes on to the browser.

It's really easy to sit down and bang my head against the keyboard until something comes out that looks the way I want it to. However, I know there is way more going on that could help me make better decisions. I just feel like I'm missing something. Maybe it's experience, or maybe it's just the lack of commroddery from working alone and not being able to approach problems with a team.

I hate pulling up my css file and feeling like it's rubbish, and feeling like I don't completely understand things like flex, or display, or position. I've been pushing at this for a while but I don't think I've found a resource that has really made me feel like I'm anywhere close to being a competent coder.

There are tons of watch and learn and do type classes that show you how to make stuff, but I guess what I want to know now is why we make it that way.

At some point do you just sit down and read the MSN start to finish?

I wonder sometimes if my brain has been reprogrammed because I grew up in Google world and don't actually have to solve anything for myself. I read about a guy who locked himself away for hours with books on code and he just sat there and wrote his code on paper until he was confident that he was getting it right.

Question:
I've just learned html, css, php.
JavaScript and SQL i know from Before. I have used VS since the day i started programming. For all My languages ever! The thing is that My HTML/css placement skills are a huge time stealer. I waste 90% OF webdev time to just get things to the right place even with bootstrap css. Write->compile->write...... So My question is IF i should change program for writing html/css to à more visual/interactive editor or stay with VS and hopefully i become pro designer soon.

Guys, which code editor is better for PHP/JS/HTML/CSS? I mean, with more addons, code completion, and so on..
Atom? Sublime? Brackets? VS Code?

Thanks!

CSS vs CSS

Java — Eclipse
Rust, C++, etc. — IntelliJ
HTML, CSS, text — VS Code

My sense of confidence goes up when I have to explain CSS cascading and absolute vs relative units to back end devs, and their brains explode a little

CSS, I particularly don't hate it but i don't love it either. As a React developer I love JS but I don't really like CSS based UI development i mean it's not bad but just level of satisfaction i get with a running logical thing in JS vs creating some UI stuff with CSS does varies. So I want to improve my CSS skills. Anyway can anyone suggest in what topic order I should learn CSS, I can do some basic stuff with flexbox and sometimes with grid but I think I lack some essential concepts.

So, I just (few hours ago)made a new variable that's either brilliant or innately flawed... not sure yet. It's an oddly unique var...

__bs__

So far I only made it in python and windows env (i script like the methodology of css).

I bet you're wondering how I've defined __bs__ and the practicality of it.
__bs__ is derived from a calculated level of bullshit that annoys me to tolerate, maintain, etc. as well as things that tend to throw nonsensical errors, py crap like changing my strings to ints at seemingly random times/events/cosmic alignments/etc or other things that have a history of pulling some bs, for known or unknown reasons.

How/why did this come about now?

Well I was updating some symlinks and scripts(ps1 and bat) cuz my hdd is so close to death I'm wondering if hdd ghosts exist as it's somehow still working (even ostream could tell it should be dead, by the sound alone).

A nonsense bug with powershell allowing itself to start/run custom ps1scripts with the originating command coming from a specific batch script, which worked fine before and nothing directly connected to it has changed.

I got annoyed so took an ironic break from it to work on python crap. Python has an innately high level of bs so i did need to add some extra calculations when defining if a py script or function is actually __bs__ or just py.

The current flavour of py bs was the datetime* module... making all of my scripts using datetime have matching import statements to avoid more bs.

I've kept a log of general bs per project/use case. It's more like a warning list... like when ive spent hours debugging something by it's traceback, meticulous... to eventually find out it had absolutely nothing to do with the exception listed. Also logged aliases i created, things that break or go boom if used in certain ways, packages that ive edited, etc.

The issue with my previous logging is that it's a log... id need to read it before doing anything, no matter how quick/simple it should be, or im bound to get annoyed with... bs.

So far i have it set to alert if __bs__ is above a certain int when i open something to edit. I can also check __bs__ fot what's causing the bs. I plan to turn it into a warning and recording system for how much bs i deal with and have historical data of personal performance vs bs tolerance. There's a few other applications i think ill want to use it for, assume it's not bs itself.

*in case you prefer sanity and haven't dealt with py and datetime enough, here's the jist:
If you were to search any major forum like StackOverflow for datetime use in py, youd find things like datetime.datetime.now() and datetime.now() both used, to get the same returned value. You'll also find tons of posts for help and trying to report 'bugs', way more than average. This is because the datetime package has a name conflict... with itself. It may have been a bug several years ago, but it beeb explicitly defined as intentional since.

Does anyone know how to preview your code through VS Code I can't view the files at the same time I can only open HTML or CSS or JavaScript by themselves

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)… :(

Anyone ever think of an ide that looked like the windows forms editor for vs, but for html elements showing their events and css elements ?

like an asp.net editor that actually works for html ?