1. CSS Subgrid: Nested Grids, Unleashed

Remember when aligning nested grid items was a pain? CSS Subgrid is here to save the day. It allows child elements to align with the parent grid, creating more complex and flexible layouts.

.parent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.child-grid {
  display: grid;
  grid-template-columns: subgrid;
}

With this setup, your child grid items will align perfectly with the parent grid columns. No more manual calculations or nested grid headaches!

2. CSS Scroll Snap: Smooth Scrolling, Simplified

Want to create that slick, app-like scrolling experience? CSS Scroll Snap has got you covered. It’s perfect for image galleries, paginated content, or any situation where you want controlled, smooth scrolling.

.container {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
}

.item {
  scroll-snap-align: start;
}

Just like that, you’ve got a smooth-scrolling container. Your users will thank you!

3. CSS Backdrop Filter: Blurring the Lines

Ever wanted to apply cool effects to the area behind an element? CSS Backdrop Filter lets you do just that. Blur, color shift, or add other graphical effects to create stunning visual designs.

.overlay {
  backdrop-filter: blur(10px) brightness(80%);
}

This simple line can transform a plain overlay into a captivating visual element. The possibilities are endless!

4. CSS Custom Properties: Variables Get a Makeover

While not brand new, CSS Custom Properties (also known as CSS Variables) have gained wide support and are a game-changer for creating dynamic, reusable styles.

:root {
  --main-color: #3498db;
}

.button {
  background-color: var(--main-color);
}

With this setup, changing your site’s color scheme becomes a breeze. One change at the root, and it propagates throughout your entire site!

5. CSS @property: Taking Control of Custom Properties

Want more control over your custom properties? The @property rule lets you define the type, inheritance, and initial value of your CSS custom properties.

@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

This level of control opens up new possibilities for animations and dynamic styling that were previously difficult or impossible.

6. CSS Container Queries: Responsive Design 2.0

Last but certainly not least, we have CSS Container Queries. This feature is set to revolutionize responsive design by allowing you to style elements based on the size of a containing element, not just the viewport.

.container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

This approach allows for truly modular design, where components can adapt to their container regardless of where they’re placed in the layout.

Wrapping Up

These modern CSS features are just the tip of the iceberg. They represent a shift towards more powerful, flexible, and intuitive web design. By incorporating these techniques into your workflow, you’ll be able to create more dynamic, responsive, and visually appealing websites.

Remember, the key to mastering these features is practice. So go ahead, experiment with them in your next project. Your future self (and your users) will thank you!

Keep coding, keep learning, and keep pushing the boundaries of what’s possible with CSS. The future of web design is looking brighter than ever!

The post Modern CSS Features Every Front-End Dev Should Know appeared first on Michael Soriano.

While we’re all familiar with the SEO benefits of a well-structured URL, this article focuses on something different: the user experience. A thoughtfully designed URL structure can provide users with a sense of cohesiveness, demonstrating that your application is well-organized and carefully considered.

And here’s the kicker: even if SEO isn’t a priority for your web application, you’re not off the hook. Good URL design is for everyone, because it directly impacts how users interact with and perceive your site.

As Richard Branson aptly put it, “When making experiences, attention to detail matters.”

Anatomy of a URL

Before we dive into best practices, let’s break down the components of a URL:

While the “https://” protocol is pretty much a given these days, every other part of the URL deserves your attention. Even if you only have control over the path and beyond, understanding the entire structure will help you make better design decisions.

Don’t forget about the optional elements:

