Masthash

#web

derStandard.at/Web
2 minutes ago

"Hätten gründlicher nachdenken sollen": Jennifer Aniston über fehlende Diversität und starre Rollenbilder https://www.derstandard.at/story/2000145132507/haetten-gruendlicher-nachdenken-sollen-jennifer-aniston-ueber-fehlende-diversitaet-und?ref=mastodon #Webmix #Web

derStandard.at/Web
2 hours ago
derStandard.at/Web
5 hours ago
derStandard.at/Web
5 hours ago
Link of the Day
16 hours ago

📎 Link of the day: https://www.royalroad.com/
📂 Category: Arts » Literature

Royal Road is a platform that was created "by readers (by fans), because we wanted to read more. We made sure that we have awesome stories to read with easy ways to find them. With a constantly improving set of tools to support the authors on their road to becoming successful" (contributed by @Crab).

#lotd #literature #arts #web

Aral Balkan
18 hours ago

OK, I’m just going to go ahead and blame the fact that it’s Friday for this… So Kitten builds no longer have traditional version strings… they have, umm… birthdays (complete with star sign; because cute) and a favourite colour :awesome:

When reporting a bug, please make sure you mention your Kitten’s birthday and favourite colour.

(The favourite colour is also the short git hash.)

It’s probably a good idea if I step away from the computer now…

:kitten:💕

#Kitten #SmallWeb #web #dev

Screenshot of terminal with Kitten running. On top is a sixel image of a kitten sitting on a green hill in front of a blue sky.

Terminal text follows:

Kitten
by Aral Balkan, Small Technology Foundation

Born 2023/3/31 at 17:23:32 (Aries)
Favourite colour #c3f5d5 (small swatch of the colour – a light cyan, drawn using three block characters)
 
Like this? Fund us!                       We’re a tiny, independent not-for-profit.
 https://small-tech.org/fund-us

Need help?
https://codeberg.org/kitten/app/issues
Lobste.rs
19 hours ago

urler: command line tool for URL parsing and manipulation https://github.com/curl/urler #unix #web

Lobsters
19 hours ago

urler: command line tool for URL parsing and manipulation https://github.com/curl/urler | https://lobste.rs/s/36ipok #unix #web

Aral Balkan
19 hours ago

:kitten: One of the nice things with the new conditional syntax in Kitten¹ is that you can have conditional styles in your components :)

¹ https://codeberg.org/kitten/app

#Kitten #SmallWeb #web #dev #js #css #styles #conditionals

Screenshot of code:

