Semantic-UI is probably the only Modern UI that does not offer Responsive Navigation Bar. &nbsp;<figure class="image"><img src="https://images.unsplash.com/photo-1584714268709-c3dd9c92b378?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1080&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE1NDAxMH0"><figcaption>Photo by <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/@thenewmalcolm?utm_source=DNX&amp;utm_medium=referral">Obi Onyeador</a> on <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/?utm_source=DNX&amp;utm_medium=referral">Unsplash</a></figcaption></figure><blockquote>Neither Semantic UI nor Semantic UI React offer a responsive navbar, however, it&nbsp;can be implemented easily. It can be more complicated, but you can create really flexible markup.</blockquote>The quote above is from Semantic-UI “Responsive” <a target="_blank" rel="noopener noreferrer" href="https://github.com/Semantic-Org/Semantic-UI-React/blob/master/docs/src/layouts/HomepageLayout.js">HomePageLayout</a> example code. It's way too complicated and hard to use in my opinion. I believe they can do better, but no sure why they came up with this cumbersome solution using “Menu”, “Sidebar”, and “Visibility” components along with the third party Media/Device detection package, like, “mobile-detect” in the version &lt; 1.0.0 (BTW, there was actually a bug in their old example, and I have a fixed version <a target="_blank" rel="noopener noreferrer" href="https://deniapps.com/playground/home">here</a>,) and then “@artsy/fresnel”. &nbsp;As I see they have two sets of layout, and then based on the Media/Device to render one of them either from Client Side (browser) or Server Side (SSR.)As I see, the responsive navigation bar could be achieved purely by CSS styles based on Media Queries. If we have only render one set of layout, then there is no need to worries about the SSR issue.I was about the switch to Bootstrap due to this limitation, but I do love everything else about Semantic UI, so I did the research online, and came up, which I think, &nbsp;a much better solution. You could see from this website, or from the<a target="_blank" rel="noopener noreferrer" href="https://deniapps.com/playground/dna-rn"> demo page</a>.If you are using Semantic-UI-React, then you may give it a try. I created the NPM package: <a target="_blank" rel="noopener noreferrer" href="https://www.npmjs.com/package/dna-responsive-nav">dna-responsive-nav</a> to help you integrate it easily.&nbsp;

Semantic-UI is probably the only Modern UI that does not offer Responsive Navigation Bar. I created the NPM package: dna-responsive-nav to fix this limitation. If you are using Semantic-UI-React, then you may give it a try. 

Responsive Navigation Bar For Semantic-UI

The blog system of DeniApps has a field named Tags. When writing a new post, I can either create a new one or choose the existing one. As more tags were added into the system, one day, I found that I could not find the tag 'React' which I am pretty sure is in the system. I looked into this issue and realized that the Tags dropdown options are populated when the page is rendered. Due to the default pagination size of FeathersJS, only 10 records are fetched. Since I have way more than 10 tags in the system, not all tags are available.&nbsp;<figure class="image"><img src="https://images.unsplash.com/photo-1608556984766-105e2dc59706?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwxNTQwMTB8MHwxfHNlYXJjaHw5fHxzZWxlY3Rpb258ZW58MHx8fHwxNjM0NTE4MzE4&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1080"><figcaption>Photo by <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/@claybanks?utm_source=DNX&amp;utm_medium=referral">Clay Banks</a> on <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/?utm_source=DNX&amp;utm_medium=referral">Unsplash</a></figcaption></figure>One simple solution is increasing the page size, but I would like to do something better. Semantic UI Dropdown supports a prop named <code>onSearchChange</code>, where we can create a handler to call the backend API to get the real-time options based on the search query.&nbsp;<h3>Semantic UI Dropdown</h3>Here is the fronted change I made in the Dropdown Component:<pre><code class="language-javascript" id="ZlZ_sZVtM">&lt;Dropdown
 placeholder={props.placeholder || "Please choose"}
 name={props.name}
 selection
 search
 options={props.options}
 multiple
 value={props.value ? props.value : []}
 allowAdditions
 onChange={handleDropdownChange}
 onSearchChange={handleSearchChange}
 onAddItem={handleAddition}
/&gt;;

const handleSearchChange = (event, search) =&gt; {
 if (props.handleSearchChange) {
 props.handleSearchChange(search.searchQuery);
 }
};</code></pre>As you see, the handleSearchChange will pass the searchQuery to the function in the parent component:<pre><code class="language-javascript" id="PnxHjXEum">handleSearchChange = (kw) =&gt; {
 this.debounceFun(kw);
};

debounceFun = _.debounce(async (kw) =&gt; {
 console.log(kw);
 const ret = await searchTags(kw);

 const matchedTags = ret.data;
 const tagsInputOptions = matchedTags.map((item) =&gt; ({
 value: item.slug,
 text: item.name,
 key: item._id
 }));
 const newAllOptions = {
 ...this.state.allOptions,
 tags: tagsInputOptions
 };

 this.setState({ allOptions: newAllOptions });
}, 500);</code></pre>Nothing special here, but I use lodash.debounce to prevent too many requests from killing the backend server.<blockquote>Creates a debounced function that delays invoking <code>func</code> until after <code>wait</code> milliseconds have elapsed since the last time the debounced function was invoked. The debounced function comes with a <code>cancel</code> method to cancel delayed <code>func</code> invocations and a <code>flush</code> method to immediately invoke them. Provide <code>options</code> to indicate whether <code>func</code> should be invoked on the leading and/or trailing edge of the <code>wait</code> timeout. The <code>func</code> is invoked with the last arguments provided to the debounced function. Subsequent calls to the debounced function return the result of the last <code>func</code> invocation.</blockquote>Learn more about <a target="_blank" rel="noopener noreferrer" href="https://lodash.com/docs/4.17.15#debounce">debounce</a>.The <code>searchTag</code> function is like below:<pre><code class="language-javascript" id="Qi-saLYwn">const searchTags = (kw) =&gt; {
 return agent({
 method: "get",
 url: "/tags/?$search=" + encodeURIComponent(kw),
 });
};</code></pre>Note agent is the wrapper of API calls, here is the <a target="_blank" rel="noopener noreferrer" href="https://github.com/deniapps/nextfeathers/blob/master/next/lib/agent.js">source code.</a> And the “<code>/tags/?$search</code>” is the API endpoint.<h3>FeathersJS Search API</h3>The DeniApps Blog system uses FeathersJS as a backend with MongoDB. To implement the search function, I use <a target="_blank" rel="noopener noreferrer" href="https://www.npmjs.com/package/feathers-mongodb-fuzzy-search">‘feather-mongodb-fuzzy-search’</a>, which supports both ‘full-text’ search and ‘filed pattern’ matching. For the tags search, I use the latter. - For example, when I type in ‘r’, I would expect any tags whose name starts with ‘r’, like ‘react’ returned. To implement this.<ul><li>add whitelist to enable some special params in src/servcies/tags/tags.service.js</li></ul><pre><code class="language-javascript" id="W2jMo556M">module.exports = function (app) {
 const options = {
 Model: createModel(app),
 paginate: app.get("paginate"),
 whitelist: ["$populate", "$text", "$search", "$regex"],
 };

 // Initialize our service with any options it requires
 app.use("/tags", new Tags(options, app));

 // Get our initialized service so that we can register hooks
 const service = app.service("tags");

 service.hooks(hooks);
};</code></pre><ul><li>add search hook in src/services/tags/tags.hook.js</li></ul><pre><code class="language-javascript" id="Lpgf7VQHZ">const search = require("feathers-mongodb-fuzzy-search");

module.exports = {
 before: {
 all: [],
 find: [search({ fields: ["name", "slug"] })],
 ...</code></pre><ul><li>mutate param.query in src/services/tags/tags.class.js</li></ul>I thought this should be handled by search hook, but I got this error because I mutated the param.query.<blockquote>error: MongoError: unknown top level operator: $regex. If you have a field name that starts with a '$' symbol, consider using $getField or $setField.</blockquote>And then, I found that the query after search hook is something like:<pre><code class="language-javascript" id="6lrRMbtGv"> query: { '$regex': /r/i },</code></pre>By look into MongoDB doc, the correct syntax should be:<pre><code class="language-javascript" id="f5Eo_zxIg">{ &lt;field&gt;: { $regex: /pattern/&lt;options&gt; } }</code></pre>So I have to update the query in tags.class.js as below:<pre><code class="language-javascript" id="Q9wy3YmU-">exports.Tags = class Tags extends Service {
 async find(params) {
 if (params.query.$regex) {
 params.query = {
 name: params.query,
 };
 }
 return super.find(params);
 }
};</code></pre>Note: <code>name</code> is the field of tags table, where I would like to search for.

In this article, I show you how I implemented the tags function using remote data. The frontend is done by the Semantic UI Dropdown component and the backend is implemented using FeathersJS with Mongodb. 

Semantic UI Dropdown with Remote Data

Semantic UI's table component is not quite mobile-friendly even with the stackable option. Actually, there is no standard way to make a stable responsive. A horizontal scrollable table is often being used, but if you like a stackable way, and with a table header as a label on each row, then in this article, I will show you how to do it using existing Semantic UI's table component with some small changes.<figure class="image"><img src="https://images.unsplash.com/photo-1513542789411-b6a5d4f31634?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwxNTQwMTB8MHwxfHNlYXJjaHw4fHxyZXNwb25zaXZlfGVufDB8fHx8MTY0OTAyMjIwNA&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1080"><figcaption>Photo by <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/@jessbaileydesigns?utm_source=DNX&amp;utm_medium=referral">Jess Bailey</a> on <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/?utm_source=DNX&amp;utm_medium=referral">Unsplash</a></figcaption></figure><blockquote>here is a <a target="_blank" rel="noopener noreferrer" href="https://deniapps.com/playground/responsive-table">demo</a></blockquote>First of all, let's disable the stackable, i.e. use “unstackable” instead., and then add “data-label” attribute to the table cell. which is corresponding to the table header. And the sample HTML code like below:<pre><code class="language-html" id="3xiOTigIt"> &lt;Table celled unstackable striped className="dnxTable"&gt;
 &lt;Table.Header&gt;
 &lt;Table.Row&gt;
 &lt;Table.HeaderCell&gt;Header1&lt;/Table.HeaderCell&gt;
 &lt;Table.HeaderCell&gt;Header2&lt;/Table.HeaderCell&gt;
 &lt;Table.HeaderCell&gt;Header3&lt;/Table.HeaderCell&gt;
 &lt;/Table.Row&gt;
 &lt;/Table.Header&gt;

 &lt;Table.Body&gt;
 &lt;Table.Row&gt;
 &lt;Table.Cell data-label="Header1"&gt;Cell&lt;/Table.Cell&gt;
 &lt;Table.Cell data-label="Header2"&gt;Cell&lt;/Table.Cell&gt;
 &lt;Table.Cell data-label="Header3"&gt;Cell&lt;/Table.Cell&gt;
 &lt;/Table.Row&gt;
 ...
 &lt;/Table.Body&gt;
 &lt;/Table&gt; </code></pre>Next, we need to add some CSS, which is applied to the small screen only.<pre><code class="language-css" id="nEz4fULEL">@media only screen and (max-width: 767px) {
 table.dnxTable {
 border: none !important;
 }
 
 table.dnxTable th,
 table.dnxTable td {
 padding: 1em 0.5em;
 position: relative;
 }

 table.dnxTable tr,
 table.dnxTable td,
 table.dnxTable tfoot {
 display: block !important;
 width: 100%;
 }

 table.denxTable tbody tr {
 border-top: 1px solid rgba(34, 36, 38, 0.1);
 }

 table.denxTable tfoot tr {
 border: none !important;
 }

 table.dnxTable td {
 border-top: none !important;
 border-left: none !important;
 }
 
 table.dnxTable tbody tr {
 padding: 0.25em 0;
 border: 1px solid rgba(34, 36, 38, 0.2);
 }

 table.dnxTable tbody tr:not(:last-child) {
 margin-bottom: 0.25em;
 }

 /** important1: hide theader **/
 table.dnxTable thead {
 display: none !important;
 }

 table.dnxTable tbody td {
 padding: 0.3em 0.5em 0.3em 7.5em !important;
 }

 .dnxTable td:not(:last-child) {
 border-bottom: 1px solid rgba(34, 36, 38, 0.1);
 }

 /** important2: use data-label attribute as a table header **/
 table.dnxTable tbody td:before {
 content: attr(data-label);
 left: 0.5em;
 position: absolute;
 top: 0.15em;
 font-weight: bold;
 text-overflow: ellipsis;
 white-space: nowrap;
 width: 6em;
 overflow: hidden;
 }
}</code></pre>As the comments in the CSS code able, there are two important things:<ol><li>Hide the regular table header, because the table cells are stacked, and we show the corresponding table header at the beginning of the cell content.&nbsp;</li><li>Use the <code>data-label </code>attribute as the content of <code>td:before</code>.&nbsp;</li></ol><blockquote>td.before has “absolute” position, so it does not auto-wrap. In the case, the header is very long, I use &nbsp;ellipsis to hide the overflow part. And the width: 6em need to be matched to the padding left of &lt;td&gt;, which is 7.5em. so there are 1.5em padding between label and cell content.</blockquote>Other CSS definitions could be customized especially those paddings.Here is the <a target="_blank" rel="noopener noreferrer" href="https://deniapps.com/playground/responsive-table">demo</a>

Semantic UI's table component is not quite mobile-friendly even with the stackable option. Actually, there is no standard way to make a stable responsive. A horizontal scrollable table is often being used, but if you like a stackable way, and with a table header as a label on each row, then in this article, I will show you how to do it using existing Semantic UI's table component with some small changes.

Responsive Semantic UI Table

Have you ever encountered an issue where bullet points in your Semantic UI list occasionally display as strange characters like "â€¢" instead of the expected "•"? This can be a frustrating problem, but fear not – there's a solution.<figure class="image"><img src="https://images.unsplash.com/photo-1523895665936-7bfe172b757d?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wxNTQwMTB8MHwxfHNlYXJjaHw3fHxmdW5reXxlbnwwfHx8fDE3MDQ3NDc2MTd8MA&amp;ixlib=rb-4.0.3&amp;q=80&amp;w=1080"><figcaption>Photo by <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/@steve_j?utm_source=DNX&amp;utm_medium=referral">Steve Johnson</a> on <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/?utm_source=DNX&amp;utm_medium=referral">Unsplash</a></figcaption></figure><h2>Identifying the Issue</h2>The root cause of this problem often lies in encoding inconsistencies. Despite having the <code>&lt;meta charset="utf-8"&gt;</code> tag in your HTML document, intermittent display issues can occur due to various factors such as browser caching, server-side configurations, or network disruptions.<h2>The Quick Fix</h2>To ensure a consistent display of bullet points, we can take a straightforward approach by explicitly setting the content using the Unicode character '•'. Add the following CSS rule to your stylesheet:<pre><code class="language-css">.ui.bulleted.list .list &gt; .item:before,
.ui.bulleted.list &gt; .item:before,
ul.ui.list li:before {
 content: "\2022" !important;
}</code></pre>This rule tells the browser to always display a bullet point as '•', overriding any potential encoding issues.<h2>Best Practices</h2>While the quick fix provides a reliable solution, it's essential to address the root cause of encoding issues. Here are some best practices to ensure a robust and consistent web application:Browser Cache: Clear your browser cache to rule out caching issues.Server Caching: Temporarily disable server-side caching to identify potential conflicts.Network Stability: Ensure a stable network connection to prevent disruptions in resource loading.Font Loading: Verify that custom fonts are loaded correctly and promptly.JavaScript Interference: Check for JavaScript errors and ensure that dynamic content manipulation doesn't interfere with rendering.Browser Compatibility: Test your application across different browsers for consistent behavior.Character Encoding: Confirm that all files and server responses consistently use UTF-8 encoding.<h2>Conclusion</h2>By explicitly setting the bullet point character using Unicode, you can mitigate intermittent display issues in Semantic UI lists. While this serves as a quick and effective fix, taking the time to investigate and address the root cause will contribute to a more robust and reliable web application.Remember to keep your development environment up to date and follow best practices to ensure a smooth user experience.Happy coding!

Have you ever encountered an issue where bullet points in your Semantic UI list occasionally display as strange characters like "â€¢" instead of the expected "•"? This can be a frustrating problem, but fear not – there's a solution.

Resolving Intermittent Bullet Point Display Issues in Semantic UI

Are you experiencing memory issues or performance bottlenecks in your React application, particularly when dealing with a multitude of Popup components from Semantic UI? Fear not! Lazy loading can come to your rescue. In this post, we'll explore how lazy loading can alleviate memory concerns and streamline the user experience, especially with memory-intensive components like Popups.<figure class="image"><img src="https://images.unsplash.com/photo-1431608660976-4fe5bcc2112c?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wxNTQwMTB8MHwxfHNlYXJjaHwxMHx8b3ZlcmZsb3d8ZW58MHx8fHwxNzA1NTgzMzE0fDA&amp;ixlib=rb-4.0.3&amp;q=80&amp;w=1080"><figcaption>Photo by <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/@glennoble?utm_source=DNX&amp;utm_medium=referral">Glen Noble</a> on <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/?utm_source=DNX&amp;utm_medium=referral">Unsplash</a></figcaption></figure><h3>Update (1/18/2024)</h3>I changed the solution to use a <a target="_blank" rel="noopener noreferrer" href="https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading">dynamic component</a> since my project is using Next.JS. &nbsp;The main reason is that:<blockquote>When you use dynamic imports with React.lazy and Suspense, the code within the dynamically imported component may still be executed during the initial server-side rendering. This is because the server needs to render the complete React tree, including the dynamically imported components, to generate the initial HTML that is sent to the client.So, even though the actual JavaScript for the dynamically imported component is not loaded on the server side, the component is still executed during server-side rendering.&nbsp;</blockquote><h3>The Memory Woes</h3>In a real-world scenario, loading numerous Popups on a page, particularly when using Semantic UI, can lead to occasional failures with errors like:<pre><code class="language-plaintext" id="f10oCLtYw">2024-01-16T23:43:28: RangeError: Map maximum size exceeded
2024-01-16T23:43:28: at Map.set (&lt;anonymous&gt;)
2024-01-16T23:43:28: at MapCache.mapCacheSet [as set] (…/next/node_modules/lodash/_mapCacheSet.js:17:8)
2024-01-16T23:43:28: at memoized (…/next/node_modules/lodash/memoize.js:63:28)
2024-01-16T23:43:28: at Popup.render (…/next/node_modules/semantic-ui-react/dist/commonjs/modules/Popup/Popup.js:328:62)</code></pre>After a thorough investigation, it was discovered that Popup uses lodash.memoize to maintain the same reference between renders. As what they commented at https://github.com/Semantic-Org/Semantic-UI-React/blob/ef8684ca969f30a2cb6d87c37fd09ac84ef05267/src/modules/Popup/lib/createReferenceProxy.js<pre><code class="language-javascript" id="Mnw5JbMj1">/** 
 * Popper.js does not support ref objects from `createRef()` as referenceElement.
 * If we pass directly `ref`, `ref.current` will be `null` at the render process.
 * We use memoize to keep the same reference between renders.
 * 
 * @see https://popper.js.org/popper-documentation.html#referenceObject
 */
const createReferenceProxy = _.memoize(
 (reference) =&gt; new ReferenceProxy(isRefObject(reference) ? reference : { current: reference }),
);
</code></pre>This raised concerns: Does it mean that if we call &lt;Popup&gt; millions of times, it will eventually exceed the size in lodash.memoize?Here are answers found by Bard AI:<blockquote> Yes, theoretically, calling Popup millions of times could eventually exceed the default size limits within Lodash's memoize cache.&nbsp;However, several factors mitigate this risk:<ul><li>Unique References: The cache keys are based on distinct <code>reference</code> objects, so only unique references will be stored.</li><li>Garbage Collection: JavaScript's garbage collection can reclaim memory from cached values that are no longer referenced.</li><li>Default Size: While Lodash's default cache size is not specified, it's typically large enough for most use cases.</li></ul></blockquote><h3>Memoization and Memory Growth:</h3>Memoization is a performance optimization strategy that caches results of function calls, preventing redundant computations. While beneficial, it can contribute to memory growth if not managed carefully. In the context of Popups, memoization might lead to cache expansion as more instances are created and used.<h3>Lazy Loading to the Rescue:</h3>Lazy loading offers a compelling solution by deferring the loading of components until they're truly needed. Here's how you can implement it for Popups:<ol><li>Import <code>React.lazy</code> and <code>Suspense</code> from React.</li><li>Create a lazy component for your Popup:</li><li>Render the lazy component conditionally, using Suspense for a loading indicator:</li></ol><pre><code class="language-plaintext" id="y4zIRMJxv">const LazyPopup = lazy(() =&gt; import('./ABStanddardPopup'));

&lt;Suspense fallback={&lt;Loader active inline /&gt;}&gt;
 &lt;LazyPopup ... /&gt;
&lt;/Suspense&gt;</code></pre>Benefits of Lazy Loading Popups:<ul><li>Reduced Initial Page Load: Popups are only loaded when triggered, improving initial load time and perceived performance.</li><li>Optimized Memory Usage: Popups and their associated memoization caches reside on the client side, reducing server-side load and optimizing memory usage.</li><li>Enhanced User Experience: Delayed loading of Popups prevents unnecessary resource consumption and potential UI freezes, leading to a smoother user experience.</li></ul>Conclusion:Lazy loading is a valuable tool for optimizing React applications, particularly when dealing with memory-intensive components like Popups. By embracing lazy loading, you can achieve faster initial load times, enhanced performance, and a more seamless user experience. Embrace lazy loading and watch your Popups soar without memory constraints!

Are you experiencing memory issues or performance bottlenecks in your React application, particularly when dealing with a multitude of Popup components from Semantic UI? Fear not!  Dynamic component can come to your rescue. In this post, we'll explore how lazy loading can alleviate memory concerns and streamline the user experience, especially with memory-intensive components like Popups.

All Posts In Semantic-ui-react