Categories
Travel Web Design

Cape Town to Norway

It has been a full year since I left the sunny shores of Cape Town for a new adventure in Norway. I am enjoying the Norwegian experience very much. The cold is not as bad as “they” say, or maybe you get used to it.

I do miss my friends and colleagues from my time at Superbalist and World Wide Creative in Cape Town.

Superbalist… good times

World Wide Creative… more good times.

I have learned so much from both of these experiences. Worked with some very smart humans on some amazing products and services. For that I am truly grateful.

Noroff Fagskole

Fast Forward to today. I have taken a new role as a Front End Development teacher at the best tertiary educational institution in Oslo. Our focus is on the fundamentals in JavaScript, CSS, HTML and design. We give our students a good mix of theory and practical hands on experience.

I am so proud of the students and their work I had to mention it here.

The Diamond Awards an internal awards ceremony dedicated to celebrate student work.

First prize went to Farida for the end of year project contribution. Tasked to build a microsite to help promote interest in space and space travel.

The requirements for the website were to use a 3rd Party API (Space X or Nasa) and write vanilla JavaScript, CSS and HTML.
Small print: Noroff and I are in no way affiliated with Space X or Nasa. We just love space and JavaScript.

1st place

https://faridaalin.com/project_exam/index.html

Click here to view.

While there was no prize for 2nd and 3rd place officially in the competition. As voted by Noroff 2nd place went to Therese and 3rd place to Sam.

2nd place

https://lybo.dev/projex1/

Click here to view

3rd place

https://noroff.samemami.com/spacex/

Click here to view

I am really proud of all my students. I am looking forward to a new year startup in August for our 2nd year of a 2 year program.

See you all soon.

If you are still here enjoy some photos I’ve taken of Oslo =>

Categories
Software Engineering

My VIM setup

I have decided to use vim more often than not. I’ve gotten used to working with vim by jumping around from server to server configuring apache and nginx servers.

You can keep reading or head straight over to my portable .vimrc file found here: https://github.com/mannuelf/dotvimrc

Please note I am writing more JavaScript and TypeScript than ever before so naturally I have setup my VIM environment to reflect this.

Here is is a list of key vim plugins you should use.

Theme

Shades of purple, it’s the best one really.
https://github.com/Rigellute/shades-of-purple.vim

Code completion / Intellisense

COC-VIM

This intellisense engine is built for Vim8 & Neovim. It’s the best and kept up to date lost of activity on github. It has full language server protocol support same as VSCode

https://github.com/neoclide/coc.nvim

Syntax highlighting

JavaScript and TypeScript by Leafgarland/typescript-vim and Peitalin/vim-jsx-typescript

https://github.com/leafgarland/typescript-vim

https://github.com/peitalin/vim-jsx-typescript

Autosave

You do not want to always be typing “:w” to save a file, this plugin will save your file as you type.

https://github.com/907th/vim-auto-save

Ctrl + P, fuzzy search

This brings Ctrl+Shift+P (Windows) Command+Shift+P (MAC) to VIM just like in VSCODE.

https://github.com/kien/ctrlp.vim

Best VIM Plugin search website

https://vimawesome.com/

Best VIM Cheat Sheet

https://vim.rtorr.com/

Best VIM YouTube Channel

https://www.youtube.com/c/ThePrimeagen/featured

I hope you find this useful, go ahead and snoop around my .vimrc file found here: https://github.com/mannuelf/dotvimrc . I suggest you to spend some time yourself configuring your own environment, you will learn more that way.

Categories
CSS Web Development

CSS Selectors

CSS selectors are way for you to hook onto an HTML element and style it. There are many options available to you and each have their pros and cons.

Have a look at theses demonstrations: CSS Selectors Demo

Categories
Software Engineering

Coding Coach

I recently signup to be code mentor on Coding Coach.

I think it’s such a really great initiative, looking forward to working with my first mentee.

www.mentors.codingcoach.io

Categories
Software Engineering

wemakewith guest post

Hey guys you should checkout my guest post https://wemakewith.com/mannuelferreira showing you my development environment. Happy reading.

Categories
General

WHATCoin WHICHCoin

I am so intrigued by crypto currencies that I have gotten involved on few levels… I have invested some on our local shores using Luno… and I have built a price viewing dashboard to keep an eye on the price.

www.whatcoinwhichcoin.com

Why another ticker why I hear you scream, well I really wanted something different to whats out there right now, something with out all the super confusing charts and graphs. 

I wanted something to show me a price immediately at a glance, in a really big beautiful typeface. SIMPLE. I love design, typography and technology I needed an opportunity to play with Vue.JS and API’s so I made one => www.whatcoinwhichcoin.com 

The app is in development work, make it right, make fast I am very much in the make it work stage. Here it is on Github feel free to fork it if you have suggestions etc.

Other links:

Categories
JavaScript Vue.Js

a new website

Hello friends…

I have launched a new website, I have started building a new personal website over at www.mannuelferreira.com.

What’s so interesting about that I hear you say.
Well it’s hosted on Netlfiy for => www.netlify.com for FREE.

It’s built with NUXT a Vue Js framework for building server side rendered applications. So far so good it’s just white page for now with one component installed, so not that exciting on the front end yet. 

Vue Analytics

I wanted to start tracking on Google, so I needed meta tags and a way to include the GA tracking snippet… enter Vue Analytics.

  1. npm install vue-analytics
  2. create a folder call it “plugins”
  3. create a file ga.js and place your GA code in there. Use the recommended NUXT version of the GA tag found here:  https://nuxtjs.org/faq/google-analytics/

