2022年9月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン AdobeのFigma買収とAdobe XDのこれから 9月の大きなニュースは、やはりAdobeによるFigma買収だと思います。このブログでも記事にしています。 関連: Adobe、Figmaを約2.9兆円で買収へ デザインコラボツール大手 フォトショップの作業が楽になる、覚えておきたい小技テクニック18選 とても有益ですが、レイヤーの複製はoption+ドラッグではなくcommand+Jの方が速いと思います。 ちょうどいいWebデザインギャラリー そのWebサイトのいいところが言語化されているギャラリーサイトです。 Screen Sizes iPhone・iPadなどのスクリーンサイズま
【サボりたいエンジニア向け】コーディングに役立つチートシートまとめ - Qiita
はじめに こんな人が役に立つ記事 コーディング業務の効率を上げたい。 コーディングに関するチートシートを知りたい。 打つのもめんどいからコピペでなんとかしたい（笑） 今回は、コーディングに役立つチートシートをまとめました。 VSCODEチートシート エンジニアなら必ず使うであろうVsCodeのショートカットチートシート。これはよく使ってます！ HTML系のチートシート集 HTMLに関するチートシートをまとめてみました。 HTML5 タグチートシート HTML5 のタグチートシート。サイトには 5 から廃止になった避けるべきタグなどもまとめてられており、 PDFでダウンロードできます。 HTML5 入れ子チートシート HTML の入れ子の可否を視覚的に分かりやすく、色づけしてくれます。対象要素の親、子を選ぶだけで、簡単に調べることが出来ますので便利なチートシート 特殊文字一覧：HTMLで使え
ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみた - feb19
ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみたdate2022.9.4(Sun.)tagsweb developmentFrontendJavaScript ウェブアプリケーション開発で React や Vue を使うのはよくある話かなと思うのですが、マーケティングや広報活動など広告クリエイティブ系のウェブサイト制作ではどれぐらい使われているのかなと思い、暇つぶしにリサーチしてみました。 調査方法母集団ウェブギャラリーサイトをいくつか見て比較的国内系のセレクトが多そうな https://io3000.com/ さんから 2022 年に紹介されている 175 件と、ウェブサイトのアワードサイトとして有名な https://www.awwwards.com/websites/ さんで 2022.8 以降に Winner と
html-rewriter-wasmでHTMLをパースする - console.lealog();
HTMLファイルをパースして、 特定の文字列を抜き出したり 特定の属性を書き換えたものを書き出したり ってことをやりたい時、今までは`cheerio`を使うことが個人的には多かった。 GitHub - cheeriojs/cheerio: Fast, flexible, and lean implementation of core jQuery designed specifically for the server. 懐かしい`jQuery`的な記法で操作できる・・とはいえ、もはや`jQuery`のことぜんぜん覚えてなくて、生DOMのAPIばっか使っちゃったり。 かといって、`cheerio`が内部で使ってるHTMLのASTパーサーである`parse5`や`htmlparser2`をそのまま使うのは、ローレベルすぎて乗り気じゃなかったり。 というところで、なんか代用できるものはないかな
iOS版YouTubeアプリのOSSライセンスページが魔窟 - ナカザンドットネット
気分転換で下調べも何もせずに雑に書いた記事です。個別のライブラリについては間違ったことを言っている部分が多いと思うので、参考にしないでください。 こんなツイートを見かけました。 YouTube、yogaが使われてるんだ👀 pic.twitter.com/A9GVR7ByPb— Naturalclar(Jesse K.) #StopAsianHate (@natural_clar) 2021年11月17日 Yogaといえば、FacebookMeta社が作ったAndroid / iOS向けのレイアウトエンジンです。 yogalayout.com React Nativeのレイアウトエンジンでもありますが、まあ今回はReact Nativeの話はしません。YogaはAndroid向けのLithoやiOS向けのComponentKitといった形でも提供されており、ネイティブアプリのUI実装にも活
VueもReactもやったことないのでVanilla JSでやってみたSPA - Qiita
はじめに まずは宣伝です。 このたび保育園を地図から探せる 保育園マップ というサービスを作りました。 WEB版 iOS版 Android版 Vanilla JSのSPAで作ったのですが、思いの外色んなことをやる必要があったので、制作過程で得た知見をこの記事にまとめました。 網羅的に書いたので長いですが、一つ一つのトピックはそれ程長くないので、興味があるところだけ読んでもらってもいいと思います。 Vanilla JS ＆ SPAとは？ Vanilla（バニラ） JSというのは何もフレームワークを使っていない素のJavaScriptのことです。 ただのJavaScriptなんですが、ジョークでフレームワーク風の公式サイト？っぽいものがあったりします。 SPAというのはシングルページアプリケーションの略です。 ページごとにHTMLを用意するのではなく、1つのHTMLの中でJavaScriptに
jQuery UIとjQuery Mobileがついに開発終了、今後はメンテナンスのみに。jQuery本体は引き続き積極的に開発
jQuery UIとjQuery Mobileがついに開発終了、今後はメンテナンスのみに。jQuery本体は引き続き積極的に開発 JavaScriptのUIフレームワークであるjQuery UIと、モバイルアプリケーション向けフレームワークであるjQuery Mobileは今後新規機能の開発が行われず、jQuery UIについてはメンテナンスへ移行、jQuery MobileについてはDeprecated（利用を推奨せず）になることがOpenJS Foundationから正式に発表されました。 jQuery UIは2007年に登場、jQuery Mobileは2011年に登場しました。一時期はWebサイトなどで広く使われ、関連書籍なども数多く出版された主要なライブラリ群の開発が正式に終わることになります。 ただしjQuery本体の開発は引き続き積極的に行われていくとのことです。 Follo
【個人開発】リモートワーク時代なので、デスク周りに特化した写真投稿サービスを作りました - Qiita
こんにちは、Barry（ばりゅー）と申します。 いきなりですが言わせてください。 このサービスは今読んでいるあなたのために作ったサービスです！ はじめに リモートワークが当たり前になった今、みなさんはどんなデスクで作業してますか？ 「もっと快適にしたい。」「もっとオシャレにしたい。」 デスクワーカーなら一度、いや、二度三度思ったことがあると思います。 そんなとき、他人のデスクが参考になったりしますよね。 そこでこんなサービスを開発しました。 どんなサービス？ デスク周りに特化した写真投稿サービス「Buildesk（ビルデスク）」です。 【サービスURL】https://buildesk.app 【GitHub】https://github.com/en-Barry/buildesk Buildeskの一番の特徴は、使ってるアイテムも登録できること。投稿者がどんなアイテムを使っているのか瞬時
jQueryからTypeScript・Reactまで - Viteで始めるモダンで高速な開発環境構築 - ICS MEDIA
Vite（ヴィート＝フランス語で「速い」の意味）は2020年に発表された新しいフロントエンドのビルドツールです。 開発者がVue.jsの作者であるEvan You氏であるため、Vue.jsのツールであると誤解されることもありますが、プレーンなJavaScript（バニラJS）からVue.js・React・Svelteといった流行のフレームワークまで、さまざまな環境で利用できる汎用的なツールです。 位置付けとしてはwebpackのようなバンドラーと呼ばれるものに近い存在ですが、それだけではありません。この記事では、Viteを導入してプレーンなJavaScriptから、TypeScript+Vue.js・Reactといったフレームワークまで、快適な開発環境を手に入れる方法を紹介します。 この記事で紹介すること： Viteの特徴と基本の仕組み 基本の使い方 Vite + SCSS Vite +
BankCodeJP API — 金融機関コードAPI
Japan Financial institution Code Web API金融機関検索APIのスタンダード銀行、信用金庫等の統一金融機関コード、名称を検索できる Web API。 毎月 8,000万を超える検索リクエストを処理し、トラフィック増加時にも優れた可用性とレイテンシを提供しています。 BankcodeJP APIシンプルそしてパワフルに設計されたAPIは、Eコマースにおける金融機関検索に最高のパワーを与えます。 JSONフォーマットで金融機関情報を返却するAPIはCORS対応しているためAjaxで通信できます。JQuery はもちろん、Angular や React、Ember.js、Aurelia、Vue.js などの SPAフレームワーク からも利用できます。 いくつもの企業がBankcodeJP APIを導入し、素早く効率的に Webサービスを構築しています。
フロントエンドコーディング時に便利なジェネレーターサイト（随時更新） - Qiita
更新履歴 追加 2024/04/01 「Epic Easing」を掲載しました 2024/03/07 「Filter Blend」を掲載しました 2024/03/04 「Tooltips & Speech Bubbles」を掲載しました 2023 2023/07/04 「CSS Box Shadows Generator」を掲載しました 2023/06/29 「Regulex」を掲載しました 2023/04/05 「Colorable」を掲載しました 2023/03/09 「Scrollbar.app」を掲載しました 2022 2022/10/04 「CSS Shadow Palette Generator」を掲載しました 2022/09/07 「Wayback Machine」を掲載しました 2022/05/31 「Min-Max-Value Interpolation」を掲載しました
フロントエンドエンジニアブログ を始めます！｜食べログ フロントエンドエンジニアブログ
ご挨拶はじめまして！ 食べログのFE（フロントエンジニア）チーム リーダーをやっております、 辻です。 食べログのフロントエンドってどんな印象でしょうか？ 「めっちゃ大変そう」でしょうか？ 出典：https://www.slideshare.net/YoshieYamamoto/ss-83840311 「食べログ フロントエンド」でググるとこの記事が上位に表示されますので、この印象がある方もいるかと思います。 こちらのスライド「食べログのフロントエンドエンジニアってめっちゃ大変やねん･･･」では、 場当たり的な実装を繰り返さないために生まれたFEチームについて、 他チームのエンジニア・デザイナーをサポートする苦労、 分業体制の食べログで納期とメンテンス性のバランスをとる難しさ、 jQuery+Backbone.JS、Gulp+webpack、SMACSS+BEM+FLOCSSなどで構成され
「Bootstrap 5」のアルファ版がリリース、脱jQueryやCSSカスタムプロパティの強化など
CSSフレームワーク「Bootstrap」の最新バージョンである「Bootstrap 5」がアルファ版としてリリースされました。バージョン5ではjQuery依存からの脱却や、Internet Explorerのサポート終了によるCSSカスタムプロパティの強化など、数多くの新機能が追加されています。 Bootstrap 5 alpha! | Bootstrap Blog https://blog.getbootstrap.com/2020/06/16/bootstrap-5-alpha/ 目次 ◆ドキュメントページやロゴのデザイン変更 ◆jQueryとJavaScript ◆CSSカスタムプロパティ ◆ドキュメントの改善 ◆フォームの改善 ◆ユーティリティAPI ◆グリッドシステムの強化 ◆ドキュメントの生成方法変更 ◆ドキュメントページやロゴのデザイン変更 バージョン5では、ドキュメントペ
本当に倒すべきだったのは jQuery ではなくテンプレートエンジンだった - fsubal
そうはっきり言ったほうが良かった。いや言わなくても伝わる現場は良かったんだけど、伝わらないままごく一部だけをコンポーネントに移行、それ以外はただ生 DOM API に変えて終わり（あるいは他は jQuery のまま）みたいな「モダン化」で済ます余地を与えたのは発信の失敗だった……という10年代の振り返り。 テンプレートエンジンはなぜ倒された方が（…といって悪ければ、変わったほうが）良いのかは端的に指摘できて、それは初回レンダリングしか考慮してないからだということになる。 Web の UI には状態変化がつきもの（になったのは実は最近の話）だが、テンプレートエンジンは1回目のレンダリングだけを担当し、変化した後の2回目以降の見え方は JavaScript が担当するというパラダイムを構成する。
Chromeの拡張機能を2つ使うだけでブラウザの操作を自動化！？ - Qiita
「ブラウザの操作を自動化したい」 仕事中にこういう風に考えることがありました。 なぜこういう風な事を思ったのか。 それは申し込みのテストを毎回手動で行なってるOPさんに申し訳ないと思ったから。巷では自動テストだの言っていますが、人間でテストしなきゃいけない部分も沢山あります（ブラウザ操作が伴う物は余計に）。 そして自分も面倒くさがりなので基本的に手動でテストなんかしたくない。って事で上記に思い立ちました。 自動化といっても大層なことじゃなく、軽い条件でブラウザ操作したい人向け。 何せChromeの拡張機能を使うだけで出来るので。 複雑な事をしようと思えば、PythonとSeleniumで出来ますが、今回はそんな難しいことは望みじゃないです。 必要な入力項目に入力したり、特定のチェックボックスにチェックを入れてsubmitボタンを押すとか軽い感じ。 ブラウザの自動操作で使用するChromeの
jQueryを使わずにスライドメニューを実装しよう
2022年4月27日 CSS, JavaScript スマートフォンのアプリやモバイルサイズのWebサイトでよく見かけるスライドメニュー。どうも「jQueryがないと実装できない」と思っている人がちょこちょこいるようなので、簡単なJavaScriptで実装できるんだよーというのを記事にしてみます。 ↑私が10年以上利用している会計ソフト！ このようにボタンをクリックすると横からひゅるっと出てくるメニューを作っていきます。 1. メニューを開いた状態を作成 まずはHTMLとCSSで「Menu」ボタンをクリックしてメニューが開いている状態を作成します。メニュー部分は position: absolute; で位置を指定しています。また、メニュー項目に white-space: nowrap; を加えることで、スライドさせた時に日本語が変に改行されるのを防ぎます。それ以外は色や線、余白の指定など
An Update on CDNJS
When you loaded this blog, a file was delivered to your browser called jquery-3.2.1.min.js. jQuery is a library which makes it easier to build websites, and was at one point included on as many as 74.1% of all websites. A full eighteen million sites include jQuery and other libraries using one of the most popular tools on Earth: CDNJS. Beginning about a month ago Cloudflare began to take a more ac
【Vue.js入門】の執筆者が語る！ Vue.jsで押さえておきたい５つのポイント - FLEXY（フレキシー）
※本記事は2019年11月に公開された内容です。 JavaScript用のフレームワークの中でも高い採用率を誇るVue.js。そのVue.jsをこれから学び始める方は、学び方を教えてほしい、有識者の話を聞きたいと考えたことはありませんか。本記事では、「Vue.js入門 基礎から実践アプリケーション開発まで」の著者である手島拓也氏にVue.jsを学ぶ前に知っておきたいポイントを語っていただきます。Vue.jsの勉強方法や手島氏の経験を知ることができるので、ぜひご覧ください。 学ぶ前にまずはどんな案件があるか知りたい方は、FLEXYで取り扱っているVue.js案件をご覧ください。 私のエンジニア史とVue.jsに出会うまで 先日、慶應義塾大学矢上賞（起業支援）授与式で招待講演をする機会がありました。その際にも強烈に感じたのですが、Vue.jsと私のエンジニア史を切り離して語ることはできません。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
組織フェーズを見据えたWebフロントエンドのアーキテクチャと変遷
UI8 | Curated Marketplace for Designers
