alexmost/blog

personal blog

blog's Issues

how to launch Grunt from other folder

grunt options - https://github.com/gruntjs/grunt-known-options/blob/master/index.js
option --base --gruntfile

build frontend in container

Article that will tell how to setup build environment with installed deps for your project.

Optimize images load (preloader)

Use similar preloader as medium.com.
insights here - https://jmperezperez.com/medium-image-progressive-loading-placeholder/
https://github.com/aFarkas/lazysizes/blob/gh-pages/README.md

webpack code complexity analizer

Tool that can execute code complexity analyses. Visualize problem parts e.t.c. Source of knowledge is webpack stats.json file.

rxjs post comparison autocomplete implementation

Implement simple autocomplete with rxjs and without. Show the difference + cover with tests.

implement property based testing for flowjs

bind to some domain name alexmost.info or something similar

SOFTWARE ARCHITECTURE FUNDAMENTALS review

Continuous integration.
Mantra: If something hurts do it often. Bring the pain forward.

Continious delivery:
Everyone is responsible for delivery.

Technical knowledge:

1. stuff - you know
2. stuff you know you don't know
3. stuff you don't know you don't know
   Stuff you know is your technical depth.
   Stuff you know you don't know is your technical breadth.
   And it finds out that technical breadth is as important as your technical depth.
   And area of technical breadth is more important to software architect.

different architecture patterns:
layered architecture
open layered
event driven (broker, event-processor, broker-less)
Must admit that all those kind of architectures are applicable also on a frontend and a backend.
There is also service oriented architecture.

things learned week #8

Amazon deploys to production every 11.6 seconds

Nice example of how continuous delivery works in a real world and what value it can bring to business.

A container is a function call

containers are wilelly used through all over the companies nowdays. And literally become a standart for many companies. Author suggests to look on containers as functions. An there is an interesting thought that container can be used a functor.

Client/server Web applications as a single program

need to write description

Projects

mkfifo

for i in $(seq 10); do cat tests/fixtures/nginx-portal.log;done > fifo

make the site mobile friendly

[x] set meta viewport
[] fix header wrapping
[] make share buttons visible on mobile view

things learned week #2

Blog posts, specs or articles

Fetch and XHR limitations

Brief overview of the fetch object. Key features of fetch are promise-based api, support for streaming and also about how it suits better with service workers. Also states that XHR will be some subset of fetch API in future.

Applicative do notation in haskell

...

Responsive web design basics

Good knowledge base for developing responsive mobile first designs from Google.

Creating a Mobile-First Responsive Web Design

Nice article about mobile first design implementation details with real demo cases and implementation details.

CSS Font-Size: em vs. px vs. pt vs. percent

Quite old article, but still is relevant for making decision on usage em vs pt vs px vs % for the font size on the webpages.

async/await, promises and observables

Good post about tools for async programming, but still leaves more questions than gives answers.

medium image progressive loading

Nice way for uploading images that is used on medium.

intrinsic placeholders for images

Another one good technique that prevents redundant page reflows during image loads.

lQIP concept

General overview of technique for faster image download.

Videos talks, tutorials

The ServiceWorker: The network layer is yours to own

Nice introductory video from google developers of how we can use service workers and for what. What is offline first and why do we need it. Suggest to watch if you are not familiar with the concept of service worker, it takes only 14 minutes to become in a picture.

Progressive Web Apps

Awesome overview of this new concept. Another one argument for me to use service workers. This concept changes a little bit your thinking about what mobile application is and how you can implement it.

add favicon.ico

add some lambda favicon

snake autopilot

implement snake + snake autopilot algorythm

add tags to blogpost

• tags to blogpost
• possibility to search or display tags

Make post header look like this (with icons for date and tags):

things learned week #6

Projects

React Story Book

Nice approach for building modular isolated react components. And also solves some kind of documentation issues. Instead of reading a boring manual you can just check all possible states of the component, play around with it and get all necessary information of how this component can be used.

UIHarness

Another one tool for creating isolated UI components. React Story Book took this one for it's basis.

Google Caja

Sanitizing tool for third party scripts that are injected to your page.

Blog posts, specs or articles

A new way of blogging about javascript

Shows how you can add some interactive code snippets to your static blog.

Everything I know about the script tag

Nice overview of all features of script tag. Async/defer are very important to remember and use.

RUM vs synthetic

Describes two different approaches for measuring frontend performance. The winner solution is to use both.

is it brunch time?

Awesome research story with the help of twitter streaming api.

You can increase your intelligence

This article states the fact that you can increase the cognitive resource and intelligence of your brain by constant training.

Jasmine vs Mocha

Good comparison of testing frameworks. From one side Jasmine has builtin asserting and mocking functionality from another mocha is just a test runner and you can use different options for assertions and stubbing.

apply eslint to new project with webpack

Describe the process of eslint integration with small incremental steps with webpack.

social share buttons

add share buttons:

twitter
facebook
g+

configure deploy to gh-pages

Browser Rendering Optimization

Write short review about the course Browser Rendering Optimization.
RAIL principle

Response - 100ms
Animation - 16ms
Idle - 50ms
Load - 100 ms

requestAnimationFrame (16ms)
js -> style -> layout -> paint -> composite

Webworker

brew package for vagga-docker

create homebrew package to be able to install and update vagga with simple

brew install vagga

functional programming in javascript book review

Comparison % of code coverage (imperative vs functional)
Cyclomatic complexity comparison

add google analytics code

things learned week #1

How Great Programmers Avoid Bugs

Interesting comparison of the different approaches for writing high-quality code from famous software engineers. The main point I think is that whenever you write your code you should prove that it actually works. That thing can be made by different instruments, some of them are better than others but that should be in any case (tests, mathematical or logical proofs).

Event streams in kafka

Modern approach for synchronizing distributed systems. Shows how to fight with inconsistency, deadlocks and race conditions in distributes systems.

data visualisation tips

Seems like nothing new but useful to keep in mind when preparing some presentation with numbers, statistics, and analytics. My thought is the key idea of all charts and diagrams in your presentation is not about showing how smart are you or that thing that you are talking about but to help people to get the key point of your presentation.

redux-observable

Approach for composing asynchronous actions in terms of redux architecture

new free rxjs video lessons

clojure spec

Protocol oriented programming in Swift

awesome algorythm visualizer
Fancy algorythm visualization tool, was also thinking about creating something like that.

fizz buzz with tensor flow
Funny story, just worth reading.

eliminating nondeterminism in tests
This post highlights the main problem that comes with nondeterministic operations in software tests. The main source of evil is IO that brings unpredictable behaviour and makes our tests flaky. Author suggests a couple of ways for solution of that problem. Nothing new but useful to remember.

add canonical to blog

add canonical link to blog pages.

wrote a little blog post about how to add canonical to hakyll

LQIP - write about experience with blog images optimization

Istambul travel feedback

Just brief overview of trip to Istambul.

make website ssl protected

use cloudfare
This will allow to use service workers

babel plugin for compose instead of bind

modules documentation generator

Idea is to create abstract documentation generator.

moqup - https://app.moqups.com/AlexMost/2mHT12qJ/view

Extend with plugins:

1. esdoc.
2. react playbook.
3. documentation.js.
4. Discovering dna interfaces. (Basic general rule to add new type of modules and meta tags).
5. Ability to include existing modules from npm or github (show README) but to be able to add some additional notes.

Add fulltext search:
https://github.com/olivernn/lunr.js
https://github.com/fergiemcdowall/search-index

syntax highlight

1. Add possibility to define syntax highlight for sources

improve the main theme

make theme look like medium blog post (something simple)

replace add this with links

example - http://www.fse.guru/twil-7
also add share links at the bottom of each article.

stop using -g while install npm

So the main idea is that installing global npm deps is quite not a good idea, better to use Make for build, or npm commands, but not to rely on a global deps.

things learned week #4

Videos talks, tutorials

Delivering the goods

Awesome talk from Paul Irish. Explains how bandwith and latency influences page load optimization. Explains what is a critical path. Also shows some live examples on http://www.webpagetest.org/.

React.js Conf 2016 - Jared Forsyth - Redux, Re-frame, Relay, Om/next, oh my!

Brief overview of the most popular ways of managing app state for components based on React. Still it leaves more questions than answers.

Jafar Husain - Falcor: One Model Everywhere at react-europe 2016
ReactEurope

Nice comparison of GraphQL and Falcor. The key idea for me from that talk, Falcor is mostly about javascript syntax and json and at the same time GraphQL has type system and designed for applications with huge amount of entities.

Laney Kuenzel & Lee Byron - GraphQL Future at react-europe 2016

Nice status update for GraphQL. It is a quite young concept but already has a big ecosystem around it. Still there are a lot of questions but we already can start using this technology. Also describes how observables can help us to build reactive real-time applications.

Dan Abramov - The Redux Journey at react-europe 2016

The author of Redux highlights the core concepts and future of this library. Redux is built on top of a really simple idea and pure Redux, in a nutshell, doesn't give you a lot of features. What it gives is the contract and constraints about how you application state is changed. It is relativelly young project but it has a rich ecosystem around it already.

Blog posts, specs or articles

Performance Budget Metrics

Description and comparison of different types of metrics that can tell you something about the performance issues of the web pages.

Performance Budget

A brief explanation what performance budget is and why it can be important for your website.

The Power of Writing

Good article about how writing can make your better. And how everything that you write can have influence on the world.

Stop Getting In My Way! — Non-blocking UX

Nice way to improve UX is to make your UI non blocking. The key idea is not to force user to wait while some action will be completed.

CS105x Introduction to Apache Spark review

100 TB array sort in 23 minitest

1 PT data sort the first ever

algorythms section

Separate blog section which will describe and demonstrate different algorythms

Different ways to separate pure and impure code

So the main idea is to write an article that tests and haskell IO monad actually has one thing in common - they force you to separate pure logic from logic with side effects. This two things are not the same but have that feature in common.

testing with rxjs

write a short overview of how you can write simple unit tests for time dependent operations.

add service worker for making blog available offline

things learned week #7

Videos

Learned Helplesness

Description interesting psychology phenomena. "Everything seems impossible until it's done"

Articles and blogposts

The Churn

A lot of good thoughts about progress in programming languages. Agree that OO and FP are not mutually exclusive they are instruments for different types of tasks. Also, the author says that one language can't be better than other because it's just the instrument. Maybe but definitely one instrument can be more powerful and advanced than other and languages can be different in their power. You should peek not the most powerful but the most appropriate tool for your job. That is one of the reasons why you should continue to learn new languages (tools) to be able to choose the right tool for the right job.

Beating the Averages

Agree with every letter in that article. Languages are different and have different power, it is hard to understand that until you try. For me languages are just instruments and more advanced and powerful instruments can seem a little bit weird from the first glance (because you don't know how to use them). But after passing some learning curve you starting to realize the real power of those instruments and after that point, your current instruments may seem not so perfect as you thought before.

Why not haskell

Some complaints about Haskell usage for the web development and for prototyping. Nice comments feed, suggest you to follow.

We must leave Earth for one critical reason

That main reason for exploring new planets is that humanity has no backup plan if something goes wrong with Earth (asteroid crash, viruses e.t.c)

Mixins considered harmful

Finally good article that explains why higher order components are better than mixins. And why you should avoid their usage at all.

Add read next link at the bottom of each article

Or maybe "suggest related articles" (according to related tags)

frontend architecture review

As from the recent time I have a lot of tasks that are related to the frontend architecture I decided to read this book.

Defines frontend development as a part of whole development process that must be taken to account at early prototyping stages and to the end working sollution.

Highlights the importance of single responsibility principle.

Interesting approach to create modifiers to css classes inside data attributes. The motivation is that data attribute is 2 dimensional instead of single dimensional class (present or not).

Highlights the importance of CI server.

Frontend architects are those who create blueprints for site creation.

The author defines four main pillars for modern software architecture. They are: code, process, testing and documentation. At the first part of the book, there are a couple of interesting examples of modular css approach that author used for Red hat site. Described major approaches for building modular css OOCSS, SMACSS and BEM. Actually, I didn't get a lot about the differences between two first but have a better understanding of BEM now.

Quite good ovierview of modern web page performance test tools. Here are a couple of interesting resources that can help you with that:http://httparchive.org/, https://whatdoesmysitecost.com/.

Programming like it's 2116

Describe the ideas as thoughts about the language of the future.

1. Hoogle.
2. Insanely smart type systems.
3. Property based testing.
4. STM.

Add comments block

disquss probably

things learned week #5

Projects

Faker.js

Nice lib for creating some fake data. Can be useful for demos, prototypes and mockups.

Blog posts, specs or articles

Four months with Haskell

Quite nice article from one guy that switched from ruby + js to haskell. Was really interesting for me as a fan of haskell. Author describes major pros and cons of haskell, it's ecosystem and community.

State Streams and React

Describes the value of RxJs for modern apps. Shows an example of building applications with React and Rxjs. Personally I was also working on something similar but stucked on composing components hierarchy. Need to check this out.

4 Steps To Be An Effective Engineer

" To be an Effective Engineer you need to be responsible, valuable, efficient and replaceable."

What I learned from analysing 1.65M versions of Node.js modules in NPM

Just awesome research on how npm works. Gives some advises about how you can speed up you npm install time. Provides interesting statistics about existing packages.

Why Functional Programming Works for Games

This post invalidates a couple of myths about functional programming for game dev. I agree with author and sure that ideally functional approach will lead to more robust and reliable codebase and to more performant games.

The Art of the Scientist

This article highlights the importance of the scientific approach for doing any thing. Was surprized to discover that penicillin, microwave, X-ray, gunpowder, plastics, and vulcanized rubber were discovered accidentally because of someones wrong guesses.

Clojure concurrency and parralelism

Nice video to watch - http://www.infoq.com/presentations/Are-We-There-Yet-Rich-Hickey

• A lot of modern languages are concentrated on a fake problems instead of fundamental things like state, time, consistency, complexity, pure functions e.t.c.
• Objects are not changing we are superimposing those objects over time.
• Future is a function from the past

mutext free concurrency

map vs pmap

(time (dorun (map phone-numbers files)))
"Elapsed time: 1569.819494 msecs"
=> nil
(time (dorun (pmap phone-numbers files)))
"Elapsed time: 673.610202 msecs"

Continuous delivery (live lessons from O'Relly)

Continuous integrations - integrating early and often.
Continuous deployment - deploy the final stage of CI.
Continuous delivery - make sure that your software is always deployable.

• Software delivering speed matters.
• About 2/3 of features has zero or negative value for the end user. (Do less). Features add complexity to our system. Less features more quality.

Continuous delivery

• reduce the cost of deploy (delivery).
• Feedback loops - increase software quality.
• reduce risk of ongoing delivery.
• enables us to learn and adapt quickly.

create deprecate package.

Package that will provide deprecate function api.

things learned week #3

Videos talks, tutorials

GraphQL introduction

Still mysterious topic for me but I'm sure that that thing is the future of API building. Quite good overview from facebook with live demos.

Blog posts, specs or articles

The technology behind facebook cover photos

Facebook approach for reducing content load time. Quite simple but it helped them to speed up the page load by 30 percent.

Image optimisation

Good checklist of image optimisations from Google.

Everything You Need to Read and Watch About Muhammad Ali

RIP

Imagemagick for optimizing images for web

Awesome article with a lots of details about image optimisation algorythms (in russian)

Web page bloat statistics

Interesting research about page size growth. Interesting fact that average page today is almost 150 times larger than the average page twenty years ago.

My increasing frustration with Clojure

This article highlihts concerns about how clojure is moving.