Discover millions of ebooks, audiobooks, and so much more with a free trial

Only $11.99/month after trial. Cancel anytime.

10 Lessons in Front-end
10 Lessons in Front-end
10 Lessons in Front-end
Ebook130 pages58 minutes

10 Lessons in Front-end

Rating: 2 out of 5 stars

2/5

()

Read preview

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.

LanguageEnglish
Release dateMar 6, 2016
ISBN9781310078651
10 Lessons in Front-end
Author

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

Programming For You

View More

Related articles

Reviews for 10 Lessons in Front-end

Rating: 2 out of 5 stars
2/5

1 rating0 reviews

What did you think?

Tap to rate

Review must be at least 10 words

    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

    Enjoying the preview?
    Page 1 of 1