10 Lessons in Front-end
2/5
()
About this ebook
Even though some of the chapters present basic concepts in front-end development the book is more about medium and advanced programmers. It's a collection of 10+ curated articles published on krasimirtsonev.com/blog. "10 Lessons in Front-end" we'll show you ES6 features, Flux design pattern, animations in HTML or how to smoothly run your application in 60 frames per second. You'll learn about the dependency injection in Angular or string-to-dom-element trick in jQuery. The book is not the typical step-by-step tutorial. It forms a wonderful mix of interesting topics by touching different front-end technologies.
Krasimir Tsonev
Krasimir Tsonev is a coder with over ten years of experience in web development. Author of two books about Node.js he works with a strong focus on quality and usability. Krasimir is interested in delivering cutting edge applications. He enjoys working in the industry and has a passion for creating and discovering new and effective digital experiences.Right now Krasimir is working with technologies like HTML5/CSS3, JavaScript, PHP and NodeJS, but originally he started as a graphic designer. Later, being a flash developer he spent several years using ActionScript3 and frameworks like RobotLegs. After that, as a freelancer he continued delivering full stack web services for his clients - graphic design, front-end and back-end programming.With the rise of the mobile development, Krasimir is enthusiastic to work on responsive applications targeted to various devices. He graduated at the Technical University of Varna with bachelor and master degree in computer science. He loves blogging, writing books and making talks about the latest trends in web development.
Related to 10 Lessons in Front-end
Related ebooks
Make Bootstrap Themes Rating: 0 out of 5 stars0 ratingsJames Learning Javascript Programming Rating: 0 out of 5 stars0 ratingsJavascript Concepts: 1St Edition Rating: 0 out of 5 stars0 ratingsLearn Angular: Build a Todo App Rating: 0 out of 5 stars0 ratingsCSS Master Rating: 0 out of 5 stars0 ratingsCSS Grid Layout: 5 Practical Projects Rating: 0 out of 5 stars0 ratings50 Recipes for Programming CSS3 Rating: 0 out of 5 stars0 ratingsQuick JavaScript Learning In Just 3 Days: Fast-Track Learning Course Rating: 0 out of 5 stars0 ratingsJavascript - 50 functions and tutorial Rating: 0 out of 5 stars0 ratingsA Pocket Guide to CSS Animations Rating: 5 out of 5 stars5/5Client Side Web Development For Beginners (HTML/CSS/JS) Rating: 4 out of 5 stars4/5PHP Examples Part 3 Rating: 5 out of 5 stars5/5HTML5,CSS3,Javascript and JQuery Mobile Programming: Beginning to End Cross-Platform App Design Rating: 5 out of 5 stars5/5Introduction to PHP, Part 5, Second Edition Rating: 0 out of 5 stars0 ratingsPHP Interview Questions, Answers, and Explanations: PHP Certification Review: PHP FAQ Rating: 0 out of 5 stars0 ratingsJavaScript Patterns JumpStart Guide (Clean up your JavaScript Code) Rating: 4 out of 5 stars4/5Introduction to PHP, Part 2, Second Edition Rating: 0 out of 5 stars0 ratingsJump Start Vue.js Rating: 4 out of 5 stars4/5More Advanced CSS: Zombie in a Ballgown: Undead Institute Rating: 0 out of 5 stars0 ratingsEasy html and css Rating: 0 out of 5 stars0 ratingsElements of Android Room Rating: 0 out of 5 stars0 ratingsUnleashing the Power of CSS Rating: 0 out of 5 stars0 ratingsJavaScript: Beginner's Guide to Programming Code with JavaScript: JavaScript Computer Programming Rating: 0 out of 5 stars0 ratingsIntroduction to PHP Web Services: PHP, JavaScript, MySQL, SOAP, RESTful, JSON, XML, WSDL Rating: 0 out of 5 stars0 ratings50 Recipes for Programming Angular Rating: 4 out of 5 stars4/550 Recipes for Programming Node.js Rating: 3 out of 5 stars3/5HTML in 30 Pages Rating: 5 out of 5 stars5/5
Programming For You
Java for Beginners: A Crash Course to Learn Java Programming in 1 Week Rating: 5 out of 5 stars5/5Game Development with Unreal Engine 5: Learn the Basics of Game Development in Unreal Engine 5 (English Edition) Rating: 0 out of 5 stars0 ratingsExcel : The Ultimate Comprehensive Step-By-Step Guide to the Basics of Excel Programming: 1 Rating: 5 out of 5 stars5/5Coding All-in-One For Dummies Rating: 4 out of 5 stars4/5SQL QuickStart Guide: The Simplified Beginner's Guide to Managing, Analyzing, and Manipulating Data With SQL Rating: 4 out of 5 stars4/5HTML & CSS: Learn the Fundaments in 7 Days Rating: 4 out of 5 stars4/5C# Programming from Zero to Proficiency (Beginner): C# from Zero to Proficiency, #2 Rating: 0 out of 5 stars0 ratingsPython Programming : How to Code Python Fast In Just 24 Hours With 7 Simple Steps Rating: 4 out of 5 stars4/5Python: For Beginners A Crash Course Guide To Learn Python in 1 Week Rating: 4 out of 5 stars4/5Grokking Algorithms: An illustrated guide for programmers and other curious people Rating: 4 out of 5 stars4/5Learn to Code. Get a Job. The Ultimate Guide to Learning and Getting Hired as a Developer. Rating: 5 out of 5 stars5/5Learn JavaScript in 24 Hours Rating: 3 out of 5 stars3/5Python QuickStart Guide: The Simplified Beginner's Guide to Python Programming Using Hands-On Projects and Real-World Applications Rating: 0 out of 5 stars0 ratingsPYTHON: Practical Python Programming For Beginners & Experts With Hands-on Project Rating: 5 out of 5 stars5/5Python Machine Learning By Example Rating: 4 out of 5 stars4/5Problem Solving in C and Python: Programming Exercises and Solutions, Part 1 Rating: 5 out of 5 stars5/5Python Data Structures and Algorithms Rating: 5 out of 5 stars5/5Linux: Learn in 24 Hours Rating: 5 out of 5 stars5/5The Unofficial Guide to Open Broadcaster Software: OBS: The World's Most Popular Free Live-Streaming Application Rating: 0 out of 5 stars0 ratingsPython GUI Programming Cookbook - Second Edition Rating: 5 out of 5 stars5/5Learn SQL in 24 Hours Rating: 5 out of 5 stars5/5
Reviews for 10 Lessons in Front-end
1 rating0 reviews
Book preview
10 Lessons in Front-end - Krasimir Tsonev
10 Lessons in Front-end
By Krasimir Tsonev
Copyright 2016 Krasimir Tsonev
Smashwords Edition
About the author
Krasimir Tsonev is a coder with over ten years of experience in web development. Author of books about Node.js he works with a strong focus on quality and usability. Krasimir is interested in delivering cutting edge applications. He enjoys working in the industry and has a passion for creating and discovering new and effective digital experiences.
With the rise of the mobile development, Krasimir is enthusiastic to work on responsive applications targeted to various devices. He graduated at the Technical University of Varna with bachelor and master degree in computer science.
Blog: http://krasimirtsonev.com/blog
Email: info@krasimirtsonev.com
Twitter: @KrasimirTsonev
GitHub: @krasimir
Credits
Krasimir Tsonev
Author
Svetlana Mircheva-Tsoneva
Book cover
10 Lessons in Front-end is a collection of articles that I published on my blog krasimirtsonev.com/blog. You'll find solutions of real-life problems, discussions around popular design patterns or unusual use cases of some language features. The book is not teaching the basics of JavaScript, HTML or CSS. It's not a step-by-step tutorial. What I'm sharing is 10+ topics that I've been into last few years. Or at least the most interesting ones.
Table of Contents
Constructive destructuring
CSS: :before and :after pseudo elements in practice
JavaScript template engine in just 20 lines
Introduction to animations in HTML
Dependency injection in JavaScript
Revealing the magic: How to properly convert HTML string to a DOM element
Distributing React components
Feeding the beast at 60fps
Dissection of Flux architecture or how to write your own
Deep dive into client-side routing
Unexpected usage of Array.length
Constructive destructuring
Destructuring is one of my favorite ES6(ES2015) features. It just shortens my code and helps me be more explicit with my statements. Let's see it in action.
What's destructuring assignment
var data = { question: '...', answer: 42 };
var { answer } = data; // answer = 42
var list = ['A', 'B', 'C'];
var [ first ] = list; // first = A
The idea is that we specify what portion of the object/array is assigned to the variables on the left side. Apparently this is a really powerful feature.
The good old options-as-object case
Sometimes we store our data in an object literal. That object travels through our functions and we use what we need from it. Not everything but just a specific properties.
function showList(options) {
var enabled = options.enabled;
return options.files.forEach(function (file) {
if (enabled) {
// ...
}
});
}
Let's say that options contains the whole configuration of our application but we are interested only in enabled and files. And instead of writing var prop = options.prop every time we may use destructuring directly in the definition of the function:
function showList({ enabled, files }) {
return files.forEach(function (file) {
if (enabled) {
// ...
}
});
}
The body of the function now becomes simple and easy to read.
Better naming and default values
There are couple of other features that may come handy if we need better naming. We may give another name to the newly created variable while destructuring.
function showList({ enabled: isReady, files: attachments }) {
return attachments.forEach(function (file) {
if (isReady) {
// ...
}
});
}
There are cases where the properties of the object are just too generic. And using an alias makes total sense. Like in the snippet above we have the knowledge that enabled means that component is ready but that is not clear by just reading the function. So renaming enabled to isReady clarifies what stands behind that boolean.
We may use default values while destructuring too:
function showList({ enabled: isReady, files: attachments = []}) {
return attachments.forEach(function (file) {
if (isReady) {
// ...
}
});
}
Give me all but not ...
Recently I was working with fat object containing lots of properties. And the thing was that I used the same object to perform a HTTP request. However, some of the fields should be removed before submitting. Otherwise I end up sending unnecessary data over the wire. Let's say that the object below is my POST data.
var data = {
username: 'Joe',
userId: 34,
sectionTitle: 'Attachments',
accessTo: ['section1', 'section2']
}
Because of some bad design decisions which I've made I now have the username and userId together with the data that should be saved in the database. Instead of creating a brand new object literal and writing something like newObj.sectionTitle = data.sectionTitle we may use destructuring:
var { username, userId, ...dataToSend } = data;
And indeed dataToSend contains only sectionTitle and accessTo.
Working with arrays
So far we saw examples using objects. Well, the same feature works for arrays too. In the beginning of the article we saw how