Working SCSS Sourcemaps with Angular 6

Configuration, Front-End, Scripting

If you are an Angular developer, you’ve probably noticed that since Angular 2+ they break with almost every release. After wasting many hours in futile attempts to fix them and going through numerous report on Angular GitHub page I finally got to a setup that works.

Fixing dependencies (vendor) sourcemaps

  1. Open angular.json and find targets->build->configurations
  2. Add a new configuration after production. Name it serve. 
    "configurations": {
  "production": {
    ...
  }
  "serve": {
    "extractCss": true
  }
  3. Change serve task to use the new config by changing targets->serve->options 
    "options": {
  "browserTarget": "PROJECT_NAME:build:serve"
  4. Open package.json and update start scripts 
    "scripts: {
    ...
    "start": "ng serve --source-map --vendor-source-map --ssl",
}
  5. Run your project with npm start. Inspect your markup. You’ll see dependencies SCSS using the source maps and showing correct paths.

Continue reading Working SCSS Sourcemaps with Angular 6 →

Better Looking Mac Terminal

Configuration, Uncategorized, ,

Mac Terminal comes with several color schemes but non catches the eye like SMYCK. The pastel colors it comes with are easy on the eye and you’ll appreciate the theme the more you use it.

  • Download the theme ZIP archive.
  • Install it by running Smyck.terminal
  • Open Terminal → Preferences from any Terminal window
  • Select Profiles tab and scroll to Smyck theme at the bottom.
  • Click on Default at the bottom. Close and reopen all terminal windows.

Continue reading Better Looking Mac Terminal →

Replacing Command Prompt with Git Bash

Configuration, , ,

Windows built in Command Prompt is ugly and dated. It also lacks proper Git integration. Git for Windows comes with a configured Git Bash you can use instead. Combine that with Mintty and you now have a full featured themeable terminal rivaling the built in Mac OS Terminal.

Git Bash

In the Git for Windows installer choose Use MinTTY when asked to configure the default emulator. This will allow you to apply a custom theme. In addition:

Adding predefined actions to Firefox 57 address bar

Configuration, ,

One of the first things I’ve noticed in Firefox 57 was the Pocket button in the address bar and the additional actions in the menu on the right. Then, while using Pocket I right clicked and selected Remove from Address Bar. Good, this removed Pocket from there but, ugh, how do I return it back? And what about placing other buttons will I use often like the new Take a Screenshot action?
Firefox Address Bar actions

Turns out there isn’t a way to configure the predefined actions through the UI or at least I didn’t find it. Good news is that since this is Firefox you can always use about:config and find the setting controlling those actions. The setting you need in this case is called browser.pageActions.persistedActions.
Continue reading Adding predefined actions to Firefox 57 address bar →

Free Bitcoins without mining

Cryptocurrencies, , ,

With the rise of Bitcoins, Ethereum and cryptocurrencies everyone are talking about mining again. Video cards price has skyrocketed in the last 2 months.

If you are late for the mining ride, you don’t have the knowledge or time to build your own mining rigs or you just don’t like risking it there are others risk free ways to obtains cryptocurrencies.

You can use faucets. Faucets are websites or mobile applications giving you small amounts of free bitcoins or alt coins in exchange for watching videos, viewing adds, playing games. After solving a captcha you’ll receive a varying reward in satoshis. One satoshi is hundredth of a millionth BTC. It’s quite spammy in the form of ads, so be prepared in advance.

Rewards are dispensed in predetermined intervals of time varying from faucet to faucet. In order to get your coins you’ll need to visit the faucet a couple of times and accumulate a predefined value before they are sent to your wallet. This helps faucets reduce the transfer (mining) fees for sending you your coins.

All you need to do is:

Vuejs Live Templates for Webstorm

Front-End,

IntelliJ IDEA (Webstorm) comes with many live templates but it has none for Vuejs 2.
I’ve created a few simple templates to use for my projects. All the templates assume you’re using a transplier for ECMAScript 2015. Vue components template is setup for usage with SASS but you can easily modify it and use Stylus instead.

You can find the templates at idea-vue-templates.
Continue reading Vuejs Live Templates for Webstorm →

Angular CLI serve and base href

Front-End,

Several months have passed since Angular 2 was released. Then came Angular CLI promising easier scaffolding and better integration. It’s still in beta and as expected there are things to improve.

One thing that confused me was ng serve and the lack of <base href> support. It’s easy when using ng build with the -bh flag and same feature for serve would’ve been great. Unfortunately the CLI team doesn’t plan on adding base href support 🙁

The project I’m working on relies on multiple other applications and APIs served from other folders. Having base href different than root during development is a must. The only way I found to make the whole setup work was by proxying the needed folder to root.

  • In your index html add the needed <base href>. 
    <base href="/project/">
  • Create a new file at root called proxy.conf.json and paste: 
    [
    {
        "context": [
            "/project"
        ],
        "target": {
            "host": "localhost",
            "protocol": "http:",
            "port": 4200
        },
        "secure": false,
        "pathRewrite": {
            "^/project": "/"
        }
    }
]
  • Modify your serve command. 
    $ ng serve --proxy-config proxy.conf.json /project/ --open true

    I set this in package.json start script. After that I can use npm start instead of remembering ng serve and all the parameters.

How to Customize Bootstrap – Dos and Don’ts

Front-End,

Twitter Bootstrap 3 is great for creating responsive websites. It comes with many components and features that are easy to use and has a great documentation. That’s not always enough. Sometimes you need additional JavaScript functionality or custom CSS. You might even want to add additional jQuery plugins. Sooner or later you’ll hit an issue with some plugin or your code breaking stuff.
In this articles I’ll share the common issues I’ve seen in bootstrap based projects and ways to avoid them when customizing the framework.
Continue reading How to Customize Bootstrap – Dos and Don’ts →

Using createjs WebAudio with Phonegap (Cordova)

Hybrid Applications, , , , ,

One of the things I hate about Phonegap (Cordova) is the audio support. Every time I worked on a project that required heavy audio usage not a single plugin worked fine

Cordova Media plugin is good for recording audio but when you try to play multiple audio files it leaks into memory and the OS stops your app. It also tends to break after using the recording feature. I’ve also tried the Native Audio plugin and although it’s much better it has its issues with features not working.

The createjs team released a new soundjs plugin called CordovaAudioPlugin. It did work for some time but because it is using Cordova Media it had the same issues. With newer version of the Cordova Media plugin it just causes your app to crash (04.2016, soundjs version 0.6.2).

Honestly, with the WebAudio browser support, I don’t think we need plugins for playing audio. WebAudio does the job nicely for mobile and desktop.
Continue reading Using createjs WebAudio with Phonegap (Cordova) →