This media is not supported in your browser
VIEW IN TELEGRAM
Стильный слайдер с эффектом параллакса, реализованный с помощью HTML, SCSS и JavaScript.
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3🔥1
#макет #html #css
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥3❤2
Если не понять, как происходит работа с переменными в JavaScript, то будут возникать ошибки в коде, которые трудно избежать.
let variable1 = 'My string';
let variable2 = variable1;
variable2 = 'My new string';
console.log(variable1); // My string
console.log(variable2); // My new string
let variable1 = { name: 'Jim' }
let variable2 = variable1;
variable2.name = 'John';
console.log(variable1); // { name: 'John' }
console.log(variable2); // { name: 'John' }
Представьте, какие проблемы могут возникнуть из-за этого поведения, если вы не учтете его. Чаще всего сложности возникают в функциях, которые работают с объектами как аргументами и изменяют их содержимое.
#JavaScript #JS
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
This media is not supported in your browser
VIEW IN TELEGRAM
Реализована с помощью CSS и JavaScript
#анимация #css #javascript
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
function createGreeter(greeting) {
return function(name) {
console.log(greeting + ', ' + name);
}
}
const sayHello = createGreeter('Hello');
sayHello('Joe'); // Hello, Joe
function apiConnect(apiKey) {
function get(route) {
return fetch(${route}?key=${apiKey});
}
function post(route, params) {
return fetch(route, {
method: 'POST',
body: JSON.stringify(params),
headers: {
'Authorization': Bearer ${apiKey}
}
})
}
return { get, post }
}
const api = apiConnect('my-secret-key');
// больше нет необходимости передавать API-ключ,
// он сохранен в замыкании функции api
api.get('http://www.example.com/get-endpoint');
api.post('http://www.example.com/post-endpoint', { name: 'Joe' });
Если вам интересно изучить данный вопрос более подробно, добавьте огня и мы подготовим для вас еще больше годной инфы!
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥19
const arr = [4, 6, -1, 3, 10, 4];
const max = Math.max(...arr);
console.log(max);
// 10
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
const obj = {
name: 'Joe',
food: 'cake'
}
const { name, food } = obj;
console.log(name, food); // 'Joe' 'cake'
const obj = {
name: 'Joe',
food: 'cake'
}
const { name: myName, food: myFood } = obj;
console.log(myName, myFood); // 'Joe' 'cake'
const person = {
name: 'Eddie',
age: 24
}
function introduce({ name, age }) {
console.log(I'm ${name} and I'm ${age} years old!);
}
console.log(introduce(person)); // "I'm Eddie and I'm 24 years old!"
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
function myFunc(...args) {
console.log(args[0] + args[1]);
}
myFunc(1, 2, 3, 4);
// 3
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
const arr = [1, 2, 3, 4, 5, 6];
const mapped = arr.map(el => el + 20);
console.log(mapped); // [21, 22, 23, 24, 25, 26]
const arr = [1, 2, 3, 4, 5, 6];
const filtered = arr.filter(el => el === 2 || el === 4);
console.log(filtered); // [2, 4]
const arr = [1, 2, 3, 4, 5, 6];Если вам нравится такая подача, добавьте реакций и мы будем выпускать такое чаще!)
const reduced = arr.reduce((total, current) => total + current);
console.log(reduced); // 21
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8👍4
настроек, создания новых документов, заполнения компактных форм или шагов пошагового мастера.
Например, модальное окно может использоваться для ввода адреса - при клике на ссылку модальное окно открывается.
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3❤1
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🔥1
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // [1, 2, 3, 5]
for (let i = 0; i < array.length; i++){
console.log(i);
}
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // [0, 1, 2, 3]
Если понравился пост, добавь
И, мы обязательно разберем данный вопрос подробнее!
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥11👍1
С момента появления в JavaScript функций-генераторов прошло немало времени, но многие разработчики все еще относятся к этой звездочке (астериск) с некоторой опаской.
Функция-генератор представляет собой обычную функцию, которую можно приостановить в любой момент для получения промежуточного значения с помощью метода
next()
.Существует возможность, что генератор будет иметь конечное число промежуточных точек, и когда они закончатся, выполнение функции остановится, а вызов
next
вернет undefined
.function* greeter() {
yield 'Hi';
yield 'How are you?';
yield 'Bye';
}
const greet = greeter();
console.log(greet.next().value);
// 'Hi'
console.log(greet.next().value);
// 'How are you?'
console.log(greet.next().value);
// 'Bye'
console.log(greet.next().value);
// undefined
function* idCreator() {
let i = 0;
while (true)
yield i++;
}
const ids = idCreator();
console.log(ids.next().value);
// 0
console.log(ids.next().value);
// 1
console.log(ids.next().value);
// 2
// etc...
👀 Обратите внимание, что при первом вызове функции происходит лишь создание объекта-генератора с методом next(), но сама функция не возвращает никакого значения.
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9❤1
This media is not supported in your browser
VIEW IN TELEGRAM
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥3
Node.js также поставляется с пакетным менеджером npm, который вам также понадобится.
npx create-react-app my-react-appгде
my-react-app
- название вашего проекта. Дождитесь завершения установки.
cd my-react-appгде
npm start
my-react-app
- название вашего проекта. После запуска, ваше React-приложение будет доступно по адресу http://localhost:3000/.
Теперь можно приступать к созданию вашего проекта!
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥5
Скачать — Node.js
npm install -g @vue/cli
vue create ИМЯ_ПРОЕКТА
cd ИМЯ_ПРОЕКТА
npm run serve
Поздравляю! Вы успешно установили и запустили свой проект на Vue.js.
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4❤1
Сложность:
- HTML/CSS
- JavaScript
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🥰3❤1🔥1
Макет сайта "Aperture"
Сложность:⭐️ ⭐️ ⭐️ ⭐️ ⭐️
Красивый макет сайта фото студии. Простенький макет, но очень красивый.
🔗 Ссылка на макет
CodeBase | Frontend
Сложность:
Красивый макет сайта фото студии. Простенький макет, но очень красивый.
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2
node -v
. Если вам понравился пост, добавьте🔥 🔥 🔥 .
Вам не сложно — админу приятно🙂
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥14👍1🤮1
Реализован с помощью HTML & CSS.
Сложность:
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8👍2💩1