コンテナクエリ - とほほのWWW入門ブラウザの横幅などに応じて応じて異なるスタイルを適用するのが メディアクエリ ですが、画面内の矩形領域(コンテナ)の横幅等に応じて異なるスタイルを適用するのが コンテナクエリ です。 コンテナの container-type に inline-size または size を指定し、@container で異なるスタイルを指定する条件とスタイルを指定します。下記の例では通常コンテナ(#c1)内のテキストは赤色ですが、横幅が600px以上のコンテナ(#c2)内のテキストは青色になります。
何故パスワードをハッシュ化して保存するだけでは駄目なのか？ - NRIネットコムBlog
不正アクセスによるIDとパスワードの漏洩を受けて、MD5によるハッシュ化について話題になっていました。システムを作る上で、パスワードの管理や認証はどう設計すべきかを考えるために、少し整理をしてみます。もし事実誤認があれば、どしどしご指摘ください。 == 2023/8/21追記 == この記事は、ハッシュの保存の仕方一つとっても、沢山の対策方法が必要であるということをお伝えするために記載しています。そして、これから紹介する手法を取れば安全とお勧めしている訳ではないので、その点をご留意いただければと思います。攻撃手法に応じての対応策の変遷を知っていただくことで、セキュリティ対策は一度行えば安全というものではないことを知って頂くキッカケになれば幸いです。 == 追記終わり == パスワードのハッシュ化 まず最初にパスワードの保存方法です。何も加工しないで平文で保存するのは駄目というのは、だいぶ認
「デザイナーこそ、スプレッドシートに強くなれ」の意味するところ｜鷹野 雅弘
「デザイナーこそ、スプレッドシートに強くなれ」とずっと言い続けています。先日、とあるセミナー（#D2デザインダンジョン）で発したところ、「具体的にはどういうことでしょうか？」と質問いただきました。 よい機会なのでまとめてみました。重要なのは、スプレッドシートは数字はもちろんだけど、数字以外でも使いますよね、ということです。 なお、この記事では、次をまとめて「スプレッドシート」と記します。 Excel（デスクトップ版、オンライン版） Google スプレッドシート スプシ 表計算 Apple Numbers 「スプシ」という言葉には、なかなか慣れません… スプレッドシートは「思考の道具」である私自身、「マインドマップ」はよく使います。 マインドマップは思考を“発散”するには向いていますが、“収束”には不向き。たとえば、異なる“枝”のアイテムの関係性を表現できません。 詳しくは、こちらの記事に
Bashのシェル展開 | フューチャー技術ブログ
Photo by Fotis Fotopoulos on Unsplash はじめにこんにちは、TIGの岸本卓也です。 シェルスクリプト連載 の7日目です。 シェルスクリプトで前提とするシェルは、大抵のコンピューターにインストールされていることが多いbashを選択することが多いと思います。当記事ではそのbashを対象に、意外と色々あるシェルの展開処理の概要をまとめました。シェルスクリプトに限らず普段のコマンド操作でも展開処理が便利なシーンは多々あると思いますので、皆さんの時間の節約に役立てば幸いです。 以降では、処理される順番に展開処理を紹介します。また、説明している動作と具体例はGNU bash version 5.1.4で確認しました。 なお、Windowsでは初期状態ではbashがありませんが、インストールする方法はいくつかあります。gitを使うためにインストールするGit for
Big Changes Ahead for Deno
TLDR: We’ve been working on some updates that will allow Deno to easily import npm packages and make the vast majority of npm packages work in Deno within the next three months. Our goal is to make Deno the fastest JavaScript runtime. For starters, the next release of Deno will include a new HTTP server. It is the fastest JavaScript web server ever built. Given the extensive use of Deno by develop
Roll your own JavaScript runtime
In this post we’ll walk through creating a custom JavaScript runtime. Let’s call it runjs. Think of it as building a (much) simplified version of deno itself. A goal of this post is to create a CLI that can execute local JavaScript files, read a file, write a file, remove a file and has simplified console API. Let’s get started. Update 2022-12-04: updated the code samples to the latest version of
The Missing Semester of Your CS Education (日本語版)
The Missing Semester of Your CS Education (日本語版) 大学の講義ではオペレーティングシステムから機械学習まで、 コンピュータサイエンスの様々な発展的トピックを学びます。 しかし、重要であるにも関わらず講義で教わることはめったになく、 したがって自分で学ばなければならないことがあります。 それは「コンピュータを操作するツールを習熟すること」です。 本講義では、コマンドライン操作をマスターすること、パワフルなテキストエディタを使いこなすこと、 バージョンコントロールの様々な機能に触れること、などなどを教えます！ 学生は大学生活を過ごすうえでそういったツールを使うことに何百時間も費やします （その後のキャリア全体を考えれば何千時間も使うと言えるでしょう）。 よって、ツールを使う経験を可能な限り流暢で淀みない状態にしておくということは、 非常に有意義であ
ゲーム感覚でプログラミング学べるサービス集 - Qiita
はじめに 今回はゲーム感覚でプログラミングを学べるサービスを紹介します。 ゲームを通して学んだ知識をアウトプットできるサービス集を厳選したので、ぜひ学んだ知識を「使える技術」として自分のものにしていただければと思います。 この記事の主な対象者 プログラミング初心者~中級者 基礎文法は学んだけどアウトプットができていない人 フロントエンジニアを目指してる人 楽しみながらプログラミングを学びたい人 ぷよぷよプログラミング まずはじめに紹介するのは、SNSでも話題になった、ぷよぷよを開発しながらプログラミングを学ぶことができる「ぷよぷよプログラミング」です。 ぷよぷよプログラミングでは、人気ゲームぷよぷよを開発しながらHTMLやCSSやJavaScriptといったプログラミングをしていく中で基礎となる技術を学ぶことができます。 実際にアプリ開発をしながら学べるので、インプットとアウトプットが同時
C/C++のビルドの仕組みとライブラリ - かみのメモ
研究でVisual C++を書くうちに、そういえばリンカとかライブラリの仕組みを理解していなかったな、と思ったので色々調べてみました。 書きやすいからという理由で説明口調の文章にしていますが、多分に間違いを含む可能性があります！(ｵｲ) 気付いた部分があればコメントしていただけるとありがたいです。 ※ 2018/12/01 : #pragma once周りを追記しました ※ 2018/12/23 : ライブラリを使うためのビルド設定の話を追記しました スポンサーリンク もくじ 1. ビルドとは 2. C/C++のビルドの仕組み 2.1. プリプロセッサ 2.2. コンパイラ 2.3. アセンブラ 2.4. リンカ 3. ライブラリの種類と仕組み 3.1. ソースコードを配布 3.2. 静的リンク（static linking） 3.3. 動的リンク（dynamic linking） 3.4
Rust By Practice - Rust By Practice
Practice Rust with challenging examples, exercises and projects This book was designed for easily diving into and getting skilled with Rust, and it's very easy to use: All you need to do is to make each exercise compile without ERRORS and Panics ! Reading online English 简体中文 Running locally We use mdbook building our exercises. You can run locally with below steps: $ git clone [email protected]:su
Poetry の virtualenv を VSCode に認識させる
この記事で分かること Visual Studio Code (以下、VSCode) の Python 拡張が Python 仮想環境 (以下、virtualenv) を認識する条件 Poetry で virtualenv をプロジェクトのディレクトリ直下に作る方法 この記事を書いた動機と結論 Python パッケージの依存関係を Poetry で管理しているプロジェクトで、エディタとして VSCode を使っている。しかし、Poetry でインストールしたパッケージを、コード中で import するとエラーになるので、その原因と対策を調べた記録である。 先に結論から書く。以下のコマンドを実行することで、virtualenv がプロジェクトのディレクトリ直下に作られるようになり、VSCode でも認識されるようになる。 $ poetry --version Poetry version 1.
交差オブザーバー API - Web API | MDN
交差オブザーバー API (Intersection Observer API) は、ターゲットとなる要素が、祖先要素または文書の最上位のビューポートと交差する変化を非同期的に監視する方法を提供します。 従来、ある要素の可視状態、あるいは 2 つの要素の相対的な可視状態を検出することは困難であり、その解決策は信頼性が低く、ブラウザーやアクセスするサイトの動作が重くなる傾向がありました。ウェブが成熟していくにつれて、このような情報の必要性は高まっていきます。交差情報 (Intersection information) についての情報は次の理由から必要とされています。 ページがスクロールした際の画像やその他のコンテンツの遅延読み込み。 「無限スクロール」をするウェブサイトを実装し、スクロールに従って次々とコンテンツを読み込んで、ユーザーがページの切り替えをせずに済むようにすること。 広告費を
Jinja2のWhitespace Controlを理解して、きれいなファイルを出力する - grep Tips *
Jinja2のWhitespace Control Python 3.6.5 Jinja 2.10 Jinja2でforやifを使ってテンプレートを書くと、出力される文字列に空行が多く入ってしまう。これはforやifのみが書いてある行にある改行も出力されてしまうから。 Jinja2にはWhitespace Controlという機能があり、この出力を制御できる。 Whitespace Controlでは+と-記号を使うのだが、空行削除の目的では-をforやifにつける。e.g. {%- if ... %} -をつける場所は4か所あり、どこにつけるかによって挙動が変わる。具体的に出力を見るほうが理解しやすいため、4か所それぞれに-をつけて出力を見ていく。 for文でのWhitespace Control挙動確認 用意したのは以下の通り何も設定しない場合と4パターン。 #!/usr/bin/en
CSS Inline Layout Module Level (Edior's Draft)
CSS Inline Layout Module Level 3 W3C Working Draft, 1 April 2023 More details about this document This version: https://www.w3.org/TR/2023/WD-css-inline-3-20230401/ Latest published version: https://www.w3.org/TR/css-inline-3/ Editor's Draft: https://drafts.csswg.org/css-inline-3/ Previous Versions: https://www.w3.org/TR/2020/WD-css-inline-3-20200827/ https://www.w3.org/TR/2020/WD-css-inline-3-202
How to Tame Line Height in CSS | CSS-Tricks
In CSS, line-height is probably one of the most misunderstood, yet commonly-used attributes. As designers and developers, when we think about line-height, we might think about the concept of leading from print design — a term, interestingly enough, that comes from literally putting pieces of lead between lines of type. Leading and line-height, however similar, have some important differences. To u
WordPress『 WP REST API 』#2 オリジナルのエンドポイントを作成する｜レンタルサーバーナレッジ
前回の記事では、WordPress に標準搭載されている『 WP REST API 』の使用方法と、『 WP REST API 』の post エンドポイントを使ってブログの内容を取得する方法についてご紹介しました。 ▼WordPress『 WP REST API 』#1 ブログを他のサイトに埋め込む方法 今回は『 WP REST API 』に用意されているカスタムエンドポイント機能を使って、より使いやすいオリジナルのエンドポイントを追加して、思いどおりの情報を取得する方法をご紹介いたします。 エンドポイントの追加を行ってみることで、『 WP REST API 』が WordPress の内部でどのような動きをしているのかより深く理解することができます。 目次 『 WP REST API 』のカスタムエンドポイント機能について WordPress にエンドポイントを追加する 追加したエンド
WordPressのREST APIにカスタムフィールドがないなら自分で追加すればいいじゃない | オレDEV.com
WordPressのREST APIにカスタムフィールドの値を追加します。 僕の目的はNuxt.jsからAPIを参照するためですが、Nuxt.jsに限らずREST APIを利用する場合には役に立つんじゃないかと思います。 仕組みから説明しているので、コピペでちょこちょこっといじってやりたい人は最後の段落だけ読んでください。 カスタムフィールドなんか必要？ 人によっては必要ないと思います。 僕は必要でした。 もしかすると僕のチェック項目を見て「え、オレにも必要じゃん…」って思う人もいると思います。 All In One SEO Packのタイトルやディスクリプション WordPressを使ってる人って、かなり高い確率で「All In One SEO Pack」プラグインを使ってる印象で、あーいや、なんか競合になるプラグインもあるんでしたっけ。 まぁいいや。 どっちみち多分同じです。 SEO意
仕事早っ！！ オープンソースになったMORISAWA BIZ UDゴシックのプログラミング用合成フォント「UDEV Gothic」がリリース
昨日当ブログで紹介した「MORISAWA BIZ UDゴシックとUD明朝がオープンソースになったぞ！！」のMORISAWA BIZ UDゴシックを使用したプログラミング用合成フォントが早くもリリースされたので、紹介します。 UDEV Gothic -GitHub 作者の方によると、昨日から衝動的に作成しはじめ、本日v0.0.2がリリースしたとのことです。v0.0.2では全角スペース可視化、異体字シーケンスに対応しており、今後は半角ゼロをスラッシュ付きにするなどが予定されています。 【追記: 2022/3/24】 リガチャに対応したv0.0.3がリリースされました。 ユニバーサルデザインなBIZ UDゴシックと、開発者向けフォント JetBrains Mono を合成したフォント『UDEV Gothic』 全角スペース可視化、異体字シーケンスに対応した v0.0.2 をリリースしました🎉h
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Using A Python Markdown Ast To Find All Paragraphs
WP REST API v2 Documentation