DEV Community: Davina Leong

This Laravel Seeder Looks Like a Water Pistol — And It Seeds Like a Pro

Davina Leong — Mon, 16 Jun 2025 04:27:00 +0000

Sure! Here's a draft Dev.to article based on your Laravel seeder that playfully resembles a water pistol. It’s structured for clarity, developer relatability, and searchability, while being lighthearted and educational.

💦 Laravel Seeder That Looks Like a Water Pistol (and It Works Too!)

Ever written a Laravel seeder that looks like it’s firing out data?
Well… I accidentally did.

And yes — it works like a charm.

🔍 The Use Case

I needed to seed my database with:

3 to 5 SpecialContentGroups
Each containing 3 to 5 SpecialContentItems

The result? A cascade of factory-generated data in a neat, fluid chain of logic — and visually, the indentation reminded me of a water pistol emoji 💧🔫.

🧪 The Code

public function run(): void
{
    // Check if there are existing Special Content Groups
    $groups = SpecialContentGroup::all();

    if ($groups->isEmpty()) {
        // No groups exist – create 3 to 5 groups with 3 to 5 items each
        $groupCount = rand(3, 5);
        $groups = SpecialContentGroup::factory()
            ->count($groupCount)
            ->create()
            ->each(function ($group): void {
                $itemsCount = rand(3, 5);
                SpecialContentItem::factory()
                    ->count($itemsCount)
                    ->for($group)
                    ->create();
            });
    }
}

🧠 What's Happening?

Here’s a quick breakdown:

SpecialContentGroup::all() checks if any groups exist.
If none are found, it creates a random number of groups (between 3 and 5).
Each group then gets a random number of related items (also between 3 and 5), thanks to each() and the ->for($group) relationship helper in Laravel factories.

🔫 But Why the “Water Pistol”?

Check out the indentation — it flows! 💦

The nested arrow functions, when formatted with consistent tabbing and spacing, almost give off this "shooting" vibe. While that wasn’t the intention, I couldn’t unsee it after I noticed.

🎯 Why It’s Effective

✅ Makes use of Laravel's expressive factory system
✅ Ensures clean, relational demo data
✅ Easy to extend or tweak the counts for your use case
✅ Fun and readable!

💡 Pro Tip

Using the ->for($group) method ensures that your child factory (SpecialContentItem) links back to its parent (SpecialContentGroup) via the defined relationship — no need to manually assign group_id.

📦 When Should You Use This?

For testing UI layouts with relational data
When showcasing a dashboard that depends on group/item hierarchies
In test environments where you want randomized but realistic structures

🗣️ Final Thoughts

Sometimes your code ends up looking cool and working great. Embrace the beauty in clean logic — even if it looks like it’s ready to squirt data all over your app. 💧💻

💬 What about you?

Have you ever written code that unintentionally looked like something fun or weird?
Drop a comment — I’d love to see your “happy accidents”!

7 Useful JS Fiddles

Davina Leong — Wed, 03 Nov 2021 18:40:01 +0000

Sharing some JSFiddles the rest of you may find useful. I often use JSFiddle as a playground to test out snippets of UI code before putting them into an actual project. I built all these fiddles myself, with some help from Google. Excuse the boring colour scheme; I'm not much of a designer... Anyways, hope you find these code snippets useful.

Custom Checkbox & Radio

Custom checkboxes and radio buttons. Includes hover effects.

I had a project from my day job where I had to create custom checkboxes. I already had an idea on how to do it, but needed to test the idea. I got the code to render the checkmark here. I also decided to include a snippet for radio buttons in-case I needed it in the future.

Ribbon Label

Product ribbon label. The image is generated from placeholder.com.

My most recent project required me to style product labels as ribbons. I tried to find solutions online, but many of them were too complicated. In the end, I came up with this solution. I couldn't get pseudo elements to work for the ribbon corner. So I ended up using an inner div to achieve the result.

Custom File Input Placeholder

Custom File Input Placeholder. This snippet uses jQuery.

One of the projects I worked on recently at my day job needed needed a file input to upload the customer's profile picture. There were no input labels in the mockup. It used the placeholder attribute as the input's label. The problem is the file input type doesn't render the placeholder attribute. This fiddle is my solution to the problem after searching for ideas to the problem.

Custom Select Field

I often have designs that change the design of the select input arrow. After some searching, I found the code to render the arrow. Remember to make the input field's background transparent.

Button with Overlapping Shadow

I had one project where the button had such a design. Here is the solution.

To give a transparent appearance, make sure the inset box-shadow colour is the same as the your background colour.

Grid Gallery

I had to build a grid gallery for one of my projects for my day job. Since it was company policy to support IE11, I had to find a solution that works for IE11. Here is the solution I came up with.

I'm sure there's a better way to code a responsive grid, but this was what I could think of at that time.

Mega Menu Hover

This solution uses jQuery.

I had to build a mega menu for one of my projects. This was what I came up with.

Moving Personal Website from ReactJS to GatsbyJS

Davina Leong — Wed, 10 Mar 2021 01:46:01 +0000

Personal website successfully moved to GatsbyJS!

The initial site was built in ReactJS about a few years ago. I wanted to exercise the ReactJS skills that I picked up at my first job. Everything worked fine. But the one thing lacking about my site was routes. I couldn't point potential recruiters to the About page directly where they could find download links to the resumes.

For a long time, I wanted to learn GatsbyJS, but couldn't find the time due to my day job. Finally found some time this weekend to get started. The site is deployed on Netlify.

For the most part, transferring of the site was simple as GatsbyJS is built on ReactJS. The one issue I struggled with was getting FontAwesome Pro icons to work. After some Googling, I managed to get it working. Apparently, I had to use the FontAwesome's react component to render the icons.

After that I ran into some issues getting the site deployed. This was when I learned how to read the deployment logs on Netlify.

The first errors I encountered was some libraries were missing from the build process. I realised that I had to add an .npmrc file. The next error I encountered was:

"window" is not available during server side rendering

I was using window in two places: for the back-to-top button and for extracting the query string. I resolved the back-to-top button by using an anchor tag over a button and modifying some styles. I then researched on alternatives to extracting query string values. I was led to this StackOverflow post. I went with using the query-string package. The errors were resolved and the site was published successfully.

Later on, I had issues with broken images. Since the projects I've published were little, I didn't want to maintain an API and a DB. I may do it in the future. So I decided to load the projects as static data on the site. After some debugging, I fixed the image urls by adding a ../ to all images under the /projects route.

From reading Netlify logs to using the console to debug the image urls, I've learned a lot from deploying this GatsbyJS site. I enjoy exploring and experimenting with new technologies. Hopefully I will have a new project idea for GatsbyJS again!

How to deploy an Express app for free?

Davina Leong — Mon, 20 Jan 2020 13:28:56 +0000

Hi, I'm trying my hand at some simple deployment. I'm new to deployment and DevOps in general.

I'm trying to deploy this repo on Heroku, but the app keeps crashing when I run the logs:

heroku logs --tail

Logs:

2020-01-20T13:22:48.461520+00:00 heroku[web.1]: Stopping all processes with SIGTERM
2020-01-20T13:22:48.530567+00:00 heroku[web.1]: Process exited with status 143
2020-01-20T13:22:49.039979+00:00 app[web.1]: Welcom to GraphQL JS!
2020-01-20T13:23:47.885144+00:00 heroku[web.1]: State changed from starting to crashed
2020-01-20T13:23:47.785166+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2020-01-20T13:23:47.785166+00:00 heroku[web.1]: Stopping process with SIGKILL
2020-01-20T13:23:47.868166+00:00 heroku[web.1]: Process exited with status 137
2020-01-20T13:25:22.662912+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=calm-cove-11715.herokuapp.com request_id=45fc8325-868d-4daa-b67e-177a355ecfe5 fwd="116.14.82.68" dyno= connect= service= status=503 bytes= protocol=https
2020-01-20T13:25:23.026635+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=calm-cove-11715.herokuapp.com request_id=6444cb61-eae0-4116-9b36-861ad1aef465 fwd="116.14.82.68" dyno= connect= service= status=503 bytes= protocol=https

What is happening, and how to I resolve this? I'm also trying to follow this tutorial on Heroku.

🎨 Colors Palette Released!

Davina Leong — Sun, 29 Dec 2019 06:27:33 +0000

About

I released this project as a way to store hex color codes I use frequently. Feel free to use is for your own reference whenever you need the hex values of common color palettes like Bootstrap's or Material Design's palettes. 😀

Material Colors Palette

Davina Leong — Sun, 29 Dec 2019 03:10:35 +0000

About

Just sharing a resource I use on a regular basis. Here is a list of all colors from the Material's Design palette. Click on the color tabs to reveal the hex values of the tints.

Pokemon-Teams App Template Released!

Davina Leong — Sun, 29 Dec 2019 02:58:46 +0000

About

This template is the first part of a 3-part project. The second part is to build a React App, and part-3 is a CMS to update the Pokemon teams. I've always enjoyed playing the main Pokemon games like Pokemon Sun & Moon and Pokemon Sword & Shield. I've been playing them since Pokemon Red & Blue. I can get quite fanatical about battle strategies. Currently I store my own teams on Google Docs. Now finally confident enough in my development skills, I've decided to build an app to house all these teams I made.

Tech Stack

This is a pure CSS template built in SASS, using the Materials Colors palette. I also took advantage of the opportunity to also explore CSS Grid. For example, CSS Grid is used to layout the sidebar and main content. Flexbox is used to layout the team-cards.

Released my first Bootstrap 4 template!

Davina Leong — Fri, 08 Mar 2019 11:34:14 +0000

Teck Stack

This template is built in Bootstrap 4 with Font Awesome 5 for icons.
I also decided to use SASS to code up the styles to make it easier to assign colours, and font families through the use of variables, functions and mixins.

Purpose

This template is actually the first half of a 2-part demo project I built last week. I was scheduled to do a presentation on CraftCMS earlier this week. This is the template which the Craft side would use to display entry records.

Idea

I came up with the idea of creating a fake company. This company specializes in developing custom web and mobile applications for clients. The audience of the talk was a local PHP community. Hence, I came up with the company's name "Comphanny" which is a play on the words "company", "php", and "ph" being pronunced as "f" in "elephant" which is the animal typically associated with PHP.

Reflection

I initally wanted to build this template from scratch, to practise my CSS & web design skills, as well as explore Flexbox and CSS grid. But due to time constraints from my day job, and still having the Craft part of the project to build, I felt it was too ambitious. So I decided to go building off Bootstrap since it was what I was familiar with.

How to make backgrounds like the default WhatsApp wallpaper?

Davina Leong — Thu, 07 Mar 2019 05:50:58 +0000

Hi designers,

What is the technique to create "fine-print" backgrounds like the default WhatsApp wallpaper? I also need it to be responsive and the shapes to be distinguishable at different resolutions. I presume this is achieved through vector graphics like .svg?

Also, how to I make "code-text" backgrounds? Can't find a reference image for this so I'll try my best to explain what I'm trying to achieve. I want a background that's basically a chuck of code with muted colours. While the background-text is distinguishable, it shouldn't clash with the foreground content.

Any tips and tricks on techniques on how to achieve this?
Or at least links to such resources?

I'm trying to create backgrounds like this for a website I'm making. The theme of the website is centred around web development and programming.

Thanks.

Moving Away from AMPPS for Local Dev

Davina Leong — Sun, 17 Feb 2019 04:53:51 +0000

Ever since I started web development, I've been using WAMP and later on AMPPS, which is just WAMP/MAMP with a better UI. But I feel I've been taking environment-setup for granted, and want to move away from that.

Since I've been introduced to Docker at work, I've been wanting to learn how to setup my own local development environment. At, work, the tech director would be the one to do the setup process, and I would just run it. But I was curious in wanting seeing how the different pieces come together--to through the process so I better understand the deployment side of web development. This aslo helps me be more effective as troubleshooting problems during the setup process.

I initally tried doing on my existing Windows machine. So I went and got a MBP, since Mac comes preinstalled with PHP and MySQL. Also it being based off Unix makes it simpler to run bash commands and scripts too!

Instead of diving straight into Docker, I decided to start simple and see if I could just get a local dev server running. After 3 days of trial and error and much Googling, finally managed to get an existing project running on Valet.

Through the whole process, I learned how to use Homebrew and Valet The biggest challenge I faced was trying to get Sequel Pro connected to localhost MySQL.

Next setup is figuring out how to write the Docker scripts for a typical LEMP setup. Then figure out how to setup local dev environments specifically for Laravel and Craft. I know there's LaraDock for Laravel... would that also work for Craft (or CraftCMS)?

Resolutions to setup issues with Craft on AMPPS

Davina Leong — Fri, 08 Feb 2019 06:53:40 +0000

This is a followup to my post on Introduction to Craft.

Introduction to Craft

Davina Leong ・ Jan 18 '19

#php #craft #learning

Note that this isn't a conclusive list. It is simple me listing down the issues I faced and how I resolved them.

A: Getting Craft working on AMPPS on Mac

Create a /developer folder in your home directory.
Create a folder in the /developer for your Craft project; e.g. (/my-craft-project)
Install Craft in that folder either manually, or via Composer.
Open up your terminal and cd to the /web folder of your Craft project and type:

pwd | pbcopy

This command copies the path of the current directory into your clipboard. Note: Don't be alarmed if you don't get any success messages.

Navigate to your AMPPS' Alias Manager and click on Add New
Paste the path you copied in Step (4) into the Path field. The form should look something like this when filled up: Click on Create Alias
To test, make sure that AMPPS is running, then navigate to http://localhost/my-craft-project. You should either see the Craft welcome page, or your Craft's homepage if you've set it.

B: Plugin Store fails to Load

Download [cacert.pem](https://curl.haxx.se/ca/cacert.pem) and move it to the /developer folder in (A). -. In the AMPPS console, click on the PHP's gear icon. Then click on the spanner icon beside it to launch the php.ini.
Search for curl.info. You'll see something that looks like this: :curl.info = Replace that line with this:

curl.cainfo = "/Users/<username>/developer/cacert.pem"

Remember to change <username> to the name of your Home directory.

Restart your Apache server and reload your webpage

Introduction to Craft

Davina Leong — Fri, 18 Jan 2019 10:19:34 +0000

I first chanced upon Craft at work while working on a small side project. This is the tutorial I followed.

Local Env Setup

AMPPS
Apache
PHP 7.1
MySQL
Craft 3

First Impressions

I must say, I'm quite impressed with Craft's ease-of-use. I did initially run into problems during the setup process, especially with regards to the plugin store. But this was due more to my lack of experience with AMPPS (akin to MAMP, XAMPP, etc) rather than Craft itself. (I'll write a separate post on the issues I faced and my resolutions to them.) But once I got it up and running, Craft is a joy to use!

Walkthrough

After setup, you will be brought to the admin dashboard.

Most of your development work will be done here on the admin panel. Coding is only needed when you create templates to display your content on. Even so, template-creation is a breeze with Twig. In fact, I hadn't touch any PHP code (apart from the configs) while exploring Craft. Here are some sample code:

Main layout, /layouts/main.twig:

<!doctype html>
<html>
<head>
  <title>Website</title>
</head>
<body>
  <h1>Website</h1>

  {% block content %}
  {% endblock %}

  <footer>Website, 2019</footer>
</body>
</html>

About page, /about/index.twig:

{% extends "_layouts/main" %}

{% block content %}
<h2>About</h2>

<p>Lorem ipsum</p>
{% endblock %}

The Dashboard

Anyways, back to the admin dashboard. A few things you should note immediately (besides the obvious widgets): that yellow-dashed line at the top of the sidebar, your current license (more on that later) as well as the "C" and "<" buttons towards the lower-right corner.

DevMode

The yellow-dashed line indicates that devMode is currently set to true in Craft. To remove the yellow-dashed line, open /config/general.php and set devMode under dev to false.

// Dev environment settings
'dev' => [
    // Base site URL
    'siteUrl' => null,

    // Dev Mode (see https://craftcms.com/support/dev-mode)
    'devMode' => true, // <= set this to false
],

In devMode, Craft gives you a stack trace when there are errors in your code. While this is useful for debugging, it obviously poses a security hazard.

With devMode set to false, Craft just throws an HTTP error.

Yii Toolbar

The "C" and "<" buttons in the lower-left corner of the page is actually the collapsed Yii toolbar.

Expanded

Already you can see various information about the page, like its status, memory usage, etc. You can expand it to see more details too! I haven't used it yet though, so I can't comment much on it. But at a glance, seems like this toolbar could potentially replace Chrome's DevTools.

Licenses

Craft has 3 licenses: Solo, Pro and Enterprise. The main difference I've seen between the Solo and Pro licenses so far is the ability to have multiple admin accounts in Pro. As for the Enterprise license, I presume it's for customised solutions.

Content Creation

As I've said before, most of your content creation will be done on the admin panel itself. Below is a screenshot of the field-creation form.

Craft's content-creation workflow is (generally) as such: Sections > Fields > Entries. Sections is the types or kinds of content the website will have like news, posts, etc. Fields are where you create, literally, the fields that will be used to create content of a section to be displayed, like a news' title and body. Entries are the actual records of the content created from these fields.

(to my understanding) So, you have a News section. Then you create the fields to allow users to input data for the news' title and body content, and that record of a new's title and body is a news entry. This is where you might also see the separation of roles too! That feature is available via the Pro license. More reading

The thing is, fields in Craft is separated from sections. This means you are able to reuse fields in other sections. Say now you have a Blogs section. Well, blogs usually have posts and comments. Each blogpost will also (at least) have a title and body content. In this case, you can reuse the fields used for the news' title and body content-creation for blog content-creation. And then create fields specific to blog, like a field for a cover-image.

The Matrix Field

I'm just going to specifically point out this really cool feature in Craft: the matrix field.

Creating the matrix field

Using the matrix field

Matrix field content

Everything below the "Recipe Snapshot" is generate by the matrix field. This allows you to arrange and sort your content however you like. Better yet, you only have to define the template of each content block once, and Craft will know to use template for that content. In the screenshot above, the template for the "tips" div for example, was only defined once!

{# Recipe Tip end #}
  {% case 'recipeTip' %}
    <div class="panel tip">
        <p>{{ block.tipContent }}</p>
    </div>
{# Recipe Tip end #}

Pretty cool huh?!

Well that wraps up my introduction to Craft!

Links

Related

Others