Full Stack Web Developer/Designer

Yo my man…!

I’ve been busy with my main job as an investment banker helping companies in raising fund from capital market and stuffs, recently. After all this time, I have lil bit more time again to do coding and designing. Say YAAY! I’ve been thinking recently what to be mastered if we wanna be a full stack web developer/designer. Here we go…

We can separate the web developer/designer in two sections, which are VIEW and MODEL as in Model-View-Controller. For view, it’s all about design and art not to mention consuming data supplied by model. Meanwhile for model, it’s all about data management and preparing data to be displayed/consumed by view section. In this article, I am trying to give you the most popular tools/apps in the web app industry, according my reading so far.

VIEW

  1. HTML, of course.
  2. SASS for CSS. As Bootstrap 4 ditched LESS and opts SASS instead, it is better if you learn SASS for CSS.
  3. Vue.js for Javascript. Vue.js is getting popular as Laravel uses Vue.js and it offers simple lines of coding to do advanced things. Once you use Vue.js, you can ditch jQuery. Like React Native, if you wanna make mobile app, you can use Veex to have access to native API. Veex is OS agnostic and used by, among others, Alibaba.
  4. SVG Animation. It has been getting its popularity in the past two years as many browsers are now supporting SVG. SVG is an image built by math vis-a-vis pixel for jpeg. Inside SVG is XML tags and numbers. We can add javascript (including Vue.js or Vuex) inside the SVG file to make it interactive (gives you an artsy feedback and responses naturally) and pretty and fun animations. It is gorgeous yet maintain the good performance for web app. I bought a book from Google Play Book (GPB) just now titled SVG Animations by Sarah Drasner. Somehow GPB offers the most attractive pricing for this book which is only c. USD10.3 (before 80% discount!!!!! so net c. USD1), compared with Kindle Store of c. USD25 and paper of c. USD40.
  5. Bootstrap Vue for responsive layout. Current Bootstrap 4 takes advantages of jQuery. Since we are now using Vue.js so that we have to find out alternative to replace Bootstrap. Some suggests modernizr but I think we do not need to use a kinda Bootstrap, we can make it by ourselves using CSS.
  6. Font-Awesome. It is getting its popularity since it’s very simple and lightweight. Bootstrap replaces Glyphicon with font-awesome.
  7. Techan.js. It is the best technical analysis chart library built on D3 and SVG, if I may say.
  8. Other things that I have to find out, among others, is the framework to handle Vue.js for multiple files website. Any idea?

MODEL

It is quite difficult to determine which tools to be used for Model. Previously, people have been using Apache or nginx for server, MySQL and its peers for database and Java or PHP (using Slim or Laravel Framework) to provide a RESTful API. I don’t know yet the node.js but it is a server, that all I know for now LOL. I’ll update this article once I know what node.js is. The industry has been evolved. For instance, Google offers Google Cloud Platform (GPC) to handle back-end (front-end as well) with the most sophisticated products. You can try it at cloud.google.com for free.

Many years ago, people talked about virtual machine but now we’re talking about docker container and Kubernetes using node.js to handle app. GPC has these line of products and we can just use it without pain in the ass. It supports scalability if our app getting its popularity.

By using GCP and its peers services, no more concerns on model.

 

To sum up, if we wanna be a full-stack web developer/designer, we do not need to master jQuery and PHP again, unless you use Laravel in the model. We now can focus more on the view and let GPC (and its peers) handles the model. You can learn tools in bold text and find the material in the internet or watching video course in Youtube. It is easy to learn nowadays.

Thank you for reading.

 

 

Advertisements

Smart TV with Raspberry Pi

My Raspi has been stayed next to my TV for months and got stranded all over again. It used the first OS of Raspi in wich the omxplayer installed to play multimedia files. I just created the bash script to run all the multimedia files easily.

Unluckily, it could not detect my external hardisk anymore when I’d like to play the m4v file. My Samsung TV can’t play the file as well, apparently. So, I wiped all the Raspy OS and changed it into XBMC. In fact, I tried the XBMC back then but it did not perform well. It was horrific, honestly.

As the time going, the XBMC got the popularity. I checked Youtube to see how is its performance today. The video compares two XBMCs and concludes that the openelec XBMC outperformed another. So I go for it.

The installation is very easy. It only consumed no more than five minutes to set up. What you have to do is download the OS and burn it into an SD Card. Mine is only 2GB. Afterwards, install the SD Card firmly into the slot in your Raspi. Turn the power on to continue the process.

The Raspi will automatically set up the program then it will restart by itself to complete the setting. This is it! In no time, you already have a Smart TV. However, it is not the final form of the XBMC Raspi.

In order to build the real Smart TV, you need to plug the network or wireless network. I use wifi dongle. I tether my Android phone to broadcast the WiFi signal. I connect the Raspi as well as my iPad to the WiFi. iPad is used as a remote control. You have to install the free XBMC app from AppStore. Then set the IP address along with its access name and password to connect between iPad and Raspi. You can use other gadgets based on Android, iOS or Windows Phone system as a remote control.

Is it the final form? Not yet!

The XBMC has transformed in to the flawless OS. You can install add-ons to enrich the contents. I already installed Youtube, TED and many more add-ons to be watched streamingly.

That is the final form!

I just hope that my Raspi would not be stranded anymore. Amiin!

Raspi Buat Streaming TV

