Hacker News new | past | comments | ask | show | jobs | submit | Phillips126's comments login

Recent news articles are stating: "Nancy Pelosi's challenger in California thinks putting the House speaker on blast for supporting congressional stock trading might finally pay dividends for him in his third attempt at unseating the long-term lawmaker."[0]

She is possibly flipping on her decision now to keep her seat. If her husband Paul Pelosi[1] (an investment manager) can continue to trade, this ban will do nothing to her.

[0]: https://www.businessinsider.com/nancy-pelosi-challenger-shah...

[1]: https://en.wikipedia.org/wiki/Paul_Pelosi


I mentioned it in another comment, but I felt the same way until I figured out there is a solution. Here is an example of a simple CSS file with a reusable button class:

  @tailwind base;
  @tailwind components;
  @tailwind utilities;

  @layer components {
   .button {
     @apply text-2xl p-2 bg-gray-100 text-gray-600 border border-gray-200 cursor-pointer hover:bg-gray-200 hover:border-gray-300;
   }
  }
I can now just give all of my reusable buttons the ".button" class instead of the giant string above. I can even add more styles or overwrite existing styles to give it a different look such as:

  <button class="button bg-red-100 text-red-600">Click Me</button>


> Is the code on the left (with lots of classes) actually what tailwind is like to use in practice?

As a fan of tailwind, I can say that I initially thought this was dumb and it would be hard to read through a huge number of classes applied to each HTML element. Later, I found that for many of my reusable components, I could combine classes into a single class. As an example, my stylesheet may look like this:

  @tailwind base;
  @tailwind components;
  @tailwind utilities;

  @layer components {
   .button {
     @apply text-2xl p-2 bg-gray-100 text-gray-600 border border-gray-200 cursor-pointer hover:bg-gray-200 hover:border-gray-300;
   }
  }
I can now just give all of my reusable buttons the ".button" class instead of the giant string above.


But why would you use @apply instead of something like:

    .button {
        background-color: $gray-100;
        border: 1px $gray-200
        /\* so on... \*/
    }
i don't understand how these "micro" css classes actually help versus just setting the property.


After working with Tailwind for a period of time I came to the exact same conclusion. You can achieve all of this in a better way using CSS variables. You can transform this:

    @tailwind base;
    @tailwind components;
    @tailwind utilities;

    @layer components {
     .button {
       @apply text-2xl p-2 bg-gray-100 text-gray-600 border border-gray-200 cursor-pointer hover:bg-gray-200 hover:border-gray-300;
     }
    }
in to this:

    .button {
      font-size: var(--text-2xl);
      padding: var(--p-2);
      background-color: var(--gray-100);
      color: var(--gray-600);
      border: solid 1px var(--gray-200);
      pointer: cursor;
    }
    .button:hover {
      background-color: var(--gray-200);
      border-color: var(--gray-300);
    }
Adjust variable names to taste. No build step, no extra tooling, just as readable in my opinion. On top of that, using CSS variables means that those values can be changed at runtime. You basically get user-driven theming for free.

I'm building an app like this right now and it's been lovely.


I really like this approach - I forget CSS has native variables now (maybe it has had it for a while?) and always think of scss's $variables.


How do you deal with media queries/responsiveness?


I'm on mobile so forgive me for not giving more extensive code examples. In my case, I'm building my app with React, TypeScript, and react-jss. I've got an enum which stores my common media queries and I just use it in the style declaration.

    button: {
      [MediaQueries.Medium]: ... 
    }
I can't use CSS variables for that but I personally don't think it's useful to let the user redefine those queries anyway


It's a straitjacket to reduce inconsistency across different sections of a large app/family of apps - and which help a bit with finding common styles for refactoring.

It's not so much about what you do as a single designer on the initial design, more about what a team of designers do when adding new apos/modules to an existing product.

In theory you could use bootstrap and a theme - but your fellow team members will get lost, re-invent some styles etc.

I'm inclined to solve this problem with discipline and corporal punishment - but I'm afraid the tailwind-people are on to something.

Basically the cascading part of css does not work well for applications / a suite of applications - it works better for actual hypertext documents (like sgml might) - where you can make a layout that works, while the browser handles the user experience (UX). When layout/design becomes "just" part of how an app looks, but the important is how it beheaves (including things like hover, expanding menus etc) - bare CSS doesn't work as well. Not technically, but from a perspective of an evolving code base.


Couldn't you just write a normal CSS class though, instead of going through the rigmarole of Tailwind?


Damn Windows updates...

Getting downvoted so I guess I need to clarify I was being sarcastic. I work in IT and we say this a lot.


Humor that doesn’t contribute to the conversation is generally discouraged.


I'm not sure I understand this. Humor generally doesn't "contribute to a discussion"—it's purely that, humorous. I'm not sure how OP's comment contributes any less than any other joke one could have made.