Towards the end, you might see a question mark (?) or a hash (#) and some characters after it. We’ll talk about these as well.

But first, lets look at the Golden Rules:

The Golden Rules of UX-Friendly URLs

When crafting URLs, keep these three cardinal rules in mind:

1. Brevity is key: Shorter URLs are easier to remember, share, and type.
2. Readability matters: If a human can’t easily understand your URL, it’s time to rethink it.
3. Make it meaningful: Each element should convey purpose and context.

These rules aren’t set in stone, but they provide a solid foundation for creating user-friendly URLs.

Let’s explore how to apply them.

Mastering the Domain Game

Your domain is your digital real estate – make it count. For our examples, we’ll use the fictional company “Acme”:

Other options:

• acme.net
• acme.io
• acme.app

Notice how these domains are short, readable, and meaningful. With the proliferation of top-level domains, you have more flexibility than ever to create a memorable web address. In addition, with the wider array of available TLD’s (the .com or .net part of the domain) – you can make use of this as part of how you structure your organization. For example, “.com” will be for your public website, “.app” will be the “application” side. Otherwise, we can use subdomains:

The Subdomain Dilemma

While subdomains can break the brevity rule, they’re almost always necessary. Subdomains are also good since you only maintain one main domain. Still, use them judiciously for distinct sections of your site.

Remember: one subdomain level is usually sufficient. Anything deeper risks confusion and violates our first two rules.

In addition, having too many “.” (dots) is just annoying – agree?

SaaS URL Strategies

For SaaS products, consider offering “vanity” URLs that combine your main domain with a subdomain:

Good examples:

• acme.workday.com
• acme.salesforce.com

Avoid confusing structures like:

• na111.salesforce.com
• emea.online.salesforce.com

The goal is to create URLs that users can easily type and understand at a glance.

Perfecting the Path

The path is where you have the most control over your URL structure. Here are some best practices to keep in mind:

1. Use hyphens as separators: /user-profile is more readable than /user_profile or /userProfile.
2. Create logical hierarchies: /products/electronics/smartphones tells a clear story.
3. Stick to lowercase: /blog/latest-posts is less error-prone than /Blog/Latest-Posts.
4. Eliminate unnecessary words: /about is cleaner than /about-us.
5. Use nouns for resources: /users/123 is more RESTful than /get-user/123.

Slash, Hash, or Query: Choosing Your Weapon

Each URL component has its purpose:

• Slashes (/): Perfect for hierarchical structure and main navigation.
• Hashes (#): Ideal for anchors within a page or client-side routing in SPAs.
• Query parameters (?): Best for optional or variable parameters.

Choose wisely based on your application’s architecture and the nature of the information you’re conveying.

Navigating the Browser Landscape

Good URL design supports intuitive browser navigation. Users should be able to use back and forward buttons effectively and understand their location within your site’s hierarchy just by glancing at the URL.

For Single Page Applications (SPAs), this means implementing proper routing and history management. Tools like React Router or Vue Router can help maintain a navigable history stack, even with dynamically loaded content.

The Art of Bookmarkability

One often overlooked aspect of URL design is bookmarkability. Users should be able to bookmark any page on your site and return to the exact same state later. This means:

1. Avoiding session-specific information in URLs
2. Using proper routing in SPAs to capture the application state
3. Ensuring dynamically loaded content has a corresponding URL state

Conclusion: Small Details, Big Impact

While it’s easy to overlook URLs in the grand scheme of UX design, they play a crucial role in creating a cohesive, intuitive, and user-friendly web experience. By applying these principles and paying attention to the details of your URL structure, you’ll create a stronger, more navigable, and more professional web presence.

Remember, your URL is often the first point of interaction between your user and your application – make it count! Your users may not consciously notice good URL design, but they’ll certainly appreciate the improved usability it brings. In the world of UX, sometimes the smallest details make the biggest difference.

The post The Hidden UX: Mastering URL Design for Better User Experience appeared first on Michael Soriano.

Today it’s one of those articles. We’re going to look at a few super useful JavaScript features that can make your coding life (and mine) a whole lot easier. Whether you’re just starting out or you’ve been coding for a while, these tools are worth adding to your toolkit.

Let’s dive in!

1. Object.hasOwn(): A Safer Way to Check for Properties

Have you ever needed to check if an object has a specific property? Maybe you’ve used the in operator or Object.prototype.hasOwnProperty() before. Well, Object.hasOwn() is here to make that task simpler and safer.

How it works:

Object.hasOwn(object, propertyName)

You pass in the object you want to check and the name of the property you’re looking for. It returns true if the object has that property as its own (not inherited), and false otherwise.

Why it’s cool:

Unlike Object.prototype.hasOwnProperty(), Object.hasOwn() works even if the object doesn’t inherit from Object.prototype or if it has its own hasOwnProperty method. It’s like a superhero version of hasOwnProperty!

Before Object.hasOwn():

const person = { name: "Alice" };

// Old way (potentially unsafe)
if (person.hasOwnProperty("name")) {
  console.log("Person has a name");
}

// Safer old way
if (Object.prototype.hasOwnProperty.call(person, "name")) {
  console.log("Person has a name");
}

With Object.hasOwn():

const person = { name: "Alice" };

if (Object.hasOwn(person, "name")) {
  console.log("Person has a name");
}

Much cleaner, right?

2. String.replaceAll(): Find and Replace Made Easy

This one is a game changer. I’m sure you’ve run into the old school replace – where it only does the first occurrence. I’m sure you’ll always almost need to replace ALL occurrences right? No more messing with regular expressions or some clever looping. Now, it’s as easy as pie!

How it works:

string.replaceAll(searchValue, replaceValue)

You provide the substring you want to replace and what you want to replace it with. It returns a new string with all matches replaced.

Why it’s awesome:

It’s straightforward and doesn’t require you to mess with regular expressions for simple replacements. Plus, it replaces ALL occurrences, not just the first one like replace() does.

Before String.replaceAll():

const sentence = "The quick brown fox jumps over the lazy dog. The fox is quick!";

// Using regular expression
const newSentence = sentence.replace(/fox/g, "cat");

// Or using split and join
const newSentence2 = sentence.split("fox").join("cat");

With String.replaceAll():

const sentence = "The quick brown fox jumps over the lazy dog. The fox is quick!";
const newSentence = sentence.replaceAll("fox", "cat");

So much easier to read and understand!

3. structuredClone(): Deep Cloning Made Simple

Another good one that will blow your mind. Let’s talk about structuredClone(). If you’ve ever tried to create a deep copy of an object in JavaScript, you know it can be tricky. This function makes it a breeze!

How it works:

const clone = structuredClone(original)

You pass in the object you want to clone, and it returns a deep copy of that object.

Why it’s fantastic:

It can handle circular references, and it works with a wide variety of built-in types (like Date, Map, Set, and more). It’s also typically faster than other deep cloning methods.

Before structuredClone():

Can you say “yuck”?

const original = { 
  name: "Alice", 
  pets: ["dog", "cat"],
  details: { age: 30 }
};

// Using JSON (loses some data types)
const jsonClone = JSON.parse(JSON.stringify(original));

// Or a custom recursive function (complex and error-prone)
function deepClone(obj) {
  if (typeof obj !== "object" || obj === null) return obj;
  const newObject = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    newObject[key] = deepClone(obj[key]);
  }
  return newObject;
}
const customClone = deepClone(original);

With structuredClone():

const original = { 
  name: "Alice", 
  pets: ["dog", "cat"],
  details: { age: 30 }
};

const clone = structuredClone(original);

It’s like magic, isn’t it?

4. Array.at(): Flexible Array Index Access

Last one: ever wanted to access array elements from the end without knowing the array’s length? I’m sure you’ve done this hundreds of times. Well with Array.at() – your development life is going to be a tad better.

How it works:

array.at(index)

You provide an index, which can be positive or negative. Positive indices work like normal array access, while negative indices count from the end of the array.

Why it’s great:

It provides a clean way to access elements relative to the end of an array without needing to know its length. It’s especially useful for accessing the last few elements of an array.

Before Array.at():

const fruits = ['apple', 'banana', 'cherry', 'date'];

// Getting the last element
const lastFruit = fruits[fruits.length - 1];

// Getting the second to last element
const secondToLastFruit = fruits[fruits.length - 2];

With Array.at():

const fruits = ['apple', 'banana', 'cherry', 'date'];

// Getting the last element
const lastFruit = fruits.at(-1);

// Getting the second to last element
const secondToLastFruit = fruits.at(-2);

It’s more readable and less error-prone, especially when dealing with array lengths!

And there you have it! Super handy JavaScript features that can make your code cleaner, safer, and more efficient. Give them a try in your next project and see how they can level up your coding game.

Before you go, you might also find this one useful: Common JavaScript snippets for data manipulation

Happy coding!

The post Essential JavaScript Features You Probably Already Know – But Here It Is Anyway appeared first on Michael Soriano.

Back to Roots

PHP was my first real programming language. And Laravel is built with PHP. I’ve always heard of Laravel, but never used it. I’ve watched many videos about how good it is, installed a sample application – and was sold.

I want to learn more – so I signed up for Laracasts. If you’re a web developer, suffering from JS Fatigue, and want to learn Laravel – Laracasts.com is like striking gold.

Top-notch tutorials and lessons. I, for one have signed up on many premium bootcamps and tutorial websites. So far, Laracasts is the best I’ve seen. Let me explain.

Talented Instructors – Jeffrey Way

Jeffrey Way, the main instructor, has a unique gift for making complex topics easy to understand. His explanations are clear and straightforward, making even the most daunting subjects feel manageable. He has a way of teaching – that reminds me of how elementary school was – but for a modern, experienced developer.

Plus, he presents everything in such an engaging way that you’re hooked from the first video. I especially like how he organizes his content – from inception to conception. Jeffrey Way is as good as it gets.

In addition, I’ve seen a couple of series on Inertia, React and APIs – and the instructors were also pretty good. Not the same style as Jeffrey – but good nonetheless.

Structured Learning Paths for Laravel and More

One of my favorite features is the structured learning paths. These pathways are like having a personal guide through the vast world of web development. They ensure you build a solid foundation before moving on to more advanced topics. This is incredibly helpful if you’re new to coding or trying to learn a new framework like Laravel.

There is also small bits of lessons called “Larabits“. These are quick how-to videos, that’s not necessarily tied to a learning path. Just fast paced watch and go type of tut.

Supportive Community

The community at Laracasts is fantastic. The forums are buzzing with activity and full of people ready to help out with any questions you might have about Laravel tutorials or other topics. It’s great to be part of a community where you can share knowledge and get support from fellow learners.

Plus, Jeffrey Way is actively involved, which adds a personal touch to the experience.

In addition, each video has a comments area – where you can post comments – and the community is also very responsive. This helps when you’re stuck in part of the video, commenting will get you “unstuck” real quick.

Diverse Range of Topics Beyond Laravel

While Laracasts is famous for its Laravel tutorials, it doesn’t stop there. The site offers in-depth tutorials on JavaScript, Vue, React, testing, and general web development practices. As mentioned above – the instructors and the way they teach the course is paramount. So the topics can vary – and you get the same high quality tutorial – which is a good deal.

So whether you’re looking to dive deep into a specific framework or broaden your overall skill set, Laracasts has you covered. I was even surprised to see GraphQL, CSS and Webpack in there – its not just backend stuff!

Final Thoughts

Laracasts.com is a must-have resource for anyone serious about web development, especially if you want to master Laravel tutorials. Its combination of excellent instructors that produce high-quality content. The strong community that you become part of – is truly indispensable. You get to learn everything about Laravel, but also other skills as well. In addition, the library is constantly updated, with new paths, technologies and lessons.

Whether you’re aiming to become a Laravel expert, improve your JavaScript skills, or just become a better developer overall, Laracasts is an investment you won’t regret.

The post Laracasts.com: a gold mine of content for Web Developers appeared first on Michael Soriano.

In this guide, we’ll walk you through the process step by step, ensuring you seamlessly integrate your .fig file into your Figma workspace. So, grab your creativity and let’s dive in!

Step 1: Start Figma

Start by opening Figma. If you don’t have an account, sign up for one—it’s free! Create or Open Your Project: Once you’re in Figma, either start a new project or open an existing one where you want to import your .fig file.

Find the Import Option: Look for the “File” menu at the top-left corner of the screen.

Step 2: Select File

Choose “From your computer” from the modal pop up. This will trigger your machine’s file navigator and allow you to select your .fig file. The “From Jamboard” option is also useful – if your .fig file is shared via Google Drive.

Once you’ve selected it, click “Open”. Depending on the size of the file, you might have to wait a few moments. Figma can sometimes take a few seconds to process the file. Patience my friend.

Step 3: Start Editing

Once the import is done, you’ll see your .fig file in your project. It might be a new file or a new page/tab in an existing file. Now you’re ready to edit the file. You can now edit your imported .fig file in Figma, just like any other project.

Don’t forget: Figma saves your changes automatically, but you can always save a version manually if you like.

The post How to Import a .fig file for Editing in Figma appeared first on Michael Soriano.

In HTML, this is easily achieved by the “Details” element. But of course, our users cannot write HTML. Similarly, a default block already exists in WordPress called “details“. The problem with this one is that our users do not find it intuitive. Also, they want to limit the formatting of the contents for each item.

You see how each item is contained within a big block. A button will add a title/content pair to the list – along with a checkbox that allows for the section to be expanded or collapsed by default.

Register the Block

This is the “housekeeping” part of the codebase. There is a PHP part of this process – and it really depends if you’re putting this in a plugin or a theme. But main function is below:

register_block_type(
    'namepsace/my-blocks-accordion',  // Block name with namespace
    [
        'style' => 'accordion-style',  
        'editor_style' => 'accordion-edit-style', 
        'editor_script' => 'accordion-js'  
    ]
);
...

Also, there are other parts of this such as enqueuing the styles and scripts for your blocks – which I’m not going to cover here. We’re mostly focusing on the “client” or JS side of things.

To read more about registering blocks in WordPress – see the codex.

For the JavaScript, create a file called index.js and start with the registerBlockType() function. If you’re not familiar with how to build blocks for WP – this is a good start Anatomy of a Block | Block Editor Handbook | WordPress Developer Resources.

registerBlockType(
    'namespace/accordion', {
      title: __('Accordion'),  
      icon: 'list-view',
      category: 'my-blocks', 
      attributes : {
        items : { 
         type: 'array',
         default : []
     }
    ...
}

Pay extra attention to the “attributes” object. This is the main “context” of our application. Notice that we want an array called “items” inside attributes – this is where we’ll manage our data.

The “Edit” Component

So in Gutenberg Blocks, the two major components that we have to worry about is the “Edit” and “Save”. Edit is what you see during the editing of Posts or Pages. Let’s look at how to build this first – particularly the JSX section:

const { RichText } = wp.editor;  
const { __ } = wp.i18n;

...

title: __('Accordion'),  
icon: 'list-view',
category: 'my-blocks', 
attributes : {
   items : { 
     type: 'array',
     default : []
   }
},
edit ( {className, attributes, setAttributes} ) {

... 

return (
<div>
{attributes.items && attributes.items.length > 0 ? attributes.items.map((item,i) => {
return (
<div>
    <div className={`${className}-item-title-wrap`}>
    <RichText   
        allowedFormats={[]}   
        tagName="div"     
        placeholder="Enter Title"               
        className={ `${className}-item-title` }
        value={ item.title }
        disableLineBreaks={ true }
        onChange={ val => updateItemTitle(val,i)}
    />
    <label>
    <input type="checkbox" data-index={i}
        checked={item.expand} 
        onChange={e=>updateItemExpand(e)} />
        Expanded
    </label>
    </div>
    <RichText  
        placeholder="Enter Content"  
        allowedFormats={ ['core/bold','core/italic','core/link'] }    
        multiline="p"
        tagName="div"                    
        className={ `${className}-item-content` }
        value={item.content}
        onChange={ val => updateItemContent(val,i)}
    />
</div>
)
}) : null}
<button 
    className={ `${className}-add-btn` } 
    onClick={addEmptyItem}>Add Accordion Item</button>
</div>
);

} //END EDIT

The HTML above is the UI for our editors. Notice that we’re going through out “items” and outputting it for action. We’re using the built-in RichText component for our editable sections (title and content). RichText is awesome – find out more about it. We’re also including a checkbox called expanded – that will allow our users to show the item expanded or collapsed.

Adding Items

When first using the block – all you see is a button that says “Add Accordion Item“. Clicking this button will execute below:

const addEmptyItem = () => {
    const items = [...attributes.items, {
      title : '', 
      content : '', 
      expand : true
    }];
   setAttributes({items})
}

This will add an empty object to our Attributes Items array, allowing our users to be able to edit our RichText components.

Click and Change Handlers

If you look in our JSX, we’ve mapped our inputs to event handlers. Add the code below”

const updateItemExpand= (e) => {
    const items = attributes.items.slice();
    const index = e.target.attributes.getNamedItem('data-index').value;
    items[index].expand = e.target.checked;
    setAttributes({items})
}
const updateItemTitle = (title,i) => {
    const items = attributes.items.slice();
    items[i].title = title;
    setAttributes({items})
}
const updateItemContent = (content,i) => {
    const items = attributes.items.slice();
    items[i].content = content;
    setAttributes({items})
}

The function names are pretty self explanatory. All we’re doing is manipulating the data in our Attributes. Also notice the setAttributes() function we’re using in each function. This is a “setter” that is very similar to React’s useState setters.

With all that in place, our Accordion block is ready for editing:

Typing “/accordion” will insert our block – ready for editing.

The “Save” Component

This is simply JSX that outputs our HTML for the public users. The code for this is quite simple – we’re simply using “details” and “summary“. This automatically has the expand and collapse functionality out of the box.

save( { attributes } ) {
    return (
        <div>
        {attributes.items && attributes.items.length > 0 ? (
            attributes.items.map(item => {
                return (
                    <details open={item.expand}>
                    <summary>{item.title}</summary>
                    <div dangerouslySetInnerHTML={
                       {__html: item.content}
                    } /> 
                    </details>
                )
            })
        ) : null}
        </div>
        )
    } 
}

Notice the use of dangerouslySetInnerHTML – because we’re outputting HTML content from WordPress. If this can be done in other ways leave a comment below.

Styling the output with some CSS:

.wp-block-my-blocks-accordion {
    margin-bottom: 25px;
}

.wp-block-my-blocks-accordion details > summary {
    background:url('/images/arrow-down.png') no-repeat;
    background-size: 13px;
    background-position-x: right;
    background-position-y: 10px;
    font-weight: 500;
    border-bottom:1px solid #ebebeb;
    margin-bottom: 10px;
    padding-bottom: 6px;
    cursor:pointer;
}
.wp-block-my-blocks-accordion details[open] > summary {
    background:url('images/arrow-up.png') no-repeat;
    background-size: 13px;
    background-position-x: right;
    background-position-y: 10px;
} 
.wp-block-my-blocks-accordion details > summary:hover {
    opacity: 0.6;
}  
.wp-block-my-blocks-accordion details > summary > * {
    display: inline;
}

We’re simply overriding the default look of the details component – specifically the arrows. I prefer to see them in the right instead of left. Also, adding a subtle border to make it look better.

And with that in place – it should look like below when the post is saved:

There you have it. We’ve just made our own custom Gutenberg block. This was pretty fun to build – and learning about the Block API is quite straightforward. It’s very much like classic React – but simpler.

Be sure to leave your thoughts below.

The post How to create an Accordion Block using React and WordPress’ Block API appeared first on Michael Soriano.

FluentUI uses React under the hood, so the tutorial below is meant for React developers. A preview of how the search works is shown below.

Ready to code? Let’s begin.

Getting the items

So assuming you’re getting you list of items via fetch, you’re most likely going to have an “init”. In React, this is done using the useEffect hook – with an empty dependency array. We’re also setting a couple of getters and setters using state:

const [ links, setLinks ] = React.useState<LinkType[]>([]);
const [ allLinks, setAllLinks ]= React.useState<LinkType[]>([]);

useEffect(()=>{
   (async()=>{
       const items  = await fetch(...);            
       setLinks(items);
       setAllLinks(items);
     })()
 },[])

You’re probably wondering why we have two states “links” and “allLinks”. This is to store the “unfiltered” set of items (allLinks) on which we do a search on – while the results will be in “links”.

So this will load our items in our display when we first load our UI.

The Text input

Now let’s add a text input. You will realize that the HTML are all different – because they’re not regular HTML at all. Instead, they’re a bunch of wrappers designed by FluentUI in which we simply just have to learn what we can pass into it.

In our case, we’re passing an icon (a magnifying glass), a placeholder, some styles and an onChange event to the “TextField” component:

<TextField 
   iconProps={{ iconName: 'Search' }} 
   placeholder="Search for a link..." 
   onChange={doSearch} styles={getStyles}  />

I want to first focus on the getStyles function below. Notice that it just returns an object that contains CSS props as an array – for the nodes you want to target. Think of it as in regular HTML, when you design an input – you’d have to add a “label”, “fieldGroup”, “input” etc.

function getStyles(props: ITextFieldStyleProps): Partial<ITextFieldStyles> {
         return {
          fieldGroup: [
            { 
                marginTop : '15px',
                marginLeft : '8px',
                borderColor : '#c0c0c0',
                maxWidth: '224px',
            }
          ],
          subComponentStyles: {
             label: { ...labelstyles },
           },
        };
      }

You’ll be seeing a lot of this type of API throughout.

Let’s also add another state for the searchTerm:

const [ searchTerm, setSearchTerm ] = React.useState<string>('');

Add a function “doSearch” so we can tie it with our TextField’s onChange event. Every time we change it, it should update our state:

const doSearch = (e, val) : void => {
   setSearchTerm(val);   
}

Now let’s create another effect, that will filter our items:

useEffect(()=>{    
        if(searchTerm === ''){
            setItems(allLinks);
        }else{
            const filtered = allLinks.filter(link => {
                const title = link.Title.toLowerCase();
                return title.indexOf(searchTerm) !== -1;
              }).map(link => {
                return {
                  ...link, 
                  Highlighted : highlightTerm(searchTerm, link.Title)
              }})
            setItems(filtered); 
        }
 },[searchTerm])

One quick note is the dependency array – we have “searchTerm“. So this triggers every time our state changes. So if there is no term – we reset the items to “alltems”, otherwise – we do a “filter” on our items array.

The search algorithm is just a basic string match – which can be greatly improved. But that’s not the focus of this tutorial.

You’ll also notice a .map – where we add a “Highlighted” property. That comes next.

Highlighting the term

It’s always a nice touch to highlight the search term in the results. This is a little helper that is called to wrap the term in a “mark” tag – so we can style it.

export function highlightTerm(term : string, src : string) : string {               
    if(term && src){
      term = term.replace(/(\s+)/,"(<[^>]+>)*$1(<[^>]+>)*");
      const pattern = new RegExp(`(${term})`, "gi");
      src = src.replace(pattern, "<mark>$1</mark>");
      src = src.replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<\/mark>)/,"$1</mark>$2<mark>$4");
      return src;
    } 
    return src;
}

