ROAD TO CODING

Step by step from noob to Front-End Developer HTML5 | CSS3 | Javascript | jQuery | AngulraJS | ReactJS | Sass | GIt | Bower | Gulp | Bootstrap

[roadtocoding]

Centered div with calc()

Centered div with calc() + backface-visibility + animation 1turn

[roadtocoding]

React is fun itself. No JSX,Babel

It’s really fun to know how to use React without JSX, Babel and some bunch of stuff. It's helped me understand the main principle of React library, thanks Brian Holt form Netflix and Frontend Masters course. If you use React, how do you explain the difference between createClass and createElement? - yes, it’old stuff, now all use ES6 class syntax, but it’s pretty fun to clarify the core principle of react.  Sure I don’t use it in production just for understanding the key principles 

[roadtocoding]

Flexbox + Sass + Basic Transition CSS

Continue with previous post  Flexbox 3x3 gallery + Sass lets dive to Basic Transition CSS with great free course   Creating CSS Transitions by scotch.io  Feel free to fork my codepen and make more flexible this layout. I use such sass features:  1.  lighten($color, $amount)  Makes a color lighter. 2.  darken($color, $amount)  Makes a color darker. 3.  map-get($map, $key)  Returns the value in a map associated with a given key. 4. and flex-grow,flex-shrink, flex-basic - property.  5. css transition: ease-in-out, easy, linear.

[roadtocoding]

Flexbox 3x3 gallery + Sass

We all love flexbox, also we need to create the flexible layout for our contents. I try combine the course  What is the flexbox?  by  Wes Bos and Sass features as well. Feel free to fork  my codepen and make more flexible this layout. I use such sass features: 1.variables. 2. index($list, $value) function  ,returns the position of a value within a list. 3. simple sass list, similar to array.   4. ‘@each‘ directive  Read this to great article about it Sass control directives Working with lists and @each loops in Sass

[roadtocoding]

How to create React component / ES6

To setup our first React JS component,first we need to provide the three main links to our HTML:

-  https://npmcdn.com/[email protected]/dist/react.min.js -  https://npmcdn.com/[email protected]/dist/react-dom.min.js -  https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js

In the video, I provide 3 ways to create simple React component. 

1st way with pure JS:

2nd way with JSX syntax:

3rd way with ES6 arrow function and const:

Getting Started  with React to be  JavaScript Ninja .

[roadtocoding]

Getting started with ES6

What does the ES6 (ECMAScript 2015)  offer us?

Default strict mode.

You don’t have to explicitly write use strict to enable it. 

The ‘let’ and ‘const’ keywords in ES6.

The ‘let’ and ‘const’ we can use to declare the variables having the block level scope with  curly braces {}. The only difference between ‘let’ and ‘const’ - the ‘const’ cannot be changed once initialized.

The next post we’ll overview the other features of ES6:

- Arrow Function => in ES6 -  String Templates in ES6 - Default Parameter Values and a lot of new ones. 

[roadtocoding]

MarkSheet is a free tutorial to learn HTML and CSS. It's short (just as long as a 50 page book), simple (for everyone: beginners, designers, developers), and free (as in 'free beer' and 'free speech'). It consists of 50 lessons across 4 chapters, covering the Web, HTML5, CSS3, and Sass.

[roadtocoding]

I feel a little relieved after understanding the  React.propTypes.  IT’s awesome. I’ll write about it soon. 

[roadtocoding]

Getting Started  with React to be  JavaScript Ninja .

The best learning resources I found to upgrade your JavaScript skills.  Tutorials and advanced articles for the react.js library.

Articles:  5 Practical Examples for Learning React Learning React.js: Getting Started and Concepts Getting Started with React

Tutorials/Courses: React.js Fundamentals  Learn React & Redux with Cabin React.js tutorials Build with React

Videos: React for Beginners React Fundamentals Learning React - be Jet-man! 

[roadtocoding]

DOM modification techniques. Pure JS.

see the  full code on codepen 

[roadtocoding]

Testing Objects for Properties with pure JS.

Pure JS function to determine if the properties of not  of any given  object.  The function takes two arguments : object name, object's property and use the .hasOwnProperty(propname) method of objects to determine if that object has the given property name. .hasOwnProperty() returns true or false if the property is found or not.

[roadtocoding]

Scss Nesting. Nesting Properties

Nesting in Scss allows us create the clear DOM relationship on the code structure.  Scss: .dady{    color: blue;    .son{        font-size: 5rem;     } } Compile to CSS: .dady { color:blue; } .dady .son {font-size:5rem;} Another features of Scss nesting is Nesting Properties.  Scss: .dady { background: {         image: url(’custom url’);         size: cover;         repeat: no-repeat;     } } Compile to CSS: .dady {  background-image: url(’custom url’);  background-size: cover;  background-repeat: no-repeat; }

[roadtocoding]

5 FLEX-BOX TIPS YOU SHOULD KNOW. See codepen 

See the Pen 5 flex-box tips you should know. by Dmytro (@palaniichukdmytro) on CodePen

[roadtocoding]

Free eBooks for Web Developers.

[roadtocoding]

Max & Min Array Value/ Sum Arr Value/Average Arr Value/Odd Arr Value.

To solidify knowledge with Array method and for clear understanding of the JS’s array. I’ve wrote some example.

//Max Min value of array //using sort() method with compareFunction as argument and // min(),max() method of Math object.

var arr = [5,34,545,44,4,3,8, -5, -1, -22]; var maxValueArr = arr.sort(function(a, b){return b-a}); document.write("Max value of array with <b>sort</b> method: " +  maxValueArr[0] + "</br>"); document.write("Max value of array with <b>max()</b> method: " + Math.max.apply(null, arr) + "</br>"); var minValueArr = arr.sort(function(a,b){return a - b}); document.write("Mix value of array with <b>sort</b> method: " + minValueArr[0] + "</br>"); document.write("Max value of array with <b>min()</b> method: " + Math.min.apply(null, arr) + "</br>"); //sum of all array's values var sumArrValue = 0; for(var i = 0; i < arr.length; i++){    sumArrValue += arr[i]; } document.write("Sum of all array's values: " + sumArrValue + "</br>"); // average value of array var avgArrValue = Math.round(sumArrValue / arr.length); document.write("Average array value: " + avgArrValue + "</br>"); //odd value of array document.write("Odd value of array: "); for(var x = 0; x < arr.length; x++){    var oddValue = arr[x] % 2 !== 0;    if(oddValue){        document.write( arr[x] + " ");    } }

[roadtocoding]

Simplified JavaScript Jargon (short SJSJ) is a community-driven attempt at explaining the loads of buzzwords making the current JavaScript ecosystem in a few simple words. The idea is not to replace individual documentations, but to act as some kind of glossary that can be easily referenced.

Would you like to understand all geek JavaScript developers buzzwords?Just use simplified JavaScript jargon.  

[roadtocoding]

Highlight the code syntax in your Tumblr posts.

Thanks @devilopper​ for the great and useful advice, how to get syntax highlighting in Tumblr posts. It’s very easy.

How to get syntax highlighting in your Tumblr posts

some example: 

var sum = function(a,b) {return a + b;} sum(2,2);