News for hackers. Stuff that matters.
Re:My First CSS by Brajeshwar on Monday July 26, 2021 @01:59AM (#27956171)
I tend to believe that someone who can do magic CSS is about the ability to weave it with Mathematics and patterns. Other than that, the way you use CSS as it evolves become more and more syntactic sugar.

Once you are comfortable with CSS, try to dig a tad deeper into design philosophies and patterns. Work with established designers who understand that spacing is not just margins/padding of a designated number but a rhythm across screens of varying shapes and sizes.

For instance, understand the reasoning why a good designer will tell you that the typographic scale for desktops will be major-third, while for the smaller mobile phones, it will have to be minor-third.

Advance topics to research and have peace with CSS are vertical rhythm for spacings, modular scaling for typography, and the Cicada Principle, etc.

Here is an anecdote to illustrate the above;

There was a "Careers Page" redesign for one of the biggest banks in the world - after about 10+ years of their old one. When I landed in London, they already had a "Senior front-end developer" mid-way into the project. I went as a replacement for one of my team who had a family emergency. I haven't written much code in years.

They had engaged a brilliant designer and had a wall plastered with some of the most beautiful glossy print-outs. Everyone, including the client, loved it. Unfortunately, the struggle was -- the front-end output had irregular margins (pixel mismatch), fix another but breaks the other, etc.

I saw that they had screen rulers that try to match the design with what comes out on the screen.

I requested the designer to spend few hours explaining his reasoning behind the spacing and asked him the rhythms (similar to musical notes) that he has used, the scaling of the font sizes. This was when I realized the designer was brilliant, but the engineers would not understand or appreciate his effort.

I wrote out the Sass functions and mixins and steadily replaced many hacked in numbers and values. Introduced Design Tokens, a simple style guide, etc.

The website is still there and will likely last another 10+ years. I'm also sure many of you might have stumbled on it or have applied to jobs with it. :-)

Re:My First CSS by codetrotter on Monday July 26, 2021 @08:33AM (#27958601)
> the typographic scale for desktops will be major-third, while for the smaller mobile phones, it will have to be minor-third

I tried to google major-third and minor-third with various keywords but couldn't find anything relevant. Could you expand on this and explain what it means?

Edit: Never mind, I found some. Here:

- https://medium.com/sketch-app-sources/exploring-responsive-t...

- https://spec.fm/specifics/type-scale

- https://designcode.io/typographic-scales

- https://type-scale.com/

Re:My First CSS by lelanthran on Monday July 26, 2021 @03:00AM (#27956504)
> Advance topics to research and have pace with CSS are vertical rhythm for spacings, modular scaling for typography, and the Cicada Principle, etc.

Do you have some links? Because the first DDG result for all those concepts together is your comment on this page.

Re:My First CSS by Brajeshwar on Monday July 26, 2021 @03:43AM (#27956748)
I did some quick search, and found few ones. You can search for similar ones -- these are beaten topics and have been discussed, blogged, done in length.

- More Meaningful Typography from List Apart, https://alistapart.com/article/more-meaningful-typography/

- Responsive typography with Modular Scale: Create meaningful proportions in your design using SASS, https://www.bugsnag.com/blog/responsive-typography-with-modu...

- How to Establish a Modular Typographic Scale, https://webdesign.tutsplus.com/articles/how-to-establish-a-m...

- https://www.modularscale.com is a tool to define your scale

- The Cicada Principle, revisited with CSS variables from an industry Design + Engineering guru/goddess, https://lea.verou.me/2020/07/the-cicada-principle-revisited-...

- https://utopia.fyi/blog have some good articles, more modern and relevant to the new CSS such as Clamps.

I had fun with Cicada - beautiful background patterns, which you yourself cannot predict. I was looking for my presentation on "Design with Mathematics, and Patterns" (or something in that line) but I think I may have lost it like many other open source files from before Github.

Re:My First CSS by lelanthran on Tuesday July 27, 2021 @11:20AM (#27973500)
That was very helpful, thank you!
Re:My First CSS by MonaroVXR on Monday July 26, 2021 @03:07AM (#27956542)
I want to see it, I'm just curious.
Re:My First CSS by Donckele on Monday July 26, 2021 @03:40AM (#27956735)
On his personal about page: https://cv.brajeshwar.com/ you can see it was jpmorgon for https://careers.jpmorgan.com/ If you do check that page and some more pages you’ll note there are (on latest iphone) serious design issues. Ironic that its a career page since they definitely need some work done on that web design. Usually you can ignore “minor” issues but when its a bank such as jomorgan, a “leading” digital company such as razorfish and such glowing HN comments from the actual people involved you really have to wonder about the state of things.
Re:My First CSS by Brajeshwar on Monday July 26, 2021 @03:46AM (#27956767)
True, very true. You should have been there with the limitations we had with an arcane CMS they inherited. Every front-end code was not even allowed to interact directly with the back-end. We wrote routines for it to be sucked in, chewed up and spit out. What you see is the final by-product of that gimmickry. I'd still say, really good work by the team with such restraints and limitations -- no real data, all mocks. And yes, I had 45 days to execute and walk out.
Re:My First CSS by nikhila01 on Monday July 26, 2021 @03:18AM (#27956611)
I was curious too. Probably https://careers.jpmorgan.com based on his LinkedIn and the fact that he said "Careers Page redesign for one of the biggest banks in the world."
Re:My First CSS by panta82 on Monday July 26, 2021 @03:43AM (#27956751)
But that's just a basic page with some stock photos...
Re:My First CSS by Brajeshwar on Thursday July 29, 2021 @01:27AM (#27993068)
Remember, Google was just a simple INPUT field with a Button to search the web. ;-)