Everand Logo

Welcome to Everand!

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

    From $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

    By Krasimir Tsonev

    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
    PublisherKrasimir Tsonev
    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
    View More

    Related podcast episodes

    Related articles

    • UNLIMITED

      Code An Admin Back-end In Django

      Dec 13, 2022

      Credit: www.djangoproject.com OUR EXPERT Matt Holder has been a fan of the open source methodology for over two decades and uses Linux and other tools where possible. More featurepacked source code for this project can be downloaded from https://

      6 min read

    • UNLIMITED

      FLASK Web Frameworks

      Jun 4, 2019

      The main focus of Python has always been to get you cracking on with your coding – the language was never made for web programming. However, this has just made it more interesting to extend the language for the web, or to create an interface to web-b

      9 min read

    • UNLIMITED

      HotPicks

      Jul 27, 2021

      HotPicks
      12 min read

    • UNLIMITED

      Types Of Databases

      Aug 27, 2019

      NoSQL databases provide the performance, scalability and stability that’s required by the modern data-driven apps we interact with these days. But that is where the similarity between NoSQL systems end. In fact, it wouldn’t be wrong to say that the o

      1 min read

    • UNLIMITED

      Common Errors

      Aug 27, 2019

      If you receive a ‘Script not found’ error, this probably means that you don’t have the mod scripts installed in your Minecraft directory. Check that you’ve replaced .minecraft with the one from McPiFoMo; this should include mcpipy, which will be full

      1 min read

    • UNLIMITED

      Creating Flutter apps

      Aug 22, 2023

      Credit: https://flutterawesome.com/calculator-create-with-flutter/ David Bolton has been programming Flutter apps for a couple of years but this is the first time he’s done Flutter development on Linux. The Flutter plugin includes tools for insertin

      9 min read

    • UNLIMITED

      DJANGO Create A Database-driven Website

      Jun 4, 2019

      The Django web framework was named after the famous guitarist Django Reinhardt and was first created by web developers at a small newspaper in Kansas. The main goals of Django is to enable fast development of complex websites with database needs. It

      7 min read

    • UNLIMITED

      What Is The Future Of Game Streaming Now That Stadia Is Dead?

      Oct 31, 2022

      Once hyped as being ‘the future of gaming’, the Google Stadia game streaming service was officially, just three years after launch and before even making it to Australian shores. When game streaming first launched we did have some apprehension about

      2 min read

    • UNLIMITED

      Why Python?

      Apr 7, 2020

      Python is an interpreted, high-level, general-purpose programming language that was first released in 1991 by its creator, Guido van Rossum. Very similar in programming construct to how BASIC (Beginners All-purpose Sybollic Instruction Code) was used

      1 min read

    • UNLIMITED

      Top 10 Programming Languages

      Jan 5, 2023

      Top 10 Programming Languages
      8 min read

    • UNLIMITED

      Create A Fyne Journaling App

      Jun 25, 2024

      Create A Fyne Journaling App
      7 min read

    • UNLIMITED

      Best Laptops

      Jul 5, 2023

      Best Laptops
      10 min read

    • UNLIMITED

      QEMU, KVM And The Other Ones

      Feb 9, 2021

      QEMU, KVM And The Other Ones
      4 min read

    • UNLIMITED

      Installation And Setup

      May 2, 2023

      Installation And Setup
      1 min read

    • UNLIMITED

      Best Free VPN For Android

      May 3, 2023

      Best Free VPN For Android
      4 min read

    • UNLIMITED

      Linux Invades Windows

      Apr 2, 2024

      Linux Invades Windows
      1 min read

    Related categories

    Reviews for 10 Lessons in Front-end

    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: [email protected]

      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