Check out "Do you speak JavaScript?" - my latest video course on advanced JavaScript.
Language APIs, Popular Concepts, Design Patterns, Advanced Techniques In the Browser

Replacing code for production with Babel transformation

posted in JavaScript on 2020-11-29   babel transform plugin production replacement

If you are building some sort of an app, Babel is probably part of your build system. It is that thing which converts our fancy code to valid, working in a browser, JavaScript. Just recently at work I had to design a solution that swaps a class based on the environment. Or in another words, we have logic that should not reach our users. The file should be available locally and on our staging environment but not in production. A tiny Babel plugin was the cheapest solution for me so I decided to share the result.

read more

You Really Don't Need All That JavaScript, I Promise by Stuart Langridge

posted in JavaScript on 2020-09-12   javascript performance optimization

JavaScript is your behavior layer; the way to add interactivity to your sites, to provide a slick and delightful user experience, to make everything fast and easy and clean. But at some point everything changed: the tail started to wag the dog instead and development became JavaScript-first.

read more

React: 50 shades of state

posted in JavaScript on 2020-07-21   react state management form components button viewmore compound state component theme onchange application state feature state data client text span const

We all know that one of the most challenging task in software development is state management. This is especially true for the JavaScript world. There are thousands of articles on this topic and so I decided to write another one 😁. I wanted to share my current thoughts on the different state types. I found that answering "What lives where?" question is far more important than the actual state management. Which more or less is an implementation detail.

read more

Recreating Facebook's Recoil library

posted in JavaScript on 2020-07-12   recoil facebook state management mycoil facebook s recoil counter atoms atom component library formattedcountervalue selector key function javascript subscribers hook const return

This weekend I decided to play with the new kid on the block - Facebook's Recoil library for managing state. I did the trivial counter example to see how it works. It's pretty simple idea so I wondered how much it takes to replicate its features. I found the exact answer - 70 lines of code. Obviously, my implementation didn't cover everything but it was fun so I decided to share my findings.

