The Wiert Corner – irregular stream of stuff

Jeroen W. Pluimers on .NET, C#, Delphi, databases, and personal interests

  • My badges

  • Twitter Updates

  • My Flickr Stream

  • Pages

  • All categories

  • Email Subscription

    Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 716 other subscribers

Archive for the ‘CSS’ Category

View DOM Source bookmarklet

Posted by jpluimers on 2024/09/12

This is cool as it shows the page source not as it was first loaded, but from how it is currently rendered which includes all post-load modifications by any scripts: [Wayback/Archive] View DOM Source bookmarklet.

Via [Wayback/Archive] Martin Splitt on Twitter: “I made a bookmarklet to view the rendered source (aka the DOM) of a page. 👀 🚀 Works with Chrome, Firefox, Safari and possibly others, too. 🌈 Beautifies the code 🎨 Includes syntax highlighting 💻 Get the bookmarklet at 👉 experiments.geekonaut.de/view-dom-source 👈”

Read the rest of this entry »

Posted in Bookmarklet, CSS, Development, HTML, HTML5, JavaScript/ECMAScript, Power User, Scripting, Software Development, Web Browsers, Web Development | Leave a Comment »

Lots of interesting programming learning games links via b0rk on Twitter

Posted by jpluimers on 2024/06/25

Every once in a while, b0rk (Julia Evans, of [Wayback/Archive] wizard zines fame) asks interesting questions like below that results in lot of cool links.

I have blogged assemblies of them before (see for instance Lots of interesting git links via b0rk on Twitter) and this one is no different:

[Wayback/Archive] Julia Evans on Twitter: “what are some helpful programming learning games? thinking of things like mystery.knightlab.com for SQL, and flexboxfroggy.com, and ohmygit.org especially interested in games that have helped you learn something”

The response was overwhelmingly good (I tried to indicate when games are not free or not playable from a web browser). I summarised it below.

Read the rest of this entry »

Posted in *nix, *nix-tools, Conference Topics, Conferences, CSS, Database Development, Development, DVCS - Distributed Version Control, Event, Games, git, Multi-Threading / Concurrency, Power User, RegEx, Scripting, sh, Sh Shell, Software Development, Source Code Management, SQL, Web Development | Leave a Comment »

Fixing the GitHub gist CSS so the editor uses more than 25% of my screen estate

Posted by jpluimers on 2024/06/05

Two years ago I asked [Wayback/Archive] Jeroen Wiert Pluimers on Twitter: “Is there a way to make the @github gist text editor wider and taller? Right now (at 1920×1200) it uses about half the screen width and screen height. That wastes about 25% of screen estate. “.

I still have to figure out how to fix the height, but the width was relatively easy back then. Hopefully this CSS fix still works today.

In the mean time [Wayback/Archive] Add full height gist creation by xthexder · Pull Request #68 · xthexder/wide-github: Conversation permanently fixed my problem.

[Wayback/Archive] Jeroen Wiert Pluimers on Twitter: “I fixed the width by modifying .container-lg and changing max-width from 1018px to 95%.”

Until GitHub fixes it themselves, I started with this fix in the extension [Wayback/Archive] Stylus – Chrome Web Store:

Read the rest of this entry »

Posted in CSS, Development, DVCS - Distributed Version Control, gist, GitHub, HTML, Software Development, Source Code Management, Web Development | Leave a Comment »

Web-Design user experience: if you replace actual characters with images or empty styled items you will exclude screen-readers and make visually impaired unhappy (and others too)

Posted by jpluimers on 2024/02/15

So I was on a medical site trying to copy my prescriptions trying to copy them:

Before copying After copying
Image Image

In this case, the element that failed to copy was this:

Read the rest of this entry »

Posted in CSS, Dark Pattern, Development, Software Development, User Experience (ux), Web Development | Leave a Comment »

css color names – Google Search

Posted by jpluimers on 2023/12/27

I like the featured snipped [WayBack] css color names – Google Search

It points to [WayBack] Quackit: CSS Color Codes which has the below nice table (a few duplicates could be stripped, but the ordering and layout is great!)

Since then, I also found these very interesting pages on web colors that are also useful in any software development environment:

Read the rest of this entry »

Posted in Color (software development), CSS, Development, HTML, Software Development, Web Development | Leave a Comment »

0x48piraj/fadblock: Friendly Adblock for YouTube: A fast, lightweight, and undetectable YouTube Ads Blocker for Chrome, Opera and Firefox.

Posted by jpluimers on 2023/10/31

[Wayback/Archive] 0x48piraj/fadblock: Friendly Adblock for YouTube: A fast, lightweight, and undetectable YouTube Ads Blocker for Chrome, Opera and Firefox.

At the time of writing, it was available in these web-browser extension/addon stores:

A 404 was returned at [Wayback/Archive] https://addons.opera.com/en-gb/extensions/details/fadblock/ which I reported in [Wayback/Archive] Extension vanished from the Opera Addons page · Issue #15 · 0x48piraj/fadblock.

Via:

–jeroen

Posted in Chrome, CSS, Development, Firefox, JavaScript/ECMAScript, Opera, Power User, Scripting, SocialMedia, Software Development, Web Browsers, Web Development, YouTube | Leave a Comment »

Via isotopp: Yes, I can connect to a DB in CSS

Posted by jpluimers on 2023/06/22

Boy, I wonder what can go wrong with [Wayback/Archive] Yes, I can connect to a DB in CSS