export default ({ SLOT, activeSection = '', autoHeading = true}) => html`
  <${Application} layout='settings'>
    <${Navigation} activeSection=${activeSection} />
    <main id='content'>
      <if ${autoHeading}>
        <h2>${activeSection}</h2>
      </if>
      ${SLOT}
    </main>
  </>
Screenshot of code:

// Application layout.
import Footer from './Footer.component.js'

export default ({ layout, SLOT }) => html`
    <div id='application'>
      ${SLOT}
    </div>

    <${Footer} />

    <style>
      …

      #application {
        max-width: 920px;
        margin-left: auto;
        margin-right: auto;
      }

      <if ${layout==='settings'}>
        #application {
          display: grid;
          grid-template-areas:
            'navigation  main  '
            'footer      footer';
          grid-template-rows: 1fr fit-content(100%);
          grid-template-columns: fit-content(100%) 1fr;
        }

        /* On narrower screens, use one-column layout. */
        @media screen and (max-width: 660px) {
          #application {
            grid-template-areas:
              'navigation'
              'main'
              'footer';
          }
        }
      </if>
    </style>
  `
derStandard.at/Web
22 hours ago
Aral Balkan
23 hours ago

So Kitten might be a little cuter now if your terminal supports sixels…

(Oh, and there’s a new version format too.)

https://codeberg.org/kitten/app

#kitten #SmallWeb #web #dev

Screenshot of terminal. Graphic (sixel) illustration of grey kitten with big eyes and pink ears sitting on a green hill in front of a blue sky.

Text under it reads:

Kitten
by Aral Balkan, Small Technology Foundation

Version 2023/03/31-11:32:42-95b477b
 
Like this? Fund us!                        We’re a tiny, independent not-for-profit.
https://small-tech.org/fund-us

Need help?
https://codeberg.org/kitten/app/issues

~/Projects/kitten/app (git main)                                                                 ⬢ 19.8.1
❯
TugaTech
1 day ago
Patrick Prémartin
1 day ago

Formations de mars terminées, prochaines sessions en inter entreprise, indépendants et particuliers, à distance sur Zoom, fin avril puis fin mai. Inscrivez-vous depuis https://www.barnsten.com/fr/categorie-produit/formations/

Si vous êtes en entreprise française et voulez bénéficier d'un financement OPCO contactez moi directement.

Et si vous avez des besoins de formation plus spécifiques, préférez les traiter en intra entreprise, à distance ou en vos locaux, discutons-en.

#formation #formationpro #delphi #php #javascript #web

dates de mes prochaines formations Delphi et web
patpro
1 day ago

Le #web est devenu très hostile à l'utilisateur depuis quelques années, c'est insupportable. Depuis que le site dpreview.com a annoncé sa fermeture imminente (dégât collateral de la purge chez #amazon) je tente d'en archiver le contenu avec archivebox.io, même avec une URL toutes les 30-60s je me fais bloquer par l'hébergeur. Dément. J'ai dû faire un montage avec #tor pour contourner et c'est loin d'être parfait.
Pendant ce temps, #Hachette et ses potes rentiers attaquent archive.org
#rage

Laurent Baumann
1 day ago

What #web #server are you using to work locally on static HTML? Live reloads and #silverblue #toolbox friendly if possible. I usually use the npm livereload, but I'm wondering what other people are using.

Archimage
1 day ago

That’s enough stuff for today. Next, I’ll work on integrating Micro.blog’s Bookshelves and importing stuff from Goodreads. Then I can work on managing the content.

#books #web #flask

Screenshot of my bookshelves on The Continuity
Aral Balkan
2 days ago

:kitten: Major changes:

- Content is now rendered directly to the <body> of your page, not to a special #application div (less magic = good)

- New special page slots let you entirely customise the internal base layout component: HTML, HEAD, START_OF_BODY, BEFORE_LIBRARIES, AFTER_LIBRARIES, END_OF_BODY

- You can also return lang, title, charset, viewport, and icon properties from your page routes for quick customisation

Details/example:
https://codeberg.org/kitten/app#special-page-slots

#Kitten #SmallWeb #web #dev

Emory L.
3 days ago

@glyph you gotta go responsive i guess 😂 one of my old iterations of my homepage was comically bad on a monitor because i was "mobile first" but had nothing second! #web

#responsiveDesign #css

Daniel
3 days ago

Just inspected Google Docs UI out of curiosity and was met with this monstrosity: No semantic HTML, everything is a div 🤦‍♂️

You would think the company building the most popular web browser knows how to properly design a web application.

#google #docs #semantic #html #accessibility #web #development #design #fail

A screenshot showing an open empty Google Docs document on the left hand side and open Firefox Developer Tools on the right hand side with the inspector panel open.

The input for selecting the text heading style is being inspected at the moment. The inspector panel shows that not only this element, but also other interactive elements are solely being made out of generic HTML div elements.
Aral Balkan
3 days ago

:kitten: Heads up: I’ve renamed the “uses” property on page routes to “libraries” to make it consistent with the other properties you can return from page routes, which are all nouns (currently: markup, styles, and syntaxHighlightingTheme).

If you’re playing with Kitten, please update your projects accordingly.

See the Streamiverse (my streaming federated fediverse timeline) example for a usage example:

https://codeberg.org/kitten/app#streamiverse

#Kitten #SmallWeb #web #dev

Why do you have so many tabs open when God gave you #browser history and #bookmarks!? #web

Aral Balkan
3 days ago

:kitten: Just merged an improved slots implementation to main and you can now pass CSS class lists to components. 🎉

Read more:

Slots:
https://codeberg.org/kitten/app#slots

Layout components:
https://codeberg.org/kitten/app#layout-components

Passing CSS class lists to components:
https://codeberg.org/kitten/app#layout-components

Named slots:
https://codeberg.org/kitten/app#layout-components

Sample project:
https://codeberg.org/kitten/app/src/branch/main/examples/layout

#Kitten #SmallWeb #templating #layout #components #web #dev #html #css #js

My #website is served on #HTTP3; you can't tell me NUTHIN'!!! #webDev #http #web

The Markup
4 days ago

Hey! We're hiring two #web engineering interns to work with us this summer.

Share with a student, or recent graduate of a coding bootcamp, who should apply.

#OpenSource #Dev #Python #JavaScript https://boards.greenhouse.io/themarkup/jobs/6685527002

Aral Balkan
4 days ago

#Web #dev folks, I’m implementing the ability to pass classes to components in #Kitten and could use your thoughts…

Passing a class is easy: <${MyComponent} … class='myClass'> (same as any DOM element). However, in the component, you can’t get a property named “class” as that’s a reserved keyword. Even if you could, I’m worried about polluting the namespace (we also have “slot”).

So, I’m thinking, ALL CAPS for special props?

- Won’t clash
- Stands out
- I’m allergic to $ prefixes

Thoughts?

Code listing:

function MyComponent ({name, SLOT, CLASS}) {
  return html`
    <div class='MyComponent ${CLASS}'>
      <h2>Hello ${name}, this is my component.</h2>
      <blockquote>
        ${SLOT}
      </blockquote>
    </div>
    <style>
      .MyComponent {
        padding: 1em;
        border: 1px solid cadetblue;
      }
    </style>
  `
}
Henrik Sachse
5 days ago

Moved my own sites to #hugo today. Straightforward and very well performing results. https://gohugo.io/ #webdev #web #website

Aral Balkan
5 days ago

I might actually have created the Slotty McSlotFace example… (I’m not sure if this calls for an intervention or not but I know I’m having fun.)

:kitten:💕

https://codeberg.org/kitten/app/src/branch/main/examples/slotty-mcslotface

#Kitten #SlottyMcSlotFace #slots #SmallWeb #web #dev

Screenshot of screen split into quarters. On the left, two terminal windows with code, on the right, two browser windows with an illustration of a monkey-like creature with a tuft of blonde hair at the top (“normal”) and the same creature wearing a hat, glasses and false moustache in the bottom one (“disguised”).

Code excerpt, top:

export default ({ slot }) => html`
  <if ${slot.head !== undefined}>
    <then>
      ${slot.head}
    <else>
      <img src='/images/head.png' alt='Head'>
  </if>

  <if ${slot.eyes !== undefined}>
    <then>
      ${slot.eyes}
    <else>
      <img src='/images/eyes.png' alt='Eyes'>
  </if>

  <if ${slot.mouth !== undefined}>
    <then>
      ${slot.mouth}
    <else>

