Forem: Karl Castillo

A Decade in Software: A career retrospective

Karl Castillo — Fri, 13 Jun 2025 20:24:48 +0000

TL;DR

Over the past decade, I’ve grown from a self-taught grade school coder in the Philippines to a Senior Software Engineer II in Vancouver. My journey hasn’t been perfect. It’s been filled with early career missteps, poor communication from leadership, a lack of mentorship, and the personal toll of a pandemic-era layoff. But through it all, I’ve found purpose in mentorship, connection, and continuous growth.

This write-up is my way of reflecting on the highs and lows, and of showing that no two career paths are alike -- and that’s okay. If nothing else, I hope it reminds someone out there that they’re not alone in the messiness of a tech career.

I've been a software engineer for over ten years now -- starting my career in 2013. During this time, I've experienced, the good, the bad, and the ugly of the industry.

Why am I writing this? I've been in the industry for a long time. I want to reflect on what happened during my first decade in the industry. I don't expect you to read the whole thing nor do I expect my experience to necessarily resonate with you; but I just wanted an outlet to show that not all career journeys are perfect.

My Background

Where it all started -- from HTML in grade school to BCIT graduate.

I started coding in grade four. I was fortunate that I went to a private school, Don Bosco Technical College (DBTC), in the Philippines where they also teach technical topics like electronics, drafting, woodwork, and information technology (IT). During this time, I learned HTML -- back when things had to be all caps and you only have tables or floats to handle your layout.

When my family moved to Vancouver five years later, I continued coding in my own time. By the time I graduated high school in 2009, I went to the British Columbia Institute of Technology (BCIT). There, I completed the Diploma of Computer Science Technology in 2011 and Bachelors of Technology in 2013 where I specialized in Network Security and Administration.

One summer, after my first year in BCIT, I got a job as a web developer for a local web studio. I learned a lot in this position but there was something missing. Little did I know that this missing thing would be a hindrance and a strength. We'll come back to that later.

Post Education

The struggle to land that first “real” job and learning what truly matters.

After completing my education, the difficult part of a young adult had come -- find your first real job. I landed a job shortly after for a not-for-profit organization partially funded by the government grants with the focus on hiring new graduates.

Again, I enjoyed this job and I learned a lot; but again, it's missing something.

In 2014, I moved to a startup. This was my first experience working in a corporate setting. This is also where I learned something important that molded me to who I am today.

Harsh Truth

An early wake-up call that reshaped how I view companies and loyalty.

After a year of working at my second job, I finally got a performance review. I wouldn't even say it's a performance review. It was from someone who wasn't technical and worked from an office in another province. As one does during a positive performance review, I asked for a raise. This was a mistake.

I remember this vividly. The founder didn't take it well that I, an underpaid junior, was asking for raises. They said I was lucky to be working. That experience shaped how I see companies going forward.

Gone is my default loyalty to the company. This doesn't mean I don't give one hundred percent, sometimes more. This moment didn’t break me, but it fundamentally changed how I saw my professional relationships. This experience, however, made me appreciate my coworkers more than I already do. I shifted from being loyal to the company by default to the people I work with.

Shortly after that eye opener, I left the company in 2015 and went to another startup? I don't want to say it's a startup but it's more of a passion project. This is where I grew and matured significantly by working independently without much guidance. I learned more of Django, Angular and React. I enjoyed my time here but that inkling of something missing still lingers.

Communication Please

Why direction and transparency matter more than you think.

By 2017 I'm off to my fourth job. I now have more notches on my belt. I was confident and I started to build more opinions for better or worse. In this job, I learned the importance of communication. Communication of plans for the future wasn't really there. When they were, it was few and far between. Tickets were being created and completed but it didn't feel like we had a destination. This made me feel uncertain if there was an end goal.

This lack of clarity and direction made this lingering thought more prevalent than before.

Lingering Thought

Discovering what was missing all along: mentorship and guidance.

This is when I started to realize what that missing thing was. Throughout the first half of my career, I've never had a mentor. I've never had a senior to teach me things, and help me improve -- I was missing guidance.

This lack of guidance early on in my career taught me to learn, and to adapt. It made me able to depend on myself and believe that I am capable of improving. Even so, I always appreciated having supportive colleagues -- I've always welcomed their feedback.

With this realization, I made it a mission that juniors don't have that experience if I can control it. In this fourth job, I helped junior engineers -- gave advice, offered thoughtful code reviews, etc. I started volunteering with Canada Learning Code (formerly Ladies Learning Code) as a mentor and an instructor. In 2019, I started working part-time in a bootcamp as a mentor where I got to help students with their homework and projects.

With this new drive to help people -- mostly juniors -- I gained skills! I learned how to teach. I learned how to inspire. Another side effect of mentoring is I got better at my job. Being able to explain things and walk through things, allowed me to solidify the fundamentals.

The Pandemic

A career uncertainty, a mental challenge, and navigating the unknown.

After staying at my fourth job for a couple years, I wanted something new. I wanted to experience working at a big company. For this, I joined a local Xbox gaming studio as a contractor. I loved the experience. I thoroughly enjoyed working with so many people and receiving merch was a nice perk as well.

Midway through this contract, the pandemic happened. The offices were closed and the new normal started. This was a blessing and a curse for me. I had concerns about how I would be able to find a position after my contract is complete. I couldn't renew the contract, and would need to wait three months to be eligible again.

After my contract, I was able to join a company late in 2020 where I had a difficult time mentally. It wasn't a good experience, and the pandemic, it didn't help. I barely lasted just over half a year. Eventually, they laid off the entire team I was a part of. Luckily, long before that happened, I had already started working at the company I'm with as of the writing of this.

Present Day

Finding purpose, building connections, and paying it forward.

As of 2021, I work as a Senior Software Engineer II for a company I'm happy being a part of. This is where I’ve achieved some of the things I’m proudest of.

Firstly, my loyalty to my coworkers -- new and old -- never waned. I was able to bring on a colleague before the big layoff. I'm happy to say, we're still working together to this day. I was also able to get a student from the bootcamp I part timed in to get a position here.

Another accomplishment I'm proud of is one of my mentees was eventually promoted to a Senior Engineer I. Even though she moved on to a different company, we're still good friends.

The Future

Looking ahead with hope, ambition, and a drive to keep growing.

As of right now, I don't know what the future holds for me. I definitely want to advance my career and meet more interesting people. Let's see what the next decade holds and I might have another retrospective for it.

I don't hold any grudges against companies or people; it's all business after all. I still appreciate having the opportunity to work with them.

Lessons Learned

Loyalty is earned, not automatic. Companies come and go. Invest in the people you work with, not just the logo on your paycheck.
Mentorship matters. Not having one early on left a gap I didn’t fully understand until years later. Now, I try to be the mentor I wish I had.
Communication isn’t optional. Poor direction, vague goals, and silence from leadership are red flags, not just annoyances.
Teaching makes you better. Explaining concepts to others forced me to revisit fundamentals and made me a stronger developer.
Your path won’t look like someone else’s. That’s okay. There’s no single definition of a successful career in tech.
It’s okay to outgrow places. You don’t need to stay somewhere just because you started there. Growth often means moving on.

I hope you enjoyed reading this writeup. If you want to connect or have a chat, feel free to hit me up on LinkedIn or Instagram.

Choosing A Design System/Component Library

Karl Castillo — Fri, 30 Sep 2022 16:45:21 +0000

In React, design systems and component libraries are common utilities one would use to standardize and simplify the implementation of their application. Different systems and libraries have different specialties, community and maturity.

Author's Note: This article will consist mostly of React-based modules but the criteria themselves works with any environment.

Design System vs Component Library

What are these two exactly? Simply put, component libraries, are modules which contain prefabbed components that can be used in an application. The components in these modules can be customizable via some sort of theme that will affect the components in that module.

Design systems could include a component library but the main difference is a design system adds context on top of those components. This means, the system provides rules on how to use these components. A system might also explain what tone should be used in messaging.

Garden, for example, has not only voice and tone described in their system but also expected grammar, punctuation, and which words are to be used.

Value

What value do these modules add to the application? The biggest value one of these modules provide is the standardization of components and rules. Communication between engineering and design will be streamlined because both parties will be talking the same language.

Productivity will also increase as basic components like buttons or alerts don't need to be reimplemented. This goes with design as well. A good module will have a design/ui kit that designers can modify to fit the product/brand without the need to remake the components.

Criteria

With all the choices out there, how does one choose what's best for the application?

There are standard requirements one will need to consider and compare against different modules.

Author's Note: The criteria listed are my personal opinion, and should be modified to fit your needs.

1. Licensing

Be warned. Just because the module is in Github, it doesn't mean the module is free to use. Always make sure the module has permissive licensing or the module will be used in a manner that will not break the license.

Example:

Polaris, by Shopify, may be available in Github but it's only allowed to be used inside of software that integrate or interoperate with Shopify software. Shopify needs approve the application if it's standalone.

Read the full license here.

2. Design/UI Kit

Design/UI kits might not impact engineering directly but it's an important part of a design system/component library. These kits are used by design to create mocks of upcoming updates to the application. Having a robust kit makes design's life much easier. It will also make it faster.

Sadly, not all modules have kits. Some have community-made kits like Mantine's. This doesn't guarantee the kit is complete or up-to-date as it needs to depend on the community to keep it up. Best case scenario is the module provides an official kit -- see MUI.

Another aspect of the kit to consider is where it's built. Usually, one design tool is used within a company. The most common ones are Figma, Sketch and Adobe XD. It's important to make sure the module provides a kit built in the tool used by design.

3. Customizability

Customizability is an important aspect of good module. That's the whole point of a using a design system or component library. A module is only as good as its ability to be customized since these are usually made with a certain purpose in mind or design that doesn't fit the product.

Design systems or component libraries usually work using design tokens. This makes it simple to theme the module.

There are many ways one can modify the themes and the way the module modifies the theme must match the expected architecture of the application. MUI, for example, uses CSS-In-JS for its method of styling. Ant Design, on the other hand, uses LESS for its styling.

4. Components

Components that exist within the module, like customization, should fit the need of the application. It's important to know or estimate which components are needed for the application. Obviously, there would be common ones like button, select, or some variation of card. Some modules expand on these common components and have things like stepper, and even tree.

It's important to have an idea of what components are needed for the application as it will reduce the need to reimplement something that already exists in the right module.

5. Accessibility

Accessibility is an integral part of being a modern application for an international audience but it's a lot of work to be accessible. Luckily, many of these design system and component libraries are made with accessibility in mind.

This is generally a problem with older modules but it's such an important requirement it deserved a point as a criteria.

6. Community

Having a strong community behind a design system or component library determines not only the longevity of the module but also the amount of support one would receive.

Community doesn't stop at being able to get support. Having an active repository with issues and pull requests being commented on, resolved or closed is also an important part of being active.

Author's Note: I've made a small query that can be modified to check Stack Overflow statistics regarding Tags -- view results

7. Other Considerations

Typescript Compatible
Handles RTL
Handles Localization

Design System OR Component Library

Picking on or the other, again, is determined by what the application needs. Picking a design system usually comes with rules about how to use tone or the component. If that's not necessary for the application or there are already rules established, a design system can still be selected but not use the rules portion of it.

Component libraries can also be picked in conjunction with a the rules of a design system. For example, "Company X will use Mantine as their design system and follow the rules of Adobe Spectrum."

Next Steps

With this knowledge in tow, picking the right design system or component library shouldn't be as daunting as before. Biases for a certain module will always exist; but it's important to be open minded, and select what makes sense for the application, design, and company goal.

References

https://www.architech.ca/a-design-system-so-much-more-than-a-component-library/#:~:text=%E2%80%9CA%20component%20library%20is%20just,single%2Dsource%20of%20truth.%E2%80%9D

https://medium.com/adevinta-spain-design/whats-the-value-of-a-design-system-19e47752f003

Tips for New Developers

Karl Castillo — Sat, 16 Jul 2022 21:49:39 +0000

I've been a professional software developer, engineer or whatever you want to call since 2013. During this time, I've lead workshops, mentored in bootcamps and at work. With this experience, I've compiled some tips that have helped developers.

Be Flexible

There's always chatter between developers about being front-end, back-end or fullstack. Some say pick this or that because it makes you more money; but enjoying what you do is also important.

I always recommend to try out everything. Do front-end work, back-end work, or devops. Eventually, you'll gravitate towards one or more. I experienced this firsthand as I started as fullstack with roughly 50% front-end and 50% back-end. Now, I do roughly 95% front-end with 5% back-end as I enjoyed front-end more.

Read Code

Being able to read and follow code written by someone else is an integral part of being a good developer. Getting used to reading code not only helps you learn why developers do certain things but see alternative ways to solve the same problem.

It will also make you an effective reviewer when the time comes.

Focus on Yourself

A common thing I hear especially from new developers is I'm not fast enough or not good enough compared to someone else. Comparing yourself to other developers who are at a different stage of their career will affect your mental health. It might also worsen your impostor syndrome.

Focusing on yourself also keeps you honest with what you're missing skill-wise and knowledge-wise.

Find a Mentor

It's never too late to find a mentor. Having a mentor does wonders when it comes to receiving insight, and an alternative point of view about certain things as they would have different experiences. The topics you talk about with your mentor doesn't have to be exclusively about technology. It could be about life or career trajectory.

As someone who didn't have a mentor, it was difficult especially as a young developer. With little to no support early on in my career, it definitely affected my mental health at that time.

Rest

I've seen young developers who are extremely eager to learn as quickly as possible that they would be studying after work and over the weekend. The motivation is there but make sure that you're not burning out because of it.

Conclusion

Most of these tips might be common sense for most people, but sometimes it's important to mention it again. I hope some of these tips resonated with you.

What tips do you have for new developers?

Media Queries in JS

Karl Castillo — Sun, 29 Aug 2021 17:39:57 +0000

In these modern times, your web applications can be viewed in a variety of screen sizes -- from small screen phones to large 4k monitors. Luckily CSS allows us to add certain stylings depending on many variables using media queries. Sometimes using media queries isn't enough to achieve the goal. This is where matchMedia could help.

matchMedia is a method provided by window that can determine whether the given media query matches the current state of the browser.

`matchMedia`

matchMedia accepts a media query as a string and returns a MediaQueryList which can be used to check if the current state of the browser matches the given media query.

const mediaQueryList = window.matchMedia("only screen and (max-width: 600px)");

if (mediaQueryList.matches) {
  console.log("Matches");
} else {
  console.log("Does not match");
}

Keeping track of changes

We can keep track of these changes by listening for a change event.

const callback = (event) => {
  if (event.matches) {
    console.log("Matches");
  } else {
    console.log("Does not match");
  }
}

mediaQueryList.addEventListener("change", callback);
mediaQueryList.removeEventListener("change", callback);

If you need to support older browsers, you can use addListener and removeListener respectively but do remember that those methods are deprecated.

mediaQueryList.addListener(callback);
mediaQueryList.removeListener(callback);

`useMediaQuery`

This technology can also be transferred to a reusable React hook. The hook will accept a media query and a callback function for when changes occur.

const useMediaQuery = (query, callback) => {
  const [isMatchingQuery, setIsMatchingQuery] = useState(false);

  useEffect(() => {
    const mediaQueryList = window.matchMedia(query);
    const onMediaQueryUpdate = (e) => {
      setIsMatching(e.matches);

      if(callback) {
        callback(e);
      }
    };

    // Set whether the browser initially matches the query
    setIsMatchingQuery(mediaQueryList.matches);

    mediaQueryList.addEventListener("change", onMediaQueryUpdate);
    return () => {
      mediaQueryList.removeEventListener("change", onMediaQueryUpdate);
    }
  }, [query, callback, setIsMatchingQuery]);

  return { isMatchingQuery };
}

If you're already using matchMedia in your project, how are you using it? If you're using a different framework, how would you incorporate matchMedia into that framework?

SlateJS: Adding Images and Links

Karl Castillo — Sun, 11 Apr 2021 20:25:21 +0000

In the previous, we talked about setting up a simple SlateJS text editor. Now, we're going to add two new features to our text editor -- inserting an image and link.

Toolbar

For us to start adding rich text functionality, we'll need to create a toolbar component.

import { useSlateStatic } from 'slate-react';
...

const Toolbar = () => {
  const editor = useSlateStatic()

  const handleInsertImage = () => {
    const url = prompt("Enter an Image URL"); // For simplicity
    insertImage(editor, url); // will be implemented later
  };

  const handleInsertLink = () => {
    const url = prompt("Enter a URL"); // For simplicity
    insertLink(editor, url); // will be implemented later
  };

  return (
    <div className="toolbar">
      <button onClick={handleInsertImage}>Image</button>
      <button onClick={handleInsertLink}>Link</button>
    </div>
  )
}

Important things to note here are

useSlateStatic: gives us an instance of our Editor which won't cause a re-render,
insertImage: a helper function that will insert an image into our Editor
insertLink: a helper function that will insert a link into our Editor

We can then use this component as a child of our Slate component. We do this so we can use useSlateStatic.

const Editor = () => {
  ...
  return (
    <Slate ...>
      <Toolbar />
      ...
    </Slate>
  )
}

`insertImage`

Our insertImage function will handle how we'll insert images into our Editor. We'll have to set some rules.

If the Editor isn't focused, we'll add the image at the end of the Editor.
If the Editor is focused on an empty Node or void Node (eg. image node), we'll replace the empty Node node with the image.
If the Editor is focused on a non-empty Node, we'll add the image after the Node.

const insertImage(editor, url) => {
   if (!url) return;

  const { selection } = editor;
  const image = createImageNode("Image", url);

  ReactEditor.focus(editor);

  if (!!selection) {
    const [parentNode, parentPath] = Editor.parent(
      editor,
      selection.focus?.path
    );

    if (editor.isVoid(parentNode) || Node.string(parentNode).length) {
      // Insert the new image node after the void node or a node with content
      Transforms.insertNodes(editor, image, {
        at: Path.next(parentPath),
        select: true
      });
    } else {
      // If the node is empty, replace it instead
      Transforms.removeNodes(editor, { at: parentPath });
      Transforms.insertNodes(editor, image, { at: parentPath, select: true });
    }
  } else {
    // Insert the new image node at the bottom of the Editor when selection
    // is falsey
    Transforms.insertNodes(editor, image, { select: true });
  }
}

`insertLink`

Now that we're able to insert images, let's add functionality to insert links. Similar to the images, we need to set rules.

If the Editor isn't focused, insert the new link inside of a paragraph at the end of the Editor.
If the Editor is focused on a void node (eg. image node), insert the new link inside of a paragraph below the void node.
If the Editor is focused inside of a Paragraph, insert the new link at the selected spot.
If a range of text is highlighted, convert the highlighted text into a link.
If the selected text consists of a link, remove the link and follow Rule #3 and #4.

const createLinkNode = (href, text) => ({
  type: "link",
  href,
  children: [{ text }]
});

const removeLink = (editor, opts = {}) => {
  Transforms.unwrapNodes(editor, {
    ...opts,
    match: (n) =>
      !Editor.isEditor(n) && Element.isElement(n) && n.type === "link"
  });
};

const insertLink = (editor, url) => {
  if (!url) return;

  const { selection } = editor;
  const link = createLinkNode(url, "New Link");

  ReactEditor.focus(editor);

  if (!!selection) {
    const [parentNode, parentPath] = Editor.parent(
      editor,
      selection.focus?.path
    );

    // Remove the Link node if we're inserting a new link node inside of another
    // link.
    if (parentNode.type === "link") {
      removeLink(editor);
    }

    if (editor.isVoid(parentNode)) {
      // Insert the new link after the void node
      Transforms.insertNodes(editor, createParagraphNode([link]), {
        at: Path.next(parentPath),
        select: true
      });
    } else if (Range.isCollapsed(selection)) {
      // Insert the new link in our last known location
      Transforms.insertNodes(editor, link, { select: true });
    } else {
      // Wrap the currently selected range of text into a Link
      Transforms.wrapNodes(editor, link, { split: true });
      // Remove the highlight and move the cursor to the end of the highlight
      Transforms.collapse(editor, { edge: "end" });
    }
  } else {
    // Insert the new link node at the bottom of the Editor when selection
    // is falsey
    Transforms.insertNodes(editor, createParagraphNode([link]));
  }
};

Custom Type `Link`

Now that we're able to insert links, let's make sure we're able to render a Link correctly.

const Link = ({ attributes, element, children }) => (
  <a {...attributes} href={element.href}>
    {children}
  </a>
);

We can then update our renderElement function to include the new Link type.

const renderElement = (props) => {
  switch (props.element.type) {
    case "image":
      return <Image {...props} />;
    case "link":
      return <Link {...props} />;
    default:
      return <Paragraph {...props} />;
  }
};

Link Popup

Since we can't really tell what URL the link has, we can create a simple popup whenever we focus on a link. We can do that by updating our Link component.

const Link = ({ attributes, element, children }) => {
  const editor = useSlateStatic();
  const selected = useSelected();
  const focused = useFocused();

  return (
    <div className="element-link">
      <a {...attributes} href={element.href}>
        {children}
      </a>
      {selected && focused && (
        <div className="popup" contentEditable={false}>
          <a href={element.href} rel="noreferrer" target="_blank">
            <FontAwesomeIcon icon={faExternalLinkAlt} />
            {element.href}
          </a>
          <button onClick={() => removeLink(editor)}>
            <FontAwesomeIcon icon={faUnlink} />
          </button>
        </div>
      )}
    </div>
  );
};

Conclusion

With our rich text taking shape, we're starting to see the power of Slate and how you have the power to implement the way you want to.

Demo

SlateJS: Creating a Text Editor

Karl Castillo — Fri, 09 Apr 2021 15:50:13 +0000

Having a text editor customized can enhance your user's experience. Slate is a text editor framework that can be customized to fit your needs.

Installing Slate

We'll need three modules for our Slate implementation.

slate: The core module of Slate
slate-react: The React wrapper for Slate
slate-history: Allows the user to undo their actions

npm i --save slate slate-react slate-history

yarn add slate slate-react slate-history

Setting up Slate

To create a new Editor using createEditor in combination with a couple of plugins -- withReact and withHistory.

...
import { createEditor } from 'slate';
import { withReact } from 'slate-react';
import { withHistory } from 'slate-history';

const Editor = () => {
  const editor = useMemo(() => withReact(withHistory(createEditor())), []);
  ...
}

Two components will then be used to render the Slate editor.

import { Slate, Editable, ... } 'slate-react';

const Editor = () => {
  ...
  return (
    <Slate editor={editor}>
      <Editable />
    </Slate>
  )
}

Adding Content

Slate would crash initially and that's because a default value is necessary.

const Editor = () => {
  ...
  const [value, setValue] = useState([
    {
      children: [{ text: 'This is my paragraph!' }]
    }
  ])

  return (
    <Slate ... value={value} setValue={setValue}>
      ...
    </Slate>
  )
}

It's important for a default Element to exist and not just an empty array. Having an empty array will cause a crash as Slate has nothing to attach the cursor to.

Custom Types

By default, the content will be considered as text but Rich Text Editors can have non-text content.

Each Element can have custom properties to help render said Element.

const [value, setValue] = useState([
  {
    type: 'paragraph',
    children: [{ text: 'This is my paragraph' }]
  },
  {
    type: 'image',
    src: 'path/to/image',
    alt: 'This is my image'
    children: [{ text: '' }]
  }
])

We can then render these custom elements using the renderElement prop of the Editor component.

const Paragraph = ({ attributes, children }) => (
  <p {...attributes}>{children}</p>
)

const Image = ({ attributes, element, children }) => (
  <div {...attributes}>
    <div contentEditable={false}>
      <img src={element.src} alt={element.src} />
    </div>
    {children}
  </div>
)

const renderElement = (props) => {
  switch(props.element.type) {
    case 'image': 
      return <Image {...props} />
    default:
      return <Paragraph {...props} />
  }
}

const Editor = () => {
  ...
  return (
    <Slate ...>
      <Editor renderElement={renderElement} />
    </Slate>
  )
}

It's important that every Element renders the children prop as this is how Slate can keep track of which element currently has focus.

Voids

Voids are Elements that cannot be edited as if it was text. Since our Image cannot be edited as if it was text, we need to tell Slate that it's a void Element.

Plugins

The editor object that we create has an isVoid function which determines whether or not an Element is void or not.

Slate allows us to create plugins that can modify the functionality of existing editor functions or add new functionality.

const withImage = (editor) => {
  const { isVoid } = editor;

  editor.isVoid = (element) =>
    element.type === 'image' ? true : isVoid(element);

  return editor;
}

const Editor = () => {
  const editor = useMemo(() => withReact(withHistory(withImages(createEditor()))), []);
  ...
}

TIP: Since you can have a lot of plugins especially for more complicated editors, you can use the pipe function from lodash/fp.

import pipe from 'lodash/fp/pipe'

const createEditorWithPlugins = pipe(
  withReact,
  withHistory,
  withImage
)

const Editor = () => {
  const editor = useMemo(() => createEditorWithPlugins(createEditor()), []);
}

Handling Events

Since Image is now considered as a void element, it loses some keyboard functionality. Luckily, the editor provides us two functions that we can extend.

`insertBreak`

The editor.insertBreak function is called when the user presses the enter or return for Mac.

const { isVoid, insertBreak, ... } = editor

editor.insertBreak = (...args) => {
  const parentPath = Path.parent(editor.selection.focus.path);
  const parentNode = Node.get(editor, parentPath);

  if (isVoid(parentNode)) {
    const nextPath = Path.next(parentPath);
    Transforms.insertNodes(
      editor,
      {
        type: 'paragraph',
        children: [{ text: '' }]
      }, 
      {
        at: nextPath,
        select: true // Focus on this node once inserted
      }
    );
  } else {
    insertBreak(...args);
  }
}

`deleteBackward`

The editor.deleteBackward function is called when the user presses the backspace or delete for Mac.

const { isVoid, deleteBackward, ... } = editor

editor.deleteBackward = (...args) => {
  const parentPath = Path.parent(editor.selection.focus.path);
  const parentNode = Node.get(editor, parentPath);

  if (isVoid(parentNode) || !Node.string(parentNode).length) {
    Transforms.removeNodes(editor, { at: parentPath });
  } else {
    deleteBackward(...args);
  }
}

Conclusion

As you can see, Slate can be heavily customizable as it gives you the necessary tools to add your own functionality.

Demo

Lazy Loading Data in ReactJS using Intersection Observer

Karl Castillo — Wed, 31 Mar 2021 17:08:18 +0000

Lazy loading is a way for websites to load new data for the user to see without needing to click a button.

No scroll events

Plenty of lazy load tutorials use scroll events to determine whether or not your user has scrolled to the end of a container. It's a valid solution to use scroll events but I was thinking of an alternative.

Say hello to the Intersection Observer API. The Intersection Observer keeps track of when elements intersect with the given container. This is what we'll use to determine whether or not we've hit the bottom of our container.

`useLazyLoad` Hook

The useLazyLoad hook will be where we'll use the Intersection Observer. The hook will have 3 parameters -- triggerRef, onGrabData, and options.

triggerRef is our ref to our trigger element
onGrabData is the function that will be called to load more data
options is the options object that can be passed to the Intersection Observer constructor.

const useLazyLoad = (triggerRef, onGrabData, options) => {
  ...
}

Inside of a useEffect, we'll create our observer.

useEffect(() => {
  if (triggerRef.currrent) {
    const observer = new IntersectionObserver(onIntersect, options)
    observer.observe(triggerRef.current)

    return () => {
      observer.disconnect()
    }
  }
}, [triggerRef, onIntersect, options])

A couple of important things to note here are onIntersect, observe() and disconnect().

onIntersect is a callback function called by the observer when the observed elements interact with the observer root.
observe is a function that makes an element something that the observer should be keeping track of.
disconnect is a cleanup function that stops the observer from observing.

`onIntersect`

The callback function required by the Intersection Observer receives entries as its parameter.

const onIntersect = (entries) => {
  const boundingRect = entries[0].boundingClientRect
  const intersectionRect = entries[0].intersectionRect

  if (intersectionRect.bottom - boundingRect.bottom <= 5) {
    onGrabData(...)
  }
}

`entries`

The entries parameter is an array of IntersectionObserverEntry. The callback is called when one or more of the elements being observed intersects or stops intersecting against the root.

`triggerRef`

The triggerRef is an element that Intersection Observer will be keeping track of.

...
const triggerRef = useRef(null)
const { data } = useLayLoad(triggerRef, onGrabData, options)
...
return (
  <section>
    {data.map((item) => (
      <div key={item.id}>
        ...
      </div>
    ))}
    <div ref={triggerRef} />
  </section>
)
...

The trigger element will be found beneath the data which will push the trigger beyond the viewport. When the user scrolls down, the trigger will intersect with the viewport triggering the intersection observer callback.

Working Demo

Determining your browser's zoom percentage

Karl Castillo — Sun, 31 May 2020 20:39:53 +0000

In most browsers specially desktop browsers, you're able to zoom in and out using CTRL/CMD++ or CTRL/CMD+-.

Most of the time, there's no problem as your website should take into account responsiveness but what if you want to update your website based on your user's browser zoom percent?

We can use Javascript to calculate the current browser zoom.

Math.round((window.outerWidth / window.innerWidth) * 100)

Accessibility

Zooming is part of accessibility and having your website usable even when the user being zoomed in is important.

Gotcha

When you have your inspector open and it's docked to the left or right, the calculation becomes inaccurate as the innerWidth doesn't take into account the inspector.

Demo:

Best viewed in debug mode:

https://codepen.io/koralarts/pen/NWxKKdZ

How would you improve the code or do you have other ways on how you determine browser zoom?

CSS: currentColor Value

Karl Castillo — Sun, 03 May 2020 23:45:08 +0000

The CSS property currentColor is an interesting property where the value of currentColor is your element's current font colour. This value can be used as a named colour.

div {
  color: red;
  border: 1px solid currentColor;
}

Like other CSS properties, currentColor is affected by cascade and specificity.

<div>I'm Red</div>
<div class="div-blue">I'm Blue</div>

div {
  color: red;
  border: 1px solid currentColor;
}

.div-blue {
  color: blue;
}

So what can we do with currentColor?

SVG Fill

a {
 color: blue;
}

a > svg {
  fill: currentColor;
}

Theming

Can you think of other ways to use currentColor?

CSS: Color Values

Karl Castillo — Sat, 25 Apr 2020 20:43:27 +0000

Colour is an integral part of designing a website. Proper colour usage makes a user's experience grow!

Named colours

CSS has provided us with named colours. There are plenty of these and they can be used by simply using their names.

div {
  color: red;
  background-color: violet;
  border-color: black;
}

Here's a list of them: CSS Named Colours

Hex Values

Hex values are probably the most common colour format you've seen. The hex value starts off with a hash symbol (#) followed by 6 characters each ranging from 0 to F. Each pair corresponds to the intensity of red, green, or blue.

div {
  color: #FF0000; /* Red */
  background-color: #FF00FF; /* Violet */
  border-color: #000000; /* Black */
}

`rgb`

The RGB value is similar to hex values. Where you specify the intensity of the red, green, and blue to create a colour. The main difference, aside from structure, is it goes from 0 to 255.

div {
  color: rgb(255, 0, 0); /* Red */
  background-color: rgb(255, 0, 255); /* Violet */
  border-color: rgb(0, 0, 0); /* Black */
}

`rgba`

RGBA is exactly the same as RGB but you can now specify the opacity of the colour where 0 is transparent and 1 is fully opaque.

div {
  color: rgba(255, 0, 0, 1); /* Red fully opaque */
  background-color: rgba(255, 0, 255, 0.5); /* Violet 50% transparent */
  border-color: rgba(0, 0, 0, 0); /* Black fully transparent */
}

`hsl`

HSL stands for hue, saturation and lightness. This is typically the least popular way to add colour as it's difficult to understand.

Hue[0-360]: The angle of where your target colour is in a colour wheel.
Saturation[0%-100%]: The amount of saturation
Lightness[0%-100%]: The amount of brightness

div {
  color: hsl(300, 100%, 50%); /* Red */
  background-color: hsl(354, 100%, 50%); /* Violet */
  border-color: hsl(0, 0%, 0%); /* Black */
}

`hsla`

HSLA now adds opacity to the regular HSL where 0 is fully transparent and 1 is fully opaque.