(A side note: I did not look at the code of Recoil. I didn't want to be bias on how to write my version.)

read more

React: rendering vs running your components

posted in JavaScript on 2019-07-03   react input component app form button components running rendering

Recently I stumbled upon on an interesting bug which reminded me what is actually happening with my components when React is rendering them.

read more

The return statement is not the end (but it should be)

posted in JavaScript on 2016-01-05   function format return result var defined function dosomething code var format function result var format return result var

Well, I kind of lied in the title of this article. Of course that it is the end of the function. Once we call return everything else after that is simply not executed. Ops … I did it again, I kind of lied again.

read more

My front-end performance case study

posted in Must-see on 2014-08-25   css file blog time page images performance pagespeedinsights main

I’m reading and watching a lot of interesting things regarding client-side performance. I’m interested in the browser’s processes happening before and just after the page’s load. There are tons of stuff to think about. Before a couple of days, I joined the online workshop of Vitaly Friedman. I had a great time and learned some clever facts about performance optimization.

read more

Mobile Web performance auditing

posted in Must-see on 2014-07-10   performance

Building high performance sites and apps is crucial to your success on the web, and never more so as people start using smartphones as their primary means of internet access. But how can you make sure you're squeezing out every last bit of performance from your projects? In this talk we'll look at the tools you need to succeed and how to integrate them into your workflow.

read more

Simple, good looking separator made with pure CSS

posted in CSS3 on 2014-02-12   jsbin translate 95px 12px transform translate 95px line small link top solid 1px border top solid block border top display block border content display block

I'm currently working on the official site of AbsurdJS. There are a lot of code samples out there and I wanted to present them in JSBins.

read more

Web Highlights #4

posted in HTML5 on 2013-05-15   http performance media queries behavioral breakpoints tools google css transitions great optimize things

Everyday I'm reading or watching something which I find helpful. Normally I bookmark those things, but at the end I have dozen of folders and subfolders which I never check. So, I decided to make such blog post where I'll share valuable things in the net.

read more

The Breakpoint

posted in HTML5 on 2013-03-10   devtools addy osmani paul irish breakpoint ep episode ll javascript performance tooling

A bunch of useful things about our lovely browser - Chrome. Dev tools theming, console tips, editing of SASS directly inside the browser.

read more

Web assets - tips for better organization and performance (discussion at VarnaLab)

posted in HTML5 on 2013-02-28   web assets tips varnalab discussion performance organization subject web assets slides screencast

A screencast of the discussion at VarnaLab on subject "Web assets - tips for better organization and performance". The slides are available here.

read more

sugru - self-setting rubber that can be formed by hand

posted in Inspiration on 2013-02-20   setting rubber hand formed sugru silicone rubber overnight flexible silicone rubber strong flexible silicone play dough bonds turns moulds exciting

sugru is the exciting new self-setting rubber that can be formed by hand. It moulds like play-dough, bonds to almost anything and turns into a strong, flexible silicone rubber overnight.

read more

Chrome Devevelopment Tools could be really helpful

posted in HTML5 on 2013-02-09   detecting memory leaks network performance rendering analyze network performance instrumented development platforms googledevelopers channel strongly recommend ilya grigorik nice screencast build faster javascript code

"Your browser is one of the most and best instrumented development platforms -- you may just not realize it yet. In this episode we'll take a whirlwind tour of how to analyze network performance, rendering and layout pipeline, as well as detecting memory leaks in your Javascript code, and using audits and extensions to build faster and better apps!". A nice screencast by Ilya Grigorik. I strongly recommend the subscription to GoogleDevelopers channel.

read more

Adobe\'s strategic transformation and the Flash Platform

posted in ActionScript on 2011-11-20   adobe adobe community read full article social connections touch interfaces fundamental transformation change innovation time devices

Adobe is in the midst of a fundamental transformation. We are transforming from software in boxes to solutions in the cloud, and to a world of touch interfaces on devices, and social connections everywhere. This is a time of both innovation and change for Adobe and for the Adobe community ...Read the full article here.

read more

A RobotLegs Book

posted in ActionScript on 2011-07-22   book robotlegs joel hooks finished information read

@Stray and @Joel Hooks finished their book for RobotLegs. Definitely it is something that you should read. More information here.

read more

AS3: dynamic text field to curve (TextField on an arcing path)

posted in ActionScript on 2011-05-04   text var curvedtext textformat number radius tf direction endangle startangle

[2]Most of the articles here are tightly connected to my daily work. As you probably know from one of my latest posts (runtime font loading/embedding) I worked a lot with texts these days. There was a request for producing curved text from a dynamic field. Of course it wasn't so easy to create such a feature. I wrote a simple class that did the job and I decided to share it.

read more

AS3: runtime font loading (embedding)

posted in ActionScript on 2011-04-25   font field loader import flash swf public static const format font_export_name string font_file_name class

Flash is wonderful technology and has many advantages. Before a couple of years it was really popuplar to use it for displaying fonts that are not installed on the user's machine. Flash is still powerfull tool for such kind of tasks. These days I worked on a project which had to use a lot of fonts. It wasn't possible to embed all of them so I decided to implement runtime embedding.

read more

AS3: Using custom Metadata in Flex (part 1)

posted in ActionScript on 2010-12-28   metadata public flex mycustomclass information metadata tags tag as3 flash utils describetype public function mycustomclass

I'm sure that you've already used metadata tags in your flex applications. There are several reserved keywords like [Bindable], [Embed], [Event] and so on (the full list is available here). The function of the metadata tags is to provide additional information to the flex compiler. For example information about embeding assets, dispatching events. This article doesn't explain how to use the default flex tags (you can learn that from here). It shows you how to create your own metadata tags and how to use them.

read more

How to import images directly into the html code (base64)

posted in PHP on 2010-11-11   base64 file html css small form data fp image
read more

Trace JSON object in AS3

posted in ActionScript on 2010-07-17   str description gettypeof o spaces var object information users

I'm absolutely sure that all of you are working with JSON objects. It's pretty helpful to be able to print them and find out what exactly they contain. I wrote a simple function that makes this possible.

read more