12 приемов работы с JavaScript, которых нет в большинстве туториалов

[Heidel]

https://habr.com/ru/company/skillbox/blog/446770/

1. Создание массива, в котором содержаться только уникальные значения при помощи Set

const array = [1, 1, 2, 3, 5, 5, 1];
const uniqueArray = [ ...new Set(array)];

console.log(uniqueArray);

// (4) [1, 2, 3, 5]

Работает только для примитивных типов - undefined, null, boolean, string, number

2. Кэширование длины массива в циклах

При такой записи цикл for повторно проверяет длину массива при каждой итерации

for (let i = 0; i < array.length; i++){
  console.log(i);
}

Можно задать переменную, в которую положить длину

const array = [1, 2, 3, 4, 5, 6];
for (let i = 0, length = array.length; i < length; i++) {
	console.log(array[i]);
}

3. Оценка короткого замыкания (оценка Маккарти)
Использование вместо тернарного оператора логических операторов && и ||

&& - вернет первое false значение; если каждый операнд равен true, то вернется последнее вычисленное выражение
||- вернет первое false значение; если каждый операнд равен false, то вернет последнее вычисленное выражение

let one = 1, two = 2, three = 3;

console.log(one && two && three); // result 3

console.log(0 && null); // result 0

console.log(one || two || three); // result 1

console.log(0 || null); // result null

Пример использования

return (this.state.data || "Fetching data");

Преобразование в boolean
Все значения в JS - truthy, за исключением 0, "", null, undefined, NaN и false - они являются falsy.

Можно использовать оператор !, который также преобразует тип в логический

const isTrue = !0;
console.log(isTrue);

const isFalse = !1;
console.log(isFalse);

const alsoFalse = !!0;
console.log(alsoFalse);

Преобразование в строку

const val = 1 + "";

console.log(val);
console.log(typeof val);

ПРЕОБРАЗОВАНИЕ В ЧИСЛО
Преобразование строки в число

let int = "15";
int = +int;

console.log(int);
console.log(typeof int); // number

Преобразование булевых значений в число

console.log(+true);
console.log(+false);

Использование двух тильд ~~

const int = ~~"15";
console.log(int);
console.log(typeof int); // number

Использование двух тильд для определения наличия элемента в массиве при помощи indexOf

const myArray = [1, 2, 3, 4, 5];

if (~myArray.indexOf(2)) {
	console.log("Найден");
} else {
	console.log("Не найден");
}

if (~myArray.indexOf(10)) {
	console.log("Найден");
} else {
	console.log("Не найден");
}

Возведение в степень **

console.log(2 ** 3);

Преобразование Float в целое число

console.log(23.9 | 0); // 23
console.log(-23.9 | 9); // -23

console.log(1553 / 10 | 0); // 155
console.log(1553 / 100 | 0); // 15
console.log(1553 / 1000 | 0); // 1

Автоматическое связывание
Стрелочные обозначения ES6 можно использовать в методах класса, и при этом подразумевается привязка.

Обрезка массива
1 способ - переопределить длину length

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;

console.log(array);

2 способ - более быстрый с использованием .slice()

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4); 

console.log(array);

Вывод последнего значения (значений) массива с использованием .slice()

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 
console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]

@темы: Javascript

---

Pluralsight - Java Fundamentals - The Java Language

[Heidel]

Наследование

public class CargoFlight extends Flight {
}

CargoFlight cf = new CargoFlight();

Так же можно задать

Flight f = new CargoFlight();

но в этом случае будут доступны только методы родительского класса

Поля дочерних классов скрывают (перезаписывают) поля родительского класса

public class Flight {
	int seats = 150;
}

public class CargoFlight extends Flight {
	int seats = 12;
}

Ключевое слово @Override показывает, что метод был переписан намеренно

public class Flight {
	@Override
	int getSeats() { return 12; }
}

public class CargoFlight extends Flight {
	int getSeats() { return 50; }
}

@темы: Java

---

Pluralsight - Java Fundamentals - The Java Language

[Heidel]

Паттерны
https://www.tutorialspoint.com/design_pattern/

Отредактировать переменные среды
Path C:\Program Files\Java\jre-10.0.2\bin

C:\Users\tfomina\IdeaProjects\ThirdProject\out\production\ThirdProject>java -version

Запустить программу из консоли
C:\Users\tfomina\IdeaProjects\ThirdProject\out\production\ThirdProject>java Main

Объявление массива

float[] theVals = new float[3];
float[] theVals = { 10.0f, 20.0f, 15.0f }; // то же самое

For-each Loop

for (loop-variable-declaration: array) 
	statement;

Пример

float[] theVals = { 10.0f, 20.0f, 15.0f };
float sum = 0.0f;
for( float currentVal: theVals )
	sum += currentVal;

Установка initial state в классе - 3 способа
- Field initializer
- Constructors
- Initialization blocks

Field Initial State
Поля получают "нулевое" значение по умолчанию

Конструкторы

public class Passenger {
	public Passenger() {
		
	}
	
	public Passenger(int freeBags) {
		this(freeBags > 1 ? 25.0d : 50.0d);
		this.freeBags = freeBags;
	}
	
	public Passenger(int freeBags, int checkedBags) {
		this(freeBags);
		this.checkedBags = checkedBags;
	}
	
	private Passenger(double perBagFee) {
		this.perBagFee = perBagFee;
	}
}

Initialization Block

public class Flight {
	private int passengers, flightNumber, seats = 150;
	private char flightClass;
	private boolean[] isSeatAvailable;
	
	// Initialization Block
	{
		isSeatAvailable = new boolean[seats];
		
		for(int i = 0; i < seats; i++) {
			isSeatAvailable[i] = true;
		}
	}
	
	public Flight() {}
	public Flight(int flightNumber) {
		this.flightNumber = flightNumber;
	}
	
	public Flight(char flightClass) {
		this.flightClass = flightClass;
	}
}

@темы: Java

---

JS "или"

[Heidel]

type={data.metaTypeName || type}
className={`user-avatar ${size || ""}`}

@темы: React, Javascript

---

Gulp

[Heidel]

How do I update to Gulp 4?
https://www.liquidlight.co.uk/blog/article/how-do-i-update-to-gulp-4/

@темы: Gulp

---

Webpack

[Heidel]

https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9

@темы: Webpack

---

Updating an object with setState in React

[Heidel]

https://stackoverflow.com/questions/43638938/updating-an-object-with-setstate-in-react

@темы: React

---

React

[Heidel]

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import axios from 'axios';

class Reddit extends Component {
  state = {
    posts: []
  }

  componentDidMount() {
    axios.get(`https://www.reddit.com/r/reactjs.json`)
    .then(res => {
      const posts = res.data.data.children.map(obj => obj.data);
      this.setState({ posts });
      //console.log('posts ', posts);
    })
  }

  render() {
    return (
      <div>
        <h1>/r/reactjs</h1>
        <ul>
          {this.state.posts.map(post => (
            <li key={post.id}>
              <a href={post.url}>{post.title}</a>
            </li>
          ))}
        </ul>
      </div>
    )
  }
}

ReactDOM.render(<Reddit />, document.getElementById('root'));

@темы: React

---

Defining Component APIs in React

[Heidel]

http://jxnblk.com/writing/posts/defining-component-apis-in-react/

@темы: React

---

React Native

[Heidel]

npm install -g create-react-native-app

@темы: React Native

---

Pure React - 2

[Heidel]

PropTypes

import PropTypes from 'prop-types';
function Comment({ author, message, likes }) {
return (
  <div>
    <div className='author'>{author}</div>
    <div className='message'>{message}</div>
    <div className='likes'>
      {likes > 0 ? likes : 'No'} likes
    </div>
  </div>
  );
}
Comment.propTypes = {
  message: PropTypes.string.isRequired,
  author: PropTypes.string.isRequired,
  likes: PropTypes.number
}

Валидаторы

PropTypes.array
PropTypes.bool
PropTypes.func
PropTypes.number
PropTypes.object
PropTypes.string

Дополнительно

PropTypes.node
PropTypes.element

There are validators for node and element. A node is anything that can be rendered, meaning numbers, strings, elements, or an array of those. An element is a React element created with JSX or by
calling React.createElement.

PropTypes.instanceOf(SpecificClass)
PropTypes.oneOf(['person', 'place', 1234])
PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.boolean
])

PropTypes.arrayOf(PropTypes.string)
    – Would match: ['a', 'b', 'c']
    – Would not match: ['a', 'b', 42]
PropTypes.objectOf(PropTypes.number)
    – Would match: {age: 27, birthMonth: 9}
    – Would not match: {age: 27, name: 'Joe'}

PropTypes.shape({
name: PropTypes.string,
age: PropTypes.number
})

keys - ключи
!!! keys should be stable, permanent, and unique for each element in the array
- stable - у элемента всегда одинаковый key независимо от его позиции в массиве
- permanent - ключ не меняется между рендерами
- unique - не может быть двух элементов с одинаковым ключом

setState
2 способа обойти асинхронность setState
1. callback function

this.setState({name: 'Joe'}, function() {
    // called after state has been updated
    // and the component has been re-rendered
    // this.state now contains { name: 'Joe' }
});

2. Functional setState

this.setState((state, props) => {
    return {
        value: state.value + 1
    }
});

Что хранить в стейтах
As a general rule, data that is stored in state should be referenced inside render somewhere. Component state is for storing UI state – things that affect the visual rendering of the page. This makes sense
because any time state is updated, the component will re-render.
If modifying a piece of data does not visually change the component, that data shouldn’t go into state.
Here are some things that make sense to put in state:
• User-entered input (values of text boxes and other form fields)
• Current or selected item (the current tab, the selected row)
• Data from the server (a list of products, the number of “likes” on a page)
• Open/closed state (modal open/closed, sidebar expanded/hidden)

@темы: React, Pure React

---

Pure React - 1

[Heidel]

Чтобы вернуть несколько элементов из компонента, не оборачивая их в общий элемент, можно использовать React.Fragment (was added in React 16.2)

function HelloWorld() {
  return (
    <React.Fragment>
      <Hello/>
      <World/>!
    </React.Fragment>
  );
}

Узнать версию Реакт

import React from 'react';
console.log(React.version);

Выражение (exprеssion) возвращает значение и может быть использовано внутри JSX

1 + 2
buttonLabel
aFunctionCall()
aFunctionName

statement не возвращает значения и не может быть использовано внутри JSX

примеры

var a = 5
if(true) { 17; }
while(i < 7) { i++ }

«If» in JSX
1 способ - тернарный оператор

function ValidIndicator() {
  var isValid = true;
  return (
    <span>{isValid ? 'valid' : 'not valid'}</span>
  );
}

2 способ - булевый оператор &&

function ValidIndicator() {
  var isValid = true;
  return (
    <span>
      {isValid && 'valid'}
      {!isValid && 'not valid'}
    </span>
  );
}

(&& возвращает первое ложное значение (то, на котором остановились вычисления), а если его нет, то последнее)

Пример

const LikeButton = ({ count }) => (
  <span className="like-button">
    <i className="fa fa-heart"/>
    {count > 0 &&
      <span className="like-count">
        {count}
      </span>
    }
  </span>
);

Создать приложение и перейти в его папку

create-react-app static-tweet && cd static-tweet

Template Strings - с обратными кавычками

person = `${firstName} ${lastName}`;
url = `foo.com/users/${userId}/items/${itemId}`;

Добавить Moment.js

npm add moment

import moment from 'moment';

@темы: React, Pure React

---

CSS3: вкладки (tabs) на чистом CSS

[Heidel]

HTML

<div class="wrapper">
  <input type="radio" name="tab" id="tab-1" checked>
  <label for="tab-1">Tab-1</label>
  <input type="radio" name="tab" id="tab-2">
  <label for="tab-2">Tab-2</label>
  <input type="radio" name="tab" id="tab-3">
  <label for="tab-3">Tab-3</label>
  
  <div class="content">
    <article class="tab-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis ligula vel libero imperdiet gravida sed sit amet nibh. Mauris porta turpis sit amet vulputate mollis.</article>
    <article class="tab-2">Aliquam mi tortor, luctus blandit porta et, dignissim mattis lectus. Quisque rutrum vehicula sagittis. Vivamus mollis eros nec feugiat dapibus.</article>
    <article class="tab-3">Etiam sagittis et ante a lobortis. Nunc tincidunt feugiat turpis in sagittis. Cras placerat risus eget tellus porttitor, eu lacinia sem ullamcorper.</article>
  </div>
</div>

CSS

$bg: #2c3e50;
$font: #34495e;
$grey: #ecf0f1;
$accent: #e74c3c;

* {
  box-sizing: border-box;
}

body {
  background-color: $bg;
  font-family: Arial;
  font-size: 18px;
  color: $font;
  line-height: 1.5;
}

.wrapper {
  width: 80%;
  margin: 150px auto;
  
  input {
    display: none;
    
    &:checked + label{
      background-color: $accent;
      color: white;
    }
  }
  
  input[id="tab-1"]:checked ~ .content .tab-1,
  input[id="tab-2"]:checked ~ .content .tab-2,
  input[id="tab-3"]:checked ~ .content .tab-3 {
    display: block;
  }
  
  label {
    cursor: pointer;
    display: inline-block;
    padding: 10px 40px;
    background-color: $grey;
    border-radius: 20px 20px 0 0;
  }
  
  .content {
    position: relative;
    
    article {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #fff;
      padding: 70px 40px;
      border-top: 5px solid $accent;
      border-radius: 0 5px 5px;
      display: none;
    }
  }
}

https://jsfiddle.net/4wpz3rn2/57/

@темы: Верстка, Tabs, CSS3

---

Стилизация чекбокса CSS3

[Heidel]

HTML

<label class="checkbox">
  <input type="checkbox">
  <span class="box"></span>
  lorem ipsum
</label>

CSS

$white: #fefefe;
$font: #3e4651;
$red: #e76b6b;
$green: #249991;

body {
  padding: 50px;
  font-family: Arial;
  color: $font;
  font-size: 50px;
}

.checkbox {
  cursor: pointer;
  
  input {
    display: none;
    
    &:checked + .box {
      background-color: $green;
      
      &:after {
        left: 49px;
      }
    }
  }
  
  .box {
    position: relative;
    display: block;
    float: left;
    width: 100px;
    height: 50px;
    background-color: $red;
    border-radius: 50px;
    margin-right: 20px;
    transition: background-color 0.2s ease-in-out;
    box-shadow: inset 0 0 5px 2px rgba(0,0,0,0.3);
    
    &:after {
      content: '';
      position: absolute;
      width: 50px;
      height: 96%;
      background-color: $white;
      border-radius: 50%;
      left: 1px;
      top: 2%;
      transition: left 0.2s ease-in-out;
      box-shadow: inset 5px -5px 10px 5px rgba(0,0,0,0.2), 0 0 1px 1px rgba(0,0,0,0.2);
    }
  }
}

https://jsfiddle.net/a7ku5obh/72/

https://codepen.io/docode/pen/yYWENN

@темы: Верстка, Стилизация чекбокса CSS3, CSS3

---

Центрирование блока по высоте

[Heidel]

1 способ
HTML

<div class="container">
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porttitor nulla vitae mollis luctus. Nulla ultrices, massa eu ornare luctus, orci massa gravida ligula, sed venenatis dolor dolor sit amet magna. Aenean eleifend arcu quam, lobortis tincidunt justo porta tempor. Proin ligula tellus</div>
</div>

CSS

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  background: red;
}

.box {
  background: green;
  margin: auto;
  width: 30vw;
}

https://jsfiddle.net/ycrj89hk/10/

Несколько блоков по высоте
HTML

<div class="container">
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porttitor nulla vitae mollis luctus.</div>
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porttitor nulla vitae mollis luctus.</div>
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porttitor nulla vitae mollis luctus.</div>
</div>

CSS

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  background: red;
  flex-direction: column;
}

.box {
  background: green;
  margin: auto;
  width: 30vw;
}

https://jsfiddle.net/ycrj89hk/15/

2 способ
HTML

<div class="container">
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porttitor nulla vitae mollis luctus.</div>
</div>

CSS

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  background: red;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.box {
  background: green;
  width: 30vw;
}

https://jsfiddle.net/ycrj89hk/21/

@темы: Верстка, CSS3

---

Redux

[Heidel]

Understanding Redux: The World’s Easiest Guide to Beginning Redux

https://medium.freecodecamp.org/understanding-redux-the-worlds-easiest-guide-to-beginning-redux-c695f45546f6

1. ONE application STATE OBJECT managed by ONE STORE.

npm install redux

1 часть https://daveceddia.com/what-does-redux-do/
2 часть https://daveceddia.com/how-does-redux-work/

@темы: Redux, React

---

[Heidel]

Промисы с if

	fetchData = date => {
		this.setState({ isLoading: true });
		let _date = date ? date : moment().format('YYYY-MM-DD HH:mm');
		let states = {
			isLoading: false,
			date: _date,
			message: '',
			data: [],
			events: [],
			latestFetchedDate: _date,
			topHeaderPosition: 0,
			leftHeaderPosition: 0,
			valuesById: {}
		};

		helper.loadDataByUrl(api.events.getActive + _date)
			.then(response => {
					if (response.length) {
						states.events = response;

						helper.loadDataByUrl(api.report.dailyWorkSheet2.create(_date))
							.then((response) => {
								//TODO: здесь разобрать данные по заголовкам и ячейкам

								if (response.status == -1) {
									states.message = response.message;
								} else {
									let _data = response.data;

									states.data = _data;
									states.topHeaderPosition = -1;
									states.leftHeaderPosition = -1;
									states.valuesById = this.getValuesById(_data);
								}
								this.setState({ ...states });
							});
					} else {
						this.setState({ ...states });
					}
				})
	}

Промисы со вложенными then

	fetchData = date => {
		this.setState({ isLoading: true });
		let _date = date ? date : moment().format('YYYY-MM-DD HH:mm');
		let states = {
			isLoading: false,
			date: _date,
			message: '',
			data: [],
			events: [],
			latestFetchedDate: _date,
			topHeaderPosition: 0,
			leftHeaderPosition: 0,
			valuesById: {}
		};
		
		helper.loadDataByUrl(api.events.getActive + _date)
			.then(response => {
				if (response.length) {
					states.events = response;
					return helper.loadDataByUrl(api.report.dailyWorkSheet2.create(_date))
				}

				return null;
			})
			.then(response => {
				if (response === null) return;

				if (response.status == -1) {
					states.message = response.message;
				} else {
					let _data = response.data;

					states.data = _data;
					states.topHeaderPosition = -1;
					states.leftHeaderPosition = -1;
					states.valuesById = this.getValuesById(_data);
				}
				
			})
			.then(() => {
				this.setState({ ...states });
			})
	}

@темы: Promise, Javascript

---

[Heidel]

Практические видеоуроки для веб - разработчиков

https://monsterlessons.com/

@темы: Redux, React

---

Шпаргалка по пакетному менеджеру NPM

[Heidel]

Шпаргалка по пакетному менеджеру NPM
https://habr.com/post/133363/

@темы: NPM

---

Studing

[Heidel]

Month 0 - Udacity CS101, Harvard CS50

https://www.udacity.com/course/intro-to-computer-science--cs101

https://javarush.ru/quests/QUEST_HARVARD_CS50
https://geektimes.ru/company/vertdider/blog/289043/