Now that all our elements are in place, its time for the display.

Displaying the results

This section should be really familiar – its just a map that returns some JSX:

{links.map(link => {
      return (
         <div dangerouslySetInnerHTML={{__html:item.Highlighted}}/>
      )
 })}       

Notice the use of dangerouslySetInnerHTML – that’s because we want our “mark” which is HTML to show.

This is as simple as it gets. As mentioned before – the actual search mechanism can be better. I also would like to see some “loading” mechanism – for instances that the data takes long to fetch. And of course – some error handling would be good.

Leave your thoughts below.

The post Let’s write a simple search component using React and FluentUI appeared first on Michael Soriano.

Nobody likes waiting for stuff to load. And no – loading spinners is not a solution.

Of course, you can cache the responses in the backend. But that means either you have to use some kind of storage in the server – such as a database This solution caches the responses in the client’s browser – using sessionStorage.

It is not unusual to see code like this:

useEffect(()=>{
    (async()=>{
       let data : FeedType = {}
       const resp = await fetch(`/get-feed/${id}`)
       data = await resp.json(); 
       setData(data)
    })();
},[])

Wouldn’t it be great if it doesn’t do the fetch to the backend at all?

Remember, this is only recommended if your application doesn’t require real time data. If you can afford to serve cached data (say 15 mins) – then this solution is for you.

