Using Bulma and Font Awsome with NUXT

These days I am crushing on NUXT, tagline: Universal Vue.js Applications. I use it as a static site generator. The documentation for both NUXT and Vue.js is a joy to read making it really easy to get started.

However, some small things tripped me up in the beginning. One of them was adding Bulma and Font Awesome. It turned out to be super simple!

1. npm install bulma font-awesome --save
2. npm install sass-loader node-sass --save-dev
3. Add a css block to your nuxt.config.js:

// File: nuxt.config.js
module.exports = {
 /*
  ** Include css not in components
  */
  css: [
    // node.js module but we specify the pre-processor
    { src: 'bulma/bulma.sass', lang: 'sass' },
    { src: 'font-awesome/scss/font-awesome.scss', lang: 'scss' },
  ],
}

Customize Bulma

Next up was figuring out how to use a customized version of Bulma. Also, easy peasy 😀

1. Create main.scss in the assets folder and add the customize code from Bulma:

// File: assets/main.scss
// 1. Import the initial variables
@import "../sass/utilities/initial-variables"

// 2. Set your own initial variables
// Update blue
$blue: #72d0eb
// Add pink and its invert
$pink: #ffb3b3
$pink-invert: #fff
// Add a serif family
$family-serif: "Merriweather", "Georgia", serif

// 3. Set the derived variables
// Use the new pink as the primary color
$primary: $pink
$primary-invert: $pink-invert
// Use the existing orange as the danger color
$danger: $orange
// Use the new serif family
$family-primary: $family-serif

// 4. Import the rest of Bulma
@import "../bulma"

2. Update the import statements to work with webpack:

@import "~bulma/sass/utilities/initial-variables"
@import "~bulma/bulma"

3. Update the css block in nuxt.config.js to match the example below:

// File: nuxt.config.js
module.exports = {
 /*
  ** Include css not in components
  */
  css: [
    // node.js module but we specify the pre-processor
    { src: '~assets/main.sass', lang: 'sass' },
    // { src: 'bulma/bulma.sass', lang: 'sass' },
    { src: 'font-awesome/scss/font-awesome.scss', lang: 'scss' },
  ],
}

Please let me know if you found this helpful in the comments below.

Getting started with Ionic 2, AngularFire and ngrx/store

It seems I created my own muddled version of ngrx/store in my Ionic 2 + Firebase app … now I get to refactor and I found some great resources.

This is unlike me. I love to find and use proven techniques for coding challenges. I usually do not suffer from the not invented here-syndrom, but somehow I let ngrx/store slip through the cracks.

I think the reason was a combination of:

  1. A very hard deadline. Resulting in long, tiring days.
  2. A new tech stack from top to bottom.

On most projects, I try to mitigate number 1 and will defiantly in the future when number 2 is involved.

Number 2 is what makes being developer equally hard and fun. You get to learn new stuff all the time, but you have to learn new things all the time.

With a new tech stack from top to bottom, there was a limit to how much new knowledge I managed to absorb. After learning the basics of ReactiveX my cup was full, and moving on to ngrx/store became too much.

Luckily code is not written in stone. The last couple of weeks I have been learning and slowly refactoring my code. This time around I am thoroughly enjoying learning new things, yet again!

Resources

These are the resources I found most helpful in understanding how to get started with ngrx/store in an Ionic 2 app using AngularFire.

I recommend beginning with this tutorial from Ashteya Biharisingh showing you the basics of using ngrx/store in an Ionic 2 app:

And watch the videos in Build Redux Style Applications with Angular2, RxJS, and ngrx/store by John Lindquist from eggehead.io1.

To learn about ngrx/effects I recommend The Basics of “ngrx/effects”, @Effect, and Async Middleware for “ngrx/store” in Angular 2 from Jim Lynch.

To see how ngrx/store and ngrx/effects may interact with AngularFire these parts of Akshay Nihalaney Real World Angular Example were helpful:

I also found UI state management with Redux in Angular 4 by Hristo Georgiev handy as many of the above resources have very simplified UI in their examples.

After being done with these I realized I needed to up my ReactiveX game and binge watches these courses by André Staltz on eggehead.io.

I also went back to basic and watched this introduction to Redux by Dan Abramov. It was conceptually very helpful, even though the technology used is Redux and React.js.

Hopefully, you will find these resources helpful as well. If you know of any Ionic 2 (3) + ngrx/store + ngrx/effects resources please let me know. Especially around UI state management.


  1. All egghead.io links are affiliate links giving me a free month if you sign up ;) 

Hello World!

Again…

bgraphic.no has been with me since 2006 and have taken many forms, and have had many breaks 😉

These days I am thinking it will become a dev blog focusing on JavaScript, in many forms, as well as some advanced WordPress stuff.

I am keeping the old blog posts, and might even import the ones from way back when (if I can find the backups), as I have been using WordPress since the very beginning.

Sometimes I am a farmer, kind of

I volunteer at a local farm, located smack in the middle of Oslo. Working at the farm is the complete opposite of a regular day at the home office.

The farms focus are kids of all ages. Activities during weekdays include: visits from barnehager (day cares), afternoon riding lessons for the local teens and more. On Sundays it is open for visitors from 12-15.00 and that is when I usually work.

Because of the summer holidays I got to spend both Saturday and Sunday at the farm last weekend, with no visitor and free access to the produce from the garden. What a weekend: relaxing in the sun, cuddling with the animals and making organic food with the farms eggs and vegetables.

For more information check out Kampen Økologiske Barnebondegård.

grizzly
My new best friend: Grizzly!
lunch
Organic farm lunch

Send printed Instagram photos to your Grandma!

Update 2017: Lillygram is renamed Little Lilly due to Instagram constraints. Currently open to existing customer only. Hopefully, I will have some time soon to work on the product and open it to the public again.


Hashtag selected Instagram photos with #lillygram and your grandmother will receive the photos as a printed letter each month.

Something you would like? We’ll you are in luck! Some friends and I are building this very solution as we speak. There we’ll be an invite-only launch in about a week. If you would like to be invited sign up at lillygram.no.

#lillygram4

#lillygram will cost 45 NOK per letter, and will be available worldwide 😀