DEV Community: Emmax

Free Figma UI designs for frontend practice.

Emmax — Mon, 25 Jan 2021 11:56:54 +0000

Budding frontend engineers are always looking for designs to practice their frontend skills. Was going through the figma community page and found some amazing free UI designs from talented and awesome designers from the Figma community.

Enjoy.

Beautiful landing page sections for a startup app

Go to design

Minimal sleek portfolio design

Go to design

Landing page design

Go to design

Food spin interaction design

Go to design

Website of architects

Go to design

Finance landing page UI kit

Go to design

Registration onboarding design

Go to design

Dark landing page design

Go to design

Analytics — landing page design

Go to design

Food delivery app design

Go to design

VPN service landing page

Go to design.

I hope you find them helpful... Feel free to go through the Figma Community Page to find more.

Building a custom React image upload widget with progress bar.

Emmax — Wed, 13 Jan 2021 05:48:19 +0000

In this article, I'll be walking you through how to create a simple custom react file upload widget with a progress upload bar.

Prerequisites

This article assumes some previous knowledge of basic React and making HTTP requests.

For the purpose of this article, I have created a very basic API to handle the file upload on the server using Nest.js and deployed it to Heroku. Here's the endpoint where we'll be making our POST request to - https://nestjs-upload.herokuapp.com/ Uploaded files are automatically deleted every 5mins and I have implemented rate-limiting so the upload service can survive public usage for testing.

Setup a react project using

yarn create react-app upload-widget // NPM works too

Feel free to clean up the setup however you like and remove whatever files you don't need.

The API call

Install Axios by running

yarn add axios

Proceed to create a file called upload.js can add the following code to it.

import axios from "axios";

const uploadFile = async (body, setPercentage) => {
  try {
    const options = {
      onUploadProgress: (progressEvent) => {
        const { loaded, total } = progressEvent;
        const percent = Math.floor((loaded * 100) / total);

        if (percent <= 100) {
          setPercentage(percent);
        }
      }
    };

    const { data } = await axios.post(
      "https://nestjs-upload.herokuapp.com/",
      body,
      options
    );

    return data;
  } catch (error) {
    console.log(error.message);
  }
};

export default uploadFile;

What's going on?

For the most part, we are simply making a POST request to an endpoint that's supposed to process our request and send back some response... The part that might seem unfamiliar is the

onUploadProgress: (progressEvent) => {
  // Do whatever you want with the native progress event
}

onUploadProgress allows handling of progress events for uploads. There is a onDownloadProgress which I believe does the same thing but for downloads.

const { loaded, total } = progressEvent;

We are destructuring loaded and total from the progressEvent parameter that we are given access to, where loaded refers to how much has been uploaded and total is the total size to be uploaded

const percent = Math.floor((loaded * 100) / total);

if (percent <= 100) {
  setPercentage(percent);
}

And finally, we are using some basic maths to calculate the percent and calling a setPercentage function which will be passed in as an argument from wherever we call our upload function.

That wraps up the first part of the task - writing the upload logic. It's time to implement the React component that will use this upload function.

I'll just dump the code then proceed to explain what's happening.

import React, { useState } from "react";
import uploadFile from "./upload";

function UploadWidget() {
  const [percentage, setPercentage] = useState(0);

  const handleFile = async (e) => {
    try {
      const file = e.target.files[0];
      const formData = new FormData();
      formData.append("image", file);

      await uploadFile(formData, setPercentage);
      setPercentage(0);
    } catch (err) {
      setPercentage(0);
      console.log(err);
    }
  };

  return (
    <div>
      <p>Click here to browse</p>
      <input onChange={handleFile} type="file" />
      <p>{percentage} %</p>
    </div>
  );
}

export default UploadWidget;

Breakdown

We've initialized a piece of state to keep track of the upload percentage which would be updated when the onUploadProgress event is fired because we passed the setPercentage function into our upload function. Below is a code sandbox of a working implementation with the CSS styling included.

I hope you found this helpful. Share your thoughts in the comments section.

PS

The goal was to keep this short and focused on the onUploadProgress event and how to track the upload progress, you can build up on this by adding file type and size checks and restructuring the code into a nice little reusable useUpload hook for your project(s).

Fear Not!!! Here's why DIY No-Code Services will never replace developers.

Emmax — Tue, 30 Jun 2020 18:26:17 +0000

Do not be afraid; our fate cannot be taken from us; it is a gift. — Dante Alighieri

The birth of No-Code Softwares

The power to create tech solutions has stayed with software engineers for years. Regardless of the industry, whenever a brand needed a tech solution implemented they came to us, the ones who could build anything from an empty file, I'm sure you sense the pride in my tone . But over the last few years, the use cases for software solutions and the tools required to implement them have gotten more complicated, which has led to the need for larger software teams, longer development timelines, and all these have contributed to making software solutions more expensive to build.

