mdorl-blog

[mdorl-blog]

Сopying objects

Обычно "глубоко" копируют объекты и массивы, которые содержат вложенные элементы так: JSON.parse(JSON.stringify(obj)) Есть минус - не скопируются функции, могут быть проблемы с некоторыми символами.

Поверхностно (ток 1-й слой) копировать объекты так: { ...obj, ...{a: 123} } Если клонировать в цикле, то существенно производительней будет так: Object.assign({}, obj, {a: 123} )

Копирование массива: Удобный синтаксис: [...arr, 123] Производительный: [].concat(arr, [123], 321)

Понять какой-когда использовать можно с помощью замеров:

- Красивое поверхностное копирование объекта:

console.time() new Array(100000).fill().reduce((acc,el,i)=>( {...acc, ...{[i]:i}} ),{})   console.timeEnd()

Результат: 15640 ms

- Производительное поверхностное копирование:

console.time() new Array(100000).fill().reduce((acc,el,i)=>Object.assign(acc,{[i]:i}),{}) console.timeEnd()

Результат: 106  ms

# 15 сек и 106 мсек? Заметна разница?

- Красивое поверхностное копирование массивов:

new Array(100000).fill().reduce((acc,el)=>[...acc, el],[])

Результат: 37 сек

- "Производительное":

new Array(100000).fill().reduce((acc,el)=>[].concat(acc, el),[])

Результат:  55 сек

Т.е. наш производительный оказался менее производительным, все из-за reasign acc. Мб там garbage collector запускается между синхрон операциями? Давайте видоизменим и увидим настоящую разницу:

- красивое: arr = [] for(let i = 0; i<100000; i++) arr = [...arr, i]

Результат: 37 сек

- производительное: arr = [] for(let i = 0; i<100000; i++) arr.concat(i)

Результат: 33 мс

=> РАЗНИЦА: 37 секунд и 33 миллисекунды

[mdorl-blog]

D3. First step

I started to learn how d3 works with the course https://www.udemy.com/course/learn-d3js-for-data-visualization/

Data visualization is the ability to tell a story or an idea through visuals and graphics. As the old saying goes, “A picture is worth a thousand words.” 

5 tips for creating great visualizations are: Understanding your audience, choosing an appropriate visual, remove clutter, draw attention using shape size & color, and lastly telling a story.

D3 stands for data driven documents. It’s important to understand that data is what drives the visualization, NOT the other way around.

Right now i know nothing about it, but have new info that can use later. 

https://www.thinkwithgoogle.com/marketing-resources/data-measurement/tell-meaningful-stories-with-data/

http://www.vizwiz.com/2013/01/alberto-cairo-three-steps-to-become.html

https://pudding.cool/2017/05/song-repetition/

[mdorl-blog]

Vuex

The Source Code can be found attached to this Lecture.

Useful Links:

Vuex Github Page: https://github.com/vuejs/vuex

Vuex Documenation: https://vuex.vuejs.org/en/

[mdorl-blog]

website with best design solutions

https://www.awwwards.com/

[mdorl-blog]

Update

Here I’m. I have 2 month work in start up company and make my commercial website with adonis js and vue js. I stopped because moved to another city.

While I was working in the company I find out that has several blind spots:

I need to improve my skills with CSS grid and vue.js/react.js before I will my second try for a job.

So, my next steps:

1. Learn https://scrimba.com/g/gR8PTE - free CSS Grid Course.

2. Learn Vue.js or React.js course.

3. Make new CV website with CSS grid and one of frameworks that I mentioned above.

Let’s go!

[mdorl-blog]

First results

It's been 9 months since my init post here. I have built 3 full website (including CV) and on 25 of Januery got my first job as full stack developer. 

[mdorl-blog]

Awesome video how to run client and server from react using one script

[mdorl-blog]

Useful links

https://bennettfeely.com/clippy/

https://www.styleshout.com/free-templates/

[mdorl-blog]

change custom  domain heroku

heroku domains:add www.example.com

heroku domains

https://adm.tools

Domains - add -

1) Subdomain: @ Type: ALIAS Data: DNS target data from heroku (blabla.herokudns.com)

Subdomain: www Type: CNAME data: DNS target data from heroku (blabla.herokudns.com)

[mdorl-blog]

fonts converter

https://font-converter.net/en

[mdorl-blog]

Transition-timing-function

transition-timing-function https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function

transition-delay https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay

easing function cheat sheet https://easings.net/

CSS Easing Animation Tool https://matthewlein.com/tools/ceaser

https://codepen.io/Colt/pen/JrqepQ

[mdorl-blog]

CSS Transition

Using CSS transitions   -   https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

transition-duration https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration

transition-property https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property

[mdorl-blog]

Autoprefixer CSS online

https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix

https://autoprefixer.github.io/

[mdorl-blog]

rotate

The rotate() CSS function defines a transformation that rotates an element around a fixed point on the 2D plane, without deforming it

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate

https://developer.mozilla.org/en-US/docs/Web/CSS/angle

[mdorl-blog]

Transform

transform  https://developer.mozilla.org/en-US/docs/Web/CSS/transform?v=control

scale https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

transform-origin https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

[mdorl-blog]

Deploying from cloud9 to heroku

heroku login heroku git status git init open package.json and add to "scripts" : "start": "node app.js" git add . git commit -m 'my first commit' heroku create git remote -v git push heroku master