An Electron.js application used to reduce the file size of an image and optimize it for web applications and sites

    Recently I was asked by my manager to start looking into a new JavaScript library for a possible application development tool (for those of you who don't know, he is not a fan of Microsoft products and has been attempting to move further way from developing with them, preferring JavaScript and Golang). This was an amazing learning opportunity so I jumped at the chance. I had my reservations when I first started but as I worked my way through my first project, I quickly realized that this may be the answer to our aging technologies in the company. Electron.js offers an easy way to build out desktop applications using the web development technologies that you already know. On top of that, utilizing NPM you can utilize any number of available JS libraries to add to your application.

    ImageShrink is an electron.js application used to reduce the file size of an image and optimize it for web applications and sites. This particular application can be built following a tutorial created by Brad Traversy, an expert in application development who has an amazing YouTube channel, and offers courses via Udemy. My approach in using tutorial videos is this and it may work for you as well. I watch the relevant chapters all the way through, taking detailed notes and noting important milestones. Then, I develop the project off of memory. If I should have any issues, I research the issue and correct my code. Then I will re-watch the section and evaluate my process against the video. I feel you get more out of the material if you do just a little more then follow along. This may not work for everyone but this is my preferred learning style. Anyway, back to the app…

    The way the application works is that you choose a file, either a jpeg or png. Then using the slider you choose the percentage of quality that you wish to reduce the image to (default is 50%) The rule is the lower the quality, the lower the file size. When you click on ‘Resize’ the image is manipulated and saved in a predetermined directory. 

       The project was very enjoyable to build and showed me a new way to develop desktop applications. Previously I worked with PWA (Progressive Web Application) which are web applications that can be installed to the desktop and ran offline with limited functionality. These applications are not bad but are not true desktop applications. Electron.js is an easy to learn library that anyone can use to build desktop applications using the the same web technologies (HTML, CSS, JS, Bootstrap, React, etc.) to create fully functional applications that can be distributed to anyone. 

    I am currently working on developing my own application and hopefully will be able to create a tutorial that I can release here or on YouTube. Stay tuned for updates on that…