programming

Tree shaking with webpack settings

Posted February 7, 2018 by admin

Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset. Its such a great tool for web development. One of the great feature it offers is the ability to tree shaking the javascript and CSS bundles with the right plugins.

For js tree shaking. I have used UglifyJsPlugin. Below is how I got the plugin works in my webpack.config.js file.

new webpack.optimize.UglifyJsPlugin({
  compress: { warnings: false }
}),

new webpack.optimize.UglifyJsPlugin({

compress: { warnings: false }

}),

For css tree shaking. I have used PurifyCSSPlugin. Below is how I got the plugin works in my webpack.config.js file.

new PurifyCSSPlugin({
  // Give paths to parse for rules. These should be absolute!
  paths: ['./ng2app/index.ejs'].concat(glob.sync('./ng2app/components/**/*.html')),
  // Will minify CSS code in addition to purify.
  minimize: true,
}),

new PurifyCSSPlugin({

// Give paths to parse for rules. These should be absolute!

paths: ['./ng2app/index.ejs'].concat(glob.sync('./ng2app/components/**/*.html')),

// Will minify CSS code in addition to purify.

minimize: true,

}),

In order for PurifyCSSPlugin, make sure the above code goes after ExtractTextPlugin. See below

new ExtractTextPlugin({
  filename: "css/[name].bundle.css",
  disable: false,
  allChunks: true
}),
// Make sure this is after ExtractTextPlugin!
new PurifyCSSPlugin({
  // Give paths to parse for rules. These should be absolute!
  paths: ['./ng2app/index.ejs'].concat(glob.sync('./ng2app/components/**/*.html')),
  // Will minify CSS code in addition to purify.
  minimize: true,
}),

new ExtractTextPlugin({

filename: "css/[name].bundle.css",

disable: false,

allChunks: true

}),

// Make sure this is after ExtractTextPlugin!

new PurifyCSSPlugin({

// Give paths to parse for rules. These should be absolute!

paths: ['./ng2app/index.ejs'].concat(glob.sync('./ng2app/components/**/*.html')),

// Will minify CSS code in addition to purify.

minimize: true,

}),

Another nice feature that I love to use in my webpack config is the ability to control how chunks should be sorted before they are included to the html via chunksSortMode option of html-webpack-plugin

new HtmlWebpackPlugin({
  title: 'My Dashboard (Webpack)',
  template: './index.ejs',
  hash: true,
  minify: {
    collapseWhitespace: true
  },
  chunksSortMode: function (a, b) {  //alphabetical order
    if (a.names[0] > b.names[0]) {
      return 1;
    }
    if (a.names[0] < b.names[0]) {
      return -1;
    }
    return 0;
  }
}),

