Javascript

Компиляция TypeScript в нативный код

Static Hermes (shermes), следующая итерация JavaScript-движка hermes, добавляет поддержку компиляции TypeScript/flow в нативный код. Хотя shermes еще не выпущен, код доступен в репозитории на GitHub.

В этой статье я скомпилирую простую программу на языке TypeScript в код на языке C.

Компиляция shermes
На момент написания статьи для static hermes невозможно получить собранные двоичные файлы. Для компиляции из исходника на macos выполните следующие действия.

Получите исходник из репозитория GitHub и переключитесь на ветку static_h.

mkdir hermes_workspace
cd hermes_workspace
git clone git@github.com:facebook/hermes.git
cd hermes
git checkout static_h
cd ..

Убедитесь, что у вас есть указанные здесь зависимости для сборки. Затем в папке hermes_workspace выполните приведенные ниже команды для сборки. Обратите внимание, что эти команды выполняют сборку hermes в режиме отладки, который работает медленнее. Инструкции по сборке в режиме релиза приведены в конце статьи.

cmake -S hermes -B build -G Ninja
cmake --build ./build

Теперь в каталоге hermes_workspace/build/bin должен находиться двоичный файл shermes.

Компиляция файла TypeScript в C

📌 Читать

🖥 Сразу две кнопки - изящно анимированные кнопки с интересным интерактивом. Сделано на CSS и JavaScript.

https://codepen.io/Juxtopposed/pen/abQLxmj

@javascriptv

🔥 Дайджест полезных материалов из мира Javascript за неделю

Почитать:
— Разбор задачи B (Больше, чем музыка) фронтенд — Yandex Cup 2023 квалификация
— Путешествие JavaScript-кода через движок V8
— Использование Content-Security-Policy вместе с React & Emotion
— Какие неочевидные темы вспомнить перед собеседованием на Frontend разработчика
— Что такое деление по модулю в JavaScript?
— Почему я не буду использовать Next.js
— Redux-toolkit и переиспользование кода
— Разработка браузерных игр с использованием Phaser3, React, Typescript
— Два frontend фреймворка. Два подхода
— Как не программист, вероятно, написал самую быструю библиотеку в мире
— Navigating the Web with is.browser and is.not_browser in JavaScript: Your Go-To Tools for Browser Checks
— Phấn Phủ Canmake
— [Discussion] What's the new big thing in web dev in the past 2 years?
— Delving into open source territory with Google: An Investigation
— Delving into open source territory with Google: PR #3
— Delving into open source territory with Google: PR #2
— Delving into open source territory with Google: PR #1
— Creating Chess Board SVGs, PNGs, and GIFs
— The 2000 line framework challenge: How to split state when using global stores with no extra dependencies beyond Modulo.js
— VueJS part 11: Sending data from component to parent

Посмотреть:
🌐 Why Signals Are Better Than React Hooks (⏱ 16:30)
🌐 Node Just Released This Amazing Feature! (⏱ 00:44)
🌐 This Is One Of My Favorite TypeScript Features (⏱ 05:22)
🌐 NEW TypeScript Simplified Course Announcement! (⏱ 00:49)

Хорошего дня!

@javascript

Card Hover Interaction - красивые карточки с всплывающей информацией при наведении. Реализованы с помощью CSS.

https://codepen.io/dev_loop/pen/PoqLGvV

@javascriptv

🖥 Button pushed inside style — изящная анимация иконок при наведении курсора. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

https://codepen.io/Juxtopposed/pen/jOKqXMJ

@javascriptv

Изучайте Javascript бесплатно!

❒ Полный курс JavaScript 2023 — от новичка до профессионала / машинный перевод яндекса
https://www.youtube.com/watch?v=JEgp6AHZu9A&pp=ygUYamF2YXNjcmlwdCDQutGD0YDRgSAyMDIz

❒ JavaScript для начинающих 2023. Полный курс за 6 часов. Уроки. Теория + практика
https://www.youtube.com/watch?v=maPRR_jjyOE&pp=ygUYamF2YXNjcmlwdCDQutGD0YDRgSAyMDIz

Полный курс ❒ JavaScript за 4 часа.
http://youtu.be/ZYhGSfSfzeI

