Discipline and order rule! I messed with the order of PRs and destination branches for PRs on Github and spent half an hour trying to untangle all this.
I'm grateful to the lab practice that we have so much practice with git.
Today I learned:
Today I learned:
Today I learned:
Урррааааааа! Я зачислен на программу платной годовой стажировки в Microsoft! Но перед этим я буду полгода учиться в Boot Camp'е. Полагаю это будет Code Fellows. Чувствую себя очень восторженно - будто мне сделали самый приятный подарок за всю взрослую жизнь. Это несколько странно, конечно, потому что самым большим таким подарком и, соответственно, самым приятным должен бы был стать выигрышь green card. Но там я был больше ошеломлен и никак не мог до конца поверить, что мы можем переехать в США. Теперь же мы здесь, живем и вполне себе неплохо живем (по-американским меркам, но не по нашим, конечно), работаем, зарабатываем, дети в школе, страховка присутствует и очень даже неплохая. И вот - стажировка! Я долго шел к этой цели - уже полгода как я прошел все необходимые формальности чтобы только быть рассмотренным в качестве одного из кандидатов на стажировку. И вот - одно короткое собеседование на прошлой неделе в штаб-квартире Microsoft и сегодня письмо, что моя кандидатура одобрена.
Я получил пакет предварительных документов, у меня много вопросов:
Data visualization project: build US map with top economic activities for each state. I want to get data spread over all industry groups for each state to see what are economy drivers for each state.
#. Unable to get much data from API in the way I want. #.
There are too much data I want to retrieve from Census bureau API - it's ok to get 200 rows, but if I want to break it down to more grained data - the API shuts down. The reason I want more data - its current aggregation seems weird for my goals. For example - two industries (5415 - Computer Systems Design and Related Services is not in 51 - Information) belonging in my opinion to one group are actually in different.
One way to solve it - prefetch all data to local storage and work with it. Then what is the best way to do it? Or maybe it's better to pretend that I have one, and just work with data as if I have the API for it.
There are bunch of links to good articles to grasp what D3 is about:
It takes some time to grasp how selection works in D3. Misunderstanding starts from Introduction to D3 by Curran Kelleher and his notebooks. If Update and Enter are different selections, then why when I set X coordinate and block color for update selection only, the whole result is correct - the color of all blocks is the same and they are divided appropriately along X axis?
The only explanation is that there is only the whole cycle every time and all objects are involved:
selection.data() we have empty placeholder for each data point in a dataset;selection.enter() we have DOM constructed accroding to data and attributes defined on stage 'Enter' applied to each new element;selection.update() we have additional attributes applied to 'old' elements, those which weren't added during Enter processing... and (it was the main bug in my understanding of the rendering stages in D3) to new elements if the attributes weren't defined during 'Enter' and defined on 'Update' stage;select.exit().remove() just removes unbound elements; something like a garbage collection.In order to illustrate notes above I crafted two versions of the code:
function render(data, color){ var t = d3.transition() .duration(2750); var rects = svg.selectAll("rect").data(data); console.group('Render'); // Enter log('Before enter', rects); rects.enter().append("rect") .attr("y", 50) .attr("width", 20) .attr("height", 20) .style("fill-opacity", 1e-6) .transition(t) .style("fill-opacity", 1) log('After enter', rects); // Update rects .attr("fill", color) .attr("x", scale) log('After update', rects) // Exit rects.exit().remove() .transition(t) .style("fill-opacity", 1e-6) log('After exit', rects); console.groupEnd('Render') } setTimeout(() => render([1, 2], "red"),0); setTimeout(() => render([1, 2, 3, 4, 5], "blue"),2500); setTimeout(() => render([1, 2, 3], "green"),5000)
FreeCodeCamp React projects: Camper Leaderboard.
function to(promise) { return promise.then(data => { return [null, data]; }) .catch(err => [err]); }
componentDidMount. An explanation - Initial data via AJAX.FreeCodeCamp React projects: Markdown online parser - start coding.
The user story and the desired result.
Explanation from Dan Abramov. Google for solution alternatives.
The problem looks like:
react-hot-loader\index.js' is not a loader (must have normal or pitch function)
To solve it we need to move react-hot-loader from webpack.config.js to .babelrc as described in Dan's post (check step 3.2.a).
Second problem with dependencies of eslint and depricated rule jsx-a11y/href-no-hash. Solved it including to rules into .eslintrc - "jsx-a11y/href-no-hash": 2, "jsx-a11y/anchor-is-valid": 2;
Third problem is the working server doesn't produce bundle.js. But as I've got it's not a bug but a feature - webpack doesn't generate output when it runs in with devServer.
Fourth problem is server does rebuild, but after checking for update and finding the updated module doesn't hot reload react components saying:
App is up to date.
Solved it after a couple of hours by reading different issues (#581 and #100 gave me a clue) and finally using manual of react-hot-reload. I've exported all my components as hot.
I've got escaped HTML result of a markdown converter function. When I tried to put the result into an output component on the page I got raw HTML on the page. The way to convert it into renderable HTML is to use weird function dangerouslySetInnerHTML as described on SO page . Here is a bit about the function name and sense begind it.
FreeCodeCamp projects: Simon game - start coding.
The user story and the desired result.
Explanation on the Simon game.
We can get circle sectors by CSS hacking for div elements with special background filling or trasformations. It's many lines of an unintuitive code. My way is to set a background image for each sector to inline SVG. Code is very intelligible and clear:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" id="fourColorsCircle"> <path fill="red" d="M100,100 L100,0 A100,100 1 0,1 200,100 z" id="sector_XY" /> <path fill="blue" d="M100,100 L200,100 A100,100 1 0,1 100,200 z" id="sector_Xy" /> <path fill="yellow" d="M100,100 L100,200 A100,100 1 0,1 0,100 z" id="sector_xy" /> <path fill="green" d="M100,100 L0,100 A100,100 1 0,1 100,0 z" id="sector_xY" /> </svg>
Use Web Audio API to make sounds out of HTML. Great explanation with a working code is at CSS tricks. Oscilator with sine wave form at a given frequency with Gain node to control fade out.
There is SVG modified for any touched element or inner shadow for the element (but it doesn't work with SVG). There is lighten function in LESS but I don't want to add another framework (even if it's just CSS post-processing framework) just because of one function. I've tried to use filter: opacity in CSS as described in the post, but it produces different result on different colors - works best on green and worse on red. Finally I replace SVG for a second on key pressed to its brighter version.
The problem is the Web Audio API oscilators are played at once despite they are played in a loop. The way to manage sequences I need to set exact time spot for each note to be played, schedule it. Here is the first short and the second much thorough explanation.
I want the game to be accessible, but I don't like the shape of common active outline. Couldn't find any advices on making it more acceptable - not just plain squared, but something that repeats the form of the original element. Variant - to implement the whole keyboard layout to play the game with ARIA description on key mapping.
I want some fanfare-like sound. And the only thing that come to my mind is ta-da-da-daaa-da-da from hockey matches timeouts. Looked at Wiki and after a while I've found it is the Charge!. In order to play it through the tone generator I had to implement additional function which let me to play chords and set note duration.
One way to do it is to put setTimeout() everywhere I want a delay. But it makes it harder to deal with a sequence of delays or a sequence of UI interactions. I want a Promise() power to chain all interactions in a highly visible structure. SO gives an example of such implementation.
I want to pause listening on buttons while the app is playing a sequence: it could be inconsistent for a user to press a button during the play and wait for it to be consumed by an app as a sequential input. The problem is that an osicllator neither has callback nor returns a promise. After a little research I've found a solution in the form of an onended event of an Oscillator node (here is description). The final solution is to implement a sequence player to return a promise of all promises and a tone player to return a promise on onended event. But there is another problem. Gain node provides a fade-out and goes on even when the sound is barely audible but the UI is still frozen. It's inconsistent for a user to hear or see nor activity from an app but being unable to interact with it. In order to produce more reliable behavior I exluded the last tone from a waiting list and during it's play the user may start interact with the app.