div {
  color: hsla(300, 100%, 50%, 1); /* Red fully opaque */
  background-color: hsla(354, 100%, 50%, 0.5); /* Violet 50% transparent */
  border-color: hsl(0, 0%, 0%, 0); /* Black fully transparent */
}

CSS: Padding and Margin

Karl Castillo — Sun, 19 Apr 2020 14:35:17 +0000

There are plenty of ways you can provide spacing between your elements and content. Two of them are padding and margin.

Padding

Padding as mentioned before in the Box Model is the spacing between the actual content and the border.

There are different ways we could write the padding property values.

div {
  padding: 10px; /* All sides */
  padding: 10px 5%; /* Vertical Horizontal */
  padding: 10px 20px 30em; /* Top Horizontal Bottom */
  padding: 10px 20px 30rem 40px; /* Top Right Bottom Left */

  padding-left: 10px; /* Left */
  padding-right: 10px; /* Right */
  padding-top: 10px; /* Top */
  padding-bottom: 10px; /* Bottom */
}

Padding also has special values that can be used.

%: percentage relative to the width of the container
initial: defaults to 0
inherit: padding value of the containing element
unset: removes the value

Gotcha

Not all display types treat padding the same.

Margin

Padding as mentioned before in the Box Model is the spacing between the element and another element.

There are different ways we could write the padding property values.

div {
  margin: 10px; /* All sides */
  margin: 10px 5%; /* Vertical Horizontal */
  margin: 10px 20px 30em; /* Top Horizontal Bottom */
  margin: 10px 20px 30rem 40px; /* Top Right Bottom Left */

  margin-left: 10px; /* Left */
  margin-right: 10px; /* Right */
  margin-top: 10px; /* Top */
  margin-bottom: 10px; /* Bottom */
}

Inline

Similar to padding, margin doesn't behave as expected when the element is inline and its container is block. Inline elements don't show vertical margins even though its assigned.

Collapsing Margin

If elements aligned vertically have margins, the margin that value that will be used will be the bigger of the two instead of adding both values. This only works if you're

Gotcha!

Margins don't collapse if the containing block is display flex or grid because these two display types put its child elements in individual boxes.

CSS: Unit of Measurements

Karl Castillo — Tue, 14 Apr 2020 03:57:45 +0000

Pixel (`px`)

Represents a dot on the screen. 1px = 1 dot

`em`

Represents a calculated value based on the container's font size where 1em equals 100% of the font size. If the container has no specified font size, the inherited font size will be used.

`rem`

Represents a calculated value based on the root element's font size where 1rem equals 100% of the font size. The root is usually the html element. The :root pseudo element could also be used.

`vh`

Represents a calculated value based on the height of the viewport where 1vh equals 1% of the viewport height.

`vw`

Represents a calculated value based on the width of the viewport where 1vw equals 1% of the viewport width.

`vmin`

Represents a calculate value based on the smaller value between the viewport's height and width where 1vmin equals 1% of the smaller value.

`vmax`

Represents a calculate value based on the bigger value between the viewport's height and width where 1vmin equals 1% of the smaller value.

Forem: Karl Castillo

A Decade in Software: A career retrospective

TL;DR

My Background

Post Education

Harsh Truth

Communication Please

Lingering Thought

The Pandemic

Present Day

The Future

Lessons Learned

Choosing A Design System/Component Library

Design System vs Component Library

Value

Criteria

1. Licensing

2. Design/UI Kit

3. Customizability

4. Components

5. Accessibility

6. Community

7. Other Considerations

Design System OR Component Library

Next Steps

References

Tips for New Developers

Be Flexible

Read Code

Focus on Yourself

Find a Mentor

Rest

Conclusion

Media Queries in JS

matchMedia

Keeping track of changes

useMediaQuery

SlateJS: Adding Images and Links

Toolbar

insertImage

insertLink

Custom Type Link

Link Popup

Conclusion

Demo

SlateJS: Creating a Text Editor

Installing Slate

Setting up Slate

Adding Content

Custom Types

Voids

Plugins

Handling Events

insertBreak

deleteBackward

Conclusion

Demo

Lazy Loading Data in ReactJS using Intersection Observer

No scroll events

useLazyLoad Hook

onIntersect

entries

triggerRef

Working Demo

Determining your browser's zoom percentage

Accessibility

Gotcha

Demo:

CSS: currentColor Value

SVG Fill

Theming

CSS: Color Values

Named colours

Hex Values

rgb

rgba

hsl

hsla

CSS: Padding and Margin

Padding

`matchMedia`

`useMediaQuery`

`insertImage`

`insertLink`

Custom Type `Link`

`insertBreak`

`deleteBackward`

`useLazyLoad` Hook

`onIntersect`

`entries`

`triggerRef`

`rgb`

`rgba`

`hsl`

`hsla`

Pixel (`px`)

`em`

`rem`

`vh`

`vw`

`vmin`

`vmax`