❒ Изучите JavaScript за 8 часов.
http://youtu.be/hNYzV87wocY

❒ Курс Code academy JavaScript.
http://youtu.be/_ixUdG1FFtM

❒ Полный курс JavaScript для начинающих.
http://youtu.be/EfAl9bwzVZk

❒ JavaScript Dom Crash Course.
http://youtu.be/0ik6X4DJKCc

❒ JavaScript Oops Crash Course.
http://youtu.be/vDJpGenyHaA

❒ Продвинутые учебники JavaScript.
http://youtu.be/IljVmcDDrOg

❒ JavaScript All in One Tutorials.
http://youtu.be/9M4XKi25I2M

❒ Основы JavaScript 11 часов.
http://youtu.be/2Ji-clqUYnA

@javascriptv

🖥 Дизайн - это непросто.

Вот мои любимые места в Интернете для вдохновения при работе над дизайном:

http://curated.design → каталог
http://land-book.com → веб-сайты
http://refero.design → исследования в области дизайна
http://mobbin.com → мобильные и веб-приложения
http://saaslandingpage.com → целевые страницы saas

@javascriptv

🖥 Shopping UI - красивый каталог товаров и корзина, сделанные при помощи JS библиотеки - Vue.js

https://codepen.io/mo-ro/pen/jObjGJm

#код #css #javascript

@javascriptv

⚡Легкий способ получать свежие обновлении и следить за трендами в разработке на вашем языке. Находите свой стек и подписывайтесь:

Машинное обучение: t.me/ai_machinelearning_big_data
Go: t.me/Golang_google
Базы данных: t.me/sqlhub
C++/ t.me/cpluspluc
Data Science: t.me/data_analysis_ml
Python: t.me/pythonl
Хакинг: t.me/linuxkalii
Devops: t.me/devOPSitsec
C#: t.me/csharp_ci
Java: t.me/javatg
Linux: t.me/+A8jY79rcyKJlYWY6
Мобильная разработка: t.me/mobdevelop
Docker: t.me/+0WdB4uvOwCY0Mjdi
Rust: t.me/rust_code
Javascript: t.me/about_javascript
React: t.me/react_tg
PHP: t.me/phpshka
Android: t.me/android_its
Big Data: t.me/bigdatai
Тестирование:https://t.me/+F9jPLmMFqq1kNTMy
Аналитика данных: https://t.me/+mAXY9ppJwitkMDBi

😆ИТ-Мемы: t.me/memes_prog

🇬🇧Английский: t.me/english_forprogrammers

📕Ит-книги бесплатно: https://t.me/addlist/BkskQciUW_FhNjEy

ИИ: t.me/vistehno

Книги по искусственному интеллекту

💼 Папка Go разработчика: t.me/addlist/MUtJEeJSxeY2YTFi
Папка Python разработчика: t.me/addlist/eEPya-HF6mkxMGIy
Папка ML: https://t.me/addlist/2Ls-snqEeytkMDgy
Папка Java разработчика: https://t.me/addlist/ZM3J6oFNAnRlNWU6
Папка с вакансиями: t.me/addlist/_zyy_jQ_QUsyM2Vi

🖥 Anime.js V4.

Новый способ эффективного управления повторяющимися анимациями без лишних вызовов animate() или utils.set().

Идеально подходит для эффектов отслеживания мыши!
Подробности об API ниже 👇

https://libraries.io/npm/animejs-beta

@javascriptv

🖥 Slider — красивый слайдер с различными блюдами. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

https://codepen.io/kristen17/pen/BaGOOMm

@javascriptv

Создание отзывчивой регистрации с валидацией формы с помощью HTML, CSS и JavaScript 🚀

📌 Код

@javascriptv

Представляем Material Web 1.0, библиотеку компонентов Google, которая работает везде, где есть рабочий HTML. 🌐

Подробный гайд о том, как начать работу с компонентами Material здесь → https://m3.material.io/develop/web

@javascriptv

❓Распространенный вопрос на собеседовании по JavaScript:

Реализуйте метод кастомные .map():

[1,2,3].myMap((x) => x * x) // должно получиться [1,4,9].

Проверяется ваше понимание:
1⃣Prototypes
2⃣ this ключевое слово
3⃣Functional концепции программирования

Если вы понимаете, как работает обычная .map(), то реализовать собственную функциию несложно:

1. .map() - это метод массива
2. Он возвращает новый массив (не модифицирует существующий)
3. В качестве параметра принимает функцию
4. Выполняет эту функцию над каждым элементом массива
5. Результат функции помещается в новый массив, а затем возвращается.

Легко, правда?

Базовая реализация в изображении.

🖥 Освойте Javascript бесплатно

✔ Курс Code academy JavaScript.

✔ Полный курс JavaScript для начинающих.

✔ Краткий курс JavaScript Dom.

✔ Краткий курс по JavaScript Oops.

✔ Продвинутые учебники по JavaScript.

✔ Учебники JavaScript "Все в одном".

✔ Основы JavaScript 11 часов.

@javascriptv

🔥 Дайджест полезных материалов из мира Javascript за неделю

Почитать:
— Как мы заинжектили кнопку на Behance
— Гайд по микрофронтендам на single-spa, или Как уже наконец-то уйти от монолита во фронтенде
— Как можно использовать .NET из Javascript (React) в 2023 году
— Простой пример ИИ для управления роботом. TensorFlow + Node Js
— 8 углубленных вопросов на собеседованиях на роль сеньора в JavaScript
— React vs Vue vs Angular. Часть 3
— Как выстроить удобные процессы в работе с монорепой
— 9 алгоритмов сортировки и поиска для JS, о которых вас спросят на собеседовании
— Особенности кодировки строк в Base64 в JavaScript
— Service Workers против медленного интернета: Кэширование и улучшение UX
— 15 Reasons to Learn JavaScript: Unlocking the Power of the Web
— Basic Pattern - Javascript Interview
— Stylized Castle WebGL demo
— why learn web (javascript) ML(machine learning) 2024
— Score High in AWS SAA-C03 Dumps with Premium Quality Dumps
— Latest Newsletter: Embarrassed to be Human (Issue #138)
— Announcing the First Ever State of React Survey
— Performing CRUD Operations in a React-Express-MongoDB Application
— Pollyfill - PROMISE. ALL
— React Search Using-Debounce

Посмотреть:
🌐 Did Josh Make A Mistake? (⏱ 06:58)
🌐 This Experimental Chrome Accessibility Feature Is A Game Changer (⏱ 00:48)

Хорошего дня!

@javascriptv

🖥 Сайты вы найдете сниппеты кода Javascript:

➽ javascripting - http://javascripting.com

➽ codepen - http://codepen.io

➽ codemyui - http://codemyui.com

➽ jsfiddle - http://jsfiddle.net

➽ jsbin - http://jsbin.com

➽ 30secondsofcode - http://30secondsofcode.org/js/p/1/

➽ freefrontend - http://freefrontend.com

➽ snippit - http://snippit.io

➽ codesandbox - http://codesandbox.io

➽ glitch - http://glitch.com

➽ tabnine - http://tabnine.com

➽ github - http://github.com

@javascriptv

🚀 Work scroll — изящная реализация прокрутки страницы. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

https://codepen.io/Zuraavl/pen/jOQEmzM

@javascriptv

🖥 Идеи для проектов JavaScript:


➯ Создайте игру Flappy Bird.
http://youtube.com/watch?v=Ltg1fl4Obgg

➯ Игра "Хэнгмэн"
http://youtube.com/watch?v=hSSdc8vKP1I

➯ Слайдер изображений -
http://youtube.com/watch?v=PsNaoDhzQm0

➯ Переключение светлой/темной темы -
http://youtube.com/watch?v=CUEJkJ9HDbY

➯ Цифровые часы
http://youtube.com/watch?v=lsoCv8Agg6E

➯ Создание музыкального проигрывателя -
http://youtube.com/watch?v=oscPp3KghS8

➯ Список дел
http://youtube.com/watch?v=kzHmtmCMUwk

➯ Тетрис
http://youtube.com/watch?v=ZTHjT3bm-64

➯ Создание 15 проектов на JavaScript -
http://youtube.com/watch?v=3PHXvlpOkf4

@javascriptv

⚡️ List Styles — список. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

https://codepen.io/yexx/pen/OJzQNVN

@javascriptv