new HtmlWebpackPlugin({

title: 'My Dashboard (Webpack)',

template: './index.ejs',

hash: true,

minify: {

collapseWhitespace: true

chunksSortMode: function (a, b) { //alphabetical order

if (a.names[0] > b.names[0]) {

return 1;

}

if (a.names[0] < b.names[0]) {

return -1;

}

return 0;

}

}),

To control the order of the chunks, I name them with the number at the front of that name. For example

entry: {
  '1bootstrap': bootstrapEntryPoints.prod,
  '2core': [
    './ng2app/polyfills.ts',
    './ng2app/vendor.ts'
  ],
  '3app': [
    './ng2app/main.ts'
  ].concat(glob.sync('./ng2app/components/**/*.scss'))
},
output: {
  path: outputPath,
  //publicPath: './',
  filename: 'js/[name].js',
  chunkFilename: 'js/[id].chunk.js'
},

entry: {

'1bootstrap': bootstrapEntryPoints.prod,

'2core': [

'./ng2app/polyfills.ts',

'./ng2app/vendor.ts'

'3app': [

'./ng2app/main.ts'

].concat(glob.sync('./ng2app/components/**/*.scss'))

output: {

path: outputPath,

//publicPath: './',

filename: 'js/[name].js',

chunkFilename: 'js/[id].chunk.js'

Any feedback, please leave your comments and I’ll get back to you ASAP.

Portfolio Press gallery introduction text

Posted May 25, 2016 by admin

Portfolio Press has always been one of my favorite free themes in term of showcasing any work portfolio or just normal gallery of pictures.

However, in some cases we would love to have a little introduction paragraph or some kind of summary of what this gallery page we am showing is about.

It’s very straight forward to show the gallery but whatever content we composed through WordPress admin doesn’t really get used at all.

I have had a look around on google and even portfolio press forum, and I found someone else also have the same issue reported. However, it wasn’t really the solution I was looking for.

Therefore I come up with my solution.

First of all, I didn’t want to touch the original portfolio theme files for numerous reasons:

Our changes in those original files will get swiped out when the theme gets updated.
We might break some functions because we am not fully aware of everything inside the theme.

As reasons above, we’re better off to create a child theme which inherits from the portfolio press theme and make changes in the child theme files instead. Click here to find out why and how to create a child theme from Portfolio Press.

Once we have child theme ready, create a sub folder called ‘templates’ as image below

Portfolio Press Child Theme Folder Structure

Next, create a copy of file called ‘full-width-image-gallery-formats.php‘ from the original Portfolio Press theme folder and move it into the themes folder created as above.

Then we need to add php code as below

<div id="post-<?php the_ID(); ?>">
<?php the_content(); ?>
</div><!-- #post-<?php the_ID(); ?> -->

<?php the_content(); ?>

</div>

right after

<div id="content" role="main">

1	<div id="content" role="main">

and before

<?php if ( $portfolio->have_posts() ) : ?>

1	<?php if ( $portfolio->have_posts() ) : ?>

That’s it. After this change, we now can reused the content of the page to show some introduction text or whatever content we want before the images gallery.

Let me know what your thoughts are on this. Hope this help someone 🙂

How to translate the whole web page

Posted June 30, 2016 by admin

Google translate is one of the best tool for translating any words in one language to another language.

What about translating the whole web page? To do that, we can easily achieve with Chrome browser.

Following the steps below to translate the whole web page:

Browse to any website that requires translation. For example, we can go to http://vnexpress.net/.
Right click any space on the page, and select “Translate to English” option.
Wait for a few second, a little popups window will appear near the URL bar.
Click on “Options” link.
Select the language from and to, then hit “Done” button.

Hope this would help someone 🙂

Binding for Converter Parameter

Posted May 23, 2016 by admin

I have come across the situation where I need to do some Binding for ConverterParameter. Something like

<Button Templat="{StaticResource DeleteButton}"
x:Name="BtnDelete" Width="15" Height="15"
Click="eleteSignal_Click"
Visibility="{Binding Path=Signal,Converter={StaticResource ShowDeleteServiceConverter}}" />

<Button Templat="{StaticResource DeleteButton}"

x:Name="BtnDelete" Width="15" Height="15"

Click="eleteSignal_Click"

Visibility="{Binding Path=Signal,Converter={StaticResource ShowDeleteServiceConverter}}" />

I have done lots of research, and I found out that its impossible to do binding for ConverterParameter.
So I came up with the Solution. I created the Converter but inherited from FrameworkElement

public class ShowDeleteServiceConverter : FrameworkElement, IValueConverter

In the converter class, I created a dependency property

public static readonly DependencyProperty SpotsListProperty = DependencyProperty.Register("SpotsList", typeof(IList), typeof(ShowDeleteServiceConverter), null);
public IList SpotsList { get {return (IList)GetValue(SpotsListProperty);} set {SetValue(SpotsListProperty, value);} }

1 2	public static readonly DependencyProperty SpotsListProperty = DependencyProperty.Register("SpotsList", typeof(IList), typeof(ShowDeleteServiceConverter), null); public IList SpotsList { get {return (IList)GetValue(SpotsListProperty);} set {SetValue(SpotsListProperty, value);} }

Now, I can do the Binding as usual

<UserControl.Resourses>
<Header:ShowDeleteServiceConverter
x:Key="ShowDeleteServiceConverter"
SpotsList="{Binding ScheduleViewModel.BookingDetailsItems, Source={StaticResource BookingModule}}"
</UserControl.Resourses>

<UserControl.Resourses>

<Header:ShowDeleteServiceConverter

x:Key="ShowDeleteServiceConverter"

SpotsList="{Binding ScheduleViewModel.BookingDetailsItems, Source={StaticResource BookingModule}}"

</UserControl.Resourses>

And

<Button Templat="{StaticResource DeleteButton}"
x:Name="BtnDelete" Width="15" Height="15"
Click="eleteSignal_Click"
Visibility="{Binding Path=Signal,Converter={StaticResource ShowDeleteServiceConverter}}" />

<Button Templat="{StaticResource DeleteButton}"

x:Name="BtnDelete" Width="15" Height="15"

Click="eleteSignal_Click"

Visibility="{Binding Path=Signal,Converter={StaticResource ShowDeleteServiceConverter}}" />

It might not be the best solution, but it works for me so far. If you have any idea, feel free to drop me comments.

Online Terminals

Posted April 28, 2016 by admin

Looking for a online terminals to learn new programming languages?

There are times when we just wanna test or learn something quickly without going through all the hassles to set up the environments; we can definitely use Online terminals.

Online terminals is extremely useful. It provides lots of different terminals.

Whether you are professional developer or beginner just trying to learn how to code, I recommend to give this one a go. You will see how extremely convenient and useful it is.

Work portfolio