Code excerpt, bottom:

import Slotty from './Slotty.component.js'
import Navigation from './Navigation.component.js'

export default _ => html`
  <${Slotty}>
    <content for='head'>
      <img src='/images/disguised/head.png' alt='Head with hat.'>
    </content>
    <content for='eyes'>
      <img src='/images/disguised/eyes.png' alt='Eyes with glasses.'>
    </content>
    <content for='mouth'>
      <img src='/images/disguised/mouth.png' alt='Mouth with moustache.'>
    </content>
  </>
  <${Navigation} currentPage='Disguised' />
`

You don't need #ReactJS until your webpage changes. That's why it's called "React", it makes the #DOM *react* to changes in application state. If the state never changes, #React is unnecessary. #webDev #frameworks #web #dev #programming #frontend #JavaScript

Simon R Jones
5 days ago

Sorting through lots of old web books to prepare for the office move! Some gold in here! #web #books

Me standing next to a pile of old books on the floor including the Zen of CSS design by Dave Shea & Molly Holzschlag, Designing with web standards by Jeffrey Zeldman, and Transcending CSS by Anly Clarke!
Aral Balkan
5 days ago

Kitten has slots but what about named slots?

Yep, Kitten has those too (as of a few minutes ago in main) :kitten:🎉

https://codeberg.org/kitten/app

#Kitten #SmallWeb #templating #layout #web #dev

Screenshot of full screen. Two terminal windows on the left show code. On the right is a browser showing the rendered Named slots example.

Browser contents:

Heading: Named slots

Pink boxed section with white on pink heading titled “Slot: header”. Inside it a blue dashed border inside of which there’s a heading: “This is content for the header slot” followed by an illustation of a cat with a caption that reads “Isn’t Kitten cute?”

Under the box is a heading and two paragraphs that are regular DOM nodes from the page.

Under that are two more slots, main and footer.

Top terminal (index.page.js):

import Slotty from './Slotty.component.js'

