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,914 other followers

Archive for the ‘HTML’ 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 »

Select matching element/rename HTML tag in Visual Studio Code – Stack Overflow

Posted by jpluimers on 2022/09/21

I totally missed that in 2019, the F2 key was enabled to rename HTML tags, but it does: [Wayback/Archive.is] Select matching element/rename HTML tag in Visual Studio Code – Stack Overflow:

HTML rename tags
You can now use F2 to rename the opening/closing tag pairs in HTML.
F2 when the cursor is over one of the tags and you will get a little input box with the cursor to input the new tag name and the start/end tags will be replaced with whatever you type upon .
demo of HTML rename tags

[Wayback/Archive.is] Another answer indicates that even more recently, Linked Editing can do the same without even pressing F2. Too bad it is not enabled by default:

No need for extension, this is now cooked into VSCode.
"editor.linkedEditing": true

–jeroen

Posted in .NET, Development, HTML, Software Development, Visual Studio and tools, vscode Visual Studio Code, 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 »

T-Shirt song: “🎶 Never gonna <div> you up … 🎶” / Twitter

Posted by jpluimers on 2022/08/10

I want this on a T-Shirt:

[Archive.is] Tatiana Mac on Twitter: “🎶 Never gonna <div> you, up Never gonna ‘let’ you down, Never gonna pun around and dessert you [sic], Never gonna make you DRY, Never gonna say goodbye, Never gonna tell a <li> and hurt you 🎶” / Twitter.

–jeroen

Read the rest of this entry »

Posted in Development, Fun, HTML, Quotes, Software Development, T-Shirt quotes, 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 »

 
%d bloggers like this: