DEV Community: Author

The HTML I Wish I Had

Author — Wed, 23 Oct 2024 13:33:00 +0000

HTML5 innovated in the wrong direction. At some level, I am a contientious thinker, and respect that any step forward is fine. Yet, and further, the decision for semantic tags is awful.

That's Right! I Went Political On That One! ⭐

Semantic elements must have been thought of by a non-HTML developer. The written experience is not valuable, and the true 100% for real, non-marketing jargon value add for HTML5 semantic elements is ZERO.

The conspicuous factor about the addition of these elements is that someone made the decision in the first place.

For the record, there is absolutely and undoubtedly zero value added for the human reader of an HTML page when is used instead of . The readers of the elements are web scraping utilities, i.e. software. The key player in this regard is Google.

An entire major spec was invented just for Google. That actually happened, and the world needs to recognize that.

Did you know? HTML5 is more than just semantic elements. Find out more and become an HTML Developer with HTML Handbook, available at my company alexason.com.

HTML Should Be For People

Any innovation should be for people. The end result should be human happiness. The driving goal percentage of the population affected toward happiness. This is how maximum good can be accomplished.

Most people believe it is reasonable for an organization to have a scope of population whom the responsiblility of "toward happiness" applies. While at my company we refute the claim, we can continue to examine HTML with that idea in mind.

In the context of HTML, the percentage of population affected is a lot. The technical term for this may even be considered "the inhabited earth." Any living user of the internet receives downstream decisions of WHATWG, the working group which defines HTML.

That working group did no justice for the human audience in the decision for semantic elements. It does nothing for the human readers. It makes the experience more wordy, complicated, and by the DevEx tradition of classifying coginitive load as undesirable, these additional elements make the experience worse.

I expect to hear a thought which goes, "But, but... accessibility!" I'll be clear. Accessibility is not optional, it is a requirement. I expect to hear that contending thought because a good HTML Developer has that in mind. Yet here is the pill to swallow: Semantic elements do nothing for accessibility. A Screen Reader (a screen reader is simply a web scraper) may implement some understanding of the elements, but it may not! Further, it's 2024, and there is no standardization in this regard. Moreover, the algorithms of what to do with the information must necessarily vary between developers, and the information of what the human reader wants to know about the page must also vary!

Semantic elements were only a step toward complication for the benefit of very few. WHATWG started as a company of "major" players in the internet biz, and it's clear their priorities were skewed. It is valuable technology for companies who's business model is web scraping, not for accessibility, but for content aggregation (i.e. search engines).

HTML should be for people. Human experience and the betterment in that area (generally, not financially), should be the goal of any major innovation with the effective reach of HTML. Instead we got technology to answer the question "How can this subsection be characterized?"

Better stated, it's a Secret Answer because no living thing reads the answer to that question. A business entity is not a living thing. A web scraper is not a living thing. Only a software writer is aware it's there, and as stated, the effect of this addition to the spec is an increase of cognitive load and worsening of experience.

Great 🙂

HTML For People

Let it be known that I think HTML5 and CSS3 are fantastic! CSS alone continues to be one of the most powerful rendering engines globally.

So what would be an improvement for HTML? In my book, the answer to that question will improve 1) developer happiness, and 2) have an valuable impact for screen readers without the need for further regulation of the screen readers!

I'm gonna drop some ideas here, and if you're interested swing by my company's working group.

Automatic content translation! Format dimension coersion! Whatever this button is!!

This Is The Whole Enchilada Version Of A Three-Part Series!

Leave a message with how you'd make HTML Better for Experience!

If you're interested in making Hypertext Applications for the purpose of Human Happiness, come to the party at Salvation! Salvation Company, where We Are Saved. Oh, and I hear the author of that HTML Handbook is a member at I'm sure there a sharable manuscript in the member library!

Installing A Font On Windows

Author — Sun, 29 Sep 2024 13:39:00 +0000

For web development and design, a general understanding of font and and user experience of font is required for designing a visual interface.

Did you know? Most Barcodes, while not human-legible, are implemented and written using a standard font definition. See the tidbit at the end to check out some barcode fonts.

Installing a font is very simple. Here's a quick three step process.

Locate the font you wish to install. Here's a playful display font, Loki Cola. Download the zip file, extract it, and locate the .ttf file.
Right-click the file and select "Install" from the context menu. If you'd like to install it for all users, select "Install for all users."

That's it really! The font is now available as a system font.

Open up a new window of the program where you'd like to use the font, for example Microsoft Word, and the font is available for selection. Note that most programs load systems fonts on program boot-up, so you will need to close previously open instances of the program, and open a new window.

For Product Software Tips Like This, Be Sure to Follow This Dev Account!

Tidbit: Here's how to write LoremIpsum in Barcode! Try scanning the code with a barcode scanner 🤖

The HTML I Wish I Had (pt. 3)

Author — Sat, 28 Sep 2024 13:25:00 +0000

HTML For People

Let it be known that I think HTML5 and CSS3 are fantastic! CSS alone continues to be one of the most powerful rendering engines globally.

I'm gonna drop some ideas here, and if you're interested swing by my company's working group.

Automatic content translation! Format dimension coersion! Whatever this button is!!

This is Part 3 of a 3-part series.

Sept. 25: The HTML Innovation
Sept. 27: HTML Should Be For People
Sept 28: HTML For People

Leave a message with how you'd make HTML Better for Experience!

The HTML I Wish I Had (pt. 2)

Author — Fri, 27 Sep 2024 13:28:00 +0000

HTML Should Be For People

Any innovation should be for people. The end result should be human happiness. The driving goal percentage of the population affected toward happiness. This is how maximum good can be accomplished.

Great 🙂

This is Part 2 of a 3-part series.

Sept. 25: The HTML Innovation
Sept. 27: HTML Should Be For People
Sept 28: HTML For People

Leave a message with how you'd make HTML Better for Experience!

Parsing XML

Author — Fri, 27 Sep 2024 09:55:20 +0000

HTML is the most common markup language for web development. HTML is a superset of XML, which is to say it is an extension of the XML specification. What is cool about this fact is that web browsers, in their ability to render HTML, actually come with XML parsers, and have XML parsing capabilities under the hood.

Why Think About XML At All

HTML is the ubiquitous markup language of internet developers. The audience of this blog, software engineers, likely only has need for HTML. Yet, my Media Company deals with many authors of the non-technical variety, and I have got to say... Authors think about their content wayyy differently than HTML gives credit for.

The beauty of XML is its generic stucture which allows for custom parsing and handling. This flexibiliy has been beautifully exemplified in HTML, but the use case of allowing custom definitions is better handled by XML.

XML is a data-carrying language. HTML is an extension of that language that comes with standardized graphical-user interface rendering. To see what I mean by this, open an XML file in a browser. https://alexason.com/uploads/library.xml

As you will see, modern browsers render the file complete with element tags. But also take note that the browser recognizes the datatype, and applies special formatting. In this way, XML is more like JSON.

Parsing XML

While not native to browser rendering agents, it's possible to parse XML using the browser API's DOMParser.

See a gist of this is action

const xmlString = `
  <story>
    <styles>
      <titleStyle>
        <color>#4A90E2</color>
      </titleStyle>
      <paragraphStyle>
        <color>#333333</color>
      </paragraphStyle>
    </styles>
    <title>Elena and the Embrace of Holiness</title>
    <paragraph>In the heart of the village, where the sun kissed the earth...</paragraph>
    <!-- More paragraphs here -->
  </story>`;

const parser = new DOMParser();
const xmlDocument = parser.parseFromString(xmlString, "text/xml");
const parserError = xmlDoc.getElementsByTagName("parsererror");
if (parserError.length > 0) {
  // Handle error
  console.error("Error parsing XML:", parserError[0].textContent);
} else {
  // Successfully parsed the XML
  // XML Document contains a document
  console.log("Parsed XML Document:", xmlDocument);
  const title = xmlDocument.getElementsByTagName("title")[0].textContent;
  const titleColor = xmlDocument.getElementsByTagName("color")[0].textContent;
}

Real Use Case

The example shown demonstrates what is possible with XML, yet the use case of rendering and styling content is better handled by HTML. While the format, resembles HTML, using XML as HTML must not be the best case of XML.

My HTML Developer I know, Israel, writes XML like this. He uses the data format to recreate HTML, then uses JavaScript to make it HTML. While this is possible given the flexibility of XML, if the only use case is for the browser, I'll tell you what I tell Israel: "Just write HTML!"

Join Israel and the HTML Devs at Salvation.

Where to use XML

XML is a great format for intermediate representation. As mentioned, the immediate use case of my company is translating many different Author's (book authors, manuscript writers) representation of their work into a standardized format. The task is to turn Word documents, PDFs, plaintext, and spoken words into some similar data format.

XML could do that, and is exactly used as such in software programs such as Calibre and Manuskript.

This has been a look at XML. It is a widely-recognized format, compatible with many readers and conversion tools. Given it's ease of parsing, W3C recommendation, and ubiquity, XML is a safe language for indefinite data storage.

If you're interested in tools for data science and storage, be sure to Follow this Dev.to. Add a reaction 💖 for more content like this.

The HTML Innovation

Author — Wed, 25 Sep 2024 13:30:13 +0000

HTML5 innovated in the wrong direction. At some level, I am a contientious thinker, and respect that any step forward is fine. Yet, and further, the decision for semantic tags is awful.

That's Right! I Went Political On That One! ⭐

The conspicuous factor about the addition of these elements is that someone made the decision in the first place.

For the record, there is absolutely and undoubtedly zero value added for the human reader of an HTML page when <section> is used instead of <div>. The readers of the elements are web scraping utilities, i.e. software. The key player in this regard is Google.

An entire major spec was invented just for Google. That actually happened, and the world needs to recognize that.

Did you know? HTML5 is more than just semantic elements. Find out more and become an HTML Developer with HTML Handbook, available at my company alexason.com.

This is Part 1 of a 3-part series.

Sept. 25: The HTML Innovation
Sept. 27: HTML Should Be For People
Sept. 28: HTML For People

Leave a message with how you'd make HTML Better for Experience!

Medium.com API in Python

Author — Fri, 20 Sep 2024 13:00:00 +0000

Medium.com has a little known API that does a few things. Here are the things it can do!

I initially got started researching Medium's interface to make a library which would sync and syndicate articles. The very initial use case was pulling articles from Medium, yet such a functionality isn't available on their documented API. A secondary use case is to syndicate articles to Medium, which is indeed available via a simple HTTP request (go figure!). It's quite a curious API.

The full docs are on Github. Medium developers no longer maintain it, but it is still open for use. Here's what it can do.

import requests as requests
access_token = "Bearer MEDIUMINTEGRATIONTOKENHERE"
base_url = "https://api.medium.com/v1"
headers = {}
headers['Authorization'] = access_token

def get_current_user():
    req = requests.get(base_url + '/me', headers=headers)
    res = req.json()
    return res

def get_user_publications(user_id):
    req = requests.get(base_url + '/users/' + user_id + '/publications', headers=headers)
    res = req.json()
    return res

def get_publication_contributors(pub_id):
    req = requests.get(base_url + '/publications/' + pub_id + '/contributors', headers=headers)
    res = req.json()
    return res

def create_post(author_id, data):
    # data = {
    # title,           (required) This is only used for SEO listing. You should also include the title in the content field. <100 chars
    # contentFormat,   (required) HTML or Markdown
    # content,         (required) Valid html or markdown of the article
    # canonicalUrl,    Original URL if the content was published elsewhere first
    # tags,            Only three tags will be counted. < 25 chars
    # publishStatus,   Must be “public”, “draft”, or “unlisted”. Public
    # license,         Valid values are “all-rights-reserved”, “cc-40-by”, “cc-40-by-sa”, “cc-40-by-nd”, “cc-40-by-nc”, “cc-40-by-nc-nd”, “cc-40-by-nc-sa”, “cc-40-zero”, “public-domain” Default: “all-rights-reserved”
    # notifyFollowers, Boolean
    # }
    req = requests.post(base_url + '/users/' + author_id + '/posts', headers=headers, data=data)
    res = req.json()
    return res

def create_image(image, content_type):
    # image, in this case, should be a file on-disk
    # content_type must be one of 'image/jpeg', 'image/png', 'image/gif', or 'image/tiff'
    files = {
        'image': (image, open(image, 'rb'), content_type)
        # 'image': ('symbol.png', open('symbol.png', 'rb'), 'image/png')
    }
    req = requests.post(base_url + '/images', files=files, headers=headers)
    res = req.json()
    return res

And that's all! The public API is no longer maintained, but it is still open, and it is still possible to get an Integration Token in one's Medium Settings. Grab an integration token, replace MEDIUMINTEGRATIONTOKENHERE, and invoke those functions today.

A couple of other options exist for getting one's own articles from Medium. First, is to use the RSS feed functionality. The response from the RSS endpoint is XML, so most developers pipe the raw response through some RSS-to-JSON functionality (see: the first NPM library I ever made 👶, medium-post-parser).

Another option is to request a data download of all of one's Medium information via email. It is non-trivial to make this method purely automated, nevertheless if retrieving a .zip file from an email fits into one's workflow, it is surely a possiblity! You can request a .zip file containing HTML files of your Medium posts and drafts, info that you have shared on your profile, stories you’ve clapped on, and more in Medium Settings.

Next, I'll be investigating this typescript library which promises to solve the post retrieval shortcoming of the API.

FYI... This many tabs will be saved if you just copy the code!

Find the Author on X, @theholyspiritcc.
Coffees are accepted! BuyMeACoffee

Em and Rem: What's the Difference?

Author — Thu, 19 Sep 2024 03:27:15 +0000

Synopsis: Both rem and em are units of size in CSS. Rem is the font-size of the root element. Em is the font-size of the local context.

The em unit is borrowed from the world of printed typography, and it is a unit that allows setting the font-size of an element relative to the nearest declared font-size in its component hierarchy.

The rem unit, short for root em, always references the font-size value of the root element, the <html> element. If the <html> element doesn’t have a specified font-size, the browser default of 16px is used.

Both of these units can be used for any sized attribute, such as margin and line-height. If so, rem maintains its consistent definition. Em, on the other hand, references the element's own font-size.

Developer's Take

I admit I used em a lot more in the code I've written, but after learning this, rem is more intuitive and reliable than em! I will be using rem from this time onward, unless I specifically want to take into account the sizing in the localized context.

If you're an HTML Dev, an keen on the joining the Mission of Saving the World, come join the crew at Salvation Company, where we're doing just that! Technology developments are a sure factor in doing what we're doing, and there's room for newbies and Senior Staff Architect Engineers alike! (And product managers, and designers, and techies, and students, and advisors, and mathmeticians, and...) The rooms are open; You gotta stay respectful. It is salvation anyway 🙂 See ya there!

Minitest Assertions

Author — Sat, 14 Sep 2024 03:19:50 +0000

Ruby on Rails 7 ships with Minitest. Here's a definitive guide to what assertions are available in Minitest 5.1.

