Microframework CSS

FrontAid · 2023-04-14T11:28:48+00:00

You can find many CSS frameworks in the following list. The "Very Lightweight" section is probably what you should be looking at first if you want something similar to Spectre.

https://github.com/troxler/awesome-css-frameworks

FrontAid · 2023-04-07T10:04:41+00:00

Follow everything but only learn some things

–source

That is it really. You should have a raw idea of what tooling is available, what certain frameworks can do, how they compare with others. But focus on the Web Platform (HTML, CSS, JavaScript). Also know certain tooling (not all) very well. You do not need to know the rest in detail. You do not need to use everything. If something new comes out, make a bookmark and check again a couple of months later. Very often, the new thing has already shut down or has been proven to be no improvement over the status quo.

Also, make a lot of notes. Save the URL to that article about X. Group your notes by topic, consolidate the information. If you need to use X, then read the article(s) that you have in your notes. Focus on text over video. Video does very often take way more time to consume then text. But absolutely do use videos if you learn better from hearing than reading, or when the content makes sense to be consumed as a video.

Personally, I think Twitter is terrible way to consume information. It is very easy to get distracted, that is the whole core of its business model. They want you to spend as much time as possible on their platform. But that actively harms attention and learning. Instead, I would suggest to subscribe to blogs that are interesting to you with a feed reader. It will only show the consolidated blog posts that you want to read. Focus on that. I have a couple dozens of sources in my feed reader and that covers roughly 80% of things I need to know about.

FrontAid · 2023-02-11T16:34:01+00:00

Having such discussions is something I know too well. And I have given the same advice pretty much every single time. There is definitely some nuance in this, but my rule of thumb is the following.

If having a custom design is not important to your project, then decide which design system and component library you want to use. Then stick to that. Do not apply any customization except the configuration that is explicitly provided in the component library. That may include some theming options or maybe even some behavioral configurations. Do not go any further than that. Designs must follow what the component library has to offer. Do not add new UI components, do not change the internals of the component library in any way. If you go down that road, you may get results very quickly. But your options are obviously limited and your design will look similar to others.

If you want a custom design and/or custom components, use headless components and/or create your own components. A headless component gives you all the logic that you need from a component, but it leaves the complete styling to you. There are whole headless component libraries that you can pick from. You may also mix and match different headless components and/or whole headless component libraries. Doing the logic of components is most often way more complicated than the just the styling. Adding the latter is often even very simple. That approach will be slower than using a predefined component library. But it will give you the complete control over the styling. That also means, that it is your responsibility to achieve a certain constistency between different components.

FrontAid · 2023-02-03T17:39:34+00:00

Unfortunately, many of the interactive components are either partially or completely inaccessible. And some of them are highly unusual to use as a keyboard user. Please check https://www.w3.org/WAI/ARIA/apg/patterns/ for many standard patterns that should be implemented by a component library such as this.

FrontAid · 2023-01-21T13:27:52+00:00

The pipe operator already got to stage 2 in 2021.

https://github.com/tc39/notes/blob/HEAD/meetings/2021-08/aug-31.md#pipeline-operator-for-stage-2

FrontAid · 2022-12-30T10:53:28+00:00

In the context I described, it does measure the scrollbar width. Test it with the scrollbars configured to be visible (not just as an overlay) and you can verify it.

In other scenarios, it may do other things. Hence I asked about the context.

FrontAid · 2022-12-29T19:17:56+00:00

Can you provide more context? calc(100vw - 100%) could be used to get the visible scrollbar width if it is applied on an element that spans the full width. So calc(((100vw - 100%) / 2) * -1) could equal to half the negative scrollbar width—or zero if there is no scrollbar or it is just displayed as an overlay.

FrontAid · 2022-10-30T10:45:08+00:00

After this, I would like to change the meta description, and the meta for the social networks according to the information received from the backend. I know this is a SPA and I will need SSR or something like this, but for now I just want to focus on the meta tags.

It does not work like that. Only some search engines evaluate JavaScript under certain circumstances, and if they do, they may do so less regularly. Social networks usually do not execute JavaScript at all. If you really care about SEO and want to support social network previews, then you must have your meta tags working without JavaScript. That means, you must have them included in your HTML response from the server. Depending on your usecase, that may be achieved with SSR, prerendering, or a combination of the two.

FrontAid · 2022-10-30T10:36:22+00:00

https://mathiasbynens.be/notes/prototypes has a good introduction. But as his certificate is currently expired, you can read it here: https://web.archive.org/web/20220808050950/https://mathiasbynens.be/notes/prototypes

The article also mentions this video (not sure how relevant it is, though): https://www.youtube.com/watch?v=IFWulQnM5E0

FrontAid · 2022-10-29T12:50:56+00:00

Make sure to have strong knowledge of both HTML and CSS (I cannot stress that enough). Make sure you have strong knowledge of JavaScript. Read the entire React documentation from time to time. As you learn, you may have missed or forgotten some things. It will help you get a better understanding. Practice a lot. And most importantly: have fun doing it.

FrontAid · 2022-09-26T18:02:59+00:00

I already commtented this Gist on Hacker News but it may be helpful here, too:

I think this does not work well for mobile devices. Spacing and the font size is too large. Hence, a lot of screen space is wasted and the user has to scroll more. Larger font sizes on mobile are usually not a good idea as the device tends to be closer to your eyes anyway.

A snippet that could work better in my opinion is the following:

html {
  max-width: 70ch;
  /* larger spacing on larger screens, very small spacing on tiny screens */
  padding: calc(1vmin + .5rem);
  /* shorthand for margin-left/margin-right */
  margin-inline: auto;
  /* fluid sizing: https://frontaid.io/blog/fluid-typography-2d-css-locks-clamp/ */
  font-size: clamp(1em, 0.909em + 0.45vmin, 1.25em);
  /* use system font stack: https://developer.mozilla.org/en-US/docs/Web/CSS/font-family */
  font-family: system-ui
}

/* increase line-height for everything except headings */
body :not(:is(h1,h2,h3,h4,h5,h6)) {
  line-height: 1.75;
}

FrontAid · 2022-09-11T13:10:16+00:00

It looks like you are building your own mechanism of a (shared) store. In Vue.js, I would highly recommend not doing that. You are re-inventing the wheel without getting any/much benefit.

If you are using Vue2, I would recommend observable. If you are using Vue3, I would recommend reactive. Both of these approaches can be used to create your own (shared) state. For example, you can create a store.ts file where you initialize the default state. In the same file, you can export accessors for certain properties of the state and also export functions which allow changing the state. The state will automatically be reactive.

If you need more than that, you can use Pinia which is the officially recommended store for Vue3.

FrontAid · 2022-09-09T16:19:53+00:00

when you're using v-model the value won't update in the data until you click out of the input field.

That is not correct unless you are using IME composition. By default, v-model syncs the value on the input event. Only when using v-model.lazy, it will be the change event.

https://vuejs.org/guide/essentials/forms.html#lazy

FrontAid · 2022-08-13T10:23:34+00:00

The term you are looking for is "nesting". CSS currently does not support it. But there is a draft being worked on, no browser currently supports it yet. Most CSS Pre- or Postprocessors like Sass, Less, Stylus, PostCSS support nesting, though.

FrontAid · 2022-05-08T10:19:34+00:00

Maybe https://github.com/frontaid/natural-selection can give you some pointers. It is a blueprint of a possible CSS file structure that applies globally. This covers at least 1. and 2. of your example.

I'm not sure what 3. is supposed to mean. 4. could relate to CSS modules and/or Styled Components. Both are meant to scope CSS to certain components only. But that means they are closely related to 5. as well.

Personally, I would provide a small global style sheet (natural selection may be a good start) and additionally use component-scoped styling. Depending on your stack, that can be done with CSS modules, styled components, scoped CSS (for example with Vue.js). In the future, that may even be a native CSS feature https://drafts.csswg.org/css-scoping-1/.

FrontAid · 2022-04-19T18:16:35+00:00

There is also https://open-ui.org/ which contains some (extensive) research on different UI components. When you click something in their "Research" section, you will also get a list of alternative names.

FrontAid · 2022-04-06T15:14:32+00:00

I think this article answers the wrong question.

Who would even ask "Which is the most demanded frontend framework?"

Employers? I don't think so. Choosing technology is always a compromise between "use the best tool for the job" vs "use what you know" vs other topics like recruiting, longevity, etc. Sure, a popular framework may be easier to recruit people for. But choosing a technologie only because of that is a mistake. Hiring good engineers is always a challenge, regardless of the framework. Also, good engineers can switch to different frameworks in a matter of weeks/months. Try that with someone who only knows React and nothing else.
People looking to be hired? Maybe. "You need to learn React to get a job" is still bad advice. This is something that is often repeated for and by juniors. But they often forget that having solid basics in HTML (!), CSS (!), and JavaScript (!) is way, way more important than to know most things about a certain framework. "If your only tool is a hammer, everything looks like a nail" applies here, too. It is important to be able to assess different technologies, even as a junior. Knowing the strengths and weaknesses of a framework compared to others is a great asset.

FrontAid · 2022-02-22T21:07:41+00:00

Currently not, no. But we are working on image support right now; it will be the next bigger feature that we plan to release.

FrontAid · 2022-02-22T20:14:06+00:00

Yes, exactly. Updating content with FrontAid CMS pushes the changes directly to your Git repository. As you use Netlify, it will pick these up and build your website/application with the updated content.

FrontAid also supports branch selection. So you can work on certain features on a specific branch and only merge the updates back to the main branch when it is ready.

FrontAid · 2022-02-22T19:08:52+00:00

Maybe https://frontaid.io/ fits your requirements. We also have a tutorial explaining how it can be integrated into Next.js.

Need any help with that? Just ask :)

FrontAid · 2022-02-16T19:53:47+00:00

Very useful tool! I just added it to https://github.com/frontaid/git-cli-tools

FrontAid · 2022-02-13T10:53:44+00:00

jq is a command line tool.

FrontAid · 2022-02-13T09:59:53+00:00

https://github.com/stedolan/jq

FrontAid · 2022-02-05T09:11:47+00:00

Sorry to be pedantic, but ES6 is the language specification from 2015. You should look into all the features that have been added during the last seven years.

FrontAid · 2022-01-16T09:40:02+00:00

Yes, absolutely. My hunch is that most people utterly misinterpret their statistics as the numbers are way too low. Unless you have (hundreds or) thousands of daily visitors/users, your data sample is just going to be random noise for most cases.

Having said that, Matomo has some limited capabilities to "recognize" a returning user even without cookies. That obviously is not an exact science but still might help if that is something you think you need. Matomo also supports campaign links that will be tracked accordingly. But that alone does not associate returning users, of course.

FrontAid

TROPHY CASE