NEW BOT Телеграм, страница

Sharkness IT 🦈

#js #статья

Продолжим тему дом-дерева.

Если не читали прошлую статью - временами вы можете не понимать что-то, так что советую прочитать первую часть.

Начнём с 4 метода.

У нас есть каких-то 3 элемента и у них будет одинакова логика, как быть? Брать каждый элемент через квериСелектор? - Бред.

На помощь приходит document.querySelectorAll();

let blocks = document.querySelectorAll(".block");

Но важно понимать и всегда помнить, что querySelectorAll возвращает псевдомассив, а значит, нам нужно по нему пробежаться, дабы нормально взаимодействовать с элементами.

И да, для querySelectorAll работает только цикл forEach();

blocks.forEach(block => {
block.addEventListener("click", () => {
console.log("Like my post!")
})
})

Теперь, на каждую кнопку у которой есть класс ".block" повесится событие "клик", которое в результате выведет в консоль "Like my post!".

Идём дальше и разберём задачу, о которой я говорил в конце прошлой статьи.

Задача:

Человек вводит фрукт, и если он есть в наличии, то выводим в консоль " товар есть в наличии ".

let field = document.querySelector(".js-field");
let button = document.querySelector("#js-check-button");

let fruits = ["Яблоко", "Груша", "Персик"]
let check = () =>{
let state = false;
if(field.value !== null){
for(let i = 0; i < fruits.length; i++){
if(field.value === fruits[i]){
state = true;
}
}
if(state){
console.log("Товар есть в наличии")
}
else {
console.log("Товара нет в наличии!")
}
}
}

button.addEventListener("click", check)

Казалось бы, зачем я взял такую задачу?
Тут есть несколько фишек:

1) Если написать так:

for (let i = 0; i < fruits.length; i++) {
if (field.value === fruits[i]) {
console.log("Товар есть в наличии")
}
else {
console.log("Товара нет в наличии!");
}
}

То, если товара нет - то он выведет в консоль " Товара нет в наличии " 3 раза, оно нам надо? Нет, поэтому, я реализовал это методом замены false на true, что в результате выводит "Товара нет в наличии" всего один раз.

2) Работа с массивами, циклами и методами массивов(хотя это почти одно и тоже)

3) Ну и работа с самим дом-деревом.

classList.

Допустим нам при каком-то условии надо вешать на элемент класс, как это делать?

Юзать classList.

elem.classList.add("test"); - к элементу "elem" добавили класс "test".

Ну и в самом цсс не забудьте дать стилизацию классу.

А что если нужно убрать класс?

elem.classList.remove("test");

А если нам нужно проверить, есть ли такой класс у элемента?

elem.classList.contains("test");

И да, classList тоже псевдомассив и его можно перебирать через for.

let classes = document.querySelector(".test1");

let classesList = classes.classList;

for (let i = 0; i < classesList.length; i++) {
alert(classesList[i]); // test1 , затем test2
}

Ну и ещё затрону тему атрибутов.

<body>
<div id="elem" name="Dima"></div>
</body>

let elem = document.querySelector("#elem");

alert(elem.getAttribute("name")); // Dima
getAttribute проверяет значение атрибута, которое мы ему указали.

alert(elem.hasAttribute("name")); // true
hasAttribute проверяет, есть ли вообще такой атрибут.

elem.setAttribute("act", "like my post")
alert(elem.getAttribute("act")); // like my post
setAttribute устанавливает атрибут и его значение.

elem.removeAttribute("name);
removeAttribute удаляет атрибут.

О атрибутах поговорим в будущем.

Спасибо всем за внимание, в дом-дереве есть много всяких фич, о которых можно писать вечно и чтоб их все узнать - надо просто писать код, так что не ленитесь и практикуйтесь!

Всем хорошего дня!

Sharkness IT 🦈

#js #статья

Всем привет, сегодня спустя 3-4 дня новая статья. Я долго думал о чём написать, и решил что сегодня мы затронем тему работы с DOM-деревом.

D - Documnet
O - Object
M - Model

Начнём с того, чё вообще можно с ним делать - работать напрямую с хтмл…

79 views13:00

Секретная кнопка

👍 5 👎 1

Sharkness IT 🦈

let a = {A:1}["A"]

console.log(a);

Anonymous Quiz

19 voters76 views14:56

Sharkness IT 🦈

#js #статья

Всем привет и сегодня мы поговорим о том, а какие же проекты делать для портфолио?

Это пиздец частый вопрос и все начинают думать так:

- Нуу, я хочу что-то крутое.. создам-ка я копию инстаграма.

Хорошо, сделал ты фронтенд, а бекенд? Откуда его брать? Самому клепать? - та не, ещё год потратить на понимание бекенда не хочется.

Конечно можно поискать бекенд апи для инсты, но это будет тяжело и не факт что будет годное апи.

Так что же делать?

Начинать в первую очередь стоит с того, что найти парочку готовых бекенд апи, и от них уже плясать. Почему? - да потому что вы сможете сделать динамический сайт, что является продвинутым навыком веб-разработки. Но где взять эти " парочку " апишек? А я их вам скину. На данном гитхабе есть большое количество backend API, которые даже разбиты по категориям.., так что, выбирайте что-то готовое оттуда и удивляйте всех!

Backend API: https://github.com/public-apis/public-apis

GitHub

GitHub - public-apis/public-apis: A collective list of free APIs

A collective list of free APIs. Contribute to public-apis/public-apis development by creating an account on GitHub.

72 views14:31

👍 5 👎

Новая секретная кнопка!!

Sharkness IT 🦈

#css #статья

Всем привет!

Часто ли вы слышали о noscript? Наверное, да.

А что это такое? Как использовать это? Как оптимизировать?

На эти вопросы вы получите ответ на данном сайте.

Там рассмотрены множество примеров работы с свг, а так же оптимизация и т.д.

Сайт: https://noscriptontheweb.com/ru/

( надеюсь скоро и на моём канале выйдет статья о свг )

Всем хорошего дня!

62 views10:01

👍 3 👎

Чат

Секретное предложение

Sharkness IT 🦈

#js #статья

Всем привет и сегодня мы поговорим про экспорт и импорт в джсе.

Начнём с того, что это важная составляющая в разработке, ибо в том же реакте вы будете импортировать и экспортировать постоянно.

Так же хочу отметить, что экспорт и импорт работает на серверах, как пример: локальный сервер. ( Если я путаю, прошу поправить, но вроде это так )

Начнём с экспортов.

Их существует два типа:

- export
- export default

Начнём с того, что представим что мы запустили локалку и создали два js файла: main.js и func.js

В файле func.js мы будем создавать наши функции, а в main.js будем их юзать.

func.js:

let sum = (a,b) => {
return a + b;
}

Ну и тут мы с гордостью можем написать export default sum;

Всё, наша функция экспортирована, можем её юзать в главном файле, но об этом позже.

Но так же мы можем написать так:

export let sum = (a,b) => {
return a + b;
}

Ну и теперь мы тоже можем юзать эту функцию:D

А... в чём разница?

Ну тут дело в том, что благодаря обычному экспорту мы можем экспортировать сразу несколько функций, а при export default - только что-то одно.

Вот пример:

func.js:

let sum = (a,b) => {
return a + b;
}

let sayHi = name => {
console.log("Hello", name);
}

export {sum}, {sayHi};

При помощи export default такое делать нельзя D:

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

Если вы думали, что достаточно просто написать import sum from '...' - то нет:D

В зависимости от того, какой у вас экспорт, будет зависеть тип импорта.

Начнёмс.

func.js:

let sum = (a,b) => {
return a + b;
}

export default sum;

main.js:

import sum from 'func.js'

sum(4,2);

Те кто внимательный, те заметили что в этом случае мы юзали экспорт по дефолту, а вот как будет выглядеть импорт обычного экспорта:

func.js:

export let sum = (a,b) => {
return a + b;
}

main.js:

import {sum} from 'func.js'

sum(4,2);

Ну, а если у вас допустим две функции, которые экспортируются без дефолта, то можно записать так:

import {sum, sayHi} from 'func.js'

Ну, на этом всё. Да, тема не большая, но очень важная! Так что, я надеюсь вы внимательно всё прочитали, ибо я старался донести всю инфу без воды и только самое важное.

На этом всё, всем продуктивного денька!

72 views09:30

#js #статья

Всем привет!

Сегодня мы поговорим про асинхронность.

Что это вообще такое, твоя асинхронность? - Это когда код выполняется не сразу, а через время, самый популярный и понятный пример - запрос на сервер. Сервер не ответит вам моментально, а через некоторое время, допустим через одну секунду.

Начнём с того, что сегодня для примера я буду слать какой-то левый запрос на сервер, загружать прилоадер во время запроса, и после ответа сервера - выключать.

Тут на самом деле много кода надо писать, но мы упростим себе задачу:

- Loading(condition) - это наш прилоадер, как параметр он принимает true или false, если true - прилоадер покажется, и наоборот, изначально он равен false.

- getData() - запрос на сервер, так как у нас нет задачи плясать от ответа сервера, то мы просто представим что там есть какой-то запрос.

Теперь про асинхронность - есть два вида записи асинхронности:
- then
- async/await

Что лучше использовать? Последний вариант.

const getUserData = async () => {
Loading(true)
let responce = await getData();
Loading(false)
}

Вот такой вот простенький запрос на сервер, основанный на асинхронности.

Ну, а теперь про then.

const getUserData = () => {
Loading(true)
getData().then(() => {
Loading(false)
}
}

Но я вас призываю использовать async/await, сейчас сам на них перешёл.

Но что делать если сервер ответит ошибкой? - ну что поделать, будем перехватывать ошибки.

const getUserData = async () => {
try {
let response = await getData();
} catch(err) {
alert("Error", err);
}
}

Да-да, это те самые ребята try/catch, я вроде где-то упоминал их ранее.

Ну и конструкцию async/await можно использовать в методах класса, там всё так же, так что показывать нет смысла.

Ну, на этом всё, тема не большая, но очень важнецкая! Всем хорошего дня!

80 views09:31

👍👎

Чат

Sharkness IT 🦈

Краткая история о том, как нужно развиваться в айти.

Да, айти не то место, где можно посмотреть видео и на этом всё ( хотя так не только в программировании ).

Если хотите стать годным программистом - пишите код, говнокодьте, но сука пишите, так вы будете набивать себе опыт и в дальнейшем станете айтишником.

86 views17:15

Sharkness IT 🦈

#js #статья

Всем привет, давно меня тут не было :D

Да, знаю что пропал, мой проёб, но ничего не мог поделать.

Ладно, сегодня мы поговорим про реакт, а именно редакс, а именно как правильно с ним работать. Эта статья больше для продвинутых, но всё же советую прочесть всем, может что-то запомните.

В общем, сегодня мы рассмотрим 3 способа работы с редаксом:

- HOC
- Hooks ( здесь будут подвиды )

И для начала сделаем какой-то user-reducer:

let initialState = {
users: [
{id: 0, name: "Dima"},
{id: 1, name: "Alex"},
{id: 2, name: "Maks"},
]
}

export const usersReducer = (state = initialState, action) => {
switch (action.type) {
case "SET_USERS":
return {
users: [...state.users, action.users]
}
}
return state;
}

export const userActions = {
setUsers: (users) => ({type: "SET_USERS", users})
}

export const setUsersThunkCreator = () => {
return async (dispatch) => {
let data = await clientApi.getAlbums()
console.log(data)
dispatch(userActions.setUsers(data))
}
}

Начнём с HOC.

HOC - Hight Order Component.

В чём суть? Суть в том что мы создаём контейнерную компоненту.

ДЕМО:

const User = props => {...}

export const UserContainer = props => <User />

Потом мы это добро оборачиваем в connect.

Я не буду полностью расписывать connect, mapDispatchToProps+mapStateToProps, ибо у меня ограничение по символам ( в инете есть статьи, как это работает )

Скажу так, что этот метод я юзал когда только начинал работать с редаксом и даже юзал HOC при тестовом задании на работу, работодатель не зачмырил подход :D

Но как бы, слишком много получается кода.. тем более, на дворе 2021 год, есть хуки, и как бы, приоритетней юзать их, ИМХО!

Теперь затронем хуки.

Как я говорил ранее, тут будут подвиды.

1) Hooks from redux + react-redux
2) Hooks from react

Начнём с обычного redux'a + react-redux'a.

В чём как бы суть?

Изначально мы создаём redux-store, combineReducers и т.д., потом создаём редьюсеры, там actionCreators, initialState и трали-вали, затем нам надо юзнать данные в компоненте. Как это сделать без хока? Легко!

import {useSelector} from "react-redux";
const Users = props => {
let users = useSelector(state => state.user.users)
return(
<>
{users.map(user => <User {...props} />)}
</>
)
}

Поясняю:
Мы юзаем хук useSelector из react-redux, чтобы получить данные нашего initialState, то есть да, мы без всяких там HOC и т.д., просто взяли и достучались до наших данных.

А что если нам нужно что-то диспатчить? Та без проблем.

import {useDispatch} from "react-redux";
const Users = props => {
let dispatch = useDispatch()
const setUsers = () => dispatch(setUsersThunkCreator())
return(
<>
</>
)
}

А теперь рассмотрим вариант от разработчиков react.

import {useReducer} from "react";

let [state, dispatch] = useReducer(usersReducer, [])

const setUsers = () => {
dispatch({
type: "SET_USERS",
payload: []
})
}

const Users = props => {
return(
<>
{state.users.map(user => <User {...props} />)}
</>
)
}

В чём разница? Разница в том, что useReducer используют для мелких приложений, где нет какой-то ебанутой архитектуры и так далее, но если у вас всё же огромный проект, то юзайте вариант от react-redux.