Vue Analytics gives you a neat way to include headers and meta tags into your app via a simple configuration object.

You must create a NUXT config file, nuxt.config.js in the root of your project and write out your meta tags like this:

See the Pen vue-analytics meta tag by Mannuel (@mannuelf) on CodePen.

Well that’s it for now, I will be sure to write more as I progress. 

Categories
General

merger merger merger

I am back! 

It’s been a busy couple of months Spree.co.za merged into Superbalist.com SO I have not had much free time to write.

The merger was intense to say the least, but it was great fun working closely with my colleagues over those weeks.

We migrated tons of users and addresses and products (sorry cannot be specific private data) into Superbalist systems and warehouse. Every team and department had their work cut out for them. It could seem overwhelming at times if you let it be. 

I was responsible for building out the front-ends of new iteration of the login flows. This included the login modal and the sign up walls. The new designs and layouts look amazing. The designers did an awesome job.

Many of us pulled weekends and late nights to get the job done on time. I loved this time. I really enjoyed the comradely that came out of the teams when the going got tough, leadership hung back with us while we coded late into the night or over a weekend.

I have never been through anything like this before, It was an amazing learning experience, one that I will cherish for sure.

Other articles:
https://www.takealot.com/company-news/spree-and-superbalist-merge

https://www.moneyweb.co.za/news/companies-and-deals/why-did-nasperss-spree-superbalist-merge

https://www.moneyweb.co.za/news/companies-and-deals/superbalist-spree-merge-to-create-sas-biggest-online-fashion-platform

Categories
Computer Science Software Engineering Web Development

Learning API design

If like me, you are embarking on a new learning journey on the topic of API design and development, and you have no idea where to start. Don’t stress I have got you covered. 

Here are some resources I have used to get going, it’s a mix of videos and blogs posts. 

Rest API Flask and Python by Jose Salvatierra

In this course you will build a shop API. You will learn about Python, Flask, basic API design using POSTMAN an API building/testing tool. Super simple and quick and fun.

Click here to watch.

Python rest API with Flask and Connexion by Doug Farrell 

This blog post is really in depth you go over what REST is, what Flask and Connexxion, you also get a look at Swagger and API documentation tool.

Click here to read.

API-first software development by Joyce Lin

In this in depth blog post Joyce Lin argues that the API should be designed first before any coding takes place(Sounds good to me).  In this post you will learn about setting about Postman for testing API first. You will build a mock API, learn how to get feedback in Postman on the API, Generate code snippets and deploy the API.

Click here to read.

I am currently building a small pet project, It’s a cryptocurrency price ticker I hope to implement these learnings within this project.  It’s still in development you can checkout the code here https://github.com/mannuelf/whatcoinwhichcoin
More on this later…

What is an API? In English, please. by Petr Gazarov

Click here to read

Happy learning internet people.

Categories
Database Laravel PHP

Database migrations, PHP with Laravel

Database migrations are an awesome concept in software engineering that allow you to keep track of the state of your database. When I say state I mean history, you can go back in time and update and delete fields. It is also known as a schema migration.

I work with PHP using the Laravel framework. Laravel have an awesome command line tool called artisan, which you can use you create new databases, update existing fields, rename existing columns, new columns and delete fields.

Migrations allow you to make incremental changes to you database, you can go back in history and create the future by adding new fields to your database, it really is quite amazing.

Lets build a music app together. What do all music apps need? songs, great, so we need a table to store all of our songs, great.

What will our table look like? what fields do we need? Lets think about the data that we want to store for a minute. All songs have a title, an artist(s), the date it was made and maybe a remix artist.

There we have it we have just planned out out schema for our table.

  • id
  • title
  • artist
  • remixed_by
  • released

First create Laravel project

[sourcecode language=”bash” wraplines=”true” highlight=””]
// create project
laravel new muziks

// rename evn file
mv .env.example .env

// generat key
php artisan key:generate

// ok lets go…

// login to mysql (local but sure use docker if you like)
mysql -uroot -proot

// create database
CREATE DATABASE muziks;
SHOW DATABASES;
+————————————-+
| Database |
+————————————-+
| muziks |
+————————————-+

// run create
php artisan make:migration create_songs_table
[/sourcecode]

You should have a time stamped file with the name of the migration
[sourcecode language=”bash” wraplines=”true” highlight=””]
2018_06_16_194842_create_songs_table.php
[/sourcecode]

Next open the migration file and lets fill in our schema, the fields of the table.

In out migration file we have up() and down() method. The up method will flesh out our planned schema. So when you do a php artisan migrate Laravel will go ahead and create the given table with the given fields. The down method will delete the table.

[sourcecode language=”php” wraplines=”true” highlight=””]
<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateSongsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create(‘songs’, function (Blueprint $table) {
// Here we adding our tables’ fields
$table->increments(‘id’);
$table->string(‘title’);
$table->string(‘artist’);
$table->string(‘remixed_by’);
$table->integer(‘released’);
});
}

/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
// this will delete the table when
Schema::dropIfExists(‘songs’);
}
}

[/sourcecode]

Next create the migrations.
[sourcecode language=”bash” wraplines=”true” highlight=””]
// run migrations
php artisan migrate
[/sourcecode]

You should have a table like this:

If you want to rollback the migration, you can do this:
[sourcecode language=”bash” wraplines=”true” highlight=””]
// rollback migration
php artisan migrate:rollback
[/sourcecode]