Category Archives: Web Development

Anything web development stuff!

Javascript: Promise 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.

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

Programming: JQuery Questions

Recently been asked few programming questions, and the heck wasnt ready for those. The questions were 1. whats the difference between .parent() and closest() in JQuery, and surprise surprise I wasnt able to give an answer, all I can think about is parent(), is of course getting the parent of the element but wasnt sure whats the closest() function was. A simple search takes me to Traversing and there it is. I just had a look at the description and yep. closest(selector) takes an argument selector to look for the closest element and traverse to the tree all the way up the root html.

2. create a function isPalindrome($x), this one I just didnt know what palindrome means, went to search again and there it was, the term palindrome any text given and if reverse should be the exact same as the original. when I was cooking dinner.. just thought there might be a function the reverses the string and then match it against the original.meek .. too late.

3. (selector, selector, selector).fadeIn() how do you construct a function so they dont fade at the same time? Ugh another challenge when you are at the moment not using JQuery. Since I havent really delve into much in JQuery lately, top of my head just said just separate each one so they fade in order. Later that day I did a quick search “multiple selection”  and there it is the each() function, then I thought there must be a way to delay it for some milliseconds and there I went and look for the function there it was delay(milliseconds) chain them together with passing each(index) and voila .each(function(index) { $(this).delay(500*index).fadeIn(1000) }); would have been the answer again too late! lol

4. The last question I couldnt put together was to construct a regular expression, I can answer it but I just needed more time to pull up all my symbols expression using these: ^ $ * { } [] a-z 1-9 ? ! + ABC.  I know how to use them and what they means. Again out of time and too late.

Anyways Ive learned something new that day, which Im always happy about. Just so excited in the world of programming, I may not get a good result but it was definitely fun!

Enter Git: Best way to learn git?

Hello, as a developer you need some sort of version control for your changes to your project or repository,handle them and work with colleagues as you do.

So meet Git, its a very straight forward tool I cannot give a well straight forward instruction but as a  beginner like you and me I found these video that can help us out. In summary these are the commands you will use from your day to day job using Git.

  • git config –global user.name “John Doe” and user.email “[email protected]” – this is for setting up an account
  • git init – starting your repository
  • git clone [url_to_the_repository] To download the repository to your current machine.
  • git reset –hard origin/master – This is to overwrite your local repository with your remote regardless, git status is up to date as this will destroy your local commits. Use it only if neccessary
  • git status – tell us that our working project are the same in the repository if not then use next command
  • git add .(all) or git add (filename) – you add the changes to the staging stage ready to be committed or made put the repository
  • git commit -m “Your message about the changes” – finally put your changes to the repository
  • git fetch – This will collect all the commits from your repository ready to be pulled.
  • git pull origin [master] – This will update your local repository from the master branch usually from the remote.
  • git add remote origin “https://repo.git” – This will add the link to your remote repository for consumption
  • git remove -v – This will display your current remote repository.
  • git checkout [branch-name] – This will set up your current branch , as Master is your main branch.
  • git log – these views any commits your team has made then add in –author “Beth” to see Beth’s commit message
  • git help – get help will show list of commands you can use and their usage
  • git diff – show the comparison , and show updates made from the old one, and remember this is before you do a commit. Otherwise there is nothing to show.
  • git diff –staged – compare your “staging” changes to your “repository” otherwise default is between “working” directory and the “repository”

Here is now the video you are waiting for, a very informative  tutorial that can get you started from beginner to advanced.

Credit to the video uploader. I learned alot from this tutorial. And I am sure you will too.

In another note, once you got a good grasp on Git. You might want to put your repository/project online then you know whats coming , GitHub! There’s other repo container out there but GitHub is like the standard. Anyways  thats it for now 🙂

Web Content Accessibility Guidelines 2.0

Us web developers has individual guidelines for ourselves, but there really is a real guidelines out there and its called WCAG 2.0 as in Web Content Accessibility Guidelines to develop a healthy functional and accessible product for a range of audiences.

You can read through them in the w3.org website for thorough explanations.

Here is a good checklist too by Wucag
https://www.wuhcag.com/wcag-checklist/

I can always go back and have a read through for a refresher.

Hello Semantic UI Front-End Framework!

While doing my own quick template as I am experimenting with variety of frame work available including bootstrap, bourbon neat (sass), I find myself just nit picking every features that each framework has.

Bootstrap is good but it didnt let me choose any particular feature I want, for example the nav-bar in Bootstrap seems pretty generic, I want the behavior but I dont want the look and feel. I suddenly remember Semantic UI and its looking pretty promising from way back since 2013.

It lets you nit pick like I said any features you like including their grid responsive system similar to bootstrap grid system. It also have themes you can choose and combine with your current template which is really neat.

Check out this website for incorporating it in your project be it React, Nodejs or angularjs or just normal template project like I am doing now

https://excodus.com/en/blog/post/what-semantic-ui-and-how-set-environment

More coming up.

Shorthand CSS Rule Reference

Im having trouble understanding and memorizing short-hand rule so I thought I made myself a quick reference.

background: (color) (image: use url()) (repeat: repeat-x,y,no-repeat) (attachment: scroll,fixed,local,initial,inherit) (position(x,y): in pixels or left top right bottom combination of 2s, or center)

border: (width) (style) (color | initial | inherit)

border-radius: (top-left-radius) (top-right-radius) (bottom-right-radius) (bottom-left-radius)

columns: (width | auto) (column count | initial | inherit)

flex: (grow: 0 - N) (shrink: 0 do not shrink) (basis: this is the width, auto | initial | inherit | value px %)

flex-flow: (direction: row,row-reverse,column,column-reverse,initial,inherit) (wrap: wrap, nowrap, wrap-reverse, initial, inherit)

font: (font-style) (font-variant font-weight) (font-size/line-height) (font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit)

@font-face: (font-name) (url)
Note: use any font-name and reference them to your css eg. .my-container{ font-family: font-name }
position: No shorthand for position use SASS mixin.

transition: (transition-property) (transition-duration) (transition-timing-function) (transition-delay)