Laur IVAN

Change the File Extension in Typescript – Using Path

Posted by in Software, Tutorial

Following from my previous post, I’ve updated the function to use only the path module. Now, the code looks like:

I’ve updated the workflow presented previously to: isolate the dir, ext and root components of the path replace the ext with the new extension return the normalized version of the composed path Now, our function accepts complete paths, not only filenames. Note: The path.normalize() function does NOT calculate the absolute path. It only changes the path separators. A little experiment: If you find this post and ad below useful,…read more

Angular 2
Refresh Bound Variables from Callback

Posted by in Software

TL;DR: Use ChangeDetectorRef‘s detectChanges() at the end of your callback code. While developing my electron.js app, I’ve had the following workflow: I have an input element and a button The input element is capable of editing a path The button triggers a File Open dialog

The problem I had was the showOpenDialog() accepts a callback and I couldn’t get the input field to update once the user has picked a file. Fortunately, the smart angular developers have thought of this situation too and the solution is quite simple. You…read more

Make Electron Work with Sqlite3

Posted by in Software, Tutorial

The other day I tried to integrate knex with a SQLITE3 back-end. Unfortunately, the instant I’ve tried to instantiate knex, I’ve got a lot of errors. After getting rid of them, I found that I can’t get sqlite3 to work at all, even though I’ve checked the installation and it was OK (got the binary downloaded and even rebuilt it). Uncaught Error: Cannot find module ‘/…/node_modules/sqlite3/lib/binding/node-v51-darwin-x64/node_sqlite3.node’ So, here are the steps that I did to make it work: install electron-rebuild

install sqlite3 using npm

rebuild electron with sqlite3….read more

Make Electron work with Knex.js

Posted by in Software, Tutorial

To make my life easier (and because I hate writing SQL statements), I thought of installing an ORM. After some search, I’ve decided to use knex. Unfortunately, the moment I integrated it into my app, webpack started generating errors like: ERROR in ./~/knex/lib/dialects/maria/index.js Module not found: Error: Can’t resolve ‘mariasql’ in ‘/…/node_modules/knex/lib/dialects/maria’ @ ./~/knex/lib/dialects/maria/index.js 59:11-30 @ ./~/knex/lib/dialects ^\.\/.*\/index\.js$ @ ./~/knex/lib/index.js @ ./~/knex/knex.js @ ./src/main.ts and warnings like: WARNING in ./~/knex/lib/seed/index.js 150:11 Critical dependency: the request of a dependency is an expression Not nice! To get rid of the errors I…read more

Electron App
Use SCSS, Luke!

Posted by in Project Management, Software

Traditionally, I’ve been a LESS supporter. The way it does mixins for example seems to me more intuitive. However, I noticed that my go-to framework (bootstrap) is now doing SASS-first and then LESS. So, one adapts… and the option in angular-cli makes things less painful. What was painful was to convert a bunch of LESS code to SCSS :/ Here are some findings relative to using SCSS in my application: Webpack does it nicely via the sass-loader You can use relative, absolute and ~ paths to refer to other resources….read more

Electron and WebPack – Live Reloads

Posted by in Software, Tutorial

I wanted to create a skeleton with Electron, Angular 2, capable of live reload while in development. I’ve settled on the following framework: Electron (d’oh!) Angular 2 Angular CLI (because it makes it easy to generate boilerplate code) SASS (SCSS in fact) Webpack 2 and Babel After a lot of trial and error (and also scouring the internet for solutions), I think I reached a nice-ish solution. Following articles outline the steps and functionalities I implemented. Why angular-cli Is it alive? Use SCSS, Luke! Adding Webpack Electron-ize Send Menu Command…read more

Electron App
Is It Alive?

Posted by in Software, Tutorial

TL;DR: Yes, but it’s limping badly. Now that I’ve created the angular app, I wanted to find out if I could develop an Electron app without actually adding the Electron dependency yet. My naive findings are: You can develop any ui-related bit I could not implement actual business logic. This is due to the fat that browsers don’t have access to some things like fs. If you want to add more functionality (e.g. debug vs release options), you need webpack. A little experiment: If you find this post and ad…read more

Electron App
. Why angular-cli?

Posted by in Software, Tutorial

The decision has been made for me since I’m new to Angular in general and the CLI offers a package deal particularly where code generation and initial package management is concerned. There’s also the boon of webpack, which is used as engine. Although the balance tilts heavily in favour of using angular-cli, this package also has a bunch of flaws, apparent to me also because of the end target: No multiple webpack configs. Angular CLI only has an optimised configuration and doesn’t expose hooks to be able to alter it…read more

Debug Javascript – Some Methods

Posted by in Software

These days I’m trying to tweak a 3rd-party framework and I’m missing stuff sometimes (e.g. injected data). Below are some methods I’ve found useful when debugging the script. console.log – print all things Object inspection – see your object’s content HTH, A little experiment: If you find this post and ad below useful, please check the ad out :-)

Debug Javascript – Object Inspection

Posted by in Software

Many times, you have objects where you may or may not know their content. If you’re running in the browser, life is easy as you can pause the code and inspect the object. at command line is a bit more annoying. In this case, at least for the first run, you can execute something like:

where obj is your mystery object. HTH, A little experiment: If you find this post and ad below useful, please check the ad out :-)