Really clever humor can entertain and educate, although admittedly it’s rare.

The most common sentiment I see when people attempt cheap jokes is that Reddit is a more appropriate forum.


I felt the same way when I discovered this element about a year ago. Each time I try to use it I always find it falling short of what I need it to do. It's incredibly limited in what can be styled with CSS, doesn't have the ability to have multiple values and there is no max-height to the dropdown. I've seen the dropdown grow so large it clips out of the browser itself - which might have been a bug that is now resolved.


My understanding is that is the combination of both a standard <input> and <select>. You can either choose one of the pre-defined options from the dropdown or add your own custom value in the input.

I've tried hard to use this element on many applications but each time I always find it falling short of what I need it to do so I just end up creating a custom element. My biggest gripes are the lack of a max height attribute for the dropdown and inability to do much in terms of CSS styling. It would also be pretty slick if it was possible to select multiple values.


This is what I want to know. I actually greatly dislike the touch pad on the current remote. I am constantly swiping too fast (flying by my desired target), or my upward/downward swipes are not working as desired. Not to mention every time I pick up the remote, the touch pad thinks I'm swiping causing my movie to fast forward/rewind.


For ReactJS developers, this is always my go-to: https://react-icons.github.io/react-icons

Tons of SVG icons from popular packs and using ES6 imports, you only bundle the icons you use.


I cannot agree with you enough. Our company hired a new manager that had a background "familiarity" with PowerApps. He requested that I (a software developer) create a PowerApp that would be used by the company, essentially a ticketing system. I figured with my ~decade experience in developing complex web applications from the ground up, this would be a piece of cake.

What an abysmal way of developing applications. Everything (containers, widgets, etc.) is basically SVG's and your application looks like your designers couldn't use anything but MS Paint. Creating more complicated interactions with buttons and other UI elements was a pain to develop and making the UI responsive was a nightmare. The generated HTML was insanely ugly and the application was very slow/sluggish feeling. After fighting for a couple weeks, I began to (behind the scenes) build out a quick web application alternative to pitch. Long story short, he LOVED the web app version and that is what we are still using today company wide.


> Everything (containers, widgets, etc.) is basically SVG's

Controversial opinion: vector-based UI widgets are the right way to do web apps. Instead of all the existing framework approaches that ultimately produce HTML, both developers and users would be better served by using HTML for the elements on a screen that correspond to documents, but the web app's "chrome" should use SVG. Most of the complications of frameworks come from a blind spot on the part of developers, who continually select a tool with a high impedance mismatch to their goal (producing an app). This blind spot on the part of developers leaves this area under-explored, and in turn there's under-investment in the specs / on the part of browser makers to eliminate pain points in the way that developers are actually using the platform for their work.


The problem is that SVG doesn't AFAIK support layout constraints - you'd have to essentially recreate flexbox and grid in JS, and God forbid you wanted to make the design responsive!

I agree with you in principle that SVG is a better match to app UIs, but we'd need a good layout story for that to happen. And I'm using SVG for much of my own application interface!


You should be able to use CSS (incl. grid, flex, etc) within an SVG context though.


ideally, an SVG layout optimised for web app design would be somewhat more flexible than just grid and flex - such as anchoring an element to 2 other separate parents (or in other words, supporting a directed graph rather than a tree). A pure constraint system would be nice, but is probably not viable if fast rendering is important (which, it is).


I went down that road for awhile. You start running into problems when you research all of the default behavior that the built-in widgets have, and this is even before you get to accessibility issues.

I love the idea of punting on HTML and writing a ground-up SVG UI toolkit, or even a WebGL based on if you're feeling ambitious, but giving up on the built-in browser behavior and all of the automation tooling around interacting with HTML is a non-starter for most use cases.


How do you make this accessible?


Can you use ARIA attributes on inline SVG in a Html document? That would do the trick nicely if it works.


Interesting, if SVGs make sense, then a new game-engine-like client makes more sense as a general delivery platform. Maybe Dart/Flutter/Fuchsia isn't far off.


The world thought they needed native app stores when they just needed better bookmarking tools for progressive web apps.


I once was interviewing at a company for a graphic designer position. My previous job was paying me just below $30,000 and I desperately needed to increase my income to keep up with my bills (college loans, rent, food, electric, etc.). My vehicle (1987 Chevy Blazer) was not very reliable (in ~2010) and wouldn't you know it - I broke down immediately after parking in a lot directly in front of a sign that said "2 Hour Parking, Vehicle Will Be Towed At Owners Expense".

I'll never forget the embarrassment I felt after a pretty underwhelming interview explaining that my car was broken down outside in their lot and asked they notify their security so that I was not hit with more expensive fees. I've had some pretty significant financial hardships - some much worse than this, but this moment in particular really had a lasting effect on me.


Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: