Python だけで作る Web アプリケーション(フロントエンド編)Python だけで作る Web アプリケーション第一弾です。HTML/CSS/JSを使わずに、PythonだけでUIを含むWebアプリケーションを作ります。
グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ - ICS MEDIA
グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ 『Squooshスクーシュ』というGoogleが開発した画像圧縮ウェブアプリがあります。ブラウザで変換結果を見ながら圧縮設定ができるので、画像圧縮の難しい知識を持たない方でも使いやすいことが特徴です。圧縮だけでなく、WebPなどの各種フォーマットへの変換・リサイズといったこともできる便利ツールです。 このSquooshをNode.jsで扱える『libSquoosh』が存在します。libSquooshは大量の画像を一括で圧縮、WebPへの変換、リサイズなどの処理をこれ1つで完結できるのがポイントです。昨今のウェブはページの読み込み時間が重視される傾向があります。画像のファイルサイズは読み込み時間に大きく影響するため、画像圧縮は重要なテクニックです。libSquooshをwebpack・Viteと
未経験から1ヶ月でWeb系企業に就職する勉強法
取り上げた技術は、本格的な開発でも役に立つもので、最も学習コストが低いものを選んだ。 重要度が低いものは載せていない。たとえばHTMLとCSSなんてググりながら書けば全く問題ない。Bootstrapなどのフレームワークも全くやる必要はなく、仮に就職先で使っていたら覚えればいい。 逆に言えば以下に挙げる技術は、そもそも概念自体がプログラミングにとって普遍的なものであり、（基礎的な部分を）調べながら使うようではエンジニア失格ということ。 基本的に現在では、バックエンド・フロントエンド・運用保守全てができないエンジニアに価値は無い。 以下に挙げた技術（①⑤⑥は他の言語やフレームワークで代替可能）が身に付いていなければまともな企業に就職することは難しい（もちろん、下らない業務システムを下請けで作ってる底辺企業には入れるだろうが）。 経験者でも、これらができない/わからないのは、相当恥ずかしいことだ
Reactの環境構築 — 仕事ですぐに使えるTypeScript ドキュメント
TypeScriptの世界を知る 前書き Node.jsエコシステムを体験しよう TypeScriptの書き方 変数 プリミティブ型 複合型 基本的な構文 基本的な型付け 関数 その他の組み込み型・関数 クラス 非同期処理 例外処理 モジュール console.logによるログ出力 中級のテクニック ジェネリクス 関数型指向のプログラミング クラス上級編 リアクティブ 高度なテクニック 環境ごとのTips（共通環境・ブラウザ以外） ソフトウェア開発の環境を考える 基本の環境構築 ライブラリ開発のための環境設定 CLIツール・ウェブサーバー作成のための環境設定 CI（継続的インテグレーション）環境の構築 成果物のデプロイ 使用ライブラリのバージョン管理 環境ごとのTips（ブラウザ環境） ブラウザ環境 ブラウザ関連の組み込み型 Reactの環境構築 create-react-appによる環境
流行りのフロントエンド技術よりもサイト構築や SEO の基礎知識のほうが重要だ - Diary
流行りのフロントエンド技術よりもサイト構築や SEO の基礎知識のほうが重要だ みたいな主張があり、 WordPress のカスタマイズをしている人たちがこれを言いがちであり、実際間違ってないと思います。 では我々(我々とは誰か？)がそれに対していえることが何かというと、 PHP と jQuery で頑張って WordPress をカスタマイズするよりも JSON API と nuxt.js/next.js でサイトを組んだほうが簡単だということです。 WordPress のカスタマイズをやってきた人たちは長年のノウハウを積み上げており、それを活用してバリューを出しているわけですが、 nuxt.js でやっていっている人たちが熟達したとき、すべてが破壊されます。 じゃあ実際僕が nuxt.js でかっこいいサイト作る仕事して WordPress の人たちの仕事を奪っていくぞ！！！という気持
混沌を極める jQuery のコードをいかにして Vue.js に頼らずに整理したか - Qiita
序 師走ですね。年の瀬が近づいてくると、酔っ払った元社員に絡まれることが稀によくあります。 私は jQuery から Vue.js への置き換えで何をやらかしたのか - Qiita 可能ならいきなりフロントエンドのライブラリを導入するよりも jQuery のみで MVVM パターンへ移行したほうがよかったかなぁと今になると思います。 結局のところ、jQuery で苦しんでいたのは、複雑な「状態」が表示やイベントハンドル系のコードとごっちゃになっていたから です。 うん、分かる。当時、この取組みを「大変そうだなー」と思いながら横で眺めていました。 まさか、続きを自分でやることになるとは夢にも思っていませんでしたが(｡◉ᆺ◉) ごあいさつ どうも、 @cesare と申します。 クラウドワークスでサービスの開発や運用を手がける傍ら、たまに機械学習とか VR とかに手を出して遊んでいます。 この
JavaScript実行時、「閲覧者の了解をいちいち得る」ページ登場 「Coinhiveより嫌」「悪夢」と話題
JavaScript実行時、「閲覧者の了解をいちいち得る」ページ登場 「Coinhiveより嫌」「悪夢」と話題 サイト閲覧者に仮想通貨をマイニングしてもらうことで収益を得られるツール「Coinhive」を、明示することなくサイトに設置した複数のユーザーが、不正指令電磁的記録（ウイルス）取得・保管などの容疑で警察に摘発され、物議をかもしている。 Coinhiveは、サイトに専用のJavaScriptコードを埋め込むと、閲覧者のCPUパワーを使って仮想通貨を採掘する。今回摘発された1人・デザイナーの「モロ」（@moro_is）さんは警察に、「事前に許可（もしくは予感させること）なく他人のPCを動作させたらアウト」であり、明示なくCoinhiveを設置すれば違法との説明を受けたという。 だがCoinhiveに限らず、現代的なWebサイトにはほぼすべて、何らかのJavaScriptが使われている。
今の時代、ウェブページは一瞬で表示するべき！ 画像の遅延読込に役立つamp-imgの使い方 - ICS MEDIA
ウェブページの表示速度は、離脱率やコンバージョン率にもっとも影響する重要なポイントです。Googleが公表した調査結果では、「表示に3秒以上かかると、約53%のユーザーは離脱する」「表示速度が1秒から6秒に落ちると、直帰率は106%上昇する」というデータが出ているようです。 表示速度を改善する施策は色々とありますが、本記事では「AMPアンプ（Accelerated Mobile Pages）」を作成する際に利用するJavaScriptライブラリーを使って、簡単に表示速度を改善する手法を紹介します。 AMPとはウェブページの読み込みを高速化させる技術 「AMPアンプ（Accelerated Mobile Pages）」とは、名前の通りモバイルでのウェブページの読み込みを高速化させる技術です。 本サイト（ICS MEDIA）では以前「AMPの利点と対応HTMLの作り方」で導入方法を紹介していま
最新のウェブフロントエンド技術を無理してキャッチアップする必要はない - id:anatooのブログ
ウェブフロントエンド技術は変化が激しいと言われるけれども、多くの人にとって最新のウェブフロントエンド技術を無理してキャッチアップする必要は無い。以下理由。 ここでいう最新のウェブフロントエンド技術とは、新しいブラウザのAPIや新しいJavaScriptの文法や新しいフレームワーク・ツールなどを指す 今のHTML5はドキュメントを表現するプラットフォームだけではなくアプリケーションプラットフォームとしても機能するように進化をしている最中 だからアプリケーションプラットフォームとしての進化を支える新技術がたくさん出てきている 逆に言うと、アプリケーション(SPAとか)を書かない人にとってはキャッチアップする必要の無い場合がたくさんある また、それらのウェブフロントエンドの新技術を全てキャッチアップするのは基本的に不可能だと思う 自分はウェブフロントエンドやそれのパフォーマンスを専門の一つにして
イマドキのJavaScriptの書き方2018
PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい
Jest · 🃏 Delightful JavaScript Testing ドキュメント
スナップショット機能で大きなオブジェクトを容易に追跡できるテストを作成できます。スナップショットはテストと一緒に、あるいはインラインに埋め込んだ状態で表示できます。
W3Schools Online Web Tutorials
W3Schools offers a wide range of services and products for beginners and professionals, helping millions of people everyday to learn and master new skills. Free Tutorials Enjoy our free tutorials like millions of other internet users since 1999
フロントエンド開発の現場で役立つJavaScriptの知恵10選
どんどん複雑化するJavaScript開発。KADOKAWAが運営するオンラインメディア「WPJ」から、チームで仕事をするときの「ちょっとしたお作法」や、デバッグを効率化する方法など、JavaScriptのコードを書くときに役立つ10本の記事をお届けします。
あなたのブラウザでJavaScriptを有効にする方法とその理由
もしあなたがWeb開発者なら、<span>どうやって<code><noscript></code>のコードをWebページに導入するかの<a href="#developer" id="devinfo">説明を参照してください</a>。</span> Google Chrome Webブラウザーのメニューから"Customize and control Google Chrome"をクリックし、"Settings"を選択して下さい。 "Settings"というセクションにある"Show advanced settings..."をクリックします。 "Privacy"内の"Content settings..."をクリックします。 ダイアログ・ウィンドウが開いたなら"JavaScript"というセクションを探し、"Allow all sites to run JavaScript
jQueryのtoggleでアコーディオンメニューやタブをさくっと実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近友人と『中学生円山』を観に行きました。 女性にはおそらく理解できないであろう「男子中学生あるある（主に下ネタ）」が盛り込まれていて、いい意味でヒドイ内容でした。もう一回観たい（´ω`） さて、今回は「HTMLとCSSはわかるけどjQueryってなにそれ、おいしいの」という方向けに、今日から使える簡単かつ便利な3つのメソッド「slideToggle／fadeToggle／toggleClass」をご紹介します。 こいつらを知っとくと下記のようなメリットがあります。。 アコーディオンメニュー、タブ、スマホサイトでよくある「上からスラスラ出てくるメニュー」とか実装できる 超シンプルな記述なので、今日から使える いやーこれは便利ですね。 というわけで、早速解説していきます。 【こちらもおすすめ】 超簡単jQ
jquery.validate.jsでvalidateチェックタイミングを指定する
まずjqueryとjquery.validate.jsをプリロードします。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="../js/jquery.validate.min.js"></script> 年齢が20以上の場合、備考を必須にしています。 <body> <!-- コーディング部分 --> <div> <form id="testForm" method="post"> <p> <lable for="name" >名前</label> <input name="name" type="text" /> </p> <p> <label for="age">年齢</label> <input name="age" id="age" type="n
[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する | CreativeStyle
タイトルに書いてあることを実現しようとして、少し悩んだのでメモ。 ウインドウのリサイズ操作やjQueryに限らず、短い周期で連続してイベントが発生する場合に、一連の最後のイベントが発生した時にだけ何らかの処理を行いたい時に使えるパターンです。 何も工夫せずに書くと… こんな感じになります。
正規表現(RegExp) - とほほのJavaScript入門
str = "ABCDEF"; re = /DEF/ig; console.log(re.test(str)); // => true マッチング str.match(regexp) str に対して正規表現 regexp でマッチングを行い結果を返します。マッチしなかった場合は null を返します。 const ret = "abc123".match(/[0-9]+/); console.log(ret); // => ['123', index:3, input:'abc123', groups:undefined] console.log(ret[0]); // マッチした文字列: '123' console.log(ret.index); // 見つかった場所のインデックス: 3 console.log(ret.input); // 入力文字列: 'abc123' グローバルフ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js & Nuxt.js から React & Next.js へ移行した理由 | fwywd（フュード）powered by キカガク
WordPressが技術負債になった話 / Coral Developers 20210525
