• Оцените пожалуйста верстку?

    vilka_2009
    @vilka_2009
    Верстаю
    1) Тег section не в правильном месте используешь. Он означает что-то более глобальное и общее.
    <div class="limpon-is">
            <div class="bg-color"></div>
            <div class="squares-bg"></div>
            <div class="wrapper">
                <div class="brandon-img"></div>
                <section class="limpon-text">
                    <div class="small-button"></div>
                    <h3>Limpon Is Suitable For<br> Anytype LandingPage</h3>
                    <p>Lorem ipsum...</p>
                    <a href="#" class="btn btn230blue">get started now</a>
                </section>
            </div>
        </div>

    Например тут section-ом должен быть блок с классом ".limpon-is", а у тебя просто его текстовая часть. Он должен объединять в себе весь логический блок, пусть в нем даже есть какие-то декоративные блоки.
    2) Так же, я бы не стала делать такие декоративные блоки (.bg-color, .squares-bg) и декорировала псевдо-элементами, потому что они не несут никакой смысловой нагрузки, в отличие от скриншотов и иконок.
    3) .testi-bg - почему картинкой, а не css-ом? если что-то можно верстать, то нужно верстать. Например, радиокнопки в форме - это обычно кружок в кружочке. Это точно не стоит лишних обращений к серверу за картинкой, их отрисовка и хранение. Здесь тоже не вижу никакого смысла делать вместо фона с закруглением - картинку.
    4) .review-block1 - Вот таких классов не должно быть ни в коем случае, .review-block - таких тоже лучше избегать. Это все равно что диву назначить просто класс block. Див - это же итак блок. Или еще круче div с классом div. Будет вообще шикарно.
    5) в blockquote в твоем случае излишне вставлять параграф .
    6) .review-block - фотографию автора обзора нельзя делать псевдо-элементом. Это не просто декоративный элемент, это как имя автора отзыва и относится не к самому блоку, а к его содержимому. Поэтому должен быть тег с классом .author-photo, например.
    Как лучше делатьь:
    <div class="review">
                <blockquote>It is a long established fact that a read her will be distracted by the readable content of a page when looking.</blockquote>
                <div class="review-author">
                    <img class="author-photo" src="image.jpg" alt=""/>
                    <span class="author-name">Rolin B. Mirano</cite>
                    <cite class="author-company">ceo, uihub</cite>
                </div>
        </div>

    Тут мы объединяем смысловые элементы одним родителем .review-author
    7) .plans-header - зачем тут делать ширину блока? Излишне.
    8) Список услуг в тарифах должен быть списком, а не одним параграфом. Жирный минус!
    unexceptable

    hqdefault.jpg
    9) Опять же, список тарифов - это section. А у тебя этим тегом каждый тариф выделен. ".team-list" - это не section. ".our-team" - это section.
    10) .team-plus - мой совет: не парься высчитыванием радиуса в пикселях. когда тебе нужно сделать круг. Просто border-radius: 50%, можно 100%, можно 9999рх. В любом случае, если нужно будет поменять размер круга, то не нужно будет менять размер радиуса.
    11) Такие штуки как .team-position - это не параграф в тексте или статье. Поэтому не используй тег пожалуйста. Используй тег .
    12) При желании в форме обратной связи можно оформить текст авто-заполнения, чтобы не было сильных отличий.
    13) В любом поле формы должен быть padding, как левый, так и правый. У тебя ни в одном поле нет правого падинга. Поэтому при длинном тексте он наедет на иконку. А длинным может быть и фио, и почта. А не только текст в текстареа.
    5d27626ad09e1936454445.png
    5d2764e97c3cb017292066.png
    14) Кнопочка "submit now" - иконка должна быть псевдоэлементом у текста. Иначе если текст поменяется придется и ее двигать.
    15) .foot-so - не делай сокращенные имена классов. Тут невозможно понять что это. Ступня?! footer-social, хотя бы.
    16) Предпочтительнее все таки футеру тоже назначать класс. footer.footer получается
    17) На ссылках хочется эффектов наведения (кроме cursor: pointer), а на кнопках - плавности наведения (transition).
    18) .subscribe button - попробуй border-radius: 9999px. Лайфхак, если радиус в 2 раза меньше высоты кнопки ;)
    19) А что это так? Почему только ко второму заголовку такое правило?
    .text-scroll h4:nth-of-type(2) {
        margin-top: 27px;
    }

    20) Центрируем флексами без подгонки пикселей отступов.
    .burger-areal {
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer
    }
    .burger {
      width: 30px;
      z-index: 333;
    }
    .burger span:last-child {
      margin-bottom: 0;
    }


    Надеюсь ты не примешь критику близко к сердцу, а сделаешь из нее правильные выводы. В основном, честно, мне все очень понравилось. Все замечания чисто на опыте. Удачи тебе в развитии!
    Ответ написан
    4 комментария
  • Оцените пожалуйста верстку?

    BenderIsGreat34
    @BenderIsGreat34
    junior front-end
    проблемы с Accessibility вижу.
    bg & foreground colors dont have a suffcient contrast ratio.
    form elements dont have associated labels
    links dont have a discernible name
    в остальном хорошо

    можешь сам проверить. пожимаешь f12 и заходишь в audits, норм такой тестировщик)
    а, ещё бы конечно ты бы на бэме верстал, было вообще шикарно. ещё вижу айди много прописывал, я не знаю, для чего ты там их юзаешь, но в css их лучше не юзать
    Ответ написан
    3 комментария
  • Оцените пожалуйста верстку?

    Chefranov
    @Chefranov
    Новичок
    • Не хватает transition у кнопок
    • У главного меню нет ховеров
    • Блок с цифрами хорошо бы анимировать
    • Нет адаптива под устройства меньше iPhone X
    • Хорошо бы добавить плавный скролл к главному меню
    • По кнопке Free Trial и Choose plan по идее должен быть pop-up
    • В IE верстка кое-где ломается
    • Что будет если добавить еще членов команды или отзывов клиентов?
    • Есть кнопка для воспроизведения видео, но никак не работает
    • Блок с скриншотами по идее должен быть слайдером
    Ответ написан
    2 комментария
  • Хороший пример реализации авторизации и хранения данных пользователя в Redux store?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    Тут реализовывать нечего:
    const store = configureStore();
    
    store.dispatch(init());
    
    const root = (
      <Provider store={store}>
        <App />
      </Provider>
    );


    В асинхронном действии init выполняйте что хотите. Пока не завершились нужные запросы, можно установить флаг isInitializtion: true и вместо контента показывать прелоадер или заглушку.
    Ответ написан
    1 комментарий
  • Как правильно передать пропсы в route который находиться выше?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    Варианты:
    1. Подъем состояния.
    2. Использование state management библиотеки, например redux.
    Ответ написан
    6 комментариев
  • Django(+cms)+reactjs+typescript+bootstrap+SASS. Как можно сделать?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    Все просто. Вам нужно:
    1. Изучить Django(+CMS), React, TypeScript, Bootstrap, SASS.
    2. Написать свой собственный блог на этом стеке технологий.
    Ответ написан
    3 комментария
  • Уехал в Москву, но не тяну по сложности, стоит ли возвращаться домой?

    qlkvg
    @qlkvg
    python backend developer
    Был в похожей ситуации года 3 назад, только без обрубания концов и релокации. Совсем не тянул, спрашивал мелочи у коллег и стыдился, ничего не понимал. Хотелось все бросить и вернуться на прошлое место работы, где можно было спать до обеда. В итоге через 3 месяца ада, ощущения собственной ничтожности и штудирования книг в любой удобный момент, что-то начало получаться. В итоге дорос до человека, у которого джуны спрашивают мелочи.
    Сейчас понимаю, что первые несколько месяцев нужно было просто пережить. Это нормально для зеленого новичка в индустрии. Если вы не устроились на позицию сеньер фул-стека, адекватный работодатель не будет от вас требовать мгновенного результата. Если переживаете, честно поговорите с непосредственным начальником, что не вывозите, нужно время на раскрутиться
    Ответ написан
    4 комментария
  • Почему не могу получить this.context?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    Вынесите контекст в отдельный файл.
    Ответ написан
    3 комментария
  • Где учиться PHP?

    @iAlex195
    Советую почитать PHP 7. В подлиннике Игорь Симдянов, Дмитрий Котеров
    Ответ написан
    6 комментариев
  • Как сделать правильно Route для id и new?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    <Switch>
      <Route exact path={`${match.url}/`} component={List} />
      <Route exact path={`${match.url}/new`} component={New} />
      <Route exact path={`${match.url}/:id`} component={View} />
    </Switch>
    Ответ написан
    3 комментария
  • Как убрать hash(#) с пути react-router-dom?

    Вы используете компонент HashRouter, поэтому и хэши в адресной строке. Для вашей задачи вам подойдет BrowserRouter
    А для ссылок использовать компонент Link
    Ответ написан
    Комментировать
  • Есть ли расширение для браузера Google Chrome позволяющее вставить сгенерированный пароль в форму требующую ручного "побуквенного" ввода пароля?

    sim3x
    @sim3x
    Проще вставить в форму в девтулзах в value каждого из полей и руками отправить форму

    Как вариант - отключить жс на время

    И напишите в поддержку того сайта, что они очень-очень неочень
    Ответ написан
    Комментировать
  • На чем (за счет чего) рендерится html? Почему svg рендерится не с помощью видеокарты?

    sim3x
    @sim3x
    Только малая часть рендеринга страницы перенесена на видеокарту
    Большая часть вещей рендерится на цпу
    Грубо говоря, цпу генерит сайт на всю высоту, а потом видеокарта определяет, что показать во вьюпорте

    Про свг: свг1.1 очень крутая спека, если б ее внедрили (8+ лет назад) она б заменила весь цсс3 и сделала б все очень няшненько. Намного круче чем все есть сейчас
    Но никто не захотел ее пилить
    Ответ написан
  • На чём писать UDP-сервер под VPS: Java vs Node.js?

    sergey-gornostaev
    @sergey-gornostaev Куратор тега Java
    Седой и строгий
    Никакой разницы. Выбирайте то, что лучше знаете и считаете более удобным.
    Ответ написан
    Комментировать
  • Какой сейчас хороший зарубежный регистратор доменов?

    @VoyagerRus
    Посмотрите NameCheap.com

    В качестве DNS и защиты DDOS - Cloudflare.com - бесплатные планы отлично работают
    Ответ написан
    1 комментарий
  • Single Page Application для интернет-магазина, какие технологии использовать?

    @vardoLP
    Ват ю сэй эбаут май мама?!
    А в чем собственно вопрос? Для простенького магазинчика разверните wordpress, установите плагин woocommerce и все готово.
    Ответ написан
    5 комментариев
  • Как правильно перезаписать значение state?

    Vlad_IT
    @Vlad_IT
    Front-end разработчик
    Вам нужно получить ваш объект, изменить поле и отослать обратно в setState

    1) через клонирование объекта
    let checkboxes= Object.assign({}, this.state.checkboxes); // Создаем копию, можно просто ссылку взять, но копию безопаснее
    checkboxes[e.target.value] = false; // изменяем поле
    this.setState({checkboxes}); // Сохраняем

    2) через оператор spread
    this.setState({
        checkboxes: {
              ...this.state.checkboxes,
              [e.target.value]: false // измененное поле объекта checkboxes
        }
    })
    Ответ написан
    1 комментарий
  • Как вы находите идеи домашних проектов?

    @YoloV
    Делайте проекты под свои нужны.
    Ответ написан
    Комментировать
  • Как достать PromiseStatus из fetch?

    lavezzi1
    @lavezzi1
    Вам не нужны статусы. Единственное что вам нужно, это узнать что промис разрезолвился. Просто дождитесь этого через await.

    Вариант с async/await.
    export default {
        data(){
            return {
                blockBtn: false
            }
        },
        methods: {
            async isWait(url) {
                this.blockBtn = true;
                let dosomething = await fetch(url)
                
                this.blockBtn = false;
            }
        }
    }


    Вариант с then
    export default {
        data(){
            return {
                blockBtn: false
            }
        },
        methods: {
            isWait(url) {
                this.blockBtn = true;
                let dosomething = fetch(url).then(() => {
                     this.blockBtn = false;
                });
            }
        }
    }


    Живой пример: https://jsfiddle.net/ujnpzqgf/

    Ответ написан
    1 комментарий
  • Как сделать Link из функции в react?

    Alexangeras
    @Alexangeras
    Как-то так
    import React, { Сomponent } from 'react'
    import { withRouter } from 'react-rouer-dom'
    
    class Game extends Component {
      constructor(props) {
        super(props)
      }
      finishGames = () => {
        this.props.history.push("/finish")
      }
      render() {...}
    }
    
    export default withRouter(Game)
    Ответ написан
    Комментировать