First, let’s write the cache to sessionStorage.

useEffect(()=>{
    (async()=>{
       let data : FeedType = {};
       const resp = await fetch(`/get-feed/${id}`);
       data = await resp.json(); 
       
       const currentTimeStamp = Math.floor(Date.now() / 1000);
       data.cacheSet = currentTimeStamp;
       sessionStorage.setItem(`id-${id}`, JSON.stringify(data));


       setData(data)
    })();
},[])

Right after we get the data from the backend we write to sessionStorage with a unique key. This key is necessary for later retrieval. We’re also adding a timestamp on when we created the cache – this will come in handy for later.

Let’s create a function that gets the cache:

const getCache = (id : number) : {isCacheGood : boolean, data : FeedType} => {
    let isCacheGood = false;
    let data : { cacheSet ?: number}= {};
    const currentTimeStamp = Math.floor(Date.now() / 1000); 
    const threshold = 900; //15 minutes   
    const cacheStr = sessionStorage.getItem(`id-${id}`); 
  
    if(cacheStr){ 
        data = JSON.parse(cacheStr);
        if(data.cacheSet){
            const numSeconds = Math.abs(currentTimeStamp - data.cacheSet);
            if(numSeconds < threshold){
                isCacheGood = true;
            } 
        }
    }
    return {
        isCacheGood : isCacheGood,
        data : data
    }
}

