Join devRant
Do all the things like
++ or -- rants, post your own rants, comment on others' rants and build your customized dev avatar
Sign Up
Pipeless API
From the creators of devRant, Pipeless lets you power real-time personalized recommendations and activity feeds using a simple API
Learn More
Search - "css grid"
-
PM: “I need to you build a responsive web portal for our BaaS clients that is clean and responsive. I’d like you to use Node, CSS Grid and ES6 for it.”
Me: “Sounds like fun.”
PM: “Make sure it works in IE8.”11 -
I’m a .NET desktop fullstack dev these days… Never worked web unless for my own small needs/personal projects.
I started using tech one way or the other by the time windows was version 3.1 and been through quite a bit ground-breaking changes in the industry of software development and the internet but if there’s one thing I cannot understand of it all, no matter how much thought I put into it is: How the fuck did we manage to make it so fucking complicated to develop anything these days?
I remember like it was yesterday that you could stand a website with HTML, CSS and JS, three fucking files and you’ve made yourself a single page site. Then came the word “Responsive”, “Responsive” written everywhere. Fair enough, grid system popped up. All of the sudden jQuery was summoned… and everything that happened after this point has been a fucking circus of high-pitched teens talking on conferences about fucking libraries and frameworks to make integration with real time, highly scalable, eco-friendly, serverless, data driven, genome aware, genderless, quantum technologies to interact with bio dynamically generated organisms, namely fucking users.
Every fucking bit of the process of building a mobile/web application seems to be stopped by yet another incredibly dumb attempt to suicide a developer. Can you go from starting an app and publishing an app without jumping through a thousand VERY specific hoops? No, fuck no.
I fucking hate it… It’s a bit hard to get Desktop dev jobs these days but for as long as I work on IT I will continue to stick to that area, until someone for the love of life comes up with a fucking solution to all this decadent circus of bureaucratic technocracy.
Fuck big industry, fuck tech giants, fuck javascript and webassembly, fuck kids putting ASCII art on console applications that I DON’T FUCKING NEED to install dependencies THAT I DON’T FUCKING NEED to extend functionality on frameworks that I DON’T FUCKING NEED… oh wait, I do need all this because YOU FUCKING MADE IT MANDATORY NOW! FUUUUUUUUUUUUUUUUUUUUUUUCK YOU!!!9 -
You know the Microsoft guy who installed Chrome because Edge crashed.
Don't judge him that much!
The guys at Google use Microsoft's VSCode for their Firebase. Also they use Typescript.
Our company (if any) shouldn't determine the tools we use. I haven't used Edge, but they recently added full Css Grid support. I'm gonna give it a try for a week or two...8 -
Just before you, my fellow system programmer, scroll past this, let me say this:
🍬 The web is actiually simple. 🍬
Both HTML and CSS is declarative. It's all easy when you understand the concepts, learn how to be idiomatic and quit trying to do that imperative bullshit in languages that aren't imperative.
HTML is simple. You know the boilerplate: doctype, head, body, that's all. Just mark it up and do NOT look at it before you end, mark it up as it were article or something. The appearance is up to css.
CSS is simple. You may even forget bem or rscss, you're already a skilled software developer. Use common sense and your code-splitting and naming skills you gained reading The Code Complete or doing software development for years.
Forget mockups. Forget absolute positioning, forget setting width and height in pixels. Go to awwwards, find some inspiration. Draw some buttons and fields on paper with your good old pencil. Then go and write some css. Feel free to steal some shadows and transitions from codepen.
Read about 8-pixel grid system. Let every element push away from others by setting something like margin: 16px; and whoops! You've just got fully responsive and got great vertical rhythm without even using media queries!
Oh my god, do NEVER set width and height explicitly! Type something like button { width: 120px; } and bang! The entire web page is broken. Quit that shit. Let it resize as it should. It will resize itself to fit its contents.
HTML is by default ready for your template engine. That's how you receive data from server — as server-side rendered, plain old HTML page. On the other hand, the form element is the most axiomatic and simple way to send the data to server. That's how you send it — as plain old GET or POST that every webserver can handle.
All of there are true:
1. It's easy to get great 100% responsiveness without media queries.
2. It's easy to align items in row, it's just one line of css. Maybe two, if you still want elements to wrap, but want to use flexbox:
.parent {
display: flex;
flex-wrap: wrap;
}
3. HTML and CSS are fast by default.
4. You don't need mockups to achieve great visual experience. Mockups is imperative, web is declarative.
5. You may not even need JavaScript to make great website.
Go on, ask me a question about web! I'll ready to answer everything.21 -
Fucking evopdf, I spent 2 days trying to figure out why the fuck my js isn't rendering the html for printing. I created the structure in html already, and it's rendered perfectly with js DOM, when evopdf ran from backend it shows nothing, tried not using external script, tried to put value one by one, it works, my css is also broken, thanks fucker, the client only asked to directly download the html page instead of save as PDF. I thought why the fuck not?
evo pdf modified my CSS element for some odd reason, flex and grid got messed up, page width also fucked along with font size, doesn't support some javascript function. I shit you not the .after and let doesn't work. Fucking garbage
Edit: it worked now, but I spend hours today rewriting everything just to looks decent and it still looks like shit fml6 -
90% of rants about CSS are just people who don't even know CSS2 properly and never heard of CSS3.
That's like crying about not having a nice car without even owning a drivers license. Bullshit.14 -
I was today years old when I discovered the CSS property column-count.
Do you have any fucking idea how many times I’ve used CSS grid or flex box or BOTH when all I wanted was to make a layout with a set number of columns?
Why the fuck didn’t I know about this thing?
Did you know about this thing?17 -
To anybody that didn't look through the entire chrome dev summit (lucky you and I don't blame you for it) - some very interesting gamified resources for css grid, service workers and flexbox:
- https://www.gridcritters.com/
- https://serviceworkies.com/
- https://mastery.games/p/...2 -
The site I'm working on works in Chrome, Safari, Edge
But not freaking Firefox.
I hate you Firefox, please leave.
(Disclaimer: Pls don't kill me. Freedom of opinion)rant browser support newest version of each browser crossbrowser css grid i know i'll start a shitstorm towards myself. css317 -
Tl;DR; version:
French designer, Mexican PSD -> HTML converter, Indian VueJS developer, Spanish project manager and a Taiwanese back-end developer. Application was made like an tower of pizza from bullcrap held by boogers and constantly licked by an orangutang to keep it standing.
Longer version:
We had to take a "half-finished" project from one of our clients, received the code for full-stack project. The css/design was so unbearable that it mostly broke on anything that had higher than 720px wide screen, structure was full of tables/divs and no fucking flexbox/grid... Then the fun part - we saw it's conversion to vueJS - a single fucken App.vue file that had shitton of conditions for pages.... yea, not even multi-component/routed app, just conditions!!!! And then... A back-end (in which I mainly specify myself) - it was made by a developer that had to mainly use Java/C# as their daily driver while all being build on php and Laravel. 0 Fucken laravel functions used, 0 of models, logic and so on.... Most of the page was running on RAW sql queries. Names... Oh my god the function names....
`getTheUsersThatHasAtLeastOneSpaceAssignedToThemByGivenCompanyId(int $id)`
And it held an RAW sql that was coming from a model....
All of this was managed by a random spanish manager who couldn't really understand what our client needed and what he actually wanted so from 100% of the site, only 20% was correct in logic....
And yet, according to the whole "package" (team) - they did everything correctly, saw no issues and our client was ungrateful fucker that refused to pay 10x the amount that we asked in order to completely re-do the application....
Morale: Remote teams are great... As long as all of them can work remote in TEAM.5 -
I just realized that i can do better in designing websites without bootstrap or other CSS frameworks. Thanks to CSS GRID. FTW4
-
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 mechanical6 -
Before learning the css grid, I fell asleep so fast everytime at night. After the bootcamp
This is the 3rd day and I still can’t sleep on time, my brain keeps on banging my eyes to wake up and try all of the websites that have been piled up on my brainbfor 3 years
P.S. I start learning grid after using bootstrap layout the first time. Not gonna touch it again. It breaks my brain kinda bad1 -
CSS Grid isn't working propperly so I am trying to debug it for a complete day.
It turns out that I have misspelled a grid-area name and thats why it didn't work :(4 -
CSS Grid Clock (Animated)
A Clock with the power CSS Grid and animations the result is a beautiful and futurist approach. The demo shows two variants one with the full power of the animation and the other with real clock logic.
Check it out guys and tell me what do you think.
link: https://codepen.io/flavio_amaral/...10 -
I dont fucking care if you dont like CSS Grid or flexbox Im not going to fucking CHANGE THE FUCKING ENTIRE LAYOUT.11
-
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.14 -
The fact that I have to convert a 90s-ish design into a WordPress theme despite the boss trying to convince our client that WP's shit and we should do it in something else doesn't tilt me as much as it should.
But what DOES tilt me and piss me off is the fact that the shitheads told us to 'make the design better', and so I tried; I made one of their graphics responsive by only designing it with CSS (and for once, I even made it work right) because they wanted a mobile-friendly version but failed to supply a mobile-version PSD so I had to improvise and they had the balls to tell my boss that they're 'disappointed that we failed to follow the guidelines'.
Did you bitchsicles even bother to hire a proper fucking designer who would know how to fucking design a PSD to convert into HTML? There's no fucking grid, the design's all over the fucking place like your mother after a Viagra-fueled Friday night bukakke party at an old home and the colors are an eyesore like your own fucking selves if you ever bothered looking in the fucking mirror. Fuck you all to hell.1 -
CSS quick maffs
You need to make a responsive grid that should wrap its columns on smaller screens. That's whay you do:
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, auto));
}
Replace 15rem with minimal width of a grid cell. Putting 0 there is bad because columns won't wrap then.
Now, let's make our task harder. We want the same grid, but we want say 4 columns max. That's what we should do:
.grid {
--columns: 4;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(max(15rem, (100% - (var(--columns) - 1) * 1rem) / var(--columns)), 1fr));
}
--columns regulate the maximum amount of columns we can have.
Aight bye4 -
My colleague has spent 3 days writing a responsive menu that has 5 items in it with no nesting that needs to move to a sidebar on mobiles.
I think that should be maximum 30 lines html and max 40 lines css. Or at least around that sort of area.
He has 150 lines html, 200 lines css, and is not even finished yet. He also made 2 entirely different menus for different screen sizes instead of using media queries...
The reasoning from all my colleagues is that its because the menu needs to use css grid (it doesn't they just randomly decided we can't use flex, float or online).
Working with people that give reasons for their garbage code that literally makes no sense every day gives me a headache....6 -
When I write “grid-template-columns: repeat(auto-fill, minmax(max(15rem, (100% - (var(--columns) - 1) * 1rem) / var(--columns)), 1fr));” in my coworker’s code and it fixes the CSS grid7
-
Damn, CSS Grid and Flex are fucking awesome!
I've been using both at least a year now and with a handful of SCSS mixins they have made the never-ending misery of front-end bearable.
Before I was forced to use Bootcrap floating grid and it was just a fucking mess and in some cases made JS hacks necessary.4 -
That feel when the html parser you are stuck with randomly strips out css and js so you have to reinvent grid layouts with tables.4
-
Started to redesign my wifes website into grid-layout with SASS. It is fun and I save a lot of markup HTML.
I try to keep the green theme, but I realy suck at design... I just have no eye for colors. I rather would keep everything white and grey...3 -
Debate:
What are your views on the CSS Grid?
Personally, I think it's tables, but now written in CSS.
I also think it takes the challenge, creativity and passion away from CSS21 -
Fuck CSS
Fuck it in the ass
With a baseball bat
Lubbed with hot souce.
Want to change from this : http://rjpf.ddns.net/ to http://rjpf.ddns.net/index5.html
First uses w3 framework
Second is using css grid with no framework.
Did everything right as I saw on tutorials (no copy paste)
Only uses 25% of the screen
Now I understand why everyone tells me to use bostrap... But noooo I must learn css
Ps: not gonna learn frameworks without knowing pure css9 -
I actually like the nostalgic feeling (if that makes sense) when making emails. Like fuck flex, grid and absolute! Just me, my table and inline css4
-
Finally I was able to look into css grids in more detail and gotta say it's impressive, also "grid-template-areas" made me chuckle for a bit, at how unusual and easy you can define layouts (even compatible with media queries!), which are also heavily obvious and readable, reminds me of the old games where characters were just symbols.1
-
Read up on how CSS Grid works. Now I feel like I've been living under a bridge these many months/years.
It's awesome how you learn so much during your tasks/projects.
I read the term CSS Grid a couple of days ago, and while starting a project for my client, I decided why not take a look into what a CSS Grid really is, and oh damn, I believe Grid is really going to make this project extra awesome.3 -
If some of you front-end devs haven't used CSS-Grid yet and are still annoyed by using nasty position and JS hacks to place stuff, I strongly recommend you to take 1-2 hours and read this incredibly useful guide for CSS-Grid:
https://css-tricks.com/snippets/...
and this one for Flex:
https://css-tricks.com/snippets/...
These two links have saved me PLENTY of hours struggling with all kinds of responsiveness and placement/sizing issues.1 -
Learning the most efficient positioning with CSS grid, somewhat feels like my whole body is dying with an alarming rapidly increasing speed.
While talking about speed, this must be the shit that makes our youth turn to heavy drugs.
I can't blame them.1 -
Turns out `white-space: nowrap` takes priority over every single other layout property used to constrain width and overflow, including these:
overflow
width
max-width
grid-template-column
But hey, CSS doesn't suck, you're just bad at it!4 -
I thought I had a decent handle on CSS. I can use flexbox and grid to make some decent and responsive webpages, and I'm at least familiar with most of CSS's more common gotchas
But no.
Even in 2021, with years of improvement in the language and browser compatibility, CSS can still fuck you over
I was adding some margin to a div element, and I noticed that the div element's margin seemed to force it's parent to move down too, as if the margin was applied to the parent as well
It took far too many nearly nonsensical google searches to discover that CSS has a nasty little trick called 'margin collapse'
And in true CSS fashion, the way to fix it is a hacky workaround. In this case, if you add a padding of 1px to the parent, the margin collapse doesn't apply.
Fuck CSS. From its weird implementation to its hundreds of gotchas to its hacky workarounds to said gotchas.
Fuck CSS2 -
Fuck accessibility.
No WAIT, before you call me an asshole hear me out.
So when you use CSS grid to create layouts you're supposed to not use the features it has (reordering items) too much, and instead keep the HTML structured the way it's supposed to be read.
When you add a picture of a cat you're supposed to put a alt="Brown cat sitting on a chair" there.
Also you should test for all kinds of sight disabilities and use high contrast colors.
All that for likely <1% of your users.
What would be the alternative? HTML is a markup language, and not supposed to be directly read by humans. Invest the time ONCE for screenreaders to understand CSS positioning and read content in a sensible order. Use image recognition to describe pictures (with selectable levels of detail). Let the browser modify colors on the fly for better readability.
Don't spend time and money to solve a problem 100000 Times that could be solved once.
Fuck accessibility.28 -
So a few months ago I created a css grid system. I ended up fucking my windows installation by playing around with shit I knew I shouldn't be playing with. And silly old me, not backing shit up obsessively, ended up losing the only copy of my grid system.
Luckily I remember how I made it.
But right now I am lacking motivation to do any serious work. So what did I do tonight?
Signed up for a hosting account
Registered a domain name (for my grid system) through my reseller account
Setup DokuWiki
And am now in the process of creating documentation for...
... A grid system that I have not [re]created.
That's some backwards ass logic right there lol -
After CSS Grid and Flexbox, I don't see the need for frameworks (except for utilities like margin and padding).
Change my mind 🙂4 -
Whaaaaat! You mean to tell me that setting grid-column-gap and grid-row-gap to 1em will make them both 1em? I really did not realize this thanks for clarifying! Is this really a bridge???
https://markus.oberlehner.net/blog/...3 -
2 days (actually about 4 hours) of battling a stupid CSS grid arrange that wouldn't behave.
Turns out 1fr (aka fill parent) works unless the child is another grid. In that case it forgets and just stretches the freaking parent as if there was no rule whatsoever.
If you have problems with CSS grids, consider trying flattening the markup...3 -
Finally got to play around with CSS grid today. Only dipped my toe in but it's very promising. Just have to test it a ton since I still need to support IE11 😒4
-
IE11 is my fucking enemy lately. We’re trying to keep up with the latest techniques here so we gave CSS Grid a try. Only works partially in IE11 but still important since our old users still use it and it’s responsibe for 5% of all income.2
-
fuck css (CASCADING STYLE SHIT) fuck css css son of fuckign whore i will learn c++ but no tthis fucking son of bitch after 4 fucking years in industry now i completed a whole course on fucking css and i go to a blank page created a div to practice and all i want it to make the div appear in center there is not fucking way i can do it son of whore css AYOOOO fuck css yeah!?
fuck this bitch ass niggas pussy fuck son of whole fuck bitch css cascading style shit its so fucking complex flex fucking box grid fucking dick align items inside my wifes pussy justify my asshole motherfucker nowrap my ass maybe wrap my ass bitch pusy
I would prefer to DESIGN A WHOLE FUCKInG ALGORITHM then to center a fucking div or align items inside my ass3 -
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!14
-
I've been programming for 15 years now or more if I count my years I programmed as a hobby. I'm mostly self learned. I'm working in an environment of a few developers and at least the same amount of other people (managers, sales, etc). We are creating Magento stores for middle sized businesses. The dev team is pretty good, I think.
But I'm struggling with management a lot. They are deciding on issues without asking us or even if I was asked about something and the answer was not what they expect, they ask the next developer below me. They do this all the way to Junior. A small example would be "lets create a testing site outside of deployment process on the server". Now if I do this, that site will never be updated and pose a security risk on the server for eternity because they would forget about it in a week. Adding it to our deployment process would take the same time and the testing site would benefit from security patches, quick deployment without logging in to the server, etc. Then the manager just disappears after hearing this from me. On slack, I get a question in 30 minutes from a remote developer about how to create an SSH user for a new site outside of deployment. I tell him the same. Then the junior gets called upstairs and ending up doing the job: no deployment, just plain SSH (SFTP) and manually creating the database. I end up doing it but He is "learning" how to do it.
An other example would be a day I was asked what is my opinion about Wordpress. We don't have any experience with Wordpress, I worked with Drupal before and when I look at a Wordpress codebase, I'm getting brain damage. They said Ok. The next day, comes the announcement that the boss decided to use Wordpress for our new agency website. For his own health and safety, I took the day off. At the end, the manager ended up hiring an indian developer who did a moderately fair job. No HiDPI sprites, no fancy SASS, just plain old CSS and a simple template. Lightyears worse than the site it was about to replace. But it did replace the old site, so now I have to look at it and identify myself part of the team. Best thing? We are now offering Wordpress development.
An other example is "lets do a quick order grid". This meant to be a table where the customer can enter SKU and quantity and they can theoretically order faster if they know the SKU already. It's a B2B solution. No one uses it. We have it for 2 sites now and in analytics, we have 5 page hits within 3 years on a site that's receiving 1000 users daily... Mostly our testing and the client looked at it. And no orders. I mean none, 0. I presented a well formatted study with screenshots from Analytics when I saw a proposal to a client to do this again. Guess what happened? Someone else from the team got the job to implement it. Happy client? No. They are questioning why no one is using it.
What would you do as a senior developer?
- Just serve notice and quit
- Try to talk to the boss (I don't see how it would work)
- Just don't give a shit1 -
For web devs here, do we really still need to support browsers of the evil (yeah I'm talking about MS browsers, Edge included) ?
I mean, building a css ui library here in 2017, without the benefits of custom properties, grid and so many other cool things, is so fucking frustrating.
A practical example : color theming with custom properties = Fuck Yeah / color theming without custom properties = so verbose and painfull, sucks.
The library is mostly for private usage at the moment so... I'm about to drop IE and Edge in the deepest shithole of the darkest cavern of my memory, and move on coding my lib with modern CSS, with almost no regret for the ghosts of the past who are still using these shitware today.
Should I ? Or should I... maintain compatibility as we traditionnally do ?
What's you guys opinion about this ? Can we finally kickban these browsers from our lives ?3 -
How much minutiae about CSS do I need to know for hiring purposes?
Should I focus on grid or flex?
Should I focus on mediaquerys before css grid?
What are some things I can safely ignore while studying frontend?6 -
Hey guys, quick one.
Frontend guys,
I need some CSS library that I can use for project I need do ASAP.
I have +- 1h to learn it, I need frontend and I need it NOW. It can be ugly. Prefered flex grid or sth along these lines. But please, if it has more than 15 minutes of reading through doc's its disqualified.
Any suggestions?
Im backend guy and know no shit about frontend.
NoJs. No Jquery. No JS. Nope. Im not having time for any line of shenanigans of JS.
Thx; peace.26 -
Any magic service creating resposive layouts from existing website? God I hate resposive css when there is no unified grid system across the design.2
-
Is it good time to switch to CSS Grid Layout frameworks such as Blueprint CSS? How is good/bad as compared to Flexbox?6
-
web devs... what are the commom screen sizes you use for responsive design. I used the bootstrap grid but there are some tablets which resolution is higher than a normal conputer and that tablet is considered as a computer. Is there any css-only-way to make a difference between desktop, tablet and cellphone?4
-
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?13 -
It is this time of the year that I get to work on a shitty project to add some new functionality to it, it is a front end part of the project which before was externally developed, so now I have to deal with this BS Marionette mess where nothing they wrote comply to standards, like the fucking router.js doesn't look anything like the Marionettes doc, the bootstrap they used they fking decided to override classes in custom css and turn the 12 col grid system into 5ths or shit, then they created some autmated tests with bunch of intricated selectors selecting by 'labels' instead of !!!!FUCKING WHAT ARE THIS FOR IDs!? - fuk me - so I better decide to procrastinate on this project since luckily enough we don't have a deadline and I wouldn't care if we had either! My job is java developer, and yes I feel good about learning new things and learning front end. BUT NOT THIS CRAP DEPRECATED MttehorseShit!
-
UX and Game Design: "Keep It Simple" Is Stupid.
Presentation, Content, and Structure
Often when designing a UI, I stumble across blogs and articles that discuss it and focus far too much on the structure. Wordpress is terribly guilty of this and I see it fairly often in the game industry.
In web design you might use flexbox for a content-centric design and not worry too much about the layout, or css grid if structure seems important. But the broader question is why? Why is structure important and why is it wrong to focus on structure over content?
First, structure *comes* from content. Even where over many years, we've taken certain kinds of content, be they the various genres of games, or the sundry type of websites or apps, we've learned to take all the various patterns and categorize them, to extract the commonly repeating idioms into what we call structure.
But if you're experienced, and a fan of UI design in general, then I bet you that you can name a number of counter-examples, those that broke the mould, or broke the 'rules' of good design and still somehow worked. And that follows *because* structure is derived from content. This is the same reason idioms, patterns, and best practices change over time, as we codify exceptions into their "own" rules, new best practices emerge which mostly everyone follows, and then yet more exceptions break them. And so it goes.
So we see content before structure. But isn't there something to be said of style? Why yes, there is.
To read the full article, all 14k words of it, head over to medium for more:
https://swcs.medium.com/ux-and-game...5 -
Just replaced a mess of a 6 row, 6 column grid done using bootstrap with 4 lines of CSS3 grid layout (shorthand).
Why do we even need full Bootstrap when ya got Grid and flexbox now? Oh right, .btn colours... 😖😫😭3 -
Today I fought against a monster named as CSS and I sort of won.
I am having a problem in that the grid layout don't work with the scroll bar (overflow)
After hours of trying thing out I remember that I am just creating the prove of concept that the system can actually be build.
I said "Hey this is just a prototype, it doesn't need to be pixel perfect, and finally use height in css".
I really appreciate it if anyone can advise me on less dirty method. Here is the source code
https://jsfiddle.net/rc0f9t5j/
The input box should stay at the button no matter how much text the container have. The fiddle have the intended behavior.4 -
Useless JS library #1 ready:
A paned-tabbed js grid, where cells can be iframes because every grid operation only changes the css and the cell itself is never moved in the DOM. The purpose is to support complete sandboxing of untrusted snippets, so we could even let users pick their own modules if they want extra functionality.
Soon I'll clean up both this and the messaging and put them on github, but to me writing these is a creative process and the working prototype is everything but readable.
In the meantime I put it on
http://test.tardigrade.dynu.com6 -
When you join a React JS SPA project months after the start to discover that 2 CSS grid systems with totally different breakpoints have been in use in parallel since 5 months, hidden by layer upon layer of abstraction, and that no dev bothered to fix, let alone notice.
#FML -
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...haha1 -
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.
-
Modern Web Developer
(To the tune of "I Am the Very Model of a Modern Major-General" from Gilbert and Sullivan's "The Pirates of Penzance")
I am the very model of a modern web developer
I’m quite fluent with JavaScript; An HTML whisperer
My code is clean and elegant, I genuinely innovate
And even know my way around a Promise and async / await
I’m very well acquainted too with matters vector graphical
I understand why SVG coordinates seem magical
And even without Photoshop I elegantly can produce
A mockup or a logo in most any format that you choose
[Chorus]
A mockup or a logo in most any format that you choose
A mockup or a logo in most any format that you choose
A mockup or a logo in most any format that you choose
I'm quite adept at ES6 expressions like destructuring
I know the ins and outs of functional reactive programming
In short, in matters browser-based or Node.js if you prefer
I am the very model of a modern web developer
[Chorus]
He is the very model of a modern web developer
I know our mythic history, the humble start, the browser wars
I know why Douglas Crockford fought the battle over ES4
The World Wide Web Consortium and Ecma International
My knowledge of our legacy is truly supernatural
With LESS and SASS and CSS, designing for mobility
I’ll perfectly apply the right amount of specificity
From custom fonts and parallax to grid and flex and border-box
I know most every tip and trick both common and unorthodox
[Chorus]
He knows most every tip and trick both common and unorthodox
He knows most every tip and trick both common and unorthodox
He knows most every tip and trick both common and unorthodox
And when it comes to lazy loading, bundling up and splitting code
There’s nothing quite like Webpack, which of course is built on top of Node
Considering my resume, I’m certain that you will concur
I am the very model of a modern web developer
[Chorus]
He is the very model of a modern web developer
When new frameworks and libraries emerge I must be ravenous
And gobble up the hot new thing, my appetite is bottomless
React and Vue and Angular, Immutable, RxJS
The list will be outdated long before I'm finished singing this
My pull requests rely on multitudinous utilities
To help me lint and test and build, a deluge of analyses
And every single day there are a hundred thousand more to learn
The web is going through an irresponsible amount of churn
[Chorus]
The web is going through an irresponsible amount of churn
The web is going through an irresponsible amount of churn
The web is going through an irresponsible amount of churn
This pace is agonizing! Code from yesterday is obsolete!
The speed of innovation is enough to knock me off my feet!
It's happening too fast! I can’t keep up! I’m tired! It’s all a blur!
I am the very model of a modern web developer!
[Chorus]
He is the very model of a modern web developer!1 -
Ooh this project.. So I was put in charge of creating new pages, and general maintenance as the site was already built by a previous dev on the team before i joined the company. I take a look at the design, fairly strange forward quick analysis most of it bootstrapable, some custom code is needed for some parts so no issues there.
Looks at the code, only the bootstrap grid system is being used, the rest is custom code, an additional 9K lines of CSS and 526 lines of JS. What the hell is this.2 -
Hello everyone,
I wanted to share with you a useful resource. There are many frameworks that help to create responsive and flexible web apps.
According to me, Bootstrap 5 is the best framework as it offers many features such as experimental support for CSS Grid and offcanvas in the navbar. Also, a new placeholders component, horizontal collapse support, and many more.
As we all know, it is an open-source framework that offers responsive structure and styles for building new projects and websites.
Here, in Today's rant, I am sharing some useful Bootstrap Practice projects that will help you to learn and sharpen your skills as a developer.
https://themeselection.com/bootstra...
You can check the above blog for more detailed info.
Thanks5