Via: [Wayback/Archive] Kris on Twitter: “… “Yes, I can connect to a DB in CSS” Abusing houdini.how, and using a JS version of Sqlite, CSS can connect to a DB.” / Twitter

Related:

–jeroen

Posted in CSS, Database Development, Development, Software Development, SQLite, Web Development | Leave a Comment »

JavaScript – how to refresh an iframe automatically – Stack Overflow

Posted by jpluimers on 2023/06/14

Based on [Wayback/Archive] javascript – how to refresh an iframe automatically – Stack Overflow and help from [Archive] Roderick Gadellaa (@RGadellaa) / Twitter, I used this JavaScript code right after the body in the html page to reload part of the iframes every 3 minutes and another part every 3 hours:

<script>
  var iframes3minuteInterval = setInterval( () => {
    const ids3minutes = [ 'agenda_iframe', 'month_iframe' ];
    ids3minutes.forEach( id => {
      element = document.getElementById( id );
      element.src = element.src;
    });
  }, 1000 * 60 * 3);
  var iframes3hourInterval = setInterval( () => {
    const ids3hours = [ 'weerplaza_nederland_iframe', 'weerplaza_radar_iframe', 'buienradar_iframe' ];
    ids3hours.forEach( id => {
      element = document.getElementById( id );
      element.src = element.src;
    });
  }, 1000 * 60 * 60 * 3);
</script>

The iframes are widgets for:

This was to workaround GitLab pages on a custom domain are nice, but be aware of intermittent 502 and certificate errors. Now the page only gets loaded once, and the widgets at intervals that are needed.

—jeroen

Posted in CSS, Development, HTML, JavaScript/ECMAScript, Scripting, Software Development, Web Development | Leave a Comment »

Eight Dollars – Chrome Web Store: see who fell for the twitter blue scam

Posted by jpluimers on 2023/04/03

[Wayback/Archive] Eight Dollars – Chrome Web Store

It’s available for other browsers too (Brave, FireFox, Edge, Opera; Safari should become supported too), and more importantly: open source as well at [Wayback/Archive] wseagar/eight-dollars: A browser extension that shows twitter blue vs real verified users.

Via [Wayback/Archive] Alan Neilan on Twitter: “@IanColdwater pssst check out”.

––jeroen

Read the rest of this entry »

Posted in CSS, Development, HTML, JavaScript/ECMAScript, PowerShell, Scripting, Software Development, Web Development | Leave a Comment »

Using styles on just html tr to format the borders of table rows

Posted by jpluimers on 2022/09/22

A long time ago, I found out that by default, you could only format td elements in HTML tables: somehow doing that with just tr failed, and I never understood why.

Since I wasn’t doing a lot of html stuff back then, I just lived with the few occurrences and moved on.

A while ago, I needed html tables again, and – since WordPress.com hosted blogs do not allow CSS style sheets – I had to use inline style attributes. That would bloat many td elements, so I did a [Wayback/Archive.is] html table border below row – Google Search, where the first few hits – all on StackOverflow – tremendously helped my to understand why this was the case and how to fix it:

  • In [Wayback/Archive.is] css – Giving a border to an HTML table row, – Stack Overflow, [Wayback/Archive.is] User Jukka K. Korpela – Stack Overflow explains about the various border models, but only shows a a solution having the CSS style sheet in a style element which WordPress.com disallows:
    You can set border properties on a tr element, but according to the CSS 2.1 specification, such properties have no effect in the separated borders model, which tends to be the default in browsers. Ref.: 17.6.1 The separated borders model. (The initial value of border-collapse is separate according to CSS 2.1, and some browsers also set it as default value for table. The net effect anyway is that you get separated border on almost all browsers unless you explicitly specifi collapse.)
    Thus, you need to use collapsing borders. Example:
    <style>
    table { border-collapse: collapse; }
    tr:nth-child(3) { border: solid thin; }
    </style>
    

    From that, I learned about these:

    • [Wayback/Archive.is] Tables: borders
      There are two distinct models for setting borders on table cells in CSS. One is most suitable for so-called separated borders around individual cells, the other is suitable for borders that are continuous from one end of the table to the other. Many border styles can be achieved with either model, so it is often a matter of taste which one is used.
      ‘border-collapse‘
      Value: collapse | separate | inherit
      Initial: separate
      Applies to: ‘table‘ and ‘inline-table’ elements
      Inherited: yes
      Percentages: N/A
      Media: visual
      Computed value: as specified
      This property selects a table’s border model. The value ‘separate‘ selects the separated borders border model. The value ‘collapse‘ selects the collapsing borders model. The models are described below.
    • [Wayback/Archive.is] Tables: separated borders (default)
    • [Wayback/Archive.is] Tables: collapsing borders
  • In [Wayback/Archive.is] Create table with only bottom border in HTML – Stack Overflow, [Wayback/Archive.is] Martin2904 explains how to solve it with CSS style sheets and inline style attributes, but does not link to the “why”:
    Just use the following code-snippet and paste it in you style.css
    table {
      border-collapse: collapse;
    }
    tr{
      border-bottom: 1px solid black;
    }
    <table>
      <tbody>
        <tr>
          <td>Lorem</td>
          <td>Ipsum</td>
        </tr>
      </tbody>
    </table>
    Without using style.css
    <table style="border-collapse: collapse;">
      <tbody>
        <tr style="border-bottom: 1px solid black;">
          <td>Lorem</td>
          <td>Ipsum</td>
        </tr>
      </tbody>
    </table>

–jeroen

Posted in CSS, Development, HTML, Software Development, Web Development | Leave a Comment »