11915 shaares
350 private links
350 private links
530 results
tagged
web
Rename a .md file into .md.html with a reference to a js script, and this file is displayed properly in a webpage :)
IndexedDB can be used to store a lot of data. It has some caveats though.
Storage:
About deletion, use soft delete to smoothen the synchronization if a user deletes a record and another one update it.
About record collection, use unique IDs (UUID v4) or property related ids with (UUID v5).
About ordering, it is easier to use fractional indices! Read more on https://www.figma.com/blog/realtime-editing-of-ordered-sequences/, or https://www.steveruiz.me/posts/reordering-fractional-indices, or use a dedicated library.
Sync is made with pull and push
Update:
- Send atomic changes from a client is the more convenient way. We can send only the model’s ID and its updated fields.
- send operations instead of changed data,
Conflict resolution:
- In some cases, last-write wins at the record field level will be enough
- in others, we strongly need a full-fledged CRDT.
To reduce boilerplate, the package will aim to re-use existing metadata about the page where possible. Such as it will infer at runtime what data it can make use of.
For example, if you have a
on your page, then it's likely we can use this same title to generate the Schema.org WebPage's name.</p> </blockquote></div> </div> <div class="linklist-item-infos clear"> <div class="linklist-item-tags"> <i class="fa fa-tags" aria-hidden="true"></i> <span class="label label-tag" title="Add tag"> <a href="/add-tag/project">project</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/web">web</a> </span> </div> <div class="linklist-item-infos-date-url-block pure-g"> <div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1"> <a href="/shaare/4e9DVA" title="Permalink"> <span class="linkdate" title="Permalink"> <i class="fa fa-clock-o" aria-hidden="true"></i> April 1, 2023 at 8:46:59 AM GMT+2 · </span> permalink </a> <div class="pure-u-0 pure-u-lg-visible"> · <span> <a href="https://web.archive.org/web/https://unhead-schema-org.harlanzw.com/guide/getting-started/how-it-works"> <img class="linklist-plugin-icon" src="/plugins/archiveorg/internetarchive.png" title="View on archive.org" alt="archive.org" /> </a> </span> · <div class="linkqrcode"> <img data-permalink="https://unhead-schema-org.harlanzw.com/guide/getting-started/how-it-works" src="/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> </div> </div><div class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1"> <a href="https://unhead-schema-org.harlanzw.com/guide/getting-started/how-it-works" aria-label="How It Works · Unhead Schema.org" title="How It Works · Unhead Schema.org"> <i class="fa fa-link" aria-hidden="true"></i> https://unhead-schema-org.harlanzw.com/guide/getting-started/how-it-works </a> <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible"> <a href="#" aria-label="Fold" title="Fold" class="fold-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></a> </div> </div> <div class="mobile-buttons pure-u-1 pure-u-lg-0"> <span> <a href="https://web.archive.org/web/https://unhead-schema-org.harlanzw.com/guide/getting-started/how-it-works"> <img class="linklist-plugin-icon" src="/plugins/archiveorg/internetarchive.png" title="View on archive.org" alt="archive.org" /> </a> </span> · <div class="linkqrcode"> <img data-permalink="https://unhead-schema-org.harlanzw.com/guide/getting-started/how-it-works" src="/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> </div> </div> </div> </div> <div class="anchor" id="vhxr5A"></div> <div class="linklist-item linklist-item" data-id="5336"> <div class="linklist-item-title"> <div class="linklist-item-editbuttons"> </div> <h2> <a href="https://responsively.app/" class="linklist-real-url"> <i class="fa fa-external-link" aria-hidden="true"></i> <span class="linklist-link">A Web Developer's Browser | Responsively App</span> </a> </h2> </div> <div class="linklist-item-description"> <div class="markdown"><p>Display a web view with different sizes simultanously</p></div> </div> <div class="linklist-item-infos clear"> <div class="linklist-item-tags"> <i class="fa fa-tags" aria-hidden="true"></i> <span class="label label-tag" title="Add tag"> <a href="/add-tag/web">web</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/tool">tool</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/programming">programming</a> </span> </div> <div class="linklist-item-infos-date-url-block pure-g"> <div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1"> <a href="/shaare/vhxr5A" title="Permalink"> <span class="linkdate" title="Permalink"> <i class="fa fa-clock-o" aria-hidden="true"></i> March 29, 2023 at 9:48:16 PM GMT+2 · </span> permalink </a> <div class="pure-u-0 pure-u-lg-visible"> · <span> <a href="https://web.archive.org/web/https://responsively.app/"> <img class="linklist-plugin-icon" src="/plugins/archiveorg/internetarchive.png" title="View on archive.org" alt="archive.org" /> </a> </span> · <div class="linkqrcode"> <img data-permalink="https://responsively.app/" src="/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> </div> </div><div class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1"> <a href="https://responsively.app/" aria-label="A Web Developer's Browser | Responsively App" title="A Web Developer's Browser | Responsively App"> <i class="fa fa-link" aria-hidden="true"></i> https://responsively.app/ </a> <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible"> <a href="#" aria-label="Fold" title="Fold" class="fold-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></a> </div> </div> <div class="mobile-buttons pure-u-1 pure-u-lg-0"> <span> <a href="https://web.archive.org/web/https://responsively.app/"> <img class="linklist-plugin-icon" src="/plugins/archiveorg/internetarchive.png" title="View on archive.org" alt="archive.org" /> </a> </span> · <div class="linkqrcode"> <img data-permalink="https://responsively.app/" src="/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> </div> </div> </div> </div> <div class="anchor" id="uuaDSw"></div> <div class="linklist-item linklist-item" data-id="5312"> <div class="linklist-item-title"> <div class="linklist-item-editbuttons"> </div> <h2> <a href="https://stenciljs.com/" class="linklist-real-url"> <i class="fa fa-external-link" aria-hidden="true"></i> <span class="linklist-link">Stencil</span> </a> </h2> </div> <div class="linklist-item-description"> <div class="markdown"><p>A framework to build web components where targets can also be other web frameworks.</p></div> </div> <div class="linklist-item-infos clear"> <div class="linklist-item-tags"> <i class="fa fa-tags" aria-hidden="true"></i> <span class="label label-tag" title="Add tag"> <a href="/add-tag/WebComponent">WebComponent</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/javascript">javascript</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/web">web</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/framework">framework</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/programming">programming</a> </span> </div> <div class="linklist-item-infos-date-url-block pure-g"> <div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1"> <a href="/shaare/uuaDSw" title="Permalink"> <span class="linkdate" title="Edited: March 24, 2023 at 9:54:57 AM GMT+1"> <i class="fa fa-clock-o" aria-hidden="true"></i> March 24, 2023 at 9:54:09 AM GMT+1 * · </span> permalink </a> <div class="pure-u-0 pure-u-lg-visible"> · <span> <a href="https://web.archive.org/web/https://stenciljs.com/"> <img class="linklist-plugin-icon" src="/plugins/archiveorg/internetarchive.png" title="View on archive.org" alt="archive.org" /> </a> </span> · <div class="linkqrcode"> <img data-permalink="https://stenciljs.com/" src="/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> </div> </div><div class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1"> <a href="https://stenciljs.com/" aria-label="Stencil" title="Stencil"> <i class="fa fa-link" aria-hidden="true"></i> https://stenciljs.com/ </a> <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible"> <a href="#" aria-label="Fold" title="Fold" class="fold-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></a> </div> </div> <div class="mobile-buttons pure-u-1 pure-u-lg-0"> <span> <a href="https://web.archive.org/web/https://stenciljs.com/"> <img class="linklist-plugin-icon" src="/plugins/archiveorg/internetarchive.png" title="View on archive.org" alt="archive.org" /> </a> </span> · <div class="linkqrcode"> <img data-permalink="https://stenciljs.com/" src="/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> </div> </div> </div> </div> <div class="anchor" id="AHnoLQ"></div> <div class="linklist-item linklist-item" data-id="5288"> <div class="linklist-item-title"> <div class="linklist-item-editbuttons"> </div> <h2> <a href="https://antonz.org/interactive-sql-examples/" class="linklist-real-url"> <i class="fa fa-external-link" aria-hidden="true"></i> <span class="linklist-link">Interactive SQL Examples in JavaScript</span> </a> </h2> </div> <div class="linklist-item-description"> <div class="markdown"><p>Eḿbed SQL examples in a web page. It uses a browser-compatible compiled sqlite under the hood .</p></div> </div> <div class="linklist-item-infos clear"> <div class="linklist-item-tags"> <i class="fa fa-tags" aria-hidden="true"></i> <span class="label label-tag" title="Add tag"> <a href="/add-tag/sql">sql</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/sqlite">sqlite</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/web">web</a> </span> </div> <div class="linklist-item-infos-date-url-block pure-g"> <div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1"> <a href="/shaare/AHnoLQ" title="Permalink"> <span class="linkdate" title="Permalink"> <i class="fa fa-clock-o" aria-hidden="true"></i> March 11, 2023 at 2:08:21 PM GMT+1 · </span> permalink </a> <div class="pure-u-0 pure-u-lg-visible"> · <span> <a href="https://web.archive.org/web/https://antonz.org/interactive-sql-examples/"> <img class="linklist-plugin-icon" src="/plugins/archiveorg/internetarchive.png" title="View on archive.org" alt="archive.org" /> </a> </span> · <div class="linkqrcode"> <img data-permalink="https://antonz.org/interactive-sql-examples/" src="/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> </div> </div><div class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1"> <a href="https://antonz.org/interactive-sql-examples/" aria-label="Interactive SQL Examples in JavaScript" title="Interactive SQL Examples in JavaScript"> <i class="fa fa-link" aria-hidden="true"></i> https://antonz.org/interactive-sql-examples/ </a> <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible"> <a href="#" aria-label="Fold" title="Fold" class="fold-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></a> </div> </div> <div class="mobile-buttons pure-u-1 pure-u-lg-0"> <span> <a href="https://web.archive.org/web/https://antonz.org/interactive-sql-examples/"> <img class="linklist-plugin-icon" src="/plugins/archiveorg/internetarchive.png" title="View on archive.org" alt="archive.org" /> </a> </span> · <div class="linkqrcode"> <img data-permalink="https://antonz.org/interactive-sql-examples/" src="/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> </div> </div> </div> </div> <div class="anchor" id="5CoC5g"></div> <div class="linklist-item linklist-item" data-id="5283"> <div class="linklist-item-title"> <div class="linklist-item-editbuttons"> </div> <h2> <a href="https://jessbudd.com/blog/screen-reader-usability-testing-observations/" class="linklist-real-url"> <i class="fa fa-external-link" aria-hidden="true"></i> <span class="linklist-link">5 takeaways from screen reader usability interviews - Jess Budd</span> </a> </h2> </div> <div class="linklist-item-description"> <div class="markdown"><ol> <li>Users tend to use a list of all the links or headings on the page instead of the tab key! The user could then jump directly to the heading or link that sounded like what they were looking for.</li> <li>Navigating to the homepage from an internal page: all of our interviewees searched for a link being announced as "Home"</li> <li>To navigate to a certain page, users opened a list of all the links on a page. it was common to type the letter on the keyboard to search for the available links starting with the first letter of what they would expect the page name to start with. A "Get in touch!" link is likely to not be found <ul> <li>idea here: we need a standard about common pages! (Contact, Pricing, etc...)</li> </ul></li> <li>None of the interviewees enlarged the window to take the full screen. This means some users will experience the mobile layout and behavior of the menu navigation, rather than the desktop version we intended. So a computer does not mean a desktop layout</li> <li>None used skip links because they are less efficient than their other methods. Moreover, the skip link is sometime broken as the keyboard focus does not shift!</li> </ol></div> </div> <div class="linklist-item-infos clear"> <div class="linklist-item-tags"> <i class="fa fa-tags" aria-hidden="true"></i> <span class="label label-tag" title="Add tag"> <a href="/add-tag/accessibilit%C3%A9">accessibilité</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/web">web</a> </span> </div> <div class="linklist-item-infos-date-url-block pure-g"> <div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1"> <a href="/shaare/5CoC5g" title="Permalink"> <span class="linkdate" title="Permalink"> <i class="fa fa-clock-o" aria-hidden="true"></i> March 11, 2023 at 10:30:56 AM GMT+1 · </span> permalink </a> <div class="pure-u-0 pure-u-lg-visible"> · <span> <a href="https://web.archive.org/web/https://jessbudd.com/blog/screen-reader-usability-testing-observations/"> <img class="linklist-plugin-icon" src="/plugins/archiveorg/internetarchive.png" title="View on archive.org" alt="archive.org" /> </a> </span> · <div class="linkqrcode"> <img data-permalink="https://jessbudd.com/blog/screen-reader-usability-testing-observations/" src="/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> </div> </div><div class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1"> <a href="https://jessbudd.com/blog/screen-reader-usability-testing-observations/" aria-label="5 takeaways from screen reader usability interviews - Jess Budd" title="5 takeaways from screen reader usability interviews - Jess Budd"> <i class="fa fa-link" aria-hidden="true"></i> https://jessbudd.com/blog/screen-reader-usability-testing-observations/ </a> <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible"> <a href="#" aria-label="Fold" title="Fold" class="fold-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></a> </div> </div> <div class="mobile-buttons pure-u-1 pure-u-lg-0"> <span> <a href="https://web.archive.org/web/https://jessbudd.com/blog/screen-reader-usability-testing-observations/"> <img class="linklist-plugin-icon" src="/plugins/archiveorg/internetarchive.png" title="View on archive.org" alt="archive.org" /> </a> </span> · <div class="linkqrcode"> <img data-permalink="https://jessbudd.com/blog/screen-reader-usability-testing-observations/" src="/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> </div> </div> </div> </div> <div class="anchor" id="T1B5kQ"></div> <div class="linklist-item linklist-item" data-id="5274"> <div class="linklist-item-title"> <div class="linklist-item-editbuttons"> </div> <h2> <a href="/shaare/T1B5kQ" class="linklist-real-url"> <i class="fa fa-sticky-note" aria-hidden="true"></i> <span class="linklist-link">Note: rewrite Git Fork for the web</span> </a> </h2> </div> <div class="linklist-item-description"> <div class="markdown"><p>Use a web UI to ensure compatibility.<br /> Operations are made through system calls of Node, Bun or deno or the git cli command as the FileSystem API is not widespread.</p></div> </div> <div class="linklist-item-infos clear"> <div class="linklist-item-tags"> <i class="fa fa-tags" aria-hidden="true"></i> <span class="label label-tag" title="Add tag"> <a href="/add-tag/project">project</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/idea">idea</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/web">web</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/git">git</a> </span> </div> <div class="linklist-item-infos-date-url-block pure-g"> <div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1"> <a href="/shaare/T1B5kQ" title="Permalink"> <span class="linkdate" title="Edited: June 16, 2024 at 11:55:43 AM GMT+2"> <i class="fa fa-clock-o" aria-hidden="true"></i> March 10, 2023 at 6:01:14 PM GMT+1 * · </span> permalink </a> <div class="pure-u-0 pure-u-lg-visible"> · <span> <a href="https://web.archive.org/web/https://shaarli.lyokolux.space/shaare/T1B5kQ"> <img class="linklist-plugin-icon" src="/plugins/archiveorg/internetarchive.png" title="View on archive.org" alt="archive.org" /> </a> </span> · <div class="linkqrcode"> <img data-permalink="https://shaarli.lyokolux.space/shaare/T1B5kQ" src="/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> </div> </div><div class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1"> <a href="/shaare/T1B5kQ" aria-label="Note: rewrite Git Fork for the web" title="Note: rewrite Git Fork for the web"> <i class="fa fa-link" aria-hidden="true"></i> /shaare/T1B5kQ </a> <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible"> <a href="#" aria-label="Fold" title="Fold" class="fold-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></a> </div> </div> <div class="mobile-buttons pure-u-1 pure-u-lg-0"> <span> <a href="https://web.archive.org/web/https://shaarli.lyokolux.space/shaare/T1B5kQ"> <img class="linklist-plugin-icon" src="/plugins/archiveorg/internetarchive.png" title="View on archive.org" alt="archive.org" /> </a> </span> · <div class="linkqrcode"> <img data-permalink="https://shaarli.lyokolux.space/shaare/T1B5kQ" src="/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> </div> </div> </div> </div> <div class="anchor" id="kKj5fg"></div> <div class="linklist-item linklist-item" data-id="5234"> <div class="linklist-item-title"> <div class="linklist-item-editbuttons"> </div> <h2> <a href="https://fossheim.io/writing/posts/accessible-theme-picker-html-css-js/" class="linklist-real-url"> <i class="fa fa-external-link" aria-hidden="true"></i> <span class="linklist-link">Building an accessible theme picker with HTML, CSS and JavaScript. by Sarah L. Fossheim</span> </a> </h2> </div> <div class="linklist-item-description"> <div class="markdown"><p>A great example!</p></div> </div> <div class="linklist-item-infos clear"> <div class="linklist-item-tags"> <i class="fa fa-tags" aria-hidden="true"></i> <span class="label label-tag" title="Add tag"> <a href="/add-tag/css">css</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/programming">programming</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/theming">theming</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/javascript">javascript</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/web">web</a> </span> </div> <div class="linklist-item-infos-date-url-block pure-g"> <div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1"> <a href="/shaare/kKj5fg" title="Permalink"> <span class="linkdate" title="Edited: July 31, 2023 at 11:23:26 AM GMT+2"> <i class="fa fa-clock-o" aria-hidden="true"></i> February 24, 2023 at 9:47:13 PM GMT+1 * · </span> permalink </a> <div class="pure-u-0 pure-u-lg-visible"> · <span> <a href="https://web.archive.org/web/https://fossheim.io/writing/posts/accessible-theme-picker-html-css-js/"> <img class="linklist-plugin-icon" src="/plugins/archiveorg/internetarchive.png" title="View on archive.org" alt="archive.org" /> </a> </span> · <div class="linkqrcode"> <img data-permalink="https://fossheim.io/writing/posts/accessible-theme-picker-html-css-js/" src="/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> </div> </div><div class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1"> <a href="https://fossheim.io/writing/posts/accessible-theme-picker-html-css-js/" aria-label="Building an accessible theme picker with HTML, CSS and JavaScript. by Sarah L. Fossheim" title="Building an accessible theme picker with HTML, CSS and JavaScript. by Sarah L. Fossheim"> <i class="fa fa-link" aria-hidden="true"></i> https://fossheim.io/writing/posts/accessible-theme-picker-html-css-js/ </a> <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible"> <a href="#" aria-label="Fold" title="Fold" class="fold-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></a> </div> </div> <div class="mobile-buttons pure-u-1 pure-u-lg-0"> <span> <a href="https://web.archive.org/web/https://fossheim.io/writing/posts/accessible-theme-picker-html-css-js/"> <img class="linklist-plugin-icon" src="/plugins/archiveorg/internetarchive.png" title="View on archive.org" alt="archive.org" /> </a> </span> · <div class="linkqrcode"> <img data-permalink="https://fossheim.io/writing/posts/accessible-theme-picker-html-css-js/" src="/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> </div> </div> </div> </div> <div class="anchor" id="wv2hNA"></div> <div class="linklist-item linklist-item" data-id="5172"> <div class="linklist-item-title"> <div class="linklist-item-editbuttons"> </div> <h2> <a href="https://github.com/orgs/unjs/repositories" class="linklist-real-url"> <i class="fa fa-external-link" aria-hidden="true"></i> <span class="linklist-link">UnJS</span> </a> </h2> </div> <div class="linklist-item-description"> <div class="markdown"><p>A lot of so useful projects for web development!</p> <p>Check them here: <a href="https://unjs.io/">https://unjs.io/</a></p></div> </div> <div class="linklist-item-infos clear"> <div class="linklist-item-tags"> <i class="fa fa-tags" aria-hidden="true"></i> <span class="label label-tag" title="Add tag"> <a href="/add-tag/project">project</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/javascript">javascript</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/web">web</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/programming">programming</a> </span> </div> <div class="linklist-item-infos-date-url-block pure-g"> <div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1"> <a href="/shaare/wv2hNA" title="Permalink"> <span class="linkdate" title="Edited: January 24, 2023 at 9:01:17 PM GMT+1"> <i class="fa fa-clock-o" aria-hidden="true"></i> January 24, 2023 at 8:58:48 PM GMT+1 * · </span> permalink </a> <div class="pure-u-0 pure-u-lg-visible"> · <span> <a href="https://web.archive.org/web/https://github.com/orgs/unjs/repositories"> <img class="linklist-plugin-icon" src="/plugins/archiveorg/internetarchive.png" title="View on archive.org" alt="archive.org" /> </a> </span> · <div class="linkqrcode"> <img data-permalink="https://github.com/orgs/unjs/repositories" src="/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> </div> </div><div class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1"> <a href="https://github.com/orgs/unjs/repositories" aria-label="UnJS" title="UnJS"> <i class="fa fa-link" aria-hidden="true"></i> https://github.com/orgs/unjs/repositories </a> <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible"> <a href="#" aria-label="Fold" title="Fold" class="fold-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></a> </div> </div> <div class="mobile-buttons pure-u-1 pure-u-lg-0"> <span> <a href="https://web.archive.org/web/https://github.com/orgs/unjs/repositories"> <img class="linklist-plugin-icon" src="/plugins/archiveorg/internetarchive.png" title="View on archive.org" alt="archive.org" /> </a> </span> · <div class="linkqrcode"> <img data-permalink="https://github.com/orgs/unjs/repositories" src="/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> </div> </div> </div> </div> <div class="anchor" id="X45XoQ"></div> <div class="linklist-item linklist-item" data-id="5120"> <div class="linklist-item-title"> <div class="linklist-item-editbuttons"> </div> <h2> <a href="https://m-docs.org/" class="linklist-real-url"> <i class="fa fa-external-link" aria-hidden="true"></i> <span class="linklist-link">Mdash</span> </a> </h2> </div> <div class="linklist-item-description"> <div class="markdown"><blockquote> <p>Mdash is a new kind of UI library. It's 100% standards-based and it's tiny.</p> <p>Mdash components are comprised of standard HTML, custom HTML, and Custom Elements. As such, Mdash works with any framework (or no framework) and works with all types of web projects: SSR, SPA, PWA, static site, and even popular email clients.</p> </blockquote> <p>Only 6.8kB. It uses a minimal appearance but adds components that are used everywhere such as switch buttons-</p></div> </div> <div class="linklist-item-infos clear"> <div class="linklist-item-tags"> <i class="fa fa-tags" aria-hidden="true"></i> <span class="label label-tag" title="Add tag"> <a href="/add-tag/ui">ui</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/library">library</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/programming">programming</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/web">web</a> </span> </div> <div class="linklist-item-infos-date-url-block pure-g"> <div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1"> <a href="/shaare/X45XoQ" title="Permalink"> <span class="linkdate" title="Edited: January 15, 2023 at 11:51:53 AM GMT+1"> <i class="fa fa-clock-o" aria-hidden="true"></i> January 15, 2023 at 11:49:21 AM GMT+1 * · </span> permalink </a> <div class="pure-u-0 pure-u-lg-visible"> · <span> <a href="https://web.archive.org/web/https://m-docs.org/"> <img class="linklist-plugin-icon" src="/plugins/archiveorg/internetarchive.png" title="View on archive.org" alt="archive.org" /> </a> </span> · <div class="linkqrcode"> <img data-permalink="https://m-docs.org/" src="/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> </div> </div><div class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1"> <a href="https://m-docs.org/" aria-label="Mdash" title="Mdash"> <i class="fa fa-link" aria-hidden="true"></i> https://m-docs.org/ </a> <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible"> <a href="#" aria-label="Fold" title="Fold" class="fold-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></a> </div> </div> <div class="mobile-buttons pure-u-1 pure-u-lg-0"> <span> <a href="https://web.archive.org/web/https://m-docs.org/"> <img class="linklist-plugin-icon" src="/plugins/archiveorg/internetarchive.png" title="View on archive.org" alt="archive.org" /> </a> </span> · <div class="linkqrcode"> <img data-permalink="https://m-docs.org/" src="/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> </div> </div> </div> </div> <div class="anchor" id="Q8pxCQ"></div> <div class="linklist-item linklist-item" data-id="5054"> <div class="linklist-item-title"> <div class="linklist-item-editbuttons"> </div> <h2> <a href="https://screensizemap.com/" class="linklist-real-url"> <i class="fa fa-external-link" aria-hidden="true"></i> <span class="linklist-link">SCREEN SIZE MAP » Compare viewport sizes</span> </a> </h2> </div> <div class="linklist-item-description"> <div class="markdown"><p>It is possible to display high, medium and low screen sizes by popularity</p></div> </div> <div class="linklist-item-infos clear"> <div class="linklist-item-tags"> <i class="fa fa-tags" aria-hidden="true"></i> <span class="label label-tag" title="Add tag"> <a href="/add-tag/ui">ui</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/web">web</a> </span> </div> <div class="linklist-item-infos-date-url-block pure-g"> <div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1"> <a href="/shaare/Q8pxCQ" title="Permalink"> <span class="linkdate" title="Permalink"> <i class="fa fa-clock-o" aria-hidden="true"></i> January 1, 2023 at 4:00:26 PM GMT+1 · </span> permalink </a> <div class="pure-u-0 pure-u-lg-visible"> · <span> <a href="https://web.archive.org/web/https://screensizemap.com/"> <img class="linklist-plugin-icon" src="/plugins/archiveorg/internetarchive.png" title="View on archive.org" alt="archive.org" /> </a> </span> · <div class="linkqrcode"> <img data-permalink="https://screensizemap.com/" src="/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> </div> </div><div class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1"> <a href="https://screensizemap.com/" aria-label="SCREEN SIZE MAP » Compare viewport sizes" title="SCREEN SIZE MAP » Compare viewport sizes"> <i class="fa fa-link" aria-hidden="true"></i> https://screensizemap.com/ </a> <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible"> <a href="#" aria-label="Fold" title="Fold" class="fold-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></a> </div> </div> <div class="mobile-buttons pure-u-1 pure-u-lg-0"> <span> <a href="https://web.archive.org/web/https://screensizemap.com/"> <img class="linklist-plugin-icon" src="/plugins/archiveorg/internetarchive.png" title="View on archive.org" alt="archive.org" /> </a> </span> · <div class="linkqrcode"> <img data-permalink="https://screensizemap.com/" src="/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> </div> </div> </div> </div> <div class="anchor" id="l_suSg"></div> <div class="linklist-item linklist-item" data-id="5043"> <div class="linklist-item-title"> <div class="linklist-item-editbuttons"> </div> <h2> <a href="https://flatuicolors.com/" class="linklist-real-url"> <i class="fa fa-external-link" aria-hidden="true"></i> <span class="linklist-link">Flat UI Colors 2 - 14 Color Palettes, 280 colors 🎨</span> </a> </h2> </div> <div class="linklist-item-description"> <div class="markdown"><p>Useful for flat design</p></div> </div> <div class="linklist-item-infos clear"> <div class="linklist-item-tags"> <i class="fa fa-tags" aria-hidden="true"></i> <span class="label label-tag" title="Add tag"> <a href="/add-tag/color">color</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/pattern">pattern</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/ui">ui</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/web">web</a> </span> </div> <div class="linklist-item-infos-date-url-block pure-g"> <div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1"> <a href="/shaare/l_suSg" title="Permalink"> <span class="linkdate" title="Permalink"> <i class="fa fa-clock-o" aria-hidden="true"></i> January 1, 2023 at 3:48:00 PM GMT+1 · </span> permalink </a> <div class="pure-u-0 pure-u-lg-visible"> · <span> <a href="https://web.archive.org/web/https://flatuicolors.com/"> <img class="linklist-plugin-icon" src="/plugins/archiveorg/internetarchive.png" title="View on archive.org" alt="archive.org" /> </a> </span> · <div class="linkqrcode"> <img data-permalink="https://flatuicolors.com/" src="/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> </div> </div><div class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1"> <a href="https://flatuicolors.com/" aria-label="Flat UI Colors 2 - 14 Color Palettes, 280 colors 🎨" title="Flat UI Colors 2 - 14 Color Palettes, 280 colors 🎨"> <i class="fa fa-link" aria-hidden="true"></i> https://flatuicolors.com/ </a> <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible"> <a href="#" aria-label="Fold" title="Fold" class="fold-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></a> </div> </div> <div class="mobile-buttons pure-u-1 pure-u-lg-0"> <span> <a href="https://web.archive.org/web/https://flatuicolors.com/"> <img class="linklist-plugin-icon" src="/plugins/archiveorg/internetarchive.png" title="View on archive.org" alt="archive.org" /> </a> </span> · <div class="linkqrcode"> <img data-permalink="https://flatuicolors.com/" src="/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> </div> </div> </div> </div> <div class="anchor" id="iup39g"></div> <div class="linklist-item linklist-item" data-id="5030"> <div class="linklist-item-title"> <div class="linklist-item-editbuttons"> </div> <h2> <a href="https://typefully.com/u/DanHollick/t/sle13GMW2Brp" class="linklist-real-url"> <i class="fa fa-external-link" aria-hidden="true"></i> <span class="linklist-link">WCAG 3 and APCA | Typefully</span> </a> </h2> </div> <div class="linklist-item-infos clear"> <div class="linklist-item-tags"> <i class="fa fa-tags" aria-hidden="true"></i> <span class="label label-tag" title="Add tag"> <a href="/add-tag/accessibilit%C3%A9">accessibilité</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/web">web</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/wcag">wcag</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/color">color</a> </span> </div> <div class="linklist-item-infos-date-url-block pure-g"> <div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1"> <a href="/shaare/iup39g" title="Permalink"> <span class="linkdate" title="Edited: May 22, 2023 at 7:39:06 AM GMT+2"> <i class="fa fa-clock-o" aria-hidden="true"></i> December 28, 2022 at 12:53:21 PM GMT+1 * · </span> permalink </a> <div class="pure-u-0 pure-u-lg-visible"> · <span> <a href="https://web.archive.org/web/https://typefully.com/u/DanHollick/t/sle13GMW2Brp"> <img class="linklist-plugin-icon" src="/plugins/archiveorg/internetarchive.png" title="View on archive.org" alt="archive.org" /> </a> </span> · <div class="linkqrcode"> <img data-permalink="https://typefully.com/u/DanHollick/t/sle13GMW2Brp" src="/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> </div> </div><div class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1"> <a href="https://typefully.com/u/DanHollick/t/sle13GMW2Brp" aria-label="WCAG 3 and APCA | Typefully" title="WCAG 3 and APCA | Typefully"> <i class="fa fa-link" aria-hidden="true"></i> https://typefully.com/u/DanHollick/t/sle13GMW2Brp </a> <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible"> <a href="#" aria-label="Fold" title="Fold" class="fold-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></a> </div> </div> <div class="mobile-buttons pure-u-1 pure-u-lg-0"> <span> <a href="https://web.archive.org/web/https://typefully.com/u/DanHollick/t/sle13GMW2Brp"> <img class="linklist-plugin-icon" src="/plugins/archiveorg/internetarchive.png" title="View on archive.org" alt="archive.org" /> </a> </span> · <div class="linkqrcode"> <img data-permalink="https://typefully.com/u/DanHollick/t/sle13GMW2Brp" src="/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> </div> </div> </div> </div> <div class="anchor" id="cA9jnw"></div> <div class="linklist-item linklist-item" data-id="4964"> <div class="linklist-item-title"> <div class="linklist-item-editbuttons"> </div> <h2> <a href="https://affordance.framasoft.org/2015/04/symptome-acces-mal-internet/" class="linklist-real-url"> <i class="fa fa-external-link" aria-hidden="true"></i> <span class="linklist-link">Le symptome de l’accès et le mal de l’internet : plaidoyer pour un index indépendant du web. – affordance.info</span> </a> </h2> </div> <div class="linklist-item-description"> <div class="markdown"><blockquote> <p>La solution, la seule, permettant de traiter le mal plutôt que ses symptômes est pourtant connue. Elle consiste, je vous en ai déjà parlé, à créer un index indépendant du web. C'est à dire à réinstaller durablement dans l'espace public une "ressource", un "bien commun" dont l'exploitation par des acteurs privés à fini par installer des usages essentiellement privatifs, là où pourtant l'ensemble des caractéristiques techniques (son architecture) et des usages (ces 'contenus' qui 'font' le web) de ce "bien" relèvent, par nature, de la sphère publique commune.</p> </blockquote> <p>Aussi, développé dans l'article:</p> <blockquote> <p>Il n'y a pas de barrière technique ou juridique au déploiement de cet index indépendant.</p> </blockquote> <p>Avec de bons débuts d'aggrégation de données: <a href="https://www.hathitrust.org/">Hathi Trust</a> pour les livres, <a href="https://archive.org/">Internet Archive</a> pour les sites webs.<br /> Les technologies open-source sont aussi présentes, de même que la recherche au niveau européen. Les services quotidiens ont tous ou presque un équivalent open-source.</p></div> </div> <div class="linklist-item-infos clear"> <div class="linklist-item-tags"> <i class="fa fa-tags" aria-hidden="true"></i> <span class="label label-tag" title="Add tag"> <a href="/add-tag/internet">internet</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/thoughts">thoughts</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/web">web</a> </span> </div> <div class="linklist-item-infos-date-url-block pure-g"> <div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1"> <a href="/shaare/cA9jnw" title="Permalink"> <span class="linkdate" title="Permalink"> <i class="fa fa-clock-o" aria-hidden="true"></i> December 9, 2022 at 9:05:02 PM GMT+1 · </span> permalink </a> <div class="pure-u-0 pure-u-lg-visible"> · <span> <a href="https://web.archive.org/web/https://affordance.framasoft.org/2015/04/symptome-acces-mal-internet/"> <img class="linklist-plugin-icon" src="/plugins/archiveorg/internetarchive.png" title="View on archive.org" alt="archive.org" /> </a> </span> · <div class="linkqrcode"> <img data-permalink="https://affordance.framasoft.org/2015/04/symptome-acces-mal-internet/" src="/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> </div> </div><div class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1"> <a href="https://affordance.framasoft.org/2015/04/symptome-acces-mal-internet/" aria-label="Le symptome de l’accès et le mal de l’internet : plaidoyer pour un index indépendant du web. – affordance.info" title="Le symptome de l’accès et le mal de l’internet : plaidoyer pour un index indépendant du web. – affordance.info"> <i class="fa fa-link" aria-hidden="true"></i> https://affordance.framasoft.org/2015/04/symptome-acces-mal-internet/ </a> <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible"> <a href="#" aria-label="Fold" title="Fold" class="fold-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></a> </div> </div> <div class="mobile-buttons pure-u-1 pure-u-lg-0"> <span> <a href="https://web.archive.org/web/https://affordance.framasoft.org/2015/04/symptome-acces-mal-internet/"> <img class="linklist-plugin-icon" src="/plugins/archiveorg/internetarchive.png" title="View on archive.org" alt="archive.org" /> </a> </span> · <div class="linkqrcode"> <img data-permalink="https://affordance.framasoft.org/2015/04/symptome-acces-mal-internet/" src="/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> </div> </div> </div> </div> <div class="anchor" id="N2ZygA"></div> <div class="linklist-item linklist-item" data-id="4945"> <div class="linklist-item-title"> <div class="linklist-item-editbuttons"> </div> <h2> <a href="https://www.w3.org/WAI/ARIA/apg/patterns/" class="linklist-real-url"> <i class="fa fa-external-link" aria-hidden="true"></i> <span class="linklist-link">Patterns | APG | WAI | W3C</span> </a> </h2> </div> <div class="linklist-item-description"> <div class="markdown"><p>How to build common ui patterns that are accessible 👍</p></div> </div> <div class="linklist-item-infos clear"> <div class="linklist-item-tags"> <i class="fa fa-tags" aria-hidden="true"></i> <span class="label label-tag" title="Add tag"> <a href="/add-tag/ui">ui</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/guide">guide</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/programming">programming</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/web">web</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/accessibilit%C3%A9">accessibilité</a> </span> </div> <div class="linklist-item-infos-date-url-block pure-g"> <div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1"> <a href="/shaare/N2ZygA" title="Permalink"> <span class="linkdate" title="Edited: August 29, 2023 at 11:11:06 AM GMT+2"> <i class="fa fa-clock-o" aria-hidden="true"></i> December 4, 2022 at 6:41:22 PM GMT+1 * · </span> permalink </a> <div class="pure-u-0 pure-u-lg-visible"> · <span> <a href="https://web.archive.org/web/https://www.w3.org/WAI/ARIA/apg/patterns/"> <img class="linklist-plugin-icon" src="/plugins/archiveorg/internetarchive.png" title="View on archive.org" alt="archive.org" /> </a> </span> · <div class="linkqrcode"> <img data-permalink="https://www.w3.org/WAI/ARIA/apg/patterns/" src="/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> </div> </div><div class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1"> <a href="https://www.w3.org/WAI/ARIA/apg/patterns/" aria-label="Patterns | APG | WAI | W3C" title="Patterns | APG | WAI | W3C"> <i class="fa fa-link" aria-hidden="true"></i> https://www.w3.org/WAI/ARIA/apg/patterns/ </a> <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible"> <a href="#" aria-label="Fold" title="Fold" class="fold-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></a> </div> </div> <div class="mobile-buttons pure-u-1 pure-u-lg-0"> <span> <a href="https://web.archive.org/web/https://www.w3.org/WAI/ARIA/apg/patterns/"> <img class="linklist-plugin-icon" src="/plugins/archiveorg/internetarchive.png" title="View on archive.org" alt="archive.org" /> </a> </span> · <div class="linkqrcode"> <img data-permalink="https://www.w3.org/WAI/ARIA/apg/patterns/" src="/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> </div> </div> </div> </div> <div class="anchor" id="IvNviw"></div> <div class="linklist-item linklist-item" data-id="4902"> <div class="linklist-item-title"> <div class="linklist-item-editbuttons"> </div> <h2> <a href="https://www.smashingmagazine.com/2022/11/optimizing-vue-app/" class="linklist-real-url"> <i class="fa fa-external-link" aria-hidden="true"></i> <span class="linklist-link">Optimizing A Vue App — Smashing Magazine</span> </a> </h2> </div> <div class="linklist-item-infos clear"> <div class="linklist-item-tags"> <i class="fa fa-tags" aria-hidden="true"></i> <span class="label label-tag" title="Add tag"> <a href="/add-tag/vue">vue</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/programming">programming</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/web">web</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/optimisation">optimisation</a> </span> </div> <div class="linklist-item-infos-date-url-block pure-g"> <div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1"> <a href="/shaare/IvNviw" title="Permalink"> <span class="linkdate" title="Permalink"> <i class="fa fa-clock-o" aria-hidden="true"></i> November 26, 2022 at 9:25:07 PM GMT+1 · </span> permalink </a> <div class="pure-u-0 pure-u-lg-visible"> · <span> <a href="https://web.archive.org/web/https://www.smashingmagazine.com/2022/11/optimizing-vue-app/"> <img class="linklist-plugin-icon" src="/plugins/archiveorg/internetarchive.png" title="View on archive.org" alt="archive.org" /> </a> </span> · <div class="linkqrcode"> <img data-permalink="https://www.smashingmagazine.com/2022/11/optimizing-vue-app/" src="/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> </div> </div><div class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1"> <a href="https://www.smashingmagazine.com/2022/11/optimizing-vue-app/" aria-label="Optimizing A Vue App — Smashing Magazine" title="Optimizing A Vue App — Smashing Magazine"> <i class="fa fa-link" aria-hidden="true"></i> https://www.smashingmagazine.com/2022/11/optimizing-vue-app/ </a> <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible"> <a href="#" aria-label="Fold" title="Fold" class="fold-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></a> </div> </div> <div class="mobile-buttons pure-u-1 pure-u-lg-0"> <span> <a href="https://web.archive.org/web/https://www.smashingmagazine.com/2022/11/optimizing-vue-app/"> <img class="linklist-plugin-icon" src="/plugins/archiveorg/internetarchive.png" title="View on archive.org" alt="archive.org" /> </a> </span> · <div class="linkqrcode"> <img data-permalink="https://www.smashingmagazine.com/2022/11/optimizing-vue-app/" src="/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> </div> </div> </div> </div> <div class="anchor" id="JC0j-w"></div> <div class="linklist-item linklist-item" data-id="4896"> <div class="linklist-item-title"> <div class="linklist-item-editbuttons"> </div> <h2> <a href="https://github.com/BuilderIO/mitosis" class="linklist-real-url"> <i class="fa fa-external-link" aria-hidden="true"></i> <span class="linklist-link">GitHub - BuilderIO/mitosis: Write components once, run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and more.</span> </a> </h2> </div> <div class="linklist-item-description"> <div class="markdown"><p>One project to unify them all</p></div> </div> <div class="linklist-item-infos clear"> <div class="linklist-item-tags"> <i class="fa fa-tags" aria-hidden="true"></i> <span class="label label-tag" title="Add tag"> <a href="/add-tag/project">project</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/programming">programming</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/web">web</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/vue">vue</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/angular">angular</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/svelte">svelte</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/react">react</a> </span> </div> <div class="linklist-item-infos-date-url-block pure-g"> <div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1"> <a href="/shaare/JC0j-w" title="Permalink"> <span class="linkdate" title="Permalink"> <i class="fa fa-clock-o" aria-hidden="true"></i> November 24, 2022 at 4:29:37 PM GMT+1 · </span> permalink </a> <div class="pure-u-0 pure-u-lg-visible"> · <span> <a href="https://web.archive.org/web/https://github.com/BuilderIO/mitosis"> <img class="linklist-plugin-icon" src="/plugins/archiveorg/internetarchive.png" title="View on archive.org" alt="archive.org" /> </a> </span> · <div class="linkqrcode"> <img data-permalink="https://github.com/BuilderIO/mitosis" src="/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> </div> </div><div class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1"> <a href="https://github.com/BuilderIO/mitosis" aria-label="GitHub - BuilderIO/mitosis: Write components once, run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and more." title="GitHub - BuilderIO/mitosis: Write components once, run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and more."> <i class="fa fa-link" aria-hidden="true"></i> https://github.com/BuilderIO/mitosis </a> <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible"> <a href="#" aria-label="Fold" title="Fold" class="fold-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></a> </div> </div> <div class="mobile-buttons pure-u-1 pure-u-lg-0"> <span> <a href="https://web.archive.org/web/https://github.com/BuilderIO/mitosis"> <img class="linklist-plugin-icon" src="/plugins/archiveorg/internetarchive.png" title="View on archive.org" alt="archive.org" /> </a> </span> · <div class="linkqrcode"> <img data-permalink="https://github.com/BuilderIO/mitosis" src="/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> </div> </div> </div> </div> <div class="anchor" id="YUIA2w"></div> <div class="linklist-item linklist-item" data-id="4876"> <div class="linklist-item-title"> <div class="linklist-item-editbuttons"> </div> <h2> <a href="/shaare/YUIA2w" class="linklist-real-url"> <i class="fa fa-sticky-note" aria-hidden="true"></i> <span class="linklist-link">Note: a border-radius inside another border-radius</span> </a> </h2> </div> <div class="linklist-item-description"> <div class="markdown"><blockquote> <p>You simply substract the side distance [y-axis] from the larger corner radius.</p> <p>That way you end up with the right one for the smaller shape.</p> </blockquote> <p>Seen on Twitter but I could not find the author again</p></div> </div> <div class="linklist-item-infos clear"> <div class="linklist-item-tags"> <i class="fa fa-tags" aria-hidden="true"></i> <span class="label label-tag" title="Add tag"> <a href="/add-tag/CSS">CSS</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/design">design</a> </span> · <span class="label label-tag" title="Add tag"> <a href="/add-tag/web">web</a> </span> </div> <div class="linklist-item-infos-date-url-block pure-g"> <div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1"> <a href="/shaare/YUIA2w" title="Permalink"> <span class="linkdate" title="Edited: June 16, 2024 at 11:55:43 AM GMT+2"> <i class="fa fa-clock-o" aria-hidden="true"></i> November 18, 2022 at 7:42:12 AM GMT+1 * · </span> permalink </a> <div class="pure-u-0 pure-u-lg-visible"> · <span> <a href="https://web.archive.org/web/https://shaarli.lyokolux.space/shaare/YUIA2w"> <img class="linklist-plugin-icon" src="/plugins/archiveorg/internetarchive.png" title="View on archive.org" alt="archive.org" /> </a> </span> · <div class="linkqrcode"> <img data-permalink="https://shaarli.lyokolux.space/shaare/YUIA2w" src="/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> </div> </div><div class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1"> <a href="/shaare/YUIA2w" aria-label="Note: a border-radius inside another border-radius" title="Note: a border-radius inside another border-radius"> <i class="fa fa-link" aria-hidden="true"></i> /shaare/YUIA2w </a> <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible"> <a href="#" aria-label="Fold" title="Fold" class="fold-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></a> </div> </div> <div class="mobile-buttons pure-u-1 pure-u-lg-0"> <span> <a href="https://web.archive.org/web/https://shaarli.lyokolux.space/shaare/YUIA2w"> <img class="linklist-plugin-icon" src="/plugins/archiveorg/internetarchive.png" title="View on archive.org" alt="archive.org" /> </a> </span> · <div class="linkqrcode"> <img data-permalink="https://shaarli.lyokolux.space/shaare/YUIA2w" src="/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> </div> </div> </div> </div> </div> </div> </div> <div id="plugin_zone_end_linklist" class="plugin_zone"> </div> <div id="linklist-paging-bottom-block" class="pure-g link-count-block"> <div class="pure-u-lg-2-24 pure-u-1-24"></div> <div id="linklist-paging-bottom-content" class="pure-u-lg-20-24 pure-u-22-24"> <div class="linklist-paging"> <div class="paging pure-g"> <div class="linklist-filters pure-u-1-3"> <span class="linklist-filters-text pure-u-0 pure-u-lg-visible"> Filters </span> <a href="/untagged-only" aria-label="Filter untagged links" title="Filter untagged links" class="filter-off" ><i class="fa fa-tag" aria-hidden="true"></i></a> <a href="#" class="filter-off fold-all pure-u-lg-0" aria-label="Fold all" title="Fold all"> <i class="fa fa-chevron-up" aria-hidden="true"></i> </a> </div> <div class="linklist-pages pure-u-1-3"> <a href="?page=17&searchtags=web" class="paging_newer"> <i class="fa fa-arrow-circle-left"></i> </a> <span class="strong">18 / 27</span> <a href="?page=19&searchtags=web" class="paging_older"> <i class="fa fa-arrow-circle-right"></i> </a> </div> <div class="linksperpage pure-u-1-3"> <div class="pure-u-0 pure-u-lg-visible">Links per page</div> <a href="/links-per-page?nb=20" class="selected">20</a> <a href="/links-per-page?nb=50" >50</a> <a href="/links-per-page?nb=100" >100</a> <form method="GET" class="pure-u-0 pure-u-lg-visible" action="/links-per-page"> <input type="text" name="nb" placeholder="133" > </form> <a href="#" class="filter-off fold-all pure-u-0 pure-u-lg-visible" aria-label="Fold all" title="Fold all"> <i class="fa fa-chevron-up" aria-hidden="true"></i> </a> </div> </div> </div> </div> </div> </main> <div class="pure-g"> <div class="pure-u-2-24"></div> <footer id="footer" class="pure-u-20-24 footer-container" role="contentinfo"> <i class="fa fa-shaarli" aria-hidden="true"></i> <strong><a href="https://github.com/shaarli/Shaarli">Shaarli</a></strong> · The personal, minimalist, super-fast, database free, bookmarking service by the Shaarli community · <a href="/doc/html/index.html" rel="nofollow">Documentation</a> </footer> <div class="pure-u-2-24"></div> </div> <script src="/plugins/qrcode/shaarli-qrcode.js"></script> <div id="js-translations" class="hidden" aria-hidden="true"> <span id="translation-fold">Fold</span> <span id="translation-fold-all">Fold all</span> <span id="translation-expand">Expand</span> <span id="translation-expand-all">Expand all</span> <span id="translation-delete-link">Are you sure you want to delete this link?</span> <span id="translation-delete-tag">Are you sure you want to delete this tag?</span> <span id="translation-shaarli-desc"> The personal, minimalist, super-fast, database free, bookmarking service by the Shaarli community </span> </div> <input type="hidden" name="js_base_path" value="" /> <input type="hidden" name="token" value="56787502eb2e78d8d4839f4c336d61c1b08ffafe" id="token" /> <input type="hidden" name="tags_separator" value=" " id="tags_separator" /> <script src="/tpl/lyoko/js/shaarli.min.js?v=d2c676d5e92862a0c574531133aff137978f7484f31b29e0e5835cef3d028fb1"></script> <script src="/tpl/lyoko/js/thumbnails.min.js?v=d2c676d5e92862a0c574531133aff137978f7484f31b29e0e5835cef3d028fb1"></script> </body> </html>