Assertion	Asserts
`assert( test, [msg] )`	Asserts that `test` is true.
`assert_not( test, [msg] )`	Asserts that `test` is false.
`assert_equal( expected, actual, [msg] )`	Asserts that `expected == actual` is true.
`assert_not_equal( expected, actual, [msg] )`	Asserts that `expected != actual` is true.
`assert_same( expected, actual, [msg] )`	Asserts that `expected.equal?(actual)` is true.
`assert_not_same( expected, actual, [msg] )`	Asserts that `expected.equal?(actual)` is false.
`assert_nil( obj, [msg] )`	Asserts that `obj.nil?` is true.
`assert_not_nil( obj, [msg] )`	Asserts that `obj.nil?` is false.
`assert_empty( obj, [msg] )`	Asserts that `obj` is `empty?`.
`assert_not_empty( obj, [msg] )`	Asserts that `obj` is not `empty?`.
`assert_match( regexp, string, [msg] )`	Asserts that a string matches the regular expression.
`assert_no_match( regexp, string, [msg] )`	Asserts that a string doesn't match the regular expression.
`assert_includes( collection, obj, [msg] )`	Asserts that `obj` is in `collection`.
`assert_not_includes( collection, obj, [msg] )`	Asserts that `obj` is not in `collection`.
`assert_in_delta( expected, actual, [delta], [msg] )`	Asserts that the numbers `expected` and `actual` are within `delta` of each other.
`assert_not_in_delta( expected, actual, [delta], [msg] )`	Asserts that the numbers `expected` and `actual` are not within `delta` of each other.
`assert_in_epsilon ( expected, actual, [epsilon], [msg] )`	Asserts that the numbers `expected` and `actual` have a relative error less than `epsilon`.
`assert_not_in_epsilon ( expected, actual, [epsilon], [msg] )`	Asserts that the numbers `expected` and `actual` have a relative error not less than `epsilon`.
`assert_throws( symbol, [msg] ) { block }`	Asserts that the given block throws the symbol.
`assert_raises( exception1, exception2, ... ) { block }`	Asserts that the given block raises one of the given exceptions.
`assert_instance_of( class, obj, [msg] )`	Asserts that `obj` is an instance of `class`.
`assert_not_instance_of( class, obj, [msg] )`	Asserts that `obj` is not an instance of `class`.
`assert_kind_of( class, obj, [msg] )`	Asserts that `obj` is an instance of `class` or is descending from it.
`assert_not_kind_of( class, obj, [msg] )`	Asserts that `obj` is not an instance of `class` and is not descending from it.
`assert_respond_to( obj, symbol, [msg] )`	Asserts that `obj` responds to `symbol`.
`assert_not_respond_to( obj, symbol, [msg] )`	Asserts that `obj` does not respond to `symbol`.
`assert_operator( obj1, operator, [obj2], [msg] )`	Asserts that `obj1.operator(obj2)` is true.
`assert_not_operator( obj1, operator, [obj2], [msg] )`	Asserts that `obj1.operator(obj2)` is false.
`assert_predicate ( obj, predicate, [msg] )`	Asserts that `obj.predicate` is true, e.g. `assert_predicate str, :empty?`
`assert_not_predicate ( obj, predicate, [msg] )`	Asserts that `obj.predicate` is false, e.g. `assert_not_predicate str, :empty?`
`assert_error_reported(class) { block }`	Asserts that the error class has been reported, e.g. `assert_error_reported IOError { Rails.error.report(IOError.new("Oops")) }`
`assert_no_error_reported { block }`	Asserts that no errors have been reported, e.g. `assert_no_error_reported { perform_service }`
`flunk( [msg] )`	Asserts failure. This is useful to explicitly mark a test that isn't finished yet.

We're writing Ruby on Rails at Salvation Co. Technologists keen on Saving The World are invited to join the innovations. Salvation Company

Join Table

Author — Fri, 13 Sep 2024 00:14:30 +0000

When modelling data for SQL, a useful tool for data engineers is the Join Table. A Join Table reduces redundancy in relational databases by defining the relationship between tables as an entity. In the case of many-to-many relationships, Join Table is the best practice.

Here is a simple join table written in the Ruby on Rails schema DSL (domain specific language.) The use case is a student portfolio which contains Projects, and each project is made with a number of Technologies.

create_table "projects" do |t|
    t.string   "title"
    t.string   "image"
    t.text     "description"
    t.string   "repository_url"
    t.string   "demo_url"
    t.text     "role"
 end

create_table "projects_technologies" do |t|
    t.integer  "project_id"
    t.integer  "technology_id"
    t.index ["project_id", "technology_id"], name: "index_projects_technologies_on_project_id_and_technology_id", using: :btree
end

create_table "technologies" do |t|
    t.string   "name"
end

The Join Table in this exercise is projects_technologies.

Comment below if you're interested in Join Tables! If you're proficient in it, Come join us at Salvation! We're Saving The World, and making plenty of tables along the way!

~ ATHS

Product Owner 9/6

Author — Sat, 07 Sep 2024 04:00:40 +0000

I'm a bit of a Product Afficianado!

I cruise Product Hunt, and if you're on Product Hunt too, be sure to follow me! I'll follow back and watch for your launches!

Here are some cool products, found today.

Group Card Creator (no sign up!)

VideoGen

Assembly AI (Speech to Text)

How To Announce Anything!

Author — Sat, 07 Sep 2024 03:33:46 +0000

Announcement General Form, A Template

The Entity Announcement General Form
Here is a template for, generally, any announcement.

I have a {thing}
The {thing} is {things name}
The {thing} has {these attributes}
{further significance by my estimation is this}
{Where it can be found}

In an Example:
Hello all,
I’m announcing the release of a book, HTML: A Plain and Simple Handbook.
HTML Book provides a comprehensive look at the library of HTML elements next to practical example.
It can be used as a reference for seasoned professionals. It can be used as sequential lessons for beginners.

HTML: Simply Given is available at alexason.com/html-book