As you can see, just a simple function that gets the sessionStorage with our unique key. It also converts the JSON string back to an object for consumption later. Also, the logic for checking if the cache is good is in here. It return true if its less than the threshold we set (in our case 15 minutes).

Now, let’s modify our code to not fetch when cache is found and good:

useEffect(()=>{
    (async()=>{
       let data : FeedType = {};

       const dataFromCache = getCache(id);
  
       if(dataFromCache.isCacheGood){
          data = dataFromCache.data
       }else{
          const resp = await fetch(`/get-feed/${id}`);
          data = await resp.json(); 
          const currentTimeStamp = Math.floor(Date.now() / 1000);
          data.cacheSet = currentTimeStamp;
          sessionStorage.setItem(`id-${id}`, JSON.stringify(data));
       }

       setData(data)
    })();
},[])

So now, we first check if cache is good and use it for our data. Otherwise, we do a fetch – and write to cache.

What about invalidation?

Good question. We don’t want to keep writing to cache and not clean up right? The good thing is, sessionStorage automatically gets cleared once the user closes the browser session. Also, remember the unique key that we set – well, that keeps getting overwritten – if its the same response.

Let me know your thoughts below.

The post Use sessionStorage for caching data from your backend API appeared first on Michael Soriano.

Disclaimer: This tutorial will not show how to make this component, instead we’ll go through how to hook it up to the backend. I’m also going to assume you know React and databases.

