Loading Web Fonts with the Web Font Loader in Nuxt.JS

Several years ago the consensus on font loading in the community was that, as a website loads, all fonts should be hidden until the correct resources have. Now, let ‘s do it for Nuxt.JS. This is steps to configure: Include webfontloader via npm install webfontloader –save Add webFontLoader.js file to /plugins folder: import WebFont from ‘webfontloader’;WebFont.load({ google: { families: [‘Fira Sans:400,500,600,700:latin,vietnamese’] }});… Read More Loading Web Fonts with the Web Font Loader in Nuxt.JS

How to auto redirect Netlify site to HTTPS

Netlify support two ways to config redirect rules for your Netlify site: Via _redirects file.Via netlify.toml file. I prefer the second way because of limitation of the first one. If you’re running a build command or site generator, the _redirects file should end up in the folder you’re deploying (the Publish directory in your settings)From Netlify documentation… Read More How to auto redirect Netlify site to HTTPS

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

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… Read More How to solve ‘ReferenceError: window is not defined’ when importing Vue plugin in Nuxt.JS

How to make Bulma cards have equal height

How to make Bulma cards have equal height? Just add the following CSS:

Vue.js 2 Cookbook

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.… Read More Vue.js 2 Cookbook

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

Sometime, when you run some Symfony tests, there is a lot of deprecation warning like this: 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

Today, I will guide you how to use jquery with NuxtJS project. npm install –save jquery. Open nuxt.config.js and add: That’s all! Hope this helpful for you!

Generate JPA Entity Script

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

Read other people’s code. ☑ Get someone to read your code. ☑ Fix bugs before writing new code. ☑ Learn a new technology. ☑ Keep it stupid simple (KISS). ☑ Write a blog post about your code. ☑ Contribute to open source. ☑ Fix it, don’t hack it. ☑ Increase code coverage by 1%. ☑… Read More Ten ways to become a better developer

Note on migrating Spring Boot 1.5 to 2.0

1. Useful links First of all, you should read recommended links: https://github.com/spring-projects/spring-boot/wiki/Spring-Boot-2.0-Release-Notes https://github.com/spring-projects/spring-boot/wiki/Spring-Boot-2.0-Migration-Guide https://github.com/spring-projects/spring-boot/wiki/Spring-Boot-2.0-Configuration-Changelog https://spring.io/blog/2017/06/20/a-preview-on-spring-data-kay#improved-naming-for-crud-repository-methods 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… Read More Note on migrating Spring Boot 1.5 to 2.0

Fix error when install npm package as global package

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… Read More Fix error when install npm package as global package

Keep database connection on connecting to MySQL/MariaDB using SQLAlchemy

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… Read More Keep database connection on connecting to MySQL/MariaDB using SQLAlchemy