DEV Community: riyaz7us

7 Years in Web Development: Key Lessons I’ve Learned

riyaz7us — Sun, 11 May 2025 18:05:14 +0000

I’ve had a privilege to work with several clients across multiple industries including pharma, education, e-commerce, agriculture, cloud and many more. From from building a simple WordPress website to developing a native platform, I’ve had a fun as well as daunting experience. I’d like to share a few things I learnt during my design journey.

Don’t Know How to Design UI? Follow Design Patterns

There are several design patterns you can choose from, such as Google’s Material Design, Microsoft’s Fluent Design, Shopify’s Polaris, and Apple’s Human Interface Guidelines. These guidelines help your website meet human expectations because they are based on years of research on aesthetics and accessibility.

Additionally, you can follow UI trends like Glassmorphism, Neumorphism, Skeuomorphism, Minimalism, and Heat Mapping. Just make sure you follow the right guidelines so that your design doesn’t hurt readability and accessibility.

Design is not just what it looks like and feels like. Design is how it works.

-- Don Norman

Use Native Components/Elements to Ensure Reliability

In the past, I built several applications using Vue 2, relying heavily on the Vuetify 2 UI Framework. Most of the elements I used were based on that framework, so even a simple title tag was <v-card-title> instead of just <h2>.

Eventually, Vue 3 was released, which is faster and more reliable and includes new features like the composition API. Vuetify also updated to version 3, but the numerous changes to the syntax made it tough for me to adapt.

Therefore, I recommend using native elements as much as possible unless you are adding a complex component like a calendar or a chart.

Learn Many Frameworks but Stick to One

Learning multiple frameworks not only makes you flexible and opens up various career opportunities but also helps you understand different features across frameworks.

However, you should aim to master at least one framework. This will make your development workflow smoother.

Imagine knowing a framework inside out but missing key features like watchers. You might find workarounds, but things could have been easier.

Keep Things Natural

While some developers may disagree, I prefer not to introduce classes or types to plain JavaScript. I like to keep things simple. Regardless of how good object-oriented programming (OOP) or type systems in JavaScript can be, they often don’t feel right.

Remember how React moved from class components to functional components? The reasons included readability, performance, and the complexity of using “this.”

TypeScript has its own limitations, too. You may not always find third-party npm libraries that work well with TypeScript, and most of their documentations focus heavily on JavaScript. Plus, TypeScript again compiles down to JavaScript.

However, if you’re someone who came from a typed language like Java, you might prefer OOP and TypeScript.

Build Your Own Framework

No there’s no need to build a complete framework like React, there are several and they keep coming. You’d rather constitute your components built with hard work into one small framework.

For example, if you have created an image upload component, an accordion, and an image slider, these components took time to build and can be reused in future projects. Organize them well for reuse.

Design Heavily Depends on Demographics

During my development journey, I often focused on aesthetics without considering demographics. Later, several criticisms after a hard work made me realize the importance of demographics. A website aimed at young/energetic may use high saturation and multiple colors. Older users or office workers might prefer lower contrast and fewer colors.

For instance, gaming websites tend to have lots of animations, videos, larger text, and gradients, while landing pages for CRM focus on detailed information, use 2–3 colors, include screenshots, and display charts. Here are some more examples of demographics matching with design trends.

A product landing page could use Minimalist design.
A jewelry website could feature a black background with gold fonts.
A real estate website could use parallax images.
An e-commerce application might have a plain background with products displayed upfront.
An artist’s website could feature pastel colors and crayon effects.

Conclusion

It’s essential to consider both the developer’s convenience and the customer’s preferences in web development. Ignoring these aspects can lead to reduced developer productivity and dissatisfied clients.

As Alan Cooper once said, “Good design is a lot like clear thinking made visual.” By applying these lessons, you can create better user experiences and more efficient workflows.

BONUS: Minimalist Design Pattern Reduces Your Hassle

Learn more about minimalist design patterns and look out for their examples. By reducing unnecessary content, these patterns can make your designs not only simpler but also more visually appealing.

BONUS: Drink Plenty of Water

Find some triggers to remind yourself when you need to drink water, like whenever you get stuck on a bug, or whenever you added a new function. You can also use the same triggers to meditate or walk. Try this and people start noticing changes in you (I mean positive changes).

FileSystem API: Large File Client-Side Storage For Your Website

riyaz7us — Mon, 31 May 2021 12:47:52 +0000

My client asked me to provide 'download' option on their video, just like native apps, where the video can be saved but would only be accessible to the specific app.

