Category Archives: Web Development

Anything web development stuff!

All about React and boilerplate

Here I am going to delve right deeper in the React world but in a very basic term. As a full-stack developer (please dont take this as being know everything do everything this is just what I see myself do nowadays) I keep going in and out of front-end and back-end side of things, I tend to forget this nitty gritty details. Anyways.

React on its own resemble this

// without Babel JSX
var hello = React.createElement("div",{property: value},"Inner html with ${this.props.name}" }
ReactDom.Render(hello,document.getElementById("container"));
// with Babel JSX
let Hello = (props) => <div>Hello</div>;

Most of the time we want to develop with JSX and Babel is pretty much the defacto transpiler for it. So if you plan to use React in JSX on your page you make sure you include react , react-dom and babel-jsx in your script.

Boilerplate React Development

Now with boilerplate, React is very good with SPA(Single Page App) and Hybrid (React with your HTML page). We will focus on SPA of what we are going to need to start developing using NPM as our package manager.

  • React – this is the core react library
    • npm install --save react react-dom
    • [optional] - if you are looking for more react exclusive functionality for example the routing capability etc. Install these to your package.
      
      npm install --save react-router-dom 
      
      react-router-dom: is the v4 of react router. No need to use "react-router" as this is v3
  • Babel – the core transpiler for JSX
    • npm install --save-dev babel-core babel-loader
  • Babel-presets – babel use to have all features in one package <version 6. In babel 6 they have separated all these features and plugins hence. We now need to install each feature separately. babel-preset-2015 supports ES6 and React
    • npm install --save-dev babel-preset-env babel-preset-react
      
      babel-preset-env: new support for ecmascript+ down to ES5.
      babel-preset-react: to allow react syntax to be transpiled.
      
  • Webpack – now our module bundler that will tie everything together. Webpack-dev-server is for hot reloading while developing. Very handy indeed
    • npm install --save-dev webpack-cli webpack webpack-dev-server
  • Loaders – loaders are a way to bundle your static assets into few different things used in webpack
    • npm install --save-dev url-loader style-loader file-loader css-loader
      
      url-loader: makes your assets like images embedded inside your JS using base64 encoding. Useful for smaller files. Set the limit and let file-loader do the rest for bigger files
      file-loader: it handles assets and emits(create a separate file) to another location. Good for bigger files.
      css-loader: the css loader takes the CSS and convert it to a string. eg. var css = require('css-loader!./css/mycss.css'); it just loads the string of css as javascript/node dont know how to parse .css file.
      style-loader: usually used conjunction with css-loader and inserts it into the page by add a <style>...</style> tag to the javascript.
    • [optional] npm install --save-dev sass-loader postcss-loader autoprefixer
      
      postcss-loader: by itself it doesnt do anything, but it pretty much a foundation for all its plugin. So if you want to use autoprefixer, you will need to install post-css-loader first. 
      sass-loader: sass loader adds support for sass files and then to css then to your normal css-loaders.

BLOG: NodeJS – Server Side Rendering

Its a technique in the web development world most of your front end rendering(javascript) is rendered by the server, hence the title.

Basically what its saying is most front-end javascript processing happens in the browser. But with server side rendering, your javascript is pre-compiled and delivered with values pre-populated by the server stack. In this case NodeJS.

Im not sure how it works on Apache server yet. Or any other platform stack that does not use javascript. Here is a video about React – Server side scripting works using express/webpack combination.

.HTACCESS

We all know how .htaccess change the way you access a particular URL in your web server. Mainly use for apache web servers. When starting one always start with

RewriteEngine On 

Options +Indexes = Allows folder to be indexed.
ErrorDocument 404 /notfound.html = Allow to set error page.
401 – Authorization Required
400 – Bad request
403 – Forbidden
500 – Internal Server Error
404 – Wrong page

RewriteBase / = change the context as root folder
RewriteCond %{THE_REQUEST} !^[A-Z]{3,9}\ [a-zA-Z0-9\.\+_/\-\?\=\&]+\ HTTP/ [NC]  = Like an if statement if true continue below
RewriteRule .* – [F,NS,L] = L means stop, F causes forbidden access 403 page, NC not case sensitive, NS no sub request if page is included, R redirection. Rewrite rule only gets the page.

QSA allow to be included to query string

When the replacement URI contains a query string, the default behavior of RewriteRule is to discard the existing query string, and replace it with the newly generated one. Using the [QSA] flag causes the query strings to be combined.

Consider the following rule:

RewriteRule "/pages/(.+)" "/page.php?page=$1" [QSA]

With the [QSA] flag, a request for /pages/123?one=two will be mapped to /page.php?page=123&one=two. Without the [QSA] flag, that same request will be mapped to /page.php?page=123 – that is, the existing query string will be discarded.

Front-end Development Arsenal

Its been a while since I have posted. I have been learning a lot since this past few months. And technologies is always evolving. I actually forgot to post the tools I used when creating front-end especially for responsiveness.

Here are my select go to “frameworks” for front-end development

  • Semantic UI / Semantic UI React (dependent on JQuery) hands down the best UI library I have ever used! Move aside Bootstrap! Its got everything you ever need from validation, grids, elements etc. Look no further, and what makes it even more attractive. Customizable and Ease of use!
  • SASS/SCSS! What can be more easier when doing CSS Styling? Great structuring, mixin, operation & variables! Its more than a stylesheet now , its a language! SASS will compile your scss/sass file to css. This requires you have RUBY installed as this is a GEM package. You can download GUI compilers of course but for a bare minimum, this is all you need specially when you are learning.
  • Bourbon.IO and Bourbon.Neat. When you have SASS , you might want built-in mixins(or functions in your scss). Bourbon itself provides you with mixins and variables that will help you define values. It also helps you with prefix vendor specific properties(although this has been deprecated). Bourbon.Neat this guy here is my responsive design grid tool for SASS. Semantic UI has grid tool but since you are developing in SASS its much cleaner to take advantage of this feature. As its gives you “automatic-control” of your html from your css when doing responsive design.
  • React.js. What else can I say , React just takes the cake for me compare to Angular, Vue.js etc. When you’re doing dynamic things in your front-end. React just work by itself! What I like about it is customizability (dont know if thats a word). You can have different part of your page as react elements that response to state changes hence the name I supposed. You can build a whole Web-App based on it or just part of it. Its great! (You will need to add JSX transpiler to your page like BABEL(react and react-dom) and once ready for production, pre-compile it and away you go)

That is the main framework/tool I used for a simple page creation. Although if you havent learned these yet. I urge you to!

Honourable mention below:

  • NPM – is the package manager for Node.js. You might need to use this if you are developing an SPA(Single Page Application) in React. Whether you wanna use Node.JS for your app, its definitely a requirement. Node.js is a whole different beast altogether.
  • React/Redux/Immutable.JS in extension with React , you might also want to learn Flux like architechture. Redux again helps you create SPA in React. It helps for managing states, actions and immutability. Immutable.JS is a helper library to help you mutate object/states. I suggest to learn this 3 if you are doing SPA.
  • Webpack is a bundle manager that lets you do pretty much anything! It can integrate with NPM to do development builds and production builds. It bundles all your dependency files and puts them in one file! It also converts your CSS/SASS and even distribute your images to a selected directory. It can be a bit confusing to learn but definitely worth understanding how it works.
  • Normalize.css , this is just a bunch of css rules that will.. well normalise all your elements to a more predictable manner! I can even say its a must have to include before anything on your page.

Well thats about it. My secret weapon for Front-End development!

Time for some Lodash action

Please note: Lodash functions may already been implemented on ES6(Ecmascript) so look it up first before commiting. Othwerwise lodash is still a very good utility function for general javascript programming.

I been developing in React for a couple of weeks now and Its starting to make sense to me now. Especially the widely use Redux architecture. As always I ponder if I am doing the right thing or not. One of the questions that pops in my head is.. “There must be a better way of doing this without mocking about?”

I know of lodash but why am I not using it? Well I just need a well written out reference to start. Because to be honest with the VAST libraries available to us, its hard to keep up. Even for an IT person like me and you.

Here as always link to lodash  quick tutorial, the author really made effort for noobs like me to better understand it.

https://colintoh.com/blog/lodash-10-javascript-utility-functions-stop-rewriting

Eloquent helper functions, filters and mutators

I have been looking through the internet how I can make my coding more efficient specially when using Eloquent ORM. Eloquent returns a collection that can be filtered using various helper functions.

I would say how I can make my programming skills be more “functional” instead of the traditional for each loop. Check the link out for using helper functions once collection has been returned.

http://laraveldaily.com/10-less-known-but-awesome-laravel-collections-methods/ 

I will also add Accessors/Mutators basically when you set or access a field value , it will automatically returns a different format. For basic example, $users->firstname original value is “Sarah” if you used an accessor function defined in your model, you can automatically make the value apply any function such as strtolower(value) to make it return lowercase.

I find this link helpful: http://laravel-guide.readthedocs.io/en/latest/eloquent-mutators/#defining-a-mutator 

Javascript: Promise, Await/Async and Closure

 

So been seeing these two pops up in the Javascript world, and finally gave it time to study what they are.

Closure , basically a term in Javascript where a value in a function is retained.

This is when you pass a value to a function and the function itself is returned. The value that you pass to the main function gets stored inside the sub-function.

And when its finally time to call the returned (function), every variables stored is kept. See the link below for more information, and skip to 10:00 to actually see whats happening.

Promise a new concept, and only available from EcmaScript 2015 or ES6. It is an object that receives a function with 2 parameters, a resolve and  reject function parameters. Then use the “.then(function(return_from_resove){})” when the promise call the “resolve(pass))” inside it, the “then” will be triggered according to what was called. It is like a true or false ,and to promise to return true or to return false. You use “catch(function(){})” chaining when “reject()” is invoke. Here is a quick snippet of the promise:

let promise = new Promise(function(resolve,reject){
       if(true) resolve("anything");
       else if(false) reject("anything");
}).then(function(from_resolve_value{
   // Do anything here
}).catch(function(from_reject_value)){
    // Do anything here
})

Below are excellent video explaining how it works.

Await/Async is a ECMASCRIPT 2017 (ES8) feature that would let you set a function to be asynchronous.

You need to set your function with async and can only use await inside this type of function example below:

async my_function(){
     var result = await getting_json();
     // Im dont waiting let see the result
     console.log ("Im done");
}
my_function(); // Asynchronous function
console.log("Im not waiting for my_function to finish"); // This will trigger straight away 

// You can also return promise in a async function
func_promise(){
    var prom = new Promise((resolve,reject) => resolve() // or call reject if error);
    return prom;
}
func_promise().then(alert("Success") ).catch(alert("Failed!"));

// You dont need to use promise with async/await they are both asynchronous

A good article about async/await:

https://hackernoon.com/6-reasons-why-javascripts-async-await-blows-promises-away-tutorial-c7ec10518dd9

[Update: May/2018 – NodeJS  version 8] Supports ASYNC/AWAIT function.

I started learning React

I have finally gotten to the point where its time for me to dive in to what everybody these days are buzzing about. The Javascript world of front end development. I wanted to learn VUE.js first but knowing how React is just a view I can implement them with any systems available and flexibility is the name of my game.

I love how Im able to implement the things that I know already, for example using PHP and MySQL and just making them work. I have already dived into PHP Frameworks such as Laravel and micro-frameworks plus I got a little bit of taste of Webpack which Im glad I did. There so many dependencies and tools out there that we have to get into that mindset that they are there to make our development a little easier.

Okay here are the links that help me understand how React world works. If you are beginner in React I suggest to start on this one:

Also you might want to have a read about the life cycle of the react components:

http://busypeoples.github.io/post/react-component-lifecycle/

And also you might to use this boiler plate to examine the code to have a feel of whats going on.

https://github.com/buckyroberts/React-Redux-Boilerplate

By the way Redux/Flux is sort of like an architecture for building react web apps. Maybe similar to MVC architecture but of course there are others out there but in this scenario will stick with the popular ones.

Once you brushed up and like have a firm grasp on react, you might want to do some more example and readings. Heres a good example of one.

https://dev.to/svinci/react-js-web-site-example-almost-real-life-like

Links of course is credit to the Author , I wouldnt have the knowledge I have now without them.

 

Javascript Galore ECMAScript

I have been using javascript on my day to day development but never really tried to analyze the standardization of things and the separation between versions over the years.

This is to remind myself that javascript has evolved to a really mature scripting language for the browser. Also a reminder when somebody says ES6 it actually means EcmaScript2015, just minus the number by 1 for example ES7 means Ecmascript2016.

Here below are some reading materials especially new features every iteration:

https://en.wikipedia.org/wiki/ECMAScript

ES6 Features: https://github.com/lukehoban/es6features#modules

Love at first Laravel Eloquent

Its been a while since I posted been a month it seems?

Well I have been doing a lot of developing and I just love Laravel’s Eloquent component. When doing small web applications, you dont wanna go full Laravel on that stuff. You would wanna just go small like Lumen small, when I say Lumen like micro-framework Lumen. Laravel is a full blown framework, if you just want a small application you can never go wrong with a micro-framework, there are a lot out there. Im currently working on Slim 2 Framework although very old, I needed it to support really old PHP 5.2.

I have learned alot, on my first month on the job. Namely composer and Im using alot of package manager lately. NPM and bower front end development stuff. But anyways I would like to share you links on how to make ORM Eloquent and using 2 databases without Laravel altogether.

First is how to use Eloquent ORM on your own project follow this link: http://www.edzynda.com/use-laravels-eloquent-orm-outside-of-laravel/ 

Then how to use 2 database connections, this is really big if you are using SQL Server and MySql hand on hand you need to be able to switch between your eloquent database. Follow link: https://stackoverflow.com/questions/25371871/two-databases-in-eloquent-orm-without-laravel