For small to medium-sized brands paying a software team millions to build a service for them might not be a good idea, hence brands and businesses began the search for software solutions that were fast to get up and running and were cheaper and of course innovators listened to their requests.

Fast forward to recent times we have seen a deluge of these so-called no-code platforms allowing pretty much anyone to set up services for various industries with little or no help. We have witnessed the release of some very impressive no-code solutions - I mean these days a seller can go from screaming we are still taking orders on their WhatsApp stories to having a fully functional eCommerce solution in a couple of hours without contacting a developer.

Combine that with statements like "The future of coding is no coding at all." - Chris Wanstrath the fear ought to kick in. Also, in case you were wondering why we should care what Chris thinks he is a former CEO at GitHub.

In the middle of this invasion is there any hope for developers?

The bootstrap paradox

The bootstrap paradox is a hypothetical causal loop in time travel in which one event causes a second, which was actually the cause of the first. Netflix's Dark does a good job of explaining this.

Yeah I know you are wondering what time travel concepts have to do with any of this but bear with me. Essentially as developers, our job is to build solutions for the future. Developers built these no-code platforms in the first place and in doing so we also secured the relevance of our own existence.

Companies who rely on these no-code solutions will continue to request more features that better suit their needs and solves their problems and developers would always be there to ensure that these features and updates are implemented and hence an endless cycle is created.

There would also be companies who need to solve bigger unique problems outside the capabilities of these no-code services, and without an understanding of the complex algorithms happening behind the scenes you can't build tools and services that either simplify or eliminate their problems.

These platforms exist because of brilliant developers, and brilliant developers are always working on new and better ways to solve problems so upcoming developers just learning HTML and CSS should not be scared of getting replaced but instead should know they just have to do more to separate themselves from the average group.

“You never change things by fighting the existing reality. To change something, build a new model that makes the existing model obsolete.” —Buckminster Fuller

Stay Safe.

Lessons learned from my journey as a developer in 2019

Emmax — Tue, 17 Dec 2019 23:09:34 +0000

DISCLAIMER

I'd like to say I am not a writer neither am I a tech blogger, I'm just your !average developer who thought it would be helpful to share some of the things I learned during my journey as a developer in the past year and my plans for 2020. I was also too lazy to proof-read this so sorry for any typos encountered.

Here goes nothing. Below is my list of top insightful lessons learned as a developer in 2019

Experts struggle

Senior Engineer - The job title we all aim for when we start out. I soon realized that the picture I had painted in my head of the expert developer was nothing but a myth. Its to easy to see other devs on Twitter and the internet as a whole with a bunch audience and think they have it all figured out, but the truth is no one shares their struggles, no one tells you how hard it is, just that they got invited to speak at a conference on the moon!.

Taking a break could sometimes give clarity

As someone who spent a long time learning to code in isolation I know how quickly and easily you can lose your mind during those frustrating moments... I'm looking at you JS Closures.
I have had solutions come to me in the weirdest places... some you don't even wanna hear, but all I needed to do was leave my desk.

Having a side project is key

Once you get that job it's easy to get bored especially if you are stuck repeating the same things daily. I found that having a side project with no rules and endless possibilities sometimes reminded me of how fun it is to code with no deadlines hanging over your head.

Nothing replaces strong fundamentals

Get comfy with the fundamentals before moving to the more advanced topics!!!. There's usually all this pressure from the community to learn or jump on the hottest new framework but the simple truth is you are only setting up yourself to become a mediocre developer. Frameworks like jQuery, React and the others are not replacements for Javascript, they are JS based!, Bootstrap is not a replacement for learning CSS, I can go on but you get the gist.

Tutorials can only take you so far

The term Tutorial Purgatory is not a new concept in the programming world. We've all been there, that sweet comfy zone where we inject ourselves with a false sense of progress and understanding watching different courses on the same concepts because we are too scared to take that leap and start a project. Which brings me to my next lesson.

You don't need to know how to start

You don't need to have it all figured out at the start of a project. You just start and figure it out as you go!. I have started projects with absolutely no idea what I was doing. This also made me realize no software comes out perfect in the first release, that'why there are versions and different iterations of the features.

You're good enough

Imposter Syndrome is a b++ch... One of the biggest realizations I had this past year was that someone somewhere who isn't nearly as good as you are has a better job with a higher pay doing the exact same things you know... Leave your bubble and start applying to those jobs... Like I tell my folks they'll tell you the exact same thing they'll tell everyone else at the interview we'll get back to you. So there's nothing at stake.

So I think that concludes the end of this whatever this is Turned out to be much longer than I anticipated. I hope this encouraged someone!... Happy Holidays.

Please share your thoughts in the comments and let me know if you'd like me to do this more in 2020 along with what you'd like me to talk about or teach. (Videos included).