Category Archives: Web Development

Anything web development stuff!

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 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 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)

Sass – Bourbon – library useful mixins

Bourbon is gem library used for css to help developers and designers style their html.

To install the gem make sure ruby and gem is installed. Afterwards type:
@gem install bourbon

Then go to your sass/scss folder and bring up command line for it. and type: @bourbon install
it should create a folder with all your bourbon functionality and in your scss put `import ‘bourbon/bourbon’` at the beginning and you can code away with the help of mixin/functions for accelerated developing.

Bourbon: Useful Mixins
– background: tint(red, 40%); –> Mix with white
– background: shade(blue, 60%); –> mix with black
– .element {
@include position(relative, top right bottom left);
}
– size(20px); outputs width: 20px; height: 20px;

Check these beginners tutorial for using bourbon + neat:
http://blog.teamtreehouse.com/introduction-neat-semantic-sass-grid

and

https://webdesign.tutsplus.com/articles/6-essential-bourbon-neat-mixins–cms-24894

and

If you want to accelerate your SASS development even further:
https://www.sitepoint.com/5-ways-improve-sass-bourbon/

Credit to the authors.

Putting your NodeJS up for production, user consumption?

Now that I have a better understanding in how WebApps with NodeJS, it seems like a very daunting task having not deal with Apache/PHP technology anymore. As a PHP Developer myself its hard trying to wrap the idea of doing everything in Javascript, from logic to api calls.

It is expected that web technology will go in this direction, making the browser do all the work in the front-end side of things to asynchronously calling apis for data.

When your app is good to go, then what?? Put it up of course! How?? Its not like apache serving all dynamic and static files for you now.

Check this site out for reference as well: http://blog.danyll.com/setting-up-express-with-nginx-and-pm2/

– NginX
– Nodejs
– PM2
– Express
– Any database of your choosing, I found out that relational databases is not a very popular choice for developers in the Node Community, but you can use them and its base wholly on your preference and use cases.

Check the video below for reference.

What is DevOps?

A new term for new-comers or old timer like myself going back to their field. This term seem to be toss around anywhere I look, I found a video that would explain what it actually means and why it is important.

Summary: A DevOps is term where Developers and Operators collaborates to build a working system to eliminate issues that could arise when a feature needed by a developer isnt present on the platform a product they are implementing.The video below will explain further.