Tagged with “Webdev” (19)

Webdevelopment, Webdesign, HTML, CSS & Javascript.

An IndieWeb reader: My new home on the internet

I have a new home on the internet. I don’t visit the Twitter home timeline or the Facebook news feed anymore. I don’t open the Instagram app except when I post a photo. I still have accounts there — I just don’t visit those sites anymore. Instead, I have my own new space on the internet where everything I’m interested in is consolidated, and I can read and reply to things from there.

This post is still a huge source inspiration to me. A goal I want to achieve.

My development todo list for the near future:

Cool things people do with their blogs!

Small and independent blogs are always full of surprises. The more blogs I stumble upon, the more genuinely surprised I am by the things people do with their blogs. It seemed like a good idea to summarize highlights here. I hope it might inspire non-bloggers to blog and bloggers to tinker more with their site—because obviously the tinkering never ends!

ViteJS

Next Generation Frontend Tooling

  • On demand file serving over native ESM, no bundling required!
  • Hot Module Replacement (HMR) that stays fast regardless of app size.
  • Out-of-the-box support for TypeScript, JSX, CSS and more.
  • Pre-configured Rollup build with multi-page and library mode support.
  • Rollup-superset plugin interface shared between dev and build.
  • Flexible programmatic APIs with full TypeScript typing.

An opinionated list of best practices for textual websites

I realize not everybody’s going to ditch the Web and switch to Gemini or Gopher today (that’ll take, like, a month at the longest). Until that happens, here’s a non-exhaustive, highly-opinionated list of best practices for websites that focus primarily on text. I don’t expect anybody to fully agree with the list; nonetheless, the article should have some useful information for any web content author or front-end web developer.

I feel like I never too the time to look at my CSS and think, “How could this be organized?” Styles always felt.. different when it came to organizing them, as if it was not that important to organize them.

Today I looked around and quickly found a thing called 7-1 pattern. It is a way of structuring your css in a folder-based way.

Seven folders are recommended plus a main.css that’s only importing the other files. The 1-part is about putting exactly one logical piece in one file. So, in layout, you might have header.css, footer.css, wrapper.css in layouts and in components button.css and post-list.css.

I won’t go into more detail but what struck me is that this is the kind of structured and opinionated structure that I enjoy so much about Phoenix. Most of the time, you don’t need to think where something will go, because there is a place for it already and all its friends are there, too.

lolight - tokenizer and syntax highlighter

Lightweight tokenizer and syntax highlighter, less than 3kB of minified code. No language specific syntax support, just a CSS stylable breakdown into tokens. Default styles included.

This is an awesome piece of code in my opinion. Instead of adding support for whole languages, lolight is basically one big regular expression that finds common words in code like define, class and end and applies classes to them! Apart from that, a few other expressions find comments, numbers, strings and that’s it.

This is the keyword regex, which I find fascinating, it’s a bit like Codegolf:

^(a(bstract|lias|nd|rguments|rray|s(m|sert)?|uto)|b(ase|egin|ool(ean)?|reak|yte)|c(ase|atch|har|hecked|lass|lone|ompl|onst|ontinue)|de(bugger|cimal|clare|f(ault|er|p)?|init|l(egate|ete)?)|dim|do|double|e(cho|ls?if|lse(if)?|nd|nsure|num|vent|x(cept|ec|p(licit|ort)|te(nds|nsion|rn)))|f(allthrough|alse|inal(ly)?|ixed|loat|or(each)?|riend|rom|unc(tion)?)|global|goto|guard|i(f|mp(lements|licit|ort)|n(it|clude(_once)?|line|out|stanceof|t(erface|ernal)?)?|s)|l(ambda|et|ock|ong)|m(odule|utable)|NaN|n(amespace|ative|ext|ew|il|ot|ull)|o(bject|perator|r|ut|verride)|p(ackage|arams|rivate|rotected|rotocol|ublic)|r(aise|e(adonly|do|f|gister|peat|quire(_once)?|scue|strict|try|turn))|s(byte|ealed|el(f|ect)|hort|igned|izeof|tatic|tring|truct|ubscript|uper|ynchronized|witch)|t(emplate|hen|his|hrows?|ransient|rue|ry|ype(alias|def|id|name|of))|u(n(checked|def(ined)?|ion|less|signed|til)|se|sing)|v(ar|irtual|oid|olatile)|w(char_t|hen|here|hile|ith)|xor|yield)$

It’s not perfect, and one code block got it to “break out” of the block and highlight the whole html of my page all the way down to the closing html tag. But it is novel, interesting and small in size. I’m glad I found it.

Today I added pages to Mirage. Pages are normal notes, but their title starts with an @. This makes it possible to exclude them from any normal note list or rss feed. It also allows me to show published pages in the main navigation as.. pages. It’s a really nice addition and makes Mirage a little more dynamic.