How to solve ‘ReferenceError: window is not defined’ when importing Vue plugin in Nuxt.JS

NuxtJS

I need to use Vue plugin named vue-flash-message in Nuxt.JS. I installed it via NPM and created file vue-flash-message.js in folder plugins.

import Vue from 'vue';
import VueFlashMessage from 'vue-flash-message';

Vue.use(VueFlashMessage);

Then I tried to run `npm run dev` to test whether the plugin works. But it doesn’t work.

The reason is the default mode of Nuxt is SSR. The variable window is only available in the browser, not on the server.

And I found the solution, I just change the file content like below:

import Vue from 'vue';

if (process.browser) {
window.onNuxtReady(() => {
const VueFlashMessage = require('vue-flash-message');
Vue.use(VueFlashMessage);
})
}

After that, it should work fine. You also apply the idea for other Vue plugins.

Vue.js 2 Cookbook

VueJS 2 Cookbook Cover

Vue.js is an open source JavaScript library for building modern, interactive web applications. With a rapidly growing community and a strong ecosystem, Vue.js makes developing complex single page applications a breeze. Its component-based approach, intuitive API, blazing fast core, and compact size make Vue.js a great solution to craft your next front-end application.

From basic to advanced recipes, this book arms you with practical solutions to common tasks when building an application using Vue. We start off by exploring the fundamentals of Vue.js: its reactivity system, data-binding syntax, and component-based architecture through practical examples.

After that, we delve into integrating Webpack and Babel to enhance your development workflow using single file components. Finally, we take an in-depth look at Vuex for state management and Vue Router to route in your single page applications, and integrate a variety of technologies ranging from Node.js to Electron, and Socket.io to Firebase and HorizonDB.

This book will provide you with the best practices as determined by the Vue.js community.

Download link for ebook: http://bit.ly/2M3I47K.

Please send a request and I will share it with you with sample code files (~300MB zipped)

How to remove “Remaining deprecation notices” while running Symfony test cases

Symfony Test

Sometime, when you run some Symfony tests, there is a lot of deprecation warning like this:

Symfony Test

Solution: Just add below code

<php>
<env name="SYMFONY_DEPRECATIONS_HELPER" value="weak" />
</php>

to your phpunit.xml (or phpunit.xml.dist)

How to use jQuery in NuxtJS

NuxtJS

Today, I will guide you how to use jquery with NuxtJS project.

  1. npm install --save jquery.
  2. Open nuxt.config.js and add:

That’s all! Hope this helpful for you!

Generate JPA Entity Script

IntelliJ IDEA Logo

I am using IntelliJ IDEA to write Java code.

It has built in script to generate POJOs class, but I want to generate JPA Entity classes. So today, I wrote a Groovy script to do it.

It saved my time and I hope it helpful to you!

Ten ways to become a better developer

  1. Read other people’s code. ☑
  2. Get someone to read your code. ☑
  3. Fix bugs before writing new code. ☑
  4. Learn a new technology. ☑
  5. Keep it stupid simple (KISS). ☑
  6. Write a blog post about your code. ☑
  7. Contribute to open source. ☑
  8. Fix it, don’t hack it. ☑
  9. Increase code coverage by 1%. ☑
  10. Leave your desk every hour.

Source: https://stephenhaunts.files.wordpress.com/2014/04/10-ways-to-be-a-better-developer.png

Note on migrating Spring Boot 1.5 to 2.0

Spring Framework Logo

1. Useful links
First of all, you should read recommended links:

2. Tips and solution for problems

  • Table ‘hibernate_sequence’ doesn’t exist

Solution: Add config spring.jpa.properties.hibernate.id.new_generator_mappings=false

  • Spring Boot 2.0 use HikariCP by default, so you should add config for HikariCP

Solution:

Add config

spring.datasource.hikari.max-lifetime={max-lifetime-value}
spring.datasource.hikari.idle-timeout={idle-timeout-value}

Note:
– Value for config must be in millisecond.
– spring.datasource.hikari.idle-timeout < spring.datasource.hikari.max-lifetime < database wait_timeout
– For MySQL/MariaDB, use query SHOW GLOBAL VARIABLES LIKE 'wait_timeout'; to get wait_timeout, this value is in second
– For example, database wait_timeout = 600 second, so I can assign value as below:
spring.datasource.hikari.max-lifetime=500000
spring.datasource.hikari.idle-timeout=400000

  • Use MariaDB driver for MariaDB instead of MySQL Driver

Solution:
Step 1: Remove MySQL Driver:
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
Step 2: Add MariaDB Driver:
<dependency>
<groupId>org.mariadb.jdbc</groupId>
<artifactId>mariadb-java-client</artifactId>
<scope>runtime</scope>
</dependency>
Step 3: Change database connection URL: change from jdbc:mysql://... to jdbc:mariadb://...

Fix error when install npm package as global package

NodeJS

Today, I will guide you to fix error when install npm package as global package.
I ran below command to install npm package as global package but installation was failed.
Command: sudo npm install -g electron
Error will look like:
Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/electron/.electron'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `node install.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/ubuntu/.npm/_logs/2018-03-18T10_25_47_793Z-debug.log

And this option saved my time:
--unsafe-perm=true --allow-root

I hope this post is helpful.

Keep database connection on connecting to MySQL/MariaDB using SQLAlchemy

Python 3

You want the database connection will be keep on connect to MySQL/MariaDB, just use pool_recycle parameter in method create_engine().
Example:
create_engine(db_url, pool_recycle=1)

pool_recycle

this setting causes the pool to recycle connections after the given number of seconds has passed. It defaults to -1, or no timeout. For example, setting to 3600 means connections will be recycled after one hour. Note that MySQL in particular will disconnect automatically if no activity is detected on a connection for eight hours (although this is configurable with the MySQLDB connection itself and the server configuration as well).

End.

During handling of the above exception, another exception occurred

Python 3

Old code:

New code:

Sự khác biệt giữa abstract và interface?

Object Oriented Programming

Nếu bạn là lập trình viên thì chắc chắn bạn phải biết đến OOP (Object Oriented Programming – lập trình hướng đối tượng). Và câu hỏi mà mình sẽ trả lời trong bài viết này chắc chắn đã/đang hoặc sẽ là câu hỏi dành cho bạn.

  1. Khái niệm

Abstract class là một class cha cho tất cả các class có cùng bản chất. Bản chất ở đây được hiểu là kiểu, loại, nhiệm vụ của class.

Interface là một cách thức hoạt động mà bạn có thể thêm vào bất kì class nào. Các class này có thể có cùng bản chất hoặc không. Cách thức hoạt động ở đây không đồng nghĩa với phương thức (hoặc hàm).

  1. Sự khác biệt
  • Abstract class có đầy đủ tính chất của một class, ngoại trừ việc nó không cho phép tạo instance, nghĩa là sẽ không thể khởi tạo được các đối tượng thuộc một abstract class. Interface không phải là class.
  • Abstract class không cho phép đa kế thừa (multiple inheritance), nghĩa là một sub-class chỉ có thể extends một class/abstract class. Interface cho phép đa kế thừa, nghĩa là một sub-class có thể implements nhiều interface để bổ sung cách thức hoạt động của chính nó.
  • Abstract class có thể implements interface, nhưng interface không thể extends abstract class.
  • Cả 2 đều là “bản thiết kế” cho các lớp dẫn xuất, do đó chúng chỉ chứa các khai báo properties và method mà không quan tâm bên trong thực hiện những gì. Nhưng abstract class là “bản thiết kế” cho class còn interface là “bản thiết kế” cho method.
  • Abstract class có thể chứa các method đã được implement, interface thì không.
  • Toàn bộ những method và properties trong interface không cần khai báo access modifier vì mặc định là public. Abstract class thì phải bắt buộc khai báo (public, protected) và bắt buộc có từ khóa abstract trong các method và properties được khai báo trừu tượng.
  • Method của abstract class có thể sử dụng những access modifiers như private, protected, default, public, static nhưng method của interface chỉ sử dụng public và asbtract.
  • Class implements interface bắt buộc phải implement toàn bộ những method và properties đã khai báo trong interface. Class extends abstract class chỉ bắt buộc implement những abstract method (trừ khi nó cũng là abstract class)

3. Nên dùng cái nào cho đúng?

Abstract class

  • Bạn muốn chia sẻ mã các class có quan hệ chặt chẽ với nhau.
  • Bạn muốn các class con của abstract class có cùng các properties hoặc method, hoặc bạn muốn thay đổi access modifier (thay vì mặc định là public).
  • Bạn muốn khai báo non-static hoặc non-final fields. Mục đích là để định nghĩa những method có thể truy cập và thay đổi trạng thái của của các đối tượng mà nó thuộc về

Interface

  • Bạn muốn các class khác nhau về bản chất nhưng có cùng cách thức hoạt động.
  • Bạn muốn chỉ định hành vi của một kiểu dữ liệu cụ thể, nhưng không quan tâm đến ai thực hiện hành vi của nó.
  • Bạn cần đa kế thừa.

Bài viết có tham khảo các nguồn:

JQuery tips for HTML select

JQuery Logo

I am working on the next version of Bible for WordPress plugin, and I learned some tips while playing with HTML select.

I hope this helpful!

%d bloggers like this: