# elements

Published articles for elements.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## Ballad: Doctave's Markdown-aware component system

DevFeed: [Ballad: Doctave's Markdown-aware component system](<https://devfeed.tech/articles/ballad-doctave-s-markdown-aware-component-system-30941.md>)

Original publisher: [Read original article](<https://www.doctave.com/blog/ballad-components>)

Author: Doctave Team

Published: 2024-05-27T07:00:00Z

Content type: release

Language: en

Sources: [Doctave - Build beautiful developer portals with docs-as-code](<https://devfeed.tech/sources/doctave-build-beautiful-developer-portals-with-docs-as-code.md>)

Topics: [Markdown](<https://devfeed.tech/topics/markdown.md>), [MDX](<https://devfeed.tech/topics/mdx.md>), [Parser](<https://devfeed.tech/topics/parser.md>), [Documentation](<https://devfeed.tech/topics/documentation.md>), [ui](<https://devfeed.tech/topics/ui.md>)

Tags: [blog](<https://devfeed.tech/tags/blog.md>), [components](<https://devfeed.tech/tags/components.md>), [documentation](<https://devfeed.tech/tags/documentation.md>), [elements](<https://devfeed.tech/tags/elements.md>), [markdown](<https://devfeed.tech/tags/markdown.md>), [mdx](<https://devfeed.tech/tags/mdx.md>), [render](<https://devfeed.tech/tags/render.md>)

### AI overview

This release article explains Ballad, Doctave's Markdown-aware component system introduced in Doctave 2.0. It describes embedding UI and layout components in Markdown with an MDX-inspired syntax, combining components with Markdown, using expressions for user preferences, and creating custom components.

### Source excerpt

Doctave 2.0 is out, and the biggest new feature in this release was our new component system, which we're calling Ballad. In this post we want to talk about the path we took to get here, why we felt none of the existing solutions worked well for us, and what our component system enabled. Ballad brings interactive components like tabs to your Doctave docs Why do we need components? Ballad lets you intersperse UI components in between your Markdown content. While Markdown is fantastic for simple prose, most documentation projects inevitably need widgets like buttons, cards, and callouts (or admonitions), or more complex layouts to keep the content clear and engaging. This is what we're solving with Ballad. How it works In short, you can add HTML-like tags into your Markdown, which Doctave will render into various components. Let's look at a basic example: adding a Button component into your documentation: 1 2 3 Click below to read more. <Button href="/details">Read More</Button> This gets rendered like so: Sometimes a regular Markdown link just doesn't cut it Components Our components come in two flavors: UI components and layout components. The former are components like <Button> or <Card>: visual elements that you're adding to the page. Layout components instead (unsurprisingly) change the layout of your content. These are components like <Grid>, or <Flex> (a flexbox equivalent). Combining these components lets you build interesting UIs and structure your content however you want on the page, without having to write any custom CSS. Syntax You can use an MDX-inspired syntax to add components into your documentation: 1 2 3 4 5 6 7 8 9 10 11 12 ## Getting started Learn how to get started with our SDK. <Grid cols="2"> <Card> ... </Card> <Card> ... </Card> </Grid> In fact, the parser is an MDX parser. The component syntax rules are identical. These HTML-style components work with your Markdown content, and you can nest and combine components and Markdown arbitrarily. Exp

## My Advice to a Developer New to Accessibility

DevFeed: [My Advice to a Developer New to Accessibility](<https://devfeed.tech/articles/my-advice-to-a-developer-new-to-accessibility-38446.md>)

Original publisher: [Read original article](<https://eevis.codes/blog/2022-07-22/my-advice-to-a-developer-new-to-accessibility/>)

Author: Eevis Panula

Published: 2023-01-03T08:57:33.125000Z

Content type: tutorial

Language: en

Sources: [Eevis Blog](<https://devfeed.tech/sources/eevis-blog.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [HTML](<https://devfeed.tech/topics/html.md>), [keyboard](<https://devfeed.tech/topics/keyboard.md>), [markup](<https://devfeed.tech/topics/markup.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [accessible](<https://devfeed.tech/tags/accessible.md>), [advice](<https://devfeed.tech/tags/advice.md>), [developer](<https://devfeed.tech/tags/developer.md>), [development](<https://devfeed.tech/tags/development.md>), [element](<https://devfeed.tech/tags/element.md>), [elements](<https://devfeed.tech/tags/elements.md>), [focus](<https://devfeed.tech/tags/focus.md>), [html](<https://devfeed.tech/tags/html.md>), [html-elements](<https://devfeed.tech/tags/html-elements.md>), [input](<https://devfeed.tech/tags/input.md>), [interaction](<https://devfeed.tech/tags/interaction.md>), [interactive](<https://devfeed.tech/tags/interactive.md>), [keyboard](<https://devfeed.tech/tags/keyboard.md>), [learning](<https://devfeed.tech/tags/learning.md>), [markup](<https://devfeed.tech/tags/markup.md>)

### AI overview

This beginner-oriented accessibility article recommends focusing on progress rather than perfection and introduces semantic HTML, keyboard navigation, and listening to people with disabilities. It explains that semantic elements communicate meaning to browsers and developers and support appropriate interaction, while a div styled as a button may work only for mouse users and may not be focusable or keyboard-accessible.

### Source excerpt

Learning about accessibility for the first time can feel overwhelming. You start reading, and at some point, it hits you: There is so much to learn! And if you're like me and feel that it's your responsibility to make the things you create accessible, that might even make you feel anxious. And yes, there is a lot to learn regarding accessibility. But you don't need to know everything at once. As Meryl Evans reminds us in her tweet (and a blog post the tweet links to), it's about progress over perfection: https://twitter.com/merylkevans/status/1547635550466674692 So, here are some things I wish I had known when I first started learning accessibility. Heck, I wish I had known these things when I started learning web development! I'll share semantic HTML, keyboard navigation, and listening to people with disabilities. Learn Semantic HTML and Use It So, first thing: Learn semantic HTML. But what does it mean? Semantic HTML, or semantic markup, describes its meaning to the browser and developer in a human- and machine-readable way. So, with semantic elements, a human will know what the HTML element is about, and the browser knows what it should render and how it should behave when a user interacts with it. Here's an example: <button onClick={...}>I'm an honest button</button> That button uses a semantic button-element. When it does so, the browser knows what it should do when the user either clicks or activates it with a keyboard or other input device. Here's an example of a non-semantic "button": <div className="button" onClick={...}> I look like a button </div> So, this "button" made out of div looks like a button and even has the onClick-handler. So, wouldn't a human recognize it as a button? Well, yes and no. It depends on the human. You see, this "button" works only for mouse users. As div is not an interactive element by nature, it doesn't handle interaction the same way as, for example, a button-element. When using a semantic button-element, that onClick-event pro

## Get lines of text from an HTML element

DevFeed: [Get lines of text from an HTML element](<https://devfeed.tech/articles/get-lines-of-text-from-an-html-element-37274.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/get-lines-of-text-from-html-element/>)

Author: Stanko

Published: 2022-12-22T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [HTML](<https://devfeed.tech/topics/html.md>), [Document Object Model (DOM)](<https://devfeed.tech/topics/dom.md>), [Code](<https://devfeed.tech/topics/code.md>), [function](<https://devfeed.tech/topics/function.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [animation](<https://devfeed.tech/tags/animation.md>), [code](<https://devfeed.tech/tags/code.md>), [elements](<https://devfeed.tech/tags/elements.md>), [function](<https://devfeed.tech/tags/function.md>), [html](<https://devfeed.tech/tags/html.md>), [implementation](<https://devfeed.tech/tags/implementation.md>), [script](<https://devfeed.tech/tags/script.md>)

### AI overview

A JavaScript approach for finding text lines in an HTML element by wrapping each word in an inline span and comparing successive top offsets with getBoundingClientRect.

### Source excerpt

I was tasked with getting lines of text from an element many times. Usually it was to truncate the textBefore line-clamp was a thing or to animate the text line by line. It sounds easy, but I have encountered many edge cases in practice. After trying out multiple approaches, I finally have a solution I'm satisfied with, although it has some limitations. Let's start with a demo which displays one of my favorite Frank Zappa quotes: Information is not knowledge. Knowledge is not wisdom. Wisdom is not truth. Truth is not beauty. Beauty is not love. Love is not music. Music is THE BEST. To restart the animation, resize the element using a handle on the right. The same code is also available on CodePen for you to play with. Implementation # The idea is to go word by word and check if the word has fallen into the next line. To determine if a word has fallen, we need to compare the word's top offset with the previous word's top offset. When it changes, it means a new line has started. We can't get top offset from text, but we can get it from HTML elements. Therefore, we need to wrap each word in a separate <span> element first. Then we can loop through all the spans and use getBoundingClientRect to get the top offset value. When the value changes compared to the previous word, it means that the current word fell into a new line. function getTextLines(element) { // Get plain text from the element const text = element.innerText // Replace all whitespace (newlines, tabs and space) with a single space .replace(/\s+/gm, " ") // Remove leading and trailing whitespace .trim(); // Split text into words const words = text.split(" "); // Wrap all words in spans const spans = words.map((word) => { // Adding inline-block to make sure single word doesn't break into multiple lines // For example: short-term, full-scale return `<span style="display: inline-block;">${word}</span>`; }); // Replace initial element content with our spans. // It is a simple way to preserve the original styling

## SVG non-scaling circle and rectangle

DevFeed: [SVG non-scaling circle and rectangle](<https://devfeed.tech/articles/svg-non-scaling-circle-and-rectangle-37359.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/svg-non-scaling-circle-and-rectangle/>)

Author: Stanko

Published: 2022-05-02T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [SVG](<https://devfeed.tech/topics/svg.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [code](<https://devfeed.tech/tags/code.md>), [elements](<https://devfeed.tech/tags/elements.md>), [pixels](<https://devfeed.tech/tags/pixels.md>), [property](<https://devfeed.tech/tags/property.md>), [standard](<https://devfeed.tech/tags/standard.md>), [svg](<https://devfeed.tech/tags/svg.md>), [vector](<https://devfeed.tech/tags/vector.md>)

### AI overview

A tutorial explains how to create non-scaling SVG circles and rectangles using non-scaling strokes, line caps, and very short lines. It includes SVG code and discusses browser limitations and outlined shapes.

### Source excerpt

While making a simple SVG chart, I realized I would like to have non-scaling circles for data points. Unfortunately, SVG doesn't support it out of the box. If you are eager to see the result, jump to the examples below or play with the code on Codepen. Non-scaling stroke example # SVG does support non-scaling stroke width by setting vector-effect to non-scaling-stroke. When you set it, strokes will stay the same width no matter the scale of the SVG image. Try resizing your windowOn desktop, you should be able to resize each image on it's own by dragging the bottom right corner, and you'll see that the bottom line always stays 1px, while the upper one scales with the image: Stroke line cap # SVG also allows you to change how your line's ends look like, by using stroke-linecap property. Available options are butt, square and round, and on the image below they are presented in that order. As you can see square and round line caps are sticking out of our line. You probably figured it out, but that is exactly what we are going to use to create non-scaling circles and rectangles. Putting it all together # Up to this point we know that we can have a non-scaling stroke and that we can change its caps to be round and square. If we use a line with no length, sticking parts will join and create a perfect circle (or rectangle). SVG doesn't support lines with length of zero pixels, so we'll set the length to something negligible. The only thing left is to set a thick stroke width to create a shape. Circle # The code below will create a black circle with a radius of 50 and center at { x: 50, y: 50 }. <path d="M 50 50 l 0.0001 0" vectorEffect="non-scaling-stroke" strokeWidth="100" strokeLinecap="round" stroke="black" /> Let me quickly break the code down: d="M 50 50 l 0.0001 0" - this creates a super short line. The first two coordinates (M 50 50) are the line's start and our circle's center. The rest of the code (l 0.0001 0) draws a horizontal line 0.0001px longPlease be aware th

## Searching Craft CMS Matrix Blocks

DevFeed: [Searching Craft CMS Matrix Blocks](<https://devfeed.tech/articles/searching-craft-cms-matrix-blocks-31293.md>)

Original publisher: [Read original article](<https://nystudio107.com/blog/searching-craft-cms-matrix-blocks>)

Author: andrew@nystudio107.com (Andrew Welch)

Published: 2021-11-26T05:00:00Z

Content type: tutorial

Language: en

Sources: [nystudio107 | Articles on modern web development.](<https://devfeed.tech/sources/nystudio107-articles-on-modern-web-development.md>)

Topics: [Query (disambiguation)](<https://devfeed.tech/topics/query.md>), [Content Management System](<https://devfeed.tech/topics/cms.md>)

Tags: [based](<https://devfeed.tech/tags/based.md>), [behavior](<https://devfeed.tech/tags/behavior.md>), [blocks](<https://devfeed.tech/tags/blocks.md>), [cms](<https://devfeed.tech/tags/cms.md>), [contain](<https://devfeed.tech/tags/contain.md>), [contents](<https://devfeed.tech/tags/contents.md>), [craft](<https://devfeed.tech/tags/craft.md>), [custom](<https://devfeed.tech/tags/custom.md>), [easily](<https://devfeed.tech/tags/easily.md>), [elements](<https://devfeed.tech/tags/elements.md>), [entries](<https://devfeed.tech/tags/entries.md>), [insights](<https://devfeed.tech/tags/insights.md>), [little](<https://devfeed.tech/tags/little.md>), [matrix](<https://devfeed.tech/tags/matrix.md>), [php](<https://devfeed.tech/tags/php.md>), [query](<https://devfeed.tech/tags/query.md>), [twig](<https://devfeed.tech/tags/twig.md>)

### AI overview

A tutorial on querying Craft CMS Entries by the content of their Matrix blocks. It explains how to find matching Matrix blocks, collect their owner IDs, and use those IDs to filter an Element query, including a generalized approach usable in Twig.

### Source excerpt

With a little custom Behavior, we can easily query for Elements such as Entries in Craft CMS based on the contents of the Matrix Blocks they contain

## Effective Kotlin Item 55: Consider associating elements to a map

DevFeed: [Effective Kotlin Item 55: Consider associating elements to a map](<https://devfeed.tech/articles/effective-kotlin-item-55-consider-associating-elements-to-a-map-39271.md>)

Original publisher: [Read original article](<https://kt.academy/article/ek-associate>)

Published: 2021-09-27T00:00:00Z

Content type: tutorial

Language: en

Sources: [Kt. Academy](<https://devfeed.tech/sources/kt-academy.md>)

Topics: [Kotlin](<https://devfeed.tech/topics/kotlin.md>), [data](<https://devfeed.tech/topics/data.md>), [Code](<https://devfeed.tech/topics/code.md>), [identifier](<https://devfeed.tech/topics/identifier.md>), [implementation](<https://devfeed.tech/topics/implementation.md>), [class](<https://devfeed.tech/topics/class.md>)

Tags: [complexity](<https://devfeed.tech/tags/complexity.md>), [elements](<https://devfeed.tech/tags/elements.md>), [function](<https://devfeed.tech/tags/function.md>), [hashmap](<https://devfeed.tech/tags/hashmap.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [identifier](<https://devfeed.tech/tags/identifier.md>), [implementation](<https://devfeed.tech/tags/implementation.md>), [kotlin](<https://devfeed.tech/tags/kotlin.md>), [list](<https://devfeed.tech/tags/list.md>), [map](<https://devfeed.tech/tags/map.md>), [performance](<https://devfeed.tech/tags/performance.md>), [property](<https://devfeed.tech/tags/property.md>), [standard](<https://devfeed.tech/tags/standard.md>), [workshop-learning-programming](<https://devfeed.tech/tags/workshop-learning-programming.md>)

### AI overview

This Effective Kotlin article explains why key-based lookups are usually faster with maps than lists. It covers Kotlin hashmaps, converting iterables to maps with associate and associateBy, and the requirement that map keys be unique.

### Source excerpt

How associateBy is useful to improve the performance of finding elements.

## Speed up your Craft CMS Templates with Eager Loading

DevFeed: [Speed up your Craft CMS Templates with Eager Loading](<https://devfeed.tech/articles/speed-up-your-craft-cms-templates-with-eager-loading-31300.md>)

Original publisher: [Read original article](<https://nystudio107.com/blog/speed-up-your-craft-cms-templates-with-eager-loading>)

Author: andrew@nystudio107.com (Andrew Welch)

Published: 2017-09-30T04:00:00Z

Content type: tutorial

Language: en

Sources: [nystudio107 | Articles on modern web development.](<https://devfeed.tech/sources/nystudio107-articles-on-modern-web-development.md>)

Topics: [Content Management System](<https://devfeed.tech/topics/cms.md>), [Database](<https://devfeed.tech/topics/database.md>), [Code](<https://devfeed.tech/topics/code.md>), [Back end](<https://devfeed.tech/topics/backend.md>), [Front end](<https://devfeed.tech/topics/frontend.md>)

Tags: [allows](<https://devfeed.tech/tags/allows.md>), [backend](<https://devfeed.tech/tags/backend.md>), [cms](<https://devfeed.tech/tags/cms.md>), [craft](<https://devfeed.tech/tags/craft.md>), [database](<https://devfeed.tech/tags/database.md>), [eager-loading](<https://devfeed.tech/tags/eager-loading.md>), [efficiently](<https://devfeed.tech/tags/efficiently.md>), [elements](<https://devfeed.tech/tags/elements.md>), [entries](<https://devfeed.tech/tags/entries.md>), [fetching](<https://devfeed.tech/tags/fetching.md>), [frontend](<https://devfeed.tech/tags/frontend.md>), [insights](<https://devfeed.tech/tags/insights.md>), [loading](<https://devfeed.tech/tags/loading.md>), [speed](<https://devfeed.tech/tags/speed.md>), [templates](<https://devfeed.tech/tags/templates.md>)

### AI overview

This tutorial explains how Craft CMS stores content as related Elements and how lazy loading can create an n+1 database access pattern. It introduces eager loading as a way to fetch related entries and assets more efficiently in templates.

### Source excerpt

Eager-Loading Elements allows you to speed up your Craft CMS templates by fetching entries from the database more efficiently.

## A New Visual Identity for Droidcon NYC 2016 - touchlab

DevFeed: [A New Visual Identity for Droidcon NYC 2016 - touchlab](<https://devfeed.tech/articles/a-new-visual-identity-for-droidcon-nyc-2016-touchlab-38124.md>)

Original publisher: [Read original article](<https://touchlab.co/2016-5-a-new-visual-identity-for-droidcon-nyc-2016>)

Published: 2016-05-25T14:08:48Z

Content type: article

Language: en

Sources: [Touchlab | Enterprise Mobile Innovation & Development](<https://devfeed.tech/sources/touchlab-enterprise-mobile-innovation-development.md>)

Topics: [Icons](<https://devfeed.tech/topics/icons.md>), [format](<https://devfeed.tech/topics/format.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [community](<https://devfeed.tech/tags/community.md>), [design](<https://devfeed.tech/tags/design.md>), [droidcon](<https://devfeed.tech/tags/droidcon.md>), [elements](<https://devfeed.tech/tags/elements.md>), [icons](<https://devfeed.tech/tags/icons.md>), [layout](<https://devfeed.tech/tags/layout.md>), [modular](<https://devfeed.tech/tags/modular.md>)

### AI overview

The article explains the creation of a new visual identity for Droidcon NYC 2016. It describes a flexible, modular pictographic system built from primary glyphs representing conference themes and promotional purposes, with glyphs that can be combined for session topics and other uses.

### Source excerpt

Droidcon NYC is moving to a new venue with a somewhat new format, and a renewed focus on including design in the lineup. Read more.

## Hiding Offscreen Content in Ember.js

DevFeed: [Hiding Offscreen Content in Ember.js](<https://devfeed.tech/articles/hiding-offscreen-content-in-ember-js-40625.md>)

Original publisher: [Read original article](<https://eviltrout.com/blog/2014-01-04-hiding-offscreen-ember/>)

Published: 2014-01-04T00:00:00Z

Content type: tutorial

Language: en

Sources: [Robin Ward](<https://devfeed.tech/sources/robin-ward.md>)

Topics: [Ember](<https://devfeed.tech/topics/ember.md>), [browser](<https://devfeed.tech/topics/browser.md>), [Document Object Model (DOM)](<https://devfeed.tech/topics/dom.md>), [render](<https://devfeed.tech/topics/render.md>)

Tags: [browser](<https://devfeed.tech/tags/browser.md>), [elements](<https://devfeed.tech/tags/elements.md>), [ember](<https://devfeed.tech/tags/ember.md>), [js](<https://devfeed.tech/tags/js.md>), [memory](<https://devfeed.tech/tags/memory.md>), [render](<https://devfeed.tech/tags/render.md>)

### AI overview

This article explains how hiding offscreen content in Ember.js can reduce the browser's DOM workload and memory use. It describes Discourse's infinite-scrolling performance problem and a cloak technique that replaces offscreen views with simpler elements while preserving their height.

### Source excerpt

Everything you render in a browser, whether it's a blog post or a tweet or a video, has a performance cost. At the very least, you will be asking the browser to render a handful of tags and text elements that make up your user interface. That structure, a subtree in the browser's DOM, can be quite complicated and memory intensive. The more tags and elements you render, the slower the browser is going to perform, and the more memory it is going to use to do it. It follows that if you give the browser less work to do, it will do it faster.