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

Enter VS Code on Windows

Hi I have been a fan of sublime text for a while now. But also tried different IDE available in the community. Recently been trying ATOM, but it seems a little laggy at times. Anyways here are my top shortcuts I used for Visual Studio Code editor:

[ ctrl + , ] Open settings for configurations
[ctrl + `] Opening terminal console
[ctrl + d] Select next occurence [ctrl + u] deselect back
[ctrl + f2] Select all occurence
[ctrl + k ctrl + c] Add line comment
[alt + shift + down or up] Duplicate line down or up
[ctrl + p] Open command palette and find files quick
[ctrl +  “[” or “]” ] Moves your current line via tab
[ctrl + shift + f ] Find text in files
[ alt + arrow left or right ] Go back and forward
[ ctrl + shift + \ ] Go to matching bracket
[ F12 or CTRL + F2  or ALT F12 ] Go to definition and implementation, peek definition
[ F8 ] Go to the next error
[ Ctrl + W ] Close the current window
[ alt + shift + left or right ] Shrink or grow selection on brackets
[ ctrl + alt + up or down ] Add a cursor for multiple editions

Understanding Sorting Algorithm

I was once asked years ago if I know any sorting algorithm and I terribly failed to answer. As a self taught coder I never encounter having to sort records manually. Because most programming languages have a function already built-in to do this ‘sort’ of thing (pun intended).

So what is it? You my future self should already know the gist of it. Its basically a way to sort set of records based on from lowest or highest to lowest. There are bunch of sorting algorithm listed in this below link:

Different types of sorting algorithms

The most common one is Bubble sorting, you take the first value in the collection or array and compare to the second, if second value is lower, you swap the second to the first. Then we take the second value and compare to the third. Every swap you flip a flag that a swap has happen. You just keep repeating until the swap flag remain false and then everything should be sorted.

For more detailed videos of known sorting algorithm whenever you need it below are full explanations.

Algorithms Playlist

Regular Expression: Lookahead and Lookbehind

Ever wonder what this regular expression means? “^(?<=PO)abc$”, the parenthesis in the beginning is the “positive lookbehind” as per symble less than. It pretty much check any characters before “abc” that has to equal to “PO” otherwise any expression wont happen. It is like a STOP to the expression and fails if it doesn’t match.

For more information check this link:

https://stackoverflow.com/questions/2973436/regex-lookahead-lookbehind-and-atomic-groups

And also a thorough explanation happening under the hood, this is a good explanation as you follow the paragraph:

https://www.regular-expressions.info/lookaround.html

If you are wondering whether you can put it in any order, yes you can but an explanation is below:

https://stackoverflow.com/questions/2126137/regex-lookahead-ordering

CentOS Administration

List of administration tasks on a CentOS machine with VirtualMin/WebMin installed

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

2018 © Ideas, designs and algorithms