Надеюсь, что теперь стало понятно, почему юзать хуки более приоритетней ( ибо это меньше кода!! )

Но, а остаётся ли компонент(-а) чистым(-ой) - загадка:D

Ну, а на этом всё! Всем здоровья, счастья и бобра!

54 views11:51

👍 4 👎

Чат

Sharkness IT 🦈

#css

Всем шалом! Я знаю что тут есть как начинающие верстаки, так и профи. Но сегодня я решил посвятить пост новичкам. Ниже я прикреплю шпору по разным css-border'ам. Надеюсь, когда-то это вам поможет :3

48 views11:30

56 views11:30

#статья

Всем привет и сегодня я вам расскажу, как заливать реакт проекты на гитбхаб.

Дело в том, что там не так всё просто, как с обычным html,css,js. У вас не получится просто взять, перетащить файлы в репу и получить сайт на хостинге.

В чём дело? Я конечно могу ошибаться, но дело в том, что когда мы пишем на реакте, то мы как бы не прогоняем через babel весь свой код ( он прогоняется в браузере ) и из-за этого, гитхаб попросту не будет понимать, что за хуйню мы ему подкинули туда.

Так, с теорией закончили, начнём практиковаться.

Начать стоит с того, что нужно правильно создать реакт приложение, ибо если мы создали его через npm create-react-app name - то залив его на хостинг, мы получим не работающий реакт-проект, он вам покажет различные скриптовые команды, по типу:

- npm run start
- npm run build

Что же делать? Тут аж два варианта:

- npx create-react-app name
- npm init react-app name

Данными командами, мы всё так же создаём наше обычное реакт приложение, но как бы мы ему говорим, что ты будешь инициализирован под хостинги.

И да, вам достаточно написать одну из тех двух команд.

Дальше, мы идём в github и создаём репозиторий, после написания названия проекта - у вас будет страница со многими командами, и вот тут попрошу вас её не закрывать, ибо она вам ещё понадобиться.

Далее, приступаем к пакетам.

Да, нам понадобиться один пакет - gh-pages.

Установка:

npm i gh-pages --save-dev

И да, на сколько мне известно, писать зависимость ( --save-dev ) тут обязательно, ибо так он установится у вас как обычный пакет и работать ничего не будет :(

Далее идём в наш package.json.

На первой строке, перед name добавляем новое ключ-значение:

"homepage": "http://yourgithubname.github.io/react-repo-name"

Вот пример с моим проектом:

"homepage": "http://aquiwer.github.io/react-game"

Потом листаем чуть ниже и видим

"noscripts":{...}

Здесь нам тоже надо добавить две команды:

"predeploy": "npm run build",
"deploy": "gh-pages -d build"

То есть:

"noscripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
     ...
}

Затем, в терминале пишем:

- git init
- git remote add origin (тут будет ваша ссылка)
- git add .
- git commit -m "First commit"
- npm run deploy ( если не сработало, напишите gh-pages -d build )
- git push -u origin master

Теперь заходите в свой репозиторий -> настройки и ищите там свою ссылочку на проект, немного ждите ( в зависимости от размеров проекта - будет разное время ожидания ) и бам, вы залили свой проект на гитхаб!

На первый раз может показаться что это сложно, но советую вам позаливать пару проектов, тестовых, чтобы набить руку и потом уже очень быстро всё делать. А на этом всё, увидимся в следующей статейке -)

66 viewsedited 14:40

👍 2 👎

Чат 🕶️

Sharkness IT 🦈

Всем бобра и позитива!

Сегодня я продолжаю топить тему react и мне пришла в голову идея выкладывать какие-то готовые решения, которые возможно вам помогут.

Сегодня мы свяжем хук useState() + модальное окно.

Начнём с того, что делается это всё очень просто, но даже на этот случай умудрились написать целую библиотеку.. которая к тому же не поддерживается typenoscript, и надо самому добавлять в

.d.ts.

Ну ладно, это не главная проблема и предлагаю начать мутить наше изобретение.

Для начала я создам компонент(-у) с модальным окном.

export const ModalWindow = () => {
    return( 
        <div>
            <h1>Like this post!</h1>
        </div>
    );
}

( Ой как надеюсь, что телега не переебала табы )

Окей, какая-то простая модалка у нас есть, мы не будем заморачиваться со стилями, ибо нам важен сам алгоритм, а не вёрстка.

Теперь перейдём к компоненту(-е), в которой нужно вызывать модалку.

export const AnotherComponent = () => {
    const [modalWindow, setModalWindow] = useState(false);
    const openWindow = () => {
        setModalWindow(true)
    }
    const closeWindow = () =>{
        setModalWindow(false)
    }
    return (
        <div>
            {
                modalWindow && <ModalWindow closeWindow={closeWindow}/>
            }
        </div>
    );
};

Ну как-то так, мы берём хук useState, присваиваем буллевое значение, и если оно равно true - модалка открывается. Самим состоянием хука мы управляем через две функции, openWindow && closeWindow.

Функцию, которая закрывает модалку мы передаём как пропс в нашу модалку, там мы повесим её(функцию), допустим на крестик, который закрывает окно.

export const ModalWindow = ({closeWindow}) => {
    return( 
       <div>
          <button onClick={closeWindow}>&times;</button>
      </div>
    );
}

На этом всё, вот так легко вы можете реализовать модалку, без лишних либ. Конечно, можно много чего намутить, анимации, закрытие по нажатию на пустое место и т.д., но это уже всё ваша фантазия, и реализовать это тоже не так уж и сложно ;)

А на этом всё, надеюсь вам зашло такое, дальше буду думать, чтоб ещё такого намутить ^_^

Всем покедава.

81 viewsedited 14:35

👍 4 👎

Чат 🧞‍♂️

Sharkness IT 🦈

Ну что же, всем привет. Я знаю что долго не писал о чём-то, но на то была причина - я устроился на работу фронтенд разработчиком. Вот уже 2.1 месяца(месяцев/месяц) херачу, но не суть.

Давайте ближе к сути поста - я хочу рассказать, чё вас вообще может ждать на работе и к чему стоит готовиться.

Первое, что не относится к кодингу так жёстко - это моральная подготовка.

Если вы джун, так ещё и с первым опытом работы - вам пиздец как тяжело будет первое время, то, что вы писали сами - будет казаться вам полной хуетой, по сравнению с тем, что творится на проде. Дело в том, что на проде вы помимо кодинга будете делать ещё и другие процессы, которые не связанны с кодингом. Надо научиться расставлять приоритет задач, уметь оценивать их и быть готовым к тому - что у вас нихуя не получится без помощи сеньёра :D

Второе, что хочу подметить - это то, что возможно вы будете фиксить баги.

О да блять, это то, с чего вы любите порофлить. Вот у меня на работе был кейс, когда мне дали стори ( разработать алгоритм ) и баг. Стори я закрыл быстрее, нежели баг - почему? Ибо вы в душе не ебёте, что там написано, ибо на больших продах юзаются сторонние либы, которые вы возможно не знаете, да и баги попадаются порой такие, что ахуеть можно. Тут надо уметь понимать, как работает код, но без опыта работы вам это будет даваться очень хуево, имхо.

Но, у этого всего есть и плюсы - после 999 пофикшеных багов, вы будете ощущать себя королём блять всей разработки, ибо рылись в чужом дерьме, и помимо этого - заставили это работать.

И вот очень важную вещь я вынес для себя - то, что вы знаете язык, даёт вам не особо сильную корочку, ибо важно понимать хотя бы на базовом уровне, как может работать чужой код, а ещё, когда вы клоните с гита проект, и смотрите, что там юзаются санки+саги, 444 редьюсеров, лодаши, хуяши и так далее - вы понимаете, что вы в реальной жопе ;D Со временем вы конечно всё понимаете, и привыкаете, но это со временем.

Что же я хочу донести в этом посте:
- учите язык хорошо, ибо зная его - вы все равно будете в жопе, а если не знать его - то вообще пиздец
- будьте морально готовы к выгораниям, эмоциональным срывам
- научитесь оценивать задачи ( что не всегда легко )
- будьте готовы к тому, что изначально вы будете нубом в проекте и это норм

Если у вас есть темы, которые вы бы хотели поднять, связанные с моей работой - пишите, расскажу что и как. Могу рассказать про компанию, чё делаем, чё курим ;D

А на этом всё, всем пока, а я пошёл дальше баг фиксить ( ебись оно конём 🐎).

82 viewsedited 11:10

👍 8 👎

Sharkness IT 🦈

Привет ещё раз. В прошлом посте я сказал, что можете задавать какие-то вопросы, аля темы, и я отвечу на них в виде поста. И вот один человек написал:

" Какие ты проекты делал для портфолио ? И делал ли их вообще ? "

Штош, приступим.

Отвечу сразу - да, делал.

В мои проекты входили:

- одна соц.сеть( фронт )
- что-то по типу автосалона ( фронт и бэк )
- приложение для кафешки ( фронт )
- улучшенная версия туду-приложения ( фронт )

Это пожалуй самые большие проекты, которые я писал, ибо в большинстве случаев не было бэкенда, а учить я его начал только в крайнем пет проекты ( автосалон ), после него меня взяли на работу.

Но, есть ли смысл вообще от этого?

Несомненно есть, но зачастую, люди, которые ищут джуна(именно джуна, ибо мидлов и сеньёров ' отсеивают ' по опыту работы), понимают, что половину он взял из инета, ибо попросту сам не додумался бы до таких решений - и это нормально, поэтому он и джун.

Что же тогда делать и как они проверяют человека на работоспособность? - зависит от компании.

Есть несколько вариантов:

- Тестовое задание - это самое лёгкое, что может быть, ибо вы зачастую делаете его не вовремя собеса, а сами, опираясь на инет и советы других разрабов.

- Проверка вовремя собеса - вот это уже сложнее, именно этот вариант был у меня. Изначально меня гоняли по теории, но когда поняли что нет смысла, ибо я на всё отвечал быстро и чётко, перешли к алгоритмическим задачам, их было 3. Какие точно - я не помню, помню только что одна была на каррирование, но её я решил быстро.

- Может быть сразу то и то :D

Делаем выводы:

Иметь проекты на гите нужно, но не надейтесь на них на все 100%, будьте готовы к тому, что вас возможно захотят протестить онлайн, для этого советую проходить codewars и смотреть другие собесы, дабы знать лучше теорию.

На этом всё, если есть ещё вопросы - пишите, звоните, всё расскажу, всем пока 🏃🏼‍♂️

116 views09:01

👍 3 👎

About

Blog

Apps

Platform