Category Archives: Front-End

Front-end web development tips and articles aimed at making your life easier.

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 →

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 →

JSON vs XML

Front-End, ,

Many of you have probably wondered which format is better or which should be used. You might have even participated in a full blown nerd rage war on the matter.

Both formats are good when you want to describe a hierarchical structure.

Differences

  • XML is a markup language and is good for documents description or text documents with formatting information.
  • JSON syntax is light. It’s much easier to parse from JavaScript and that’s why it’s preferred for browser-based and Phonegap mobile applications.

So when should you use each one of them?
Continue reading JSON vs XML →

Applying CSS Styles Before Printing with AngularJS

Front-End, , ,

In a world full of fancy shining jQuery plugins one can’t simply print.

Often you’ll be using a grid JavaScript plugin or another heavy visualization component. One of the pitfalls you might experience with those components is that they don’t look nice when you try to print them. Sometimes this can’t be solved by with the dark side of the force a.k.a pure CSS.

So, what are our options?

Continue reading Applying CSS Styles Before Printing with AngularJS →

How to open FXG files?

Front-End,

Most of you, who’ve used Adobe Flex related products have probably used Flash Catalyst and the FXG format.

You can open your old FXG files with Adobe Illustrator CS 6 or Flash Catalyst CS 5.5. Unfortunately (as it happens to all Fllex related technologies these days) the new version of Illustrator (Illustrator CC) can’t open the FXG files anymore and Catalyst is discontinued since 2012. So, what happens if we’ve upgraded to Adobe CC products. How do you open FXG files from your older projects?

Well, this happened to me several days ago. After banging my head agains t the wall for a while I found this tool: http://labs.7jigen.net/2010/05/15/fxg-editor-air-app/ Continue reading How to open FXG files? →

JavaScript .Net like String formatting function

Front-End

Just a simple extend to the JavaScript String prototype which makes things much more readable 🙂

String.prototype.beginsWith = function(str) {return (this.match("^"+str)==str)}
String.prototype.endsWith = function(str) {return (this.match(str+"$")==str)}
String.prototype.format = function() {
    var s = this,
        i = arguments.length;

    while (i--) {
        s = s.replace(new RegExp('\{' + i + '\}', 'gm'), arguments[i]);
    }
    return s;
};

Example:

var str = 'Just a {0} test to {1} if things works. Really {0}, isn't it?';
alert(str.format('simple', 'see');