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

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

    Join 2,952 other followers

Archive for the ‘CSS’ Category

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 | separateinherit
      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 »

Visual Studio Code: blazingly fast text expansion with Emmet

Posted by jpluimers on 2022/09/15

I come from a background of Delphi, Visual Studio and Notepad++ editors that historically have expanded their functionality over decades of releases.

When switching much of my development to Visual Studio Code, which out of the box aims at basic support (which has grown remarkably over the years so it’s way beyond basic now), I decided to review my editing behaviours see if plugins (in vscode speak “extensions marketplace“) would assist me with that.

One of my behaviours I wanted to get rid of is heavily use of keyboard macros, so when doing more web-stuff, I bumped into Emmet (that in the past was called Zen Code).

I bumped into Emmet because I wanted to refactor quite a few bits of html, and embed many sections of text in tags. Normally I would have written a macro for that, but now I did a quick [Wayback/Archive.is] vscode html embed text in element – Google Search and bumped into [Wayback/Archive.is] html – How to do tag wrapping in VS code? – Stack Overflow (thanks [Wayback/Archive.is] Alex!)

Since Visual Studio Code has built-in support for Emmet, here are some links so I can quickly find them back:

Hopefully I will now also less rely on user-defined snippets, though they are still available: [Wayback/Archive.is] Snippets in Visual Studio Code

Using Emmet eventually might help me in my blog-writing too, which still is heavily WordPress.com, known for its limited editor, based.