Ready to get started? Let’s go:

We’re using Mantine’s MultiSelect – which has a pretty consistent api – with other mutli selects out there. I also like Mantine’s accessibility, and its simplicity. We’re also using Prisma for our ORM – which makes it super easy to interact with our tables in the backend.

The Data / Tables

For this application, I have a main table called “Dish”. This is where we will connect our “Categories”. But for this work, we will need a “many to many” relation – so we will need a 3rd table – we’ll call it CategoriesOnDishes.

Below is the schema for tables.

model Dish {
  id          Int                   @id @default(autoincrement())
  title       String
  ...
  categories  CategoriesOnDishes[]
}

model Category {
  id          Int                  @id @default(autoincrement())
  name        String
  default     Boolean?
  dishes      CategoriesOnDishes[]
}

//THIS IS THE LOOKUP TABLE
model CategoriesOnDishes { 
  dish       Dish     @relation(fields: [dishId], references: [id], onDelete: Cascade)
  dishId     Int
  category   Category @relation(fields: [categoryId], references: [id])
  categoryId Int
  @@id([dishId, categoryId])
}

Notice our “lookup table” is simply the connecting table for both main tables. This way we can assign multiple ids to each other.

The MultiSelect Component

Looking at Mantine’s documentation, our component simply takes in an array of objects, with 2 properties: value and label:

We also have access which values the user selected – which is simply an array of strings. With this in mind, we can go ahead and build our app.

Get the categories

We’re using NextJS – so we can create API endpoints and interact with our database. We wouldn’t be able to achieve this with only client side code. With NextJS – we have the luxury of both, in one codebase – how nice is that.

In our endpoint, we simply check the method for “GET” and bring back the categories for selection in our component:

if(req.method === 'GET'){ //THIS IS FOR GETTING THE VALUES FOR THE SELECT
    
        let data  : Categories[] = [];
        data  = await prisma?.category.findMany() as Categories[];

            const uniqueValuesSet = new Set();
            
            //REMOVE DUPLICATE NAMES... 
            data = data.filter((item)=>{ 
                const isPresentInSet = uniqueValuesSet.has(item.name);  
                uniqueValuesSet.add(item.name);         
                return !isPresentInSet;
            })
        }
        return res.status(200).json({ categories : data  })
    }

Notice that we have a remove duplicates section – this is optional. In my application, there could be duplicates due to the categories are based on each user / dish.

The Component

Now in the front end, we add the component to our form. You will notice a lot of this code doesn’t show the entire thing. I have greatly trimmed it down – only to highlight the important parts.

function CategorySelect( props:any) {
    const [ catOptions, setCatOptions ] = useState<any>();

    useEffect(()=>{
        (async()=>{
            const resp = await fetch('/api/lookups');
            let { categories } = await resp.json(); 
           
            let parsedCats = categories.map((cat:any)=>{
               return {
                    value : cat.name,
                    label : cat.name
                }
            })
            setCatOptions(parsedCats);
        })()
    },[])

  return ( 
        catOptions ? 
        <MultiSelect
            mb="sm"
            label="Categories"
            data={catOptions}
            placeholder="Select or type categories"
            searchable
            creatable
            getCreateLabel={(query) => `+ Create ${query}`}
            onCreate={(query) => { 
                const item = { value: query, label: query };
                setCatOptions((current:any) => [...current, item]);
                return item;
            }}
            />
         : null 
  );
}
export default CategorySelect;

Above will set up our input to have data. As soon as you focus – you will see the list appear in the bottom. And as soon as you start typing – and what you typed is not in the list, a “Create XXX” appears in the bottom – all you have to do is select it.

How cool is that!

Inserting, Updating and Deleting Records

Now back to our API, we will add the logic that will allow us to insert, update and remove records. Remember, we only have an array of strings – so we are writing our logic based on that.

 try{
        const dataFromPost : string[]= req.body.data; 
        const dishId = req.body.id;
        
        //FIRST FIND CATIDS FROM ARRAY OF STRINGS 

        const foundData = await prisma?.category.findMany({
            where : {
               name : { in: dataFromPost }
            }
        }) as Categories[];

        const foundDataStr : string[] = [];
        let newEntry : string[] = [];
        let entryIds : number[] = []; 
        
        foundData?.map((item)=>{
            entryIds.push(item.id);
            foundDataStr.push(item.name);
        })
        
        //PUT NEW CATEGORIES TO BE INSERTED IN A TEMP ARRAY FOR NOW...
        newEntry = dataFromPost.filter((item)=>!foundDataStr.includes(item))
        
        // CHECK IF CAT ID && DISHID EXIST IN LOOKUP...

        const existingLookup = await prisma?.categoriesOnDishes.findMany({
            where : {
            dishId : dishId, 
            }
        })

        // ACTUAL CATS TO BE DELETED FROM LOOKUP
        let itemIdsToDelete : number[] = [];   
        
        // REMOVING CATS TO PREVENT DUPLICATE INSERT TO LOOKUP
        let itemIdsToRemove : number[] = [];  
        
        foundData?.forEach((item)=>{
            if(!dataFromPost.includes(item.name)){
            itemIdsToDelete.push(item.id)
            }
        }) 
        
        existingLookup?.forEach((item : any)=>{
            if(entryIds.includes(item[lookupItemIdKey])){
               itemIdsToRemove.push(item[lookupItemIdKey]);
            }else{
               itemIdsToDelete.push(item[lookupItemIdKey]);
            }
        })
        
        // REMOVE EXISTING LOOKUPS...     
        entryIds = entryIds.filter((id)=>{
            return !itemIdsToRemove.includes(id);
        })
        type newEntryType = {
           name:string,
           userId:number, 
           description?:string, 
           default:boolean}

        // INSERT NEW CATEGORIES, ADD IDS TO CATIDS...
        if(newEntry.length > 0){
            let newEntryObj : newEntryType[] = []; 
            newEntryObj = newEntry.map(item=>{
            let obj : newEntryType= {
                name:item,          
                default : false           
            }
                return obj
            })
            const itemsInserted = await prisma?.category.createMany({ 
                data: newEntryObj, 
            })
            
            if(itemsInserted){
                const itemsInsertedResult = await prisma?.category.findMany({
                where : {
                userId : curUser.id, 
                name : { in: newEntry },
                }
            })
            
            let itemsInsertedIds : number[] = [];
            itemsInsertedResult?.forEach((item : any)=>{
                itemsInsertedIds.push(item.id)
            })
            if(itemsInsertedIds){
                entryIds = entryIds.concat(itemsInsertedIds);
            }
            }   
        } //end if catsinserted...  
      
        
        //INSERT TO LOOKUP TABLE...
        const itemOnDishes = entryIds.map((item)=>{
            return {
            dishId : dishId, 
            [lookupItemIdKey] : item
            }
        })

        //DOES NOT RETURN THE IDS!!!!
        await prisma?.categoryOnDishes.createMany({ 
            data: itemOnDishes, 
        }) 
        
        //DELETE ITEMS FROM LOOKUP
        if(itemIdsToDelete.length > 0){
            await prisma?.categoryOnDishes.deleteMany({
               where: {
                 categoryId :{ in: itemIdsToDelete }, 
                 dishId : dishId
               },
            })
        }      
        return res.status(200).json({ success: true}) 

}catch(err){
    return res.status(500).json({ error: JSON.stringify(err)})  
}

