GitHubで講義ノートを書く
はじめに 大学の講義ノートをいくつかGitHubで公開しています。 講義ノートをMarkdownで書いてGitHubで公開、というのをしばらく続けて、いろいろノウハウが溜まったので共有してみようと思います。 大学の講義ノートをどうするか問題 昔から大学の講義ノートを公開する人は結構多いです。最初期は、LaTeXで書いてPDFで公開することが多かったように思います。これはこれで良いのですが、基本的にはダウンロードして印刷して読む前提であり、ウェブで気軽に読める形ではありませんでした。その後、LaTeX2HTMLを使って、LaTeXファイルをHTMLに変換して公開するケースが増えました。これによりウェブで講義ノートが気軽に閲覧できるようになったのですが、いかにも「LaTeX2HTMLを使って変換しました」という外観になるのと、(少なくともデフォルトでは)レスポンシブではなく、スマホ非対応になる
ネットワークをちゃんと学びたいなら
最低限のNetwork知識 https://zenn.dev/hee/articles/ce9002ae525622 という記事がブックマーク400を超えていて、どうしてこのレベルの記事に400もブックマークが集まるのかと問いたい。 覚えたことをまとめてアウトプットするのは素晴らしいことだと思うしそれは否定しないんだけど、勉強したての見習いが書いた薄い内容とベテランがまとめた記事だったら、学ぶのに適しているのはどちらかという話である。 そんなわけでちゃんと勉強するならITMedia系でプロに金払って書いて貰っている記事を勧めたい。 ちょろっと探してみて初心者向けに纏まってる内容だったので、以下の連載が良いと思う。 https://techtarget.itmedia.co.jp/tt/news/1503/13/news04.html それでもっと知りたいと思ったらMaster of IP
CSS）z-indexのベストプラクティスを考える
CSSのz-indexプロパティについてツイートしたところ、色んな人から参考意見をいただきました。 要素の重ね順の制御をその場しのぎで乗り切っているWebサイト、実はけっこう多いような気がします。今回はz-indexのベストプラクティスを自分なりに探ってみたいと思います。 z-indexに詳しいゼットインデクサーのみなさま、意見やアドバイスがあれば是非コメントを残していってください。 z-indexについて考えるときの前提 まず、ざっくりと考え方をまとめておきます。ウェブページの要素の重ね順を理解するには「スタッキングコンテキスト（重ね合わせコンテキスト）」を知っておく必要があります。 詳しくはz-indexとスタッキングコンテキストの関係 - ics.mediaがとても分かりやすいのですが、ここではざっくりとした説明だけ載せておきます。 z-indexは数字が大きい方が上にいくとは限らな
ゼロからはじめるJavaScript(6) v10が公開 - ElectronでJS製デスクトップアプリを作ろう
JavaScriptなどWebの技術を利用して、デスクトップアプリを開発できるElectronをご存じでしょうか。Electronを使うと手軽にWindowsやmacOS、Linuxで動くデスクトップアプリを作ることができます。つい先日、9月1日にElectronのバージョン10.1.1が公開されました。本稿では最新バージョン10を使って簡単にアプリを作ってみましょう。 Electronとは？代表アプリは？ 『Electron』とは、HTML/CSS/JavaScriptといったWebの技術を利用して、デスクトップアプリを作ることができるフレームワークです。Windows/macOS/Linux上で動くデスクトップアプリを開発できます。 ElectronのWebサイト Electronを使って作られた代表的なアプリには、GitHubが開発しているテキストエディタの「Atom」や、マイクロソ
Webpackを一歩一歩確実に理解してReact + TypeScript環境を作る - おじんブログ
動機 毎回 npx create-react-app で React アプリを生成していて Webpack の勉強から逃げていたが、いい加減向き合いたいと思ったため。 昔 Webpack に入門しようとしたら難しいという先入観を抱いたので、できるだけシンプルに、一歩一歩づつ入門する。 最終的に、React + TypeScript の環境を作れるようにする。 リポジトリ 各ステップごとにコミットしているので逐次さかのぼってください。 github.com 前提 最低限の yarn または npm コマンドの使い方がわかること。 npx create-react-app で React プロジェクトを作成した事があること。 ※VSCode 使用を前提としています。 Config なしで実行する 最低限の構成で Webpack が何をするのか理解する。 準備 # run at project
俺の webpack.config.js-20200503 - mizchi's blog
基本思想 とにかく薄く。必要なものだけ。基本は ts-loader を transpileOnly: true で使うだけ。最悪これだけでいい。型チェックはIDEか yarn tsc -p . --noEmit でやる。 CRA や parcel は使わない。暗黙な振る舞いが多すぎるので。一切勉強したくない人はいれていいと思うが、その場合 eject しない、dist ディレクトリをそのまま使うこと前提。 style-loader/css-loader は外部CSSを読むときに設定する worker-plugin はなくてもいいけど、 worker もビルドしたいことが多いので、入れていることが多い html-webpack-plugin と webpack-dev-server 組み合わせると、他と組み合わせずに完結して動く。このHTMLを本番で使わずとも、デバッグで使ってることが多いの
レスポンシブデザインとは？基本中の基本をわかりやすく解説 | ITキャピタル
スマートフォン・タブレットの普及により、WEB業界でいまや当然となった「レスポンシブデザイン」 今回は「レスポンシブデザイン」について、フロントエンジニアの経験などを踏まえ、詳しく説明していきます。 レスポンシブデザインの概要 レスポンシブデザインについて、まず、見え方という点でお話ししていきましょう。 WEBサイトがあり、その中のあるページをパソコンで見ているとします。 スマートフォンやタブレットなど、別のデバイス（端末）で見てもキレイに表示されていれば、そのページはレスポンシブデザインです。 なお、この場合の「キレイに表示されている」は、画面サイズに応じてレイアウトが見やすい形・大きさに変化しているということです。 上記が、見え方におけるレスポンシブデザインです。 次に、コーディング（制作側）という点でお話しします。 レスポンシブデザインが登場するまでは、パソコン / スマートフォン
Nuxt.js(SPA)とFirebaseで強制リビジョン（バージョン）アップするならPWAモジュールを使おう - Qiita
これはなに？ SPAのキャッシュコントロールは難しい問題だけど、ちゃんと仕組みを理解してただしい戦略を使えばそんなに難しくないよという話。 Disclaimer この記事は2019年10月くらいにおける筆者の経験と見解に基づくものです。だいたい間違ってないとは思いますが内容の正確性は保証しませんし、2ヶ月くらいするとFirebaseないしNuxt.jsの進歩によりココに書かれていることが嘘になる可能性はあります。また、特定の記事や個人を中傷する意図はありません。筆者の所属する組織やその類とは関係がありません。 なんで難しい(と思われている)の？ そもそもの前提としてちゃんとやらないとアプリケーションのリリースがままならないというプレッシャーがあります。 そのうえで... (1) SPAの構成ファイルをキャッシュしようとする輩がたくさんいる Hostingサービス（ブラウザキャッシュ） CD
[CSS]ナイスアイデア！二つの繋がる要素を一つのドロップシャドウで処理するテクニック
div, p, aなどの要素を二つ繋げたものを一つのドロップシャドウで処理するスタイルシートのテクニックを紹介します。 上がborder:1px;の状態、下がbox-shadowで一つにした状態です。 Drop shadow for 2 elements preserving the intersection in CSS 凸型の要素はタブや上からコンテンツをひっぱりだす時によく使われ、デモではひっぱりだすトグル用に「Show / Hide」と書いてあります。 ※このデモではトグルとしての機能は実装されていません。 デモページ 実装は非常にシンプルです。 HTML 二つの要素はdivでもpでもaでもブロックとなる要素なら何でも構いません。ポイントは二つの要素を内包するdiv要素を設けることです。 <div class="block"> <div class="innerblock"> <p
今さら人に聞けない！WordPressで使われているmod_rewriteの説明書｜クロノドライブ
WordPressのmod_rewriteコードを参考にmod_rewriteについてまとめてみました。 mod_rewriteとは？ mod_rewriteとは、何かご存知でしょうか？ これは、Apacheというhttpサーバで利用されいてるモジュールと言われるもので、URLの書き換え・リダイレクト処理を行なってくれるものです。 主に「.htaccess」というファイルに任意の処理を記述して使用します。 mod_rewriteですが、使ってはいるけど内容はよくわからない方も多いのでは無いでしょうか？ 実際にWordPressのパーマリンク設定で利用しているmod_rewrite のコードを参考に説明を行なっていきます。 まずは、利用しているコードを確認してみましょう。 WordPressのパーマリンク設定で利用しているmod_rewrite
新人コーダーに知っておいて欲しいリダイレクトの基本｜クロノドライブ
サイトを運営していると、サイト内のページの移動や削除、またはサイト自体の移転をすることがあります。その場合、リダイレクトという処理を用いて新たなページに転送を行いますが、正しい知識と手順を以って対応しなければ、検索順位の下降、ページランクやドメインエイジの喪失といったSEO的なペナルティを招いてしまいます。 そこで、そのようなペナルティを受けないために、ページ移動・サイト移転時の正しいリダイレクトの設定方法と、代表的なリダイレクトの種類やその実装方法をご紹介します。 リダイレクトの種類 リダイレクトには、HTMLやJavaScriptといったクライアントサイドプログラム、PHPやPerlといったサーバサイドプログラム、あるいは.htaccessの設定変更を行う等、様々な対応方法があります。そのうちのいくつかを、実際のサンプルソースとともに解説します。 metaタグによるリダイレクト hea
Google Hosted Library – Webを速くするためにGoogleがやっていること Make the Web Faster 03 –
Google Hosted Library – Webを速くするためにGoogleがやっていること Make the Web Faster 03 – Jxck Googleは、よく使われるJavaScriptのライブラリなどをGoogleのインフラを使って配布しています。 これを Google Hosted Library と呼びます。 この、Hosted Libraryの導入を単純に「自分で配布しない分が楽になるだけ」、くらいな感覚で使っている方も多いと思います。しかし、実はこれはみんなが使えば使うほど、得をする仕組みになっていることを見落としてはいないでしょうか？ 今回はそんな、Google Hosted Libraryについて、その仕組となるCDNやキャッシュの技術などについて解説します。 よくある Web ページ 例えば自分が配信するindex.html内でjquery.2.0.3
nginxでステータスコード404,500,503時に特定の静的なファイルを表示する - taiyoh's memorandum
というメモ。 server { listen 80; server_name example.com; root /path/to/docroot; access_log logs/example.access.log main; location ~ ^/(js/|img/|css/|swf/) { index index.html index.htm; } error_page 404 /404.html; error_page 500 /500.html; error_page 503 /503.html; location ~ /(404|503|500).html { } location / { proxy_intercept_errors on; proxy_set_header Host $host; proxy_pass http://127.0.0.1:5000; }
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PPL 2022 招待講演： 静的型つき函数型組版処理システムSATySFiの紹介