最近では、Tailwind CSSで実装した無料のUIライブラリが増えてきました。これらのライブラリで共通しているのはもちろん、Tailwind CSSをベースにしていることで、さまざまなデザインやスタイルのライブラリが...記事の続きを読む

春の入門連載2024、5本目の記事です。 はじめにこんにちは。CSIG(Cyber Security Innovation Group)の棚井です。 春の入門連載2024ということで、VSCodeの拡張機能である「GitLens — Supercharge Git in VS Code」を取り上げます。 エディタ選びみなさんは、普段の開発エディタには何を利用されていますか? ソフトウェアエンジニアであれば、エディタとの付き合いは絶対に外せないポイントです。私の場合は、「生成系AIとの連携があるか?」と「開発支援ツールが整備されているか」を判断軸としています。 「GitHub Copilot」との連携があり、私がこれまで利用してきたエディタは JetBrains VSCode(Visual Studio Code) の2つです。 JetBrainsの製品はインストール時点で豊富な開発支援機能
Git logの場合 Gitの履歴はgit logコマンドをターミナルで打つと見れます! 開発ブランチと本番ブランチなど複数のブランチがあると一目で開発の流れが追いにくいですよね。 その場合にGit HistoryやGit Graphを使うとグラフィカルに流れが把握できます。 Git Graphの場合 左端にあるGIt Flowをグラフィカルに表示してくれている箇所があるので、視覚的にブランチの流れが追いやすいです! Git操作は間違えると修正するのに苦労するので、GUIを使って視覚的に全体像を把握する事をお勧めします! Git運用に慣れていない方は、よくあるパターンとその対処法を事前に把握しておきましょう。 👉 Gitに慣れていない人がよくハマるパターンと対処法まとめ 2. Git Graphのインストール方法 ここからはGit Graphの導入方法や使い方を解説していきます。 導入方
un-T factory! XA Advent Calendar 10日目の記事です。 リキッドレイアウトの葛藤 リキッドレイアウトによるWebページ制作の際、表示端末の画面幅(viewport)の違いによって各要素のサイズ比率が変わり、デザイン時の意図と異なる見た目になってしまうことがあります。 特にスマートフォンやタブレットでは端末によってブラウザ幅が固定されるため、テキストの改行のされ方や周辺要素とのレイアウトバランスなど、ちょっとした違いでページの印象が大きく変わることもあります。 「さまざまな解像度の端末があるのだから、そのような違いが出ることも許容するべき」という考え方にはもちろん同意ですが、今回は、CSSのサイズ指定を少し工夫してアスペクト比を維持したサイズ可変レイアウトを手軽に実装する方法を紹介します。 サイズ可変レイアウトの実装 一つの例として、画面幅(viewport)
画像のように拡大・縮小するコーディング実例 では、先ほど紹介したvwの考え方を使ってコーディングしてみます。自分の場合は基本的にPCからスマホに映るまでの幅で使う多いです。 (表示がぐちゃぐちゃになりがちなので…) 先に結果だけ見せると以下のような動きになります。文字や余白、横幅がウインドウ幅に応じて拡大したり縮小していることが分かるかと思います。 PCベースのHTMLとCSSを作る ではどんな感じで作っているか具体的なコードを元に見ていきましょう!以下のようなHTML構造でシンプルな横並びレイアウトを作っています。 <section class="content"> <div class="inner"> <h2 class="head">セクションの見出し</h2> <div class="body"> <div class="body-img"> <img src="https://
dotenv の改良版である dotenvx が使ってみてめっちゃ良かったので紹介します。 特徴 特に大きいのは「環境変数の暗号化」と「複数 .env ファイルへの対応」の2つです。 環境変数の暗号化 dotenvx 経由で環境変数をセットすることで、環境変数が公開鍵暗号方式で暗号化されます。 #/-------------------[DOTENV_PUBLIC_KEY]--------------------/ #/ public-key encryption for .env files / #/ [how it works](https://dotenvx.com/encryption) / #/----------------------------------------------------------/ DOTENV_PUBLIC_KEY="03f8b376234c4f2
なぜMarkdownか 記法が簡単で表現力が高い(※1) テキストなので差分管理がしやすい QiitaもMarkdown形式を採用している ※1 プレビュー機能があるとなおよい! VSCodeを使うならこの拡張機能を入れてみよう Markdown All in One まずはこれを入れていたら間違いないと思う! 詳細は拡張機能の公開サイトを見ていただくといいですが、とりあえずのおすすめポイントは これを入れていたら大体の機能が使える(最初に入れるべき拡張機能) 便利なショートカットが用意されている 太字:Ctrl+B 表のフォーマット:Alt+Shift+F パスの補完をしてくれる ファイルリンク(特に画像)のパスを補完してくれる Paste Image これは画像を資料に入れたいときにマストの拡張機能だと思います! これがないと、 スクショを撮る 保存先のディレクトリに移動して保存する
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2019. * Some parts of this feature may have varying levels of support. Learn moreSee full compatibilityReport feedback 交差オブザーバー API (Intersection Observer API) は、ターゲットとなる要素が、祖先要素または文書の最上位のビューポートと交差する変化を非同期的に監視する方法を提供します。 従来、ある要素の可視状態、あるいは 2 つの要素の相対的な可視状態を検出することは困難であり
この記事は10月1日に行われたJamstackオンラインワークショップ #4「microCMS × Next編」の内容を記事にしたものです。 microCMSとNext.jsを組み合わせて、Jamstackなブログを作成することができます。 こちらが本ワークショップのイベントページです。 Jamstackオンラインワークショップ #4「microCMS × Next編」 前提下記のバージョンで開発を行っています。バージョンの差異によって若干機能が異なる可能性があります。 Next 10.0.1react 17.0.1react-dom 17.0.11. Next.jsプロジェクトを用意するまずは、Next.jsのプロジェクトを作成していきます。プロジェクトの雛形を作成するCLIがあるので、コマンドを入力して作成していきましょう。 $ npx create-next-app microcms
Masonryレイアウトとは、画像やカード型コンテンツをレンガ状に敷き詰めて配置するレイアウトです。Pinterestなどで見かける、高さが異なるカードを順番に配置するテクニックです。 今までは、JavaScriptで実装したり、Flexboxでも少し複雑なCSSで実装したりでしたが、CSS Grid Layout Module Level 3のドラフトが先日公開され、Masonryレイアウトをたった3行のCSS Gridで簡単に実装できるようになります。
You will be able to read, track and discover many active issues very flexibly by using Jasper in GitHub. It is enabled by a powerful function called "Stream" of Jasper. example repo:nodejs/node is:issue label:bug You can use the GitHub Search query to create various criteria, such as issues I created, pull requests of nodejs/node, bug labeled issues, etc. to view issues and receive update notifica
Next.jsでimportのaliasを貼る時に、自分がハマったのでその時に解決した方法を解説していきます。 手順だけ知りたい人は手順から読んでください。 この記事で解説する手順はTypeScriptを利用している時に綺麗にできる方法です。 TypeScriptなんて使ってないぞと言う人は下の背景とまとめだけ読んでいただければいい方法が見つかるかもしれません。 背景 TypeScriptを導入したプロジェクトでは~にsrcディレクトリなどのaliasを貼るのにいろいろな場所にコンフィグを書かなければいけません。 多くの記事で紹介されているのはtsconfig.jsonとwebpack.config.jsに設定を記述してeslint-import-resolver-webpackを使って解決する方法です。 それぞれのファイルでは以下のように記述します。
import clsx from 'clsx'; // Strings (variadic) clsx('foo', true && 'bar', 'baz'); //=> 'foo bar baz' // Objects clsx({ foo:true, bar:false, baz:isTrue() }); //=> 'foo baz' // Objects (variadic) clsx({ foo:true }, { bar:false }, null, { '--foobar':'hello' }); //=> 'foo --foobar' // Arrays clsx(['foo', 0, false, 'bar']); //=> 'foo bar' // Arrays (variadic) clsx(['foo'], ['', 0, false, 'bar'], [['baz
async/awaitを使ったコードのエラーハンドリングのもやもや es6で導入されたasync/await、皆さん使われていますか? かつてのコールバック地獄から始まり、Promiseを経てこのasync/awaitが使えるようになったことで、非同期処理はとてもシンプルに書けるようになりました。 しかしこのasync/awaitですが、特にexpressなどを使ったサーバーサイドで書いている時にエラーハンドリングどうしたら良いか困ったりした経験はないでしょうか? 内部的にはPromiseが使われているので、要はPromiseのエラーハンドリングと同じなのですが、僕は当初もやもやしていました。 もやもやその1: catchした後も実行が止まらない… 例えば下記みたいなコードを書いた経験がある方もいるのでは? 私も最初書きましたw const getItem = async(req, res
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く