A lot going on here. First we check if categories exist in our category table. If it does, let’s save the ids in a temp array. We are also saving the ones that are not in the table – these are the “new items” that we have to insert.

We’re also figuring out which ones are existing in the lookup table – which is not found in the submitted array of strings. These are the lookups we have to delete.

Finally, we are simply returning “success : true” for now. Ideally, you will return the ids of the records you’ve updated. But at the time of writing, one of Prisma’s methods – specifically createMany() doesn’t return the ids. For the sake of simplicity – we just return “true”.

Back to the Component

Okay, back to the front – let’s finish up our connect the dots. I’m only showing the necessary parts – that we need to add to our component. The comments below should show you how it works, and what its for.

//DONT FORGET THE STATE:
const [ selectedCats, setSelectedCats ] = useState([]);
const categoryChanged = (val:any) => {
        setSelectedCats(val);
    }
//THIS IS THE METHOD THAT CALLS OUR API...
const upsertMultiSelects = async (url:string, data:string[], id:number)=>{        
        const options = {
            method: 'POST',
            ...getHeaders(null), 
            body : JSON.stringify({data,id})
        }
        const resp = await fetch(url, options)
        const res = await resp.json();
    }

//ADD THIS TO THE FORM SUBMIT HANDLER:

upsertMultiSelects(`/api/lookups`,selectedCats,result.id);


//ADD THIS TO THE COMPONENT PROPS:
value={selectedCats} 
onChange={categoryChanged}

With all that in place, you can wire it up to your form’s submit function. This approach is a separate method to calling the updating of the lookup and category table. But you can of course – bunch it all up along with the rest of the fields on your form – into a single REST call.

Final Result

Now if all of that works, you should be able to save your changes. Remember, the front end will work the same as before – its the saving to the database – is what we went through.

Go ahead and save your form – and hit refresh. If all goes well, your data will be preserved – and you can continue with your day.

The post Code a multi-select input with Mantine, Prisma and NextJS appeared first on Michael Soriano.

Let me explain.

Most front end developers know, React is king at the moment. There are many things to love about React, but there are also many things that people don’t like. But why stick to React? While there are countless alternatives out there like Svelte, VueJS, SolidJS?

Well for me – its the ecosystem. There are thousands of components, design systems, plugins for React – that will make your development so much faster. A major feature is just an npm install away.

What’s one of the most important thing that is missing from Solid? It’s the meta framework. The ability to go “isomorphic” – combine server and client side in one codebase. The ability to write APIs, file based routing, caching – all the good stuff a full stack development environment has to offer.

A “NextJS” for Solid basically.

As you can see, these are basically what NextJS can do. The simple fact that you no longer need another server to put your server side logic in – is a big win. Also, having the “fine grained” reactivity is what makes SolidJS so attractive. Also, fixing the stuff we’re not particularly crazy about in React.

So what to build next?

I am thinking of re-doing my Shopping Cart code in SolidStart. If you think about it, an e-commerce website will always need to be “SEO” friendly. So you will need that HTML rendered by the server. I would also like to redo that in TypeScript.

I was also considering a Job listing website. With features like – applicants can upload a PDF resume and it automatically pre-fills the required fields. For the database, I’ve been working with Prisma + PostgreSQL and have fallen in love with it – so I think I’ll stick with that.

I just wish there was more SolidJS design systems out there. Something like a Mantine or Chakra for SolidJS. If you guys know of any, please leave a comment below.

The post Just in: SolidStart is in Beta – Now what to build? appeared first on Michael Soriano.