export default _ => html`
  <${Slotty}>
    <h2>I’m a regular heading from the page.</h2>

    <content for='header'>
      <div class='content'>
        <markdown>
          ### This is content for the header slot.
          ![Illustration of a sitting kitten.](/😸/images/kitten-sitting.svg "Isn’t Kitten cute?")
        </markdown>
      </div>
    </content>

    <p>I’m a regular paragraph from the page.</p>

    <content for='main'>
      <p class='content'>This is content for the main slot.</p>
    </content>

Bottom terminal (Slotty.component.js):

export default ({ slot }) => html`
  <h1>Named slots</h1>

  <header class='slot'>
    <h2>Slot: header</h2>
    ${slot.header}
  </header>

  ${slot.default}

  <main class='slot'>
    <h2>Slot: main</h2>
    ${slot.main}
  </main>
FORMA
6 days ago

363 — Collections – BERNERKUHL.COM
01

#web #design #inspiration #forma
https://are.na/block/19854635

01
Stefano Marinelli
6 days ago

For years, I have used DNS-based ad-blockers on both mobile and fixed devices. Today, for the first time, I have surfed the web without any ad-blocker. The world of the web has become an incredible mess. I wonder: how much do all these banners pollute? How much traffic do they generate, how much electricity?

#adblocker #internetads #pollution #webtraffic #onlineexperience #web #internet

David Llewellyn-Jones
6 days ago

In search of the perfect text-based web-browser for my phone I've now got w3m, elinks and lynx installed.

The ncurses windowing of elinks is impressive, but w3m's elegant pager simplicity is giving it the lead. I just can't get enough of it.

#SailfishOS #web #browser

The w3m browser running in a terminal on Sailfish OS.
The elinks browser running in a terminal on Sailfish OS.
The lynx browser running in a terminal on Sailfish OS.
Jonathan Kamens
1 week ago

If you’re upset about the “Hachette” decision, blame the Internet Archive for overstepping
The Internet Archive couldn't leave well enough alone, and now we're all going to pay the price.
https://blog.kamens.us/2023/03/25/if-youre-upset-about-the-hachette-decision-blame-the-internet-archive-for-overstepping/
#Computers #ConsumerActivism #GovernmentActivism #Internet #Law #SocialActivism #Web #capitalism #CDL #DRM #HachetteVInternetArchive

Nelson Chu Pavlosky
1 week ago

In honor of Fridays for Future, I'm plugging people interested in #climateJustice, #solarpunk, and #permacomputing this #FollowFriday:

- @nina_kali_nina - scavenging chips to build #resilient computers
- @mycorrhiza - #degrowth anarchist
- @rra - Did #web design and development for the solar version of Low-tech Magazine's web site, which has been a huge inspiration to me: https://solar.lowtechmagazine.com/about.html
- @derek - #climate organizer, maps

Oliver Schafeld
1 week ago

Here's a question to the #web #developers out there:

How many jobs were cut at your company due to the fact that all the solutions for building a website #frontend can be found on StackOverflow or at w3schools.com/howto ?

Did any developer lose their job, when non-technical people started publishing web pages via CMS?

So, I'd basically agree with this article: https://www.joshwcomeau.com/blog/the-end-of-frontend-development/

If anything, #AI is just the next step in this tech "arms race".

Ioana
1 week ago

Lovely people of the web, who does amazing work in the #testing field lately? Especially on the #web /#js side?

Thomas 🔭✨:verified:
1 week ago

3 things new web developers should know:

- You don’t need a JavaScript framework at all to make many kinds of perfectly functional web apps
- Chrome’s rendering engine is a fork of Safari’s rendering engine
- You don’t need to load web fonts from a service-use one of the many free converters to create a woff2 from any ttf or otf file

Repost and feel free to add/comment with what you think new web developers should know.

#webdev #web

Aral Balkan
1 week ago

So I went down a bit of a rabbit hole with Kitten’s HTML validation features today and… well… now you can click a link in your developer console and view all the validation errors in-place in your web page :)

:kitten:💕

https://vimeo.com/810697322

#Kitten #SmallWeb #HTML #validation #accessibility #web #standards #dev

Khalid ⚡
1 week ago

If you're using #JetBrains #WebStorm and #Prettier, be sure to go into your settings and enable prettier to run on reformat and on save. If not, @pauleveritt will find you, and he will tell you about it. #JavaScript #Web #development

JetBrains WebStorm Settings for Prettier
Daniel
1 week ago
Khalid ⚡
1 week ago

Working with @eleventy this morning with @pauleveritt #web #development

Possum image with words: "Much Wow!", "Khalid", "Paul", "Very eleventy". (Doge meme)