Apparently, my Google Search fu still is good enough to find these kinds of gems (:

–jeroen

Posted in .NET, CSS, Development, HTML, HTML5, Software Development, Visual Studio and tools, vscode Visual Studio Code, Web Development | Leave a Comment »

OWASP WebGoat repositories: Deliberately insecure JavaEE application to teach application security

Posted by jpluimers on 2022/08/02

Last year in OWASP top rated security “feature” A01:2021 – Broken Access Control, I promised to write more about how learn about OWASP documented and rated security vulnerabilities.

Today is the day you should start learning from [Wayback/Archive.is] Github: OWASP WebGoat:

Deliberately insecure JavaEE application to teach application security

It is a Java backend with a JavaScript/HTML frontend, but the vulnerabilities just as easily apply to other back-end stacks.

Repositories:

  1. [Wayback/Archive.is] WebGoat/WebGoat: WebGoat is a deliberately insecure application

    WebGoat is a deliberately insecure web application maintained by OWASP designed to teach web application security lessons.

    This program is a demonstration of common server-side application flaws. The exercises are intended to be used by people to learn about application security and penetration testing techniques.

    WARNING 1: While running this program your machine will be extremely vulnerable to attack. You should disconnect from the Internet while using this program. WebGoat’s default configuration binds to localhost to minimize the exposure.

    WARNING 2: This program is for educational purposes only. If you attempt these techniques without authorization, you are very likely to get caught. If you are caught engaging in unauthorized hacking, most companies will fire you. Claiming that you were doing security research will not work as that is the first thing that all hackers claim.

  2. [Wayback/Archive.is] WebGoat/WebGoat-Lessons: 7.x – The WebGoat STABLE lessons supplied by the WebGoat team.

    This repository contains all the lessons for the WebGoat container. Every lesson is packaged as a separate jar file which can be placed into a running WebGoat server.

  3. [Wayback/Archive.is] WebGoat/WebWolf (Can’t have a goat without a wolf, but I wonder where the cabbage is)
  4. [Wayback/Archive.is] WebGoat/WebGoat-Legacy: Legacy WebGoat 6.0 – Deliberately insecure JavaEE application
    This is the WebGoat Legacy version which is essentially the WebGoat 5 with a new UI.
    This program is a demonstration of common server-side application flaws. The exercises are intended to be used by people to learn about application penetration testing techniques.
  5. [Wayback/Archive.is] WebGoat/WebGoat-Archived-Releases: WebGoat 5.4 releases and older

    WebGoat 5.4 releases and older

  6. [Wayback/Archive.is] WebGoat/groovygoat: POC for dynamic groovy/thymeleaf based lesson system

    POC to demonstrate dynamic lessons with groovy controller/thymeleaf templates

They are by OWASP:

The Open Web Application Security Project (OWASP) is an online community that produces freely-available articles, methodologies, documentation, tools, and technologies in the field of web application security.[4][5]The Open Web Application Security Project (OWASP) provides free and open resources. It is led by a non-profit called The OWASP Foundation. The OWASP Top 10 – 2021 is the published result of recent research based on comprehensive data compiled from over 40 partner organizations.

Very important is the [Wayback/Archive.is] OWASP Top Ten Web Application Security Risks | OWASP:

The OWASP Top 10 is a standard awareness document for developers and web application security. It represents a broad consensus about the most critical security risks to web applications.

Globally recognized by developers as the first step towards more secure coding.

Companies should adopt this document and start the process of ensuring that their web applications minimize these risks. Using the OWASP Top 10 is perhaps the most effective first step towards changing the software development culture within your organization into one that produces more secure code.
Changes in the OWASP Top 10 between 2017 and 2021:

More OWASP repositories (including the [Wayback/Archive.is] OWASP/Top10: Official OWASP Top 10 Document Repository and [Wayback/Archive.is] OWASP/www-project-top-ten: OWASP Foundation Web Respository which seem to be at a 4-year update interval got updated in 2021) are at [Wayback/Archive.is] Github: OWASP.

Related: [Archive.is] Jeroen Wiert Pluimers on Twitter: “This so much sounds like German government IT-projects: …”

Via:

–jeroen

Posted in Authentication, CSS, Development, Encryption, HTML, Java Platform, JavaScript/ECMAScript, Pen Testing, Scripting, Security, Software Development, Web Development | Leave a Comment »

eidam/cf-workers-status-page: Monitor your websites, showcase status including daily history, and get Slack/Telegram/Discord notification whenever your website status changes. Using Cloudflare Workers, CRON Triggers, and KV storage.

Posted by jpluimers on 2022/07/26

Cool: [Wayback/Archive.is] eidam/cf-workers-status-page:

Monitor your websites, showcase status including daily history, and get Slack/Telegram/Discord notification whenever your website status changes. Using Cloudflare Workers, CRON Triggers, and KV storage

Will try this out in a while, hopefully before this actually reaches the front of the blog article queue (:

Via: [Wayback/Archive.is] Status Page – Scott Helme (via [Archive.is] Scott Helme on Twitter: “And yes, I’m also nervously watching my own status page 😅 …”).

Related blog post: One of the Let’s Encrypt’s Root Certificates expired today (and their corresponding intermediate yesterday); how is your infrastructure doing?

–jeroen

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

Chrome Print dialogue not offering fit to page, landscape, other printing options ( I’m looking at you @OHRA )

Posted by jpluimers on 2021/12/08

Some sites manage to disable various printing options (including layout, so you cannot choose between landscape and portrait any more, or force landscape when portrait works better or vice versa).

Googling this got me into a web of things that didn’t help me (see links below), but those led me to this query [Wayback] chrome save as pdf layout missing portrait landscape – Google Search.

That returned a helpful result at [Archive.is/Wayback] Chrome Print dialogue not offering fit to page, landscape, other printing options – Google Chrome Community:

I found a solution.

1.  Install the Stylus Extension.
2.  Go into the Stylus extension and click on “Write new style”.
3.  Put the following code in:
@page {
  size: auto;
}

4.  Give it a name (I called mine “Fix Orientation”) and save it.

5.  Reload the page you’re trying to print and the print dialogue should now have the “Layout” option and you should always get it for any page you print from now on.

It’s about the extension [Archive.is] Stylus – Chrome Web Store

Redesign the web with Stylus, a user styles manager. Stylus allows you to easily install themes and skins for many popular sites.

I reconfigured the OHRA Mijn Zorg site to force re-enabling of layout by adding @page { size: auto !important; } for https://mijn.ohrazv.nl/ (click the Save button to save this change permanently):

Read the rest of this entry »

Posted in Chrome, CSS, Development, Google, HTML, Power User, Software Development, Web Development | Leave a Comment »

 
%d bloggers like this: