Современный мир постоянно стремиться к развитию.
Давайте рассмотрим с вами несколько вариантов технологий, которые позволяют улучшать сервисы и облегчают жизнь каждому из нас.
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Анимация текста, реализована с помощью CSS
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Анимация загрузки, реализованная с помощью HTML и CSS.
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2👍1
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2👎1
🔗 Подробнее
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1🔥1
🔗 Семантические элементы в HTML
Пользуйтесь на здоровье!)
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
html
<div>
<div>Элемент</div>
<div>Модификатор</div>
</div>
css
.block {
background-color: lightblue;
padding: 20px;
}
.block__element {
font-size: 16px;
color: black;
}
.block__element--modifier {
font-weight: bold;
color: red;
}
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
scss
// Объявление переменных
$primary-color: #3498db;
$button-border-radius: 5px;
// Создание стилей кнопки
.button {
background-color: $primary-color;
color: white;
padding: 10px 20px;
border-radius: $button-border-radius;
font-size: 16px;
&:hover {
background-color: darken($primary-color, 10%);
}
&.large {
font-size: 20px;
padding: 12px 24px;
}
&.outline {
background-color: white;
border: 2px solid $primary-color;
color: $primary-color;
&:hover {
background-color: $primary-color;
color: white;
}
}
}
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
🔗 Шпаргалка по работе с Git
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
IDE помогает программистам создавать код, объединяя функции редактирования, создания, тестирования и упаковки ПО, упрощая творческий процесс, подобно тому, как писатели используют текстовые редакторы и бухгалтеры - электронные таблицы.
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3❤2🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Быстро и легко может перевести px в rem и обратно.
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1🔥1
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
👍5🔥1
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