I finally stumbled upon FileSystem API, which allows sandboxed storage where the website will be given a specific storage space (just like how a virtual disk works).

I started testing my luck with a small video file. Two links that helped me the most were HTML5 Rocks and StackOverflow

I created the following function that requests FileSystem API from the browser:

initFileSystem() {
  //Possible ways to access filesystem
  window.requestFileSystem =
    window.requestFileSystem || window.webkitRequestFileSystem;

  //Define maximum size to allocate (I set it to 500MB), Set callback and an error handler
  window.requestFileSystem(
    window.TEMPORARY,
    500 * 1024 * 1024,
    onInitFs,
    errorHandler
  );

  function errorHandler(e) {
    console.log("Error: " + e);
  }

Then I created the following callback function that creates a video (getfile). I fetched the video using XHR and saved it as a blob using FileWriter.

//Callback function
function onInitFs(fs) {
  _fs = fs;
  saveVideo(fs);
}

function saveVideo(fs) {
  //Creates file named video.mp4
  fs.root.getFile(
    "video.mp4",
    { create: true, exclusive: true },
    //Writes file after fetching
    function (fileEntry) {
      fileEntry.createWriter(function (fileWriter) {
        fetchResource(fileWriter);
      }, errorHandler);
    },
    errorHandler
  );
}

//Fetches video using XHR
function fetchResource(fileWriter) {
  var xhr = new XMLHttpRequest();
  xhr.responseType = "arraybuffer";
  xhr.open("GET", "http://example:com/video.mp4", true);

  //Convert Video To Blob
  xhr.onload = function (e) {
    if (this.status == 200) {
      var bb = new Blob([this.response]);
      fileWriter.write(bb);
    } else {
      console.log(this.status);
    }
  };
  xhr.send();
}

Finally, I created an HTML5 video player and appended the video blob as URL.

<video id="ourVideo" controls=""></video>

Note: Create the same initFileSystem function for playing video

function onInitFs(fs) {
  _fs = fs;
  playVideo(fs);
}

function playVideo(fs) {
  //Fetches file from filesystem
  fs.root.getFile(
    filename,
    {},
    function (fileEntry) {
      console.log(fileEntry);

      document.querySelector("#ourVideo").src=fileEntry.fullPath;
      fileEntry.file(function (file) {
        var reader = new FileReader();
        reader.onloadend = function (e) {
          document.querySelector("#ourVideo").play();
        };
        reader.readAsText(file);
      }, errorHandler);
    },
    errorHandler
  );
}

Here, fileEntry.fullPath creates a filesystem url (filesystem:http://example:com/temporary/video.mp4) to fetch video from FileSystem.

Unfortunately, FileSystem is only supported by a few Chromium based browsers (Edge, Chrome, Chrome for Android, Opera, Samsung Internet) and is no longer standardized by W3C.

I hope that chrome would keep it afloat and other browsers (Firefox, Safari) would implement the same or provide an alternative.

Static Nuxt app with PWA?

riyaz7us — Sat, 08 Aug 2020 15:46:35 +0000

I've seen that I can build nuxt apps in SPA/Universal mode with PWA features. Amazingly I can also generate static pages using 'nuxt generate' command.

However, I don't find any option to generate static pages with PWA as a plus. I want to know if it's possible. If yes, then how?

Edit: I figured out that PWA wasn't working because of absence of SSL. Otherwise, it's fine with any mode.

Anyone who worked with Wordpress as well as Laravel?

riyaz7us — Sun, 22 Dec 2019 20:50:35 +0000

Hi, I am an intermediate developer who has been working with wordpress.

I have been struggling with different issues like coding structure and database interaction with wordpress.

However, I got to know that laravel provides a better pattern and structure when compared to wordpress. can you show me the differences that make laravel better?

Cannot filter posts by ACF relationship values

riyaz7us — Fri, 13 Dec 2019 20:37:17 +0000

The question belongs to Wordpress and Advanced Custom Fields.

I have created two post types i.e., 'courses' and 'universities'. In courses, I created a relationship 'related_university' that connects courses to universities. However, I could not filter my courses by relationship values (title or any other field).

the following method works for me when I print the title of the related university:

$result[] = array(
"id" => get_the_ID(),
"title" => get_the_title(),
"rel_university_name" => get_field("related_university")[0]->post_title,
);

However, I get no results when I use the same method to filter my posts by the title:

$args['meta_query'][] = array(
'key' => get_field('related_university')[0]->post_title,
'value' => $related_university_title,
'compare' => 'LIKE'
);