令和のHTML / CSS / JavaScriptの書き方まとめ
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
シチュエーション別に選べる！NetflixとHuluの【ドラマ】【アニメ】ランダムチョイスアプリを作ってみた！ - Qiita
シチュエーション別に選べる！NetflixとHuluの【ドラマ】【アニメ】ランダムチョイスアプリを作ってみた！RubyRailsAPI サービス名 サブスクルーレット サービス概要 ・Netflix、Huluのどちらかを選択、更にシチュエーション（テンション上げたい、チルしたい、ハラハラしたい）を選択し、その中からランダムでドラマを選んでくれるアプリ。 ターゲット ・Netflix、Huluなどのサブスクを使用している人で、次に観るものが決まっていない、または、決めるのが面倒な人向けのサービスとなっております。 なぜこのサービスを作ったのか？ 今回このサービスを作ったのは、私は、仕事終わりや休日にサブスクリプションサービスを利用してドラマやアニメをよく観ます。しかし、次に何を観るかを選ぶのは面倒で、選択肢が多すぎます。また、私がドラマやアニメを選ぶ基準は、基本的にポスター画像が「いい感じ」
Making of “Kindolphin” | 麦 Baku
group_inou / HAPPENING group_inouとAC部のミュージックビデオ作品『HAPPENING』をWebアプリ化しました。デザインと実装は僕一人です。元のビデオがGIFアニメ縦長漫画が歌詞に合わせて自動スクロールする仕様だったので、GIFの質感をロスレスかつ自分のペースで楽しめるように、某電子書籍アプリのような体裁でインタラクションできるようにした次第です。 We have just released a Webtoon app that highlights the lyrics of group_inou's music video "HAPPENING". You can switch between Japanese/English, change colors, stop and have a close look, or just scratch and
サブクエリの書き方を2万文字弱かけてすべて解説する
これはなに ども、レバテック開発部のもりたです。 今回はSQLのサブクエリについてまとめます。仕事でクエリを書く際、サブクエリは頻出の構文だと思うんですが、同時にサブクエリの書き方を完全に理解しているよという人は案外少ないのではないでしょうか？[1] 実際、MySQLの公式ドキュメントを見ると12ページくらいを割かれており、意外と奥深いのがサブクエリです。使いこなせると便利ですし、何よりちょっとSQLのコツみたいなのがわかって面白いよ、ということで記事にしてみました。 前提 この記事は以下の前提を含んでいます。 環境 MySQL8.0系 読者の知識 なんとなくサブクエリが書ける けど相関サブクエリとかになると「あーっ」つってGoogle meetを閉じてしまうくらいのレベル感 記事のボリューム 18,000文字 おれの卒論が20,000文字だった マサカリ 間違ってたら投げてくれ〜〜 それ
Flutter x Riverpod でアプリ開発！実践入門
Flutter 3.x, Dart 3.x, Riverpod 2.x に対応🚀 ✨直近の主な更新 - 2023年10月6日：「Riverpod v3.0 の変更点（v2.xと比較）」チャプターを追加 - 2023年2月23日：最新情報をもとに全体的に改修・Tipsのチャプターを追加（内容少） - 2023年2月19日：Testのチャプターを追加（内容少） - 2023年2月12日：riverpod_generatorのチャプターを追加 - 2023年2月12日：NotifierProviderのチャプターを追加 - 2023年2月6日：AsyncNotifierProviderのチャプターを追加 --- 本書は、「Riverpod」に主眼を置いた、実践的入門書です📚 状態管理のライブラリが豊富なFlutterですが、その選択肢の多さに迷われる方も少なくないのではないでしょうか？ その
仕組みから理解する Riverpod
注）この本は有料部分のチャプターが執筆中の状態です。完成は 2023 年末を予定しています。 ==================== Riverpod は日本の Flutter アプリ開発において最も使われている状態管理パッケージであると言っても過言ではないでしょう。 質の高いアプリを開発する、参加できるプロジェクトを探す、参加してくれるメンバーを探すなど、いろいろな立場の開発者がさまざまなモチベーションで Riverpod を学習し、よりよい使い方を考えているのではないかと思います。 しかし、Riverpod の適切な使い方を考えるためには Riverpod の仕組みの理解が欠かせません。 Riverpod には公式ドキュメントが Web サイトとして用意されていますが、そこで説明されるのは「どのような場合にどのように使えば良いか」という視点のケーススタディー形式の情報が中心で、その仕
「内側」から理解する Flutter 入門
モバイルアプリ開発の選択肢の1つとして大きな人気を得ている Flutter フレームワーク、みなさんはその「内側」を理解して使いこなしているでしょうか？ この本では、Flutter が UI を作り上げるための中心的な役割を担っている「Element ツリー」に着目しながら、多くの入門書では触れられない Flutter の内側を研究します。 "Everything is a Widget" の考え方にもある通り、たしかに Flutter は Widget の使い方さえ知っていればある程度のアプリ開発が可能な、素晴らしい API デザインの上に構築されたフレームワークです。 しかし、そのフレームワークの内側を理解することは、Flutter の公式ドキュメントから得られる情報の理解をさらに素早く正確なものにし、アプリの規模が大きくなってもバグなく重くならないアプリを実現するためにとても重要です
MySQLのインデックスの貼っていいとき悪いときを原理から理解したいよ😭
今回答えを出したい問いはこちら！！ インデックスはどのような仕組みを以て、何を実現したいものなのか それを踏まえたとき、インデックスはどういう場合になぜ貼る方が良いのか。また、どういう場合になぜ貼らない方が良いのか 大体分かっているよって人はサヨナラって感じのおさらい記事だぜ！！！！それじゃいってみよー🎉 あと、おれは今回MySQLにしぼっていくぜ👶 ってわけでOracleとかに興味があるやつは引き返しな！ indexの概要 公式の見解としては「where句を使ったselectクエリの実行速度を向上させるために実装されている、各行へのポインターのような振る舞いをする仕組み」って感じ👶 The best way to improve the performance of SELECT operations is to create indexes on one or more of t
【2024年版】デザイナーが初回ヒアリングで聞くこと&聞き方まとめ｜mayuki@Rabee
株式会社RabeeでUI/UXデザインをしているmayukiです 0→1を生み出す瞬間、プロジェクトのエンジンとなれるようなばちイケデザイナーを目指しています。 突然ですが…こんなお困りごとありませんか？💭 「デザイナーとしてクライアントの要望をうかがう際に、何を聞いたらいいかわからない」 「ヒアリングしてきたものの、いざ手を動かし始めたらわからないことがポロポロ…」 「クライアントに聞きたいことがたくさん出てきてしまった…」 今回は、webサイトやアプリのデザインの制作を受注する想定で、クライアントへの初回ヒアリングをする際にデザイナーとして聞くべき最低限のことをまとめました。 ※保存版のためなかなか長い記事となっています。 この文章はこんな方におすすめです ・デザイナーになりたてのジュニアクラスの方 ・スクールに通ったり独学で勉強したのでそろそろクラウドソーシングでお仕事を受けたい方
ヘッダー（グローバルナビゲーション）のデザイン事例100選｜akane
こんにちは！株式会社Rabeeのデザイナーのakaneです🐏 今回は、ヘッダー（グローバルナビゲーション）のデザイン事例を調べてみました！パターンごとに分類しながら紹介していくので、どうぞ最後までお楽しみください✍ はじめに：グローバルナビゲーションとは？グローバルナビゲーションとは、Webサイトの全ページに共通して表示される「主要なコンテンツへの案内リンク」です。 一般的には画面上部のヘッダーに設置されることが多く、ユーザーが「今、どこにいるのか？」「目的のページはどこか？」と迷わないように誘導する大切な役割があります。 どんなサイトを作るときもほとんど必須のパーツですが、わたしは気付けばいつも似たようなレイアウトを使いがち…。そこで今回は、グローバルナビゲーションのデザインを100事例見比べて分類してみます🔍 ・ ・ ・ 1. スタンダード型まずは、一般的に「ヘッダー」の言葉で想像
Upcase : Upcase by thoughtbot | Learn Web Development Online
Upcase by thoughtbot We're not a bootcamp, we're a finishing school. Become an experienced developer and take "junior" out of your title. Start Learning Today! Join our community of motivated peers and receive mentorship from the best in the business. Listen to their stories on our podcast. Choose from a variety of languages and tools. Our trails are intermediate and advanced. Learn from experienc
ぼくのかんがえたさいきょうのGo HTTPサーバー起動方法
これまで何度か HTTP Server の Graceful Shutdown について記事を書きました。 Go 言語で Graceful Restart をする Go 言語で Graceful Restart をするときに取りこぼしを少なくする Go1.8 の Graceful Shutdown と go-gracedown の対応 最終的に Go 1.8 で Server.Shutdown が導入され、この件は解決を見ました。 しかし、最近「あれ？本当に正しく Server.Shutdown 使えている？」と疑問に思い、少し考えてみました。 というか ↑ の記事もまだ考慮が足りない気がする。 ぼくのかんがえたさいきょうの Go HTTP サーバー起動方法 とりあえず完成形のコード。 package main import ( "context" "log" "net/http" "os
はじめに
Turboは 高速でモダンで、そして進歩的に改良されたWebアプリケーションを、JavaScriptをあまり使わずに作るためのいくつかの技術をまとめたものです。 Turboは流行のクライアントサイドフレームワークの代替手段を提供します。 流行のクライアントサイドフレームワークとは、全てのロジックをフロントエンドに置いて、あなたのアプリのサーバーサイドをJSON APIに毛が生えたようなものに制限してしまうものです。 Turbo を使えば、サーバーにHTMLを直接配布させることができます。それはつまり、すべてのロジック、例えばパーミッションをチェックしたり、ドメインモデルとやりとりしたり、その他アプリケーションのプログラミングに関わるあらゆることを、多かれ少なかれ、お好みのプログラミング言語に限定して書くことができるということです。 もう、JSONに分たれた両側（クライアントサイドとサーバー
【Rails7】図解でTurbo Frames入門 - Qiita
はじめに 後掲のテキストは、SPA風のCRUDアプリ作りを通して、無料でTurboを学ぶことができているめちゃくちゃありがたいテキストです。 ただし、フロントエンドの知識がないと少々難しく、何が起きている？って状態でした。 デベロッパツールで通信の様子を確認すると理解が進んだため、図も併用しながらその様子を解説していきます。 対象読者 Turboについて興味がある方 Railsチュートリアル完走後、フロントエンド開発に興味がある方 動作環境 Ruby - 3.1.0 Rails - 7.0.2.3 Google Chrome - 113.0.5672.63 上記テキストのチュートリアル1が終わったタイミングから解説します。 （お急ぎでcloneしたい方はこちら） ``` $ git clone <https://github.com/shita1112/cat-hotwire-demo>
好きなポッドキャストについてまとめる
そもそもポッドキャストって何？映像のない YouTube のような存在が ポッドキャストです。 つまり、ラジオのようなものです。 YouTube のように、素人も投稿できる音声 メディアです。 どうやって聞けるの？iOSからであれば、Apple Podcast Androidからであれば、Googleポッドキャスト ※Googleポッドキャストは、YouTube musicに統合の話が出ている 他にSpotify、Amazon music、radikoからも聞けるらしい。 おすすめのポッドキャストヤング日経経済系の番組はおじさんがしゃべっていることが多いが、この番組は若い大学生～大学院生の女の子が最近の経済について 話しており、非常に聞きやすく、軽い気持ちで聞けるのが良い。ポッドキャスト的な流し聞きに向いてる。 日経トレンディ ＆ 日経クロストレンド日経トレンディ及び日経クロストレンドとい
Rails: Evil Martiansが使って選び抜いた夢のgem（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Gemfile of dreams: the libraries we use to build Rails apps—Martian Chronicles, Evil Martians’ team blog 原文公開日: 2023/01/17 原著者: Vladimir Dementyev（首席バックエンドエンジニア）、Travis Turner（技術記事編集者） サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語ブログ: 合同会社イービルマーシャンズ - Qiita 日本語タイトルは内容に即したものにしました。また、gemごとにGitHubリポジトリへのリンクカードも追加してあ
Rails 7 with Vite + Stimulus + Tailwind
Rails 7 comes with the importmap but still, Vite is used popularly for Instant Server Start and Lightning Fast HMR features. It uses esbuild(fast pre-bundler) and rollup(bundler) under the hood leveraging their strengths for both dev and prod environments. Also, Building and cleaning Vite assets are automatically integrated with assets: precompile and assets:clean, so deploying is straightforward.
実践 Docker - ソフトウェアエンジニアの「Docker よくわからない」を終わりにする本
------------------------------------------------------ 2024 年 1 月更新 本書がきっかけで「なんとか Docker を使えるようになりたい」というプログラマの方向けの入門書を秀和システム様から出版させていただけることになりました 開発系エンジニアのためのDocker絵とき入門 https://www.amazon.co.jp/dp/4798071501 紙書籍と電子書籍、どちらもございます この書籍と執筆経験は、みなさまからの驚くほどの高評価があればこそ得られた機会でした いつも本当にありがとうございます 書籍化に際しまして、この場で次のとおり説明させていただきます 1️⃣ 本書 ( Zenn ) は有料化しません 2️⃣ 本書 ( Zenn ) は今後更新しません 3️⃣ 本書 ( Zenn ) と出版される絵とき入門の違い
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - ElMassimo/vite_rails_docker_example: An example of how to run Vite Rails in Docker
GitHub - practical-tutorials/project-based-learning: Curated list of project-based tutorials
