Centered div with calc()
Centered div with calc() + backface-visibility + animation 1turn
27 notes
·
View notes
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
57 notes
·
View notes
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.
59 notes
·
View notes
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
9 notes
·
View notes
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 .
48 notes
·
View notes
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.
35 notes
·
View notes
I feel a little relieved after understanding the React.propTypes.
IT’s awesome. I’ll write about it soon.
7 notes
·
View notes
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!
158 notes
·
View notes
DOM modification techniques. Pure JS.
see the full code on codepen
19 notes
·
View notes
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.
20 notes
·
View notes
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;
}
18 notes
·
View notes
5 FLEX-BOX TIPS YOU SHOULD KNOW.
See codepen
See the Pen 5 flex-box tips you should know. by Dmytro (@palaniichukdmytro) on CodePen
32 notes
·
View notes
Free eBooks for Web Developers.
312 notes
·
View notes
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] + " "); } }
22 notes
·
View notes
Would you like to understand all geek JavaScript developers buzzwords?Just use simplified JavaScript jargon.
30 notes
·
View notes
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);
27 notes
·
View notes