Gara-gara weekend kemaren pengen nonton ATP tapi ga ada channels yang tersedia di apartemen yang nyiarin, saya live streaming pake laptop. Well, tennis jarang peminatnya sih di Indonesia. Tinggal colokin sih Thunderbolt di MangBook ke HDMI tipi. Terus di-full screen deh. Bagus streamingnya ga nginul dan patah-patah. Tapi ya resolusinya ga begitu gede. Secara, kalau HD, internet saya yang jebol.

Tapi setelah dipikir-pikir, saya punya satu “komputer” nganggur yang bisa dedicated buat nonton TV streaming dari internet. Dia adalah the stranded Raspberry Pi. Akhirnya, lu ada gunanya juga.

Semalem, coba googling dan install biar si Raspi bisa mainin youtube. Tapi sudah coba tiga “installers”, belum ada yang pas. Instalasi yang terakhir belum dicoba sih, karena harus masup kantor pagi ini.

Nanti ya kalau udah sukses, saya update tulisan ini. Stay tune!

Raspberry Pi as a Multimedia Player

So, I ended this weekend by playing with my stranded Raspberry Pi.

As of today, I have three computers with three different operating systems. Raspberry Pi uses Linux based on Debian distro. Actually, I’d like to use a kind of multimedia OS. However I have to download the OS of more than one Gig size in the office :P. My second computer is Mangbook. Ya you know it, it uses OSX as an operating system. And, the last computer is the brand new i5 desktop computer uses Windows OS, of course, it’s for my lil’ brother to finish his thesis.

What have I done to my Raspberry Pi?

My objection is very simple. It is to play the full HD video clips and movies using the tiniest computer in the world, the Raspberry Pi.  I want to play movies or video clips in my full HD TV that has no feature of plug and play the video files via its USB port.  I forgot what the OS my Raspberry Pi uses. In this OS, there is a video player but it should be called in the Terminal. I can not simply click the movie file in the File Manager (it’s like Windows Explorer in Windows OS) and play it. It has no GUI yet. The video player is omxplayer. To play the video file, I have to type this line in the Terminal: Continue reading “Raspberry Pi as a Multimedia Player”

Showing WordPress Posts in Your Own Website

Sama seperti tulisan sebelumnya, namun kali ini ngambil posts di blog wordpress untuk ditampilkan. Bedanya, kalau ini formatnya XML kalau Twitter formatnya json. Tapi ga masalah. Mari kita saksikan bagaimana caranyo?

Ambil dan Parsing Posts Pake Feed RSS versi 2 dari WordPress

Ini adalah skrip untuk ngambil rss dengan item lima post ($i). Lalu kelima post ini dimasukin ke dalam array $data_ary. Nanti $data_ary ini bisa di foreach untuk ditampilkan di html, atau bisa juga ditampilkan dalam bentuk json buat webservice seperti yang saya lakukan (tapi di contoh ini hanya sampai array aja). Baiklah, inilah skrip yang saya modif dari mari. Continue reading “Showing WordPress Posts in Your Own Website”

Showing Tweets in Your Own Website

Sebelumnya, ga perlu pake oAuth buat ngambil json Tweets di twitter. Dengan API 1.1, semua harus melalui otorisasi untuk mengakses webservice Twitter. Langsung aja, gimana caranya nampilin tweets di website sendiri?

Bikin Twitter App

Creating Twitter App
Creating Twitter App
  1. Bikin apps dulu dengan pergi ke mari https://dev.twitter.com/apps/new, kalau belum login, ya login dulu pake akun Twitter Anda!
  2. Masupin datanya lalu klik Submit. Anda bakalan dapetin Consumer key dan Consumer secret.
  3. Nah di halaman ini, klik tombol Create my access token buat dapetin Access token dan Access token secret.
  4. Twitter App sudah sukses terbikin

Selanjutnya ialah tarik data tweets ini ke website pake PHP. Continue reading “Showing Tweets in Your Own Website”

Session Values Null But Session Keys Remain

Ini berjam-jam saya habisin waktu di warkop buat menghandle masalah Session Values jadi NULL padahal Session Keys-nya masih ada di situ. Bingung kenapa….? Udah di dump dari atas page, bawah dan di tempat-tempat yang mencurigakan, ga ada masalah, Session Values masih bener. Tapi pas pindah halaman, jadi NULL lah mereka tapi Session Keys nya masih nangkring di situ. Bingung bukan alang kepalang. Mana script saya panjang, pake object dan RESTful API, ga nemu-nemu. Kalau buntu gini, saya putuskan untuk pulang dan tidur… Zzz…

Benar saja, tadi pagi, terlintas di otak saya, bahwa saya set Session menggunakan object seperti ini:

$_SESSION[‘data’]->username = $theuser->username;

Note that, bukan masalah object di Session tapi masalahnya di object $theuser yang value usernamenya dikasih ke si $_SESSION[‘data’]->username.

Berdasarkan pengalaman pas bikin formula YIELD obligasi di PHP, kalau dengan cara ini, ketika kita mengubah value $theuser->username, maka value $_SESSION[‘data’]->username juga akan ikut berubah. Damn it eh?! Pas ganti halaman kan object $theuser meninggal, artinya values-nya jadi NULL. Si session ngambil values dari yang udah jadi NULL tadi, ya NULL juga lah Session Values-nya.

Solusinya!

Jangan pake = tapi pake = clone, seperti ini:

$_SESSION[‘data’] = clone $theuser;

Sehingga, tidak ada hubungan lagi antara object $theuser dan $_SESSION[‘data’].

Demikian sharing dari otak kanan saya yang semalem baru diistirahatkan jam 4. Salam Session!