静的ウェブサイト作成ガイドは個人サイト再興に資するか - YAMDAS現更新履歴
www.staticguide.org Markdown Guide の著者として知られるテクニカルライターの Matt Cone が、HTML と CSS、そして何より Hugo の静的サイトジェネレータを使って静的なウェブサイトを作成するガイドを書いている。 要は、このサイトの記述に従えば、スクラッチからウェブサイトを構築するプロセスを経験でき、ウェブサイトがどんなもので、そこでどんなテクノロジーが動いているか理解できるというわけだ。 やはり、「静的ウェブサイト」というのがポイントだろう。著者自身、Introduction でその理由を説明している。 Static Site Guide が静的ウェブサイトだけを対象とするのは、静的なウェブサイトこそ大多数の人にとって最適な選択肢だと思うからだ。静的なウェブサイトで、ブログ、企業マーケティングのウェブサイト、個人用やプロ用のポートフォリオ
地形プロシージャル生成 - パーリンノイズアルゴリズム - Qiita
constexpr double getFade(const double t_) const noexcept { return t_ * t_ * t_ * (t_ * (t_ * 6 - 15) + 10); } constexpr double getLerp(const double t_, const double a_, const double b_) const noexcept { return a_ + t_ * (b_ - a_); } constexpr double makeGrad(const Pint hash_, const double u_, const double v_) const noexcept { return (((hash_ & 1) == 0) ? u_ : -u_) + (((hash_ & 2) == 0) ? v_ : -v_)
WordPressをやめ、静的サイトジェネレーターで高速化した話 - ICS MEDIA
ICS MEDIAは2019年4月にリニューアルしました。シンプルでモダンなデザインへと見栄えは変わり、フロントエンドの最新技術によって爆速なサイトへと生まれ変わっています。 技術的におもしろいポイントは、WordPressワード・プレスを廃止したことです。 この記事では、オウンドメディアとしてWordPressをやめた理由、代用技術の選定で苦労したことを紹介します。 リニューアル前後の違い リニューアルによってどのくらい改善したか、定量的な結果を紹介します。ウェブサイトの性能を示す指標としてLighthouse（Google ChromeのデベロッパーツールのAuditsタブ）というツールがあります。 Lighthouseの採点で、リニューアル前は80点ほどだったのが、ほぼ満点のスコアをたたき出せるようになりました。SEOやアクセシビリティの点数も満点です。 動画でもご覧ください。リニュ
ソースコードを分析し、コードの構造や階層・依存関係を可視化する便利な無料ツール -Code Crumbs
フローチャート ※依存関係・フローチャートはJavaScriptのみです。 対応言語は、下記の通り。 JavaScript TypeScript Python PHP Java C++ 望む言語が他にあればIssueにどうぞ、とのことです。 Code Crumbsのデモ デモでは、JavaScriptのコードでその動作を確認できます。 デモページ 依存関係はDependenciesをオンに、フローチャートはFlowChartタブをクリックします。 Code Crumbsの使い方 セットアップ codecrumbをインストールします（yarn global add codecrumbs）。 codecrumbs -d project-src-dir -e project-src-dir/index.jsを実行し、プロジェクトに合わせてパラメータを変更します。-dはソースコードを含むディレクト
Git(Hub)+CircleCI+Slack で実現する静的コンテンツ配信システム - BASE開発チームブログ
BASEでエンジニアリングマネージャーを担当している加賀谷です。普段は採用に携わったり、1on1での経験学習の促進などを通じて、個人と組織のアウトプットが大きくなるようにサポートする仕事をしています。また、サービス開発に関わる体験を良くしていくこともしています。その中で今回は、静的コンテンツのCI/CDでしていることを紹介したいと思います。 静的コンテンツのホスティング 静的コンテンツは、サーバサイドでリクエストに応じてレスポンスする内容を作成しないデータです。主に、サイト内で使う画像、CSS、JS、ランディングページなどのHTMLファイルになります。これらのファイルはよく、AWSのS3に置いてホスティングして前段にはCDNを配置し、Webブラウザの同時接続数を考慮してサービスとは別のホストに分散したりしますが、BASEでもそうしています。 静的コンテンツ用のGitリポジトリを用意 CSS
静的サイトをとにかく高速化する話
自分のポートフォリオサイトをサンプルに、どのくらいの容量削減ができるのかを確認してみました。 jsおよびCSSは、サイトの表示に必要な要素を1ファイルにバンドルした状態です。 画像ファイルはjpegの圧縮率などによって最終的なサイズが大幅に変化するので、jsとCSSのサイズ変化のみを取り上げました。 Bootstrap + Font Awesomeのような重量級フレームワークを使用しても、十分に実用的な容量まで削減できました。これならスマホ+3G回線での表示も心配ありません。 手法 適用しやすさを順に手法を並べると、以下のようになります。 遅延する 圧縮する キャッシュする まとめて削る 遅延する サイト上にあるほとんどのリソースは、実際には後から読み込んでも問題なく動作します。 まず最小限の構成でサイトを表示させ、重いファイルは後から読み込みます。 javascriptの遅延読み込み h
foodcriticで、Chefの静的コード解析のチェック対象を絞り込む - Qiita
はじめに foodcriticは、Chef Cookbookのスタイルをチェックしてくれる静的コード解析ツールです。 今回、foodcriticにて、コードチェック対象外とする方法を整理します。 コードチェック対象は、foodcritic -lコマンドにて確認できます。また、下記ディレクトリ等にて、コードチェック対象が設定されています。foodcritic関連のディレクトリを確認したい場合には、gem environmentコマンドを実行して下さい。 C:\xxx\gem\ruby\2.4.0\gems\foodcritic-11.4.0\lib\foodcritic\rules foodcriticのホームページから、チェック項目の内容を確認できます。 1.コードチェック対象外を指定 - 1-1.Chefレシピにコードチェック対象外を指定 チェック対象外とする項目を、Chefレシピに直接
[実験] 静的コード解析ツールはどの程度バグや脆弱性を検出できるのか？ ～ SonarQube編 - Qiita
静的コード解析ツールはバグや脆弱性をどの程度検出できるのでしょうか？ 前回、FindBugsでバグだらけのWebアプリケーションを解析してみましたが、今回はSonarQubeで解析してみました。 検証内容 バグだらけのWebアプリケーション(EasyBuggy 1.3.3)が、現在実装済みのバグや脆弱性は以下の80種類です。 障害 デッドロック (Java) デッドロック (SQL) 完了しないプロセスの待機 無限ループ メモリリーク (Javaヒープ領域) メモリリーク (Permanent領域) メモリリーク (Cヒープ領域) ネットワークソケットリーク データベースコネクションリーク ファイルディスクリプタリーク スレッドリーク 文字化け 整数オーバーフロー 丸め誤差 打ち切り誤差 情報落ち 脆弱性 XSS (クロスサイトスクリプティング) SQLインジェクション LDAPインジェク
![[実験] 静的コード解析ツールはどの程度バグや脆弱性を検出できるのか？ ～ SonarQube編 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/469eaa505c249c496c8ce0b3ea0ffcc62dbbee21/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCJUU1JUFFJTlGJUU5JUE4JTkzJTVEJTIwJUU5JTlEJTk5JUU3JTlBJTg0JUUzJTgyJUIzJUUzJTgzJUJDJUUzJTgzJTg5JUU4JUE3JUEzJUU2JTlFJTkwJUUzJTgzJTg0JUUzJTgzJUJDJUUzJTgzJUFCJUUzJTgxJUFGJUUzJTgxJUE5JUUzJTgxJUFFJUU3JUE4JThCJUU1JUJBJUE2JUUzJTgzJTkwJUUzJTgyJUIwJUUzJTgyJTg0JUU4JTg0JTg2JUU1JUJDJUIxJUU2JTgwJUE3JUUzJTgyJTkyJUU2JUE0JTlDJUU1JTg3JUJBJUUzJTgxJUE3JUUzJTgxJThEJUUzJTgyJThCJUUzJTgxJUFFJUUzJTgxJThCJUVGJUJDJTlGJTIwJUVGJUJEJTlFJTIwU29uYXJRdWJlJUU3JUI3JUE4JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1hNTA2MDlhYzgyZmYzNGYxYjZjOGQwYzZhN2MzZjM0Yw%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwdGFtdXJhX18yNDYmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTRlNDMyMzU4N2Y4ZDY2MGNjODcyZjBmN2IxOTk3ZDVj%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dceef1f00d873272c8507283eaa58a856)
C#静的解析によるコーディング規約チェッカーを作った話
はじめに はじめまして。 「ボーイフレンド（仮）きらめき☆ノート」（以降、ボイきら）でUnityエンジニアをしております、田村です。 ボイきらでは、コードがコーディング規約に準拠しているかを自動でチェックするツールを自作し、導入しております。 今回は、チェックツールを作った経緯から、具体的なチェックツールの実装方法まで紹介したいと思います。 ボイきらでは、ゲーム開発エンジンとしてUnity、開発言語としてC#が採用されておりますので、今回の話の対象となる言語はC#となります。 コーディング規約チェッカーを作った経緯 コーディング規約とは コーディング規約とは、プログラムの際の決め事です。 実際ボイきらでは、 命名規則は正しいか 全てのクラス、フィールド、メソッドの宣言にコメントが有るか フォーマットされているか（MonoDevelopの自動フォーマット機能を利用） といったコーディング規約
goパッケージで簡単に静的解析して世界を広げよう #golang - Qiita
はじめに Goの標準パッケージには、goパッケージというものがあり、Goのソースコードを静的解析するのに便利な機能が提供されています。 goパッケージを使うと、以下のようなツールが簡単に作れます。 ソースコードを自動生成するツール ソースコードに対してlintやフォーマットを行うツール リファクタリングツール ソースコードから特定の何かを検索するツール ミニ言語の処理系 また、goパッケージを学ぶとコンパイラや言語処理系の知識も学べるので、他の標準パッケージとはまた少し違った知識を得ることができ、プログラミングの知識の幅が広がります。 しかしながら、goパッケージに関する日本語の文献は少なく、学習しづらいのが辛いところです。 私もこれまでgoパッケージについて、Qiita上でいくつか記事を書いてきましたが、どの記事が何をするときに役に立つのか分かりづらくなっていました。 そこでこの記事では
静的解析ツール「RubyCritic」のUIが良くなっていたので紹介したいです！ - パラボラアンテナと星の日記
この記事は feedforce Advent Calendar 2016 - Adventar の2日目の記事です。 1日目は 源義経のシンプルな考え方が好き - Marketing book でした。良い話だ。(ちなみに大河ドラマが平清盛だった年は、我が家では後白河院の評価が高かったです。懐かしい。) RubyCriticのご紹介 rubyエンジニアなのでrubyのことを書きます。 RubyCriticはrubyコードを静的解析するツールです。rubygemで提供されています。 単純な使い方としては、$ gem install rubycritic するなりbundler使うなりしてインストールし、 $ rubycritic . を実行します。$ rubycritic ./app ./lib のように、指定のディレクトリだけを対象にして実行することもできます。 実行すると./tmp/ru
「プログラマでしょ？ホームページ作ってよ！」を1日で対応する - Qiita
プログラマあるあるだけど友人からホームページ作ってよ!と言われることがある。 大体は適当な理由をつけて断るけど、1日程度で作る方法を模索してみた。 テンプレートをダウンロード 1から書いてる暇はないので適当なテンプレートを使います。今回はHTML5 UP!を使います。 HTML5 UP!のLicense 控え目でもCreditsをサイトに乗せれば無料で使用可能です。 以下はサンプル テーマはDirectiveを使用します。 フォームが付いててマークアップはそのままで使えそうですね。 開発環境 テーマがダウンロードできたら開発環境を準備します。 サーバーサイドは書きません。 Cloud9が便利そうだったので登録してワークスペースを作ります。Cloud9のワークスペースは一つなら非公開でも利用可能です。 以下のようにプロジェクトの情報を指定します。 ライブプレビュー準備 生成されたプロジェクト
高機能ホスティングサービスNetlifyについて調べて使ってみた - Qiita
はじめに Netlify Netlifyは静的なサイトを超高速で提供できるWebサービスです。先日210万ドルの出資を受け話題になりました。わずか3ステップでおしゃれなサイトが作成できるとのことです。本記事の前半ではNetlifyの特徴を軽くまとめ、後半は実際にNetlifyを利用してサイトを作成してみます。 Netlifyの特徴 詳細は公式ドキュメントにあります。今回はその中から一部を抜粋して紹介します。 ビルド、デプロイ、ホスティングの全て Netlifyはフロントエンドのビルド、デプロイ、ホスティングの全てを行います。単純な静的サイトのデプロイであれば下記の3行をコマンドラインに打ち込むだけでできます。 また、NetlifyはGitHubリポジトリとリンクし、GitHubリポジトリにプッシュがある度にgruntやgulpを介したビルドをしたうえでサイトをデプロイしてくれます。 これら
katatema.js - ✘╹◡╹✘
次のようなコードを書いて、 import React from "react" export default () => <div>Hello!</div> 次のようなコマンドを叩くと、 katatema build 次のようなファイルが生成されるという、katatema というツールをつくった。 <!DOCTYPE html> <html> <head> </head> <body> <div>Hello!</div> </body> 最先端の消耗 前に キーボードショートカットをカスタマイズするブラウザ拡張 - ✘╹◡╹✘ で、こういうことを書いた。 id:moznion へ、寒い日が続きますがお元気ですか。ともあれChrome拡張を1つこさえれば、大の大人が寄ってたかってモダンと言い合う類のものが一通り学べるだろうと思います。 最近のJavaScriptの周辺環境は大変で、何をやるに
golangで書いたアプリケーションのstatic link化 - okzkメモ
「goで書いたアプリケーションは実行ファイルひとつコピーするだけでいいのでインスコ超ラクチン」なんて思ってたんですが、 go1.4からnetパッケージを使っているアプリケーションは、フツーにビルドするとdynamic linkになるようになってました。 $ cd /path/to/your_app $ go build $ file your_app your_app: ELF 64-bit LSB executable, x86-64, version 1 (SYSV), dynamically linked (uses shared libs), not stripped そんなわけで別環境にバイナリコピーしても動かないケースが発生して超絶アタマを悩ませることになるのですが、 そんなときは以下のようにbuildすればstatic linkになってくれるようです。 $ go build
C/C++の静的解析ツール・事例まとめ - 簡潔なQ
C/C++の静的解析は、どう考えても大変なんだけどどう考えても需要が高いので、やはり色々なソフトウェアや事例があるようだ。まとまった情報が欲しいけど見つからなかったので自分の調べた範囲でまとめることにした。 他にも耳寄りな情報があったら教えてほしい。 静的解析を行うことができるソフトウェア 調べてみると結構たくさんある。それぞれの特徴とかあまりよくわからない。 (個人的には、とりわけ網羅的な形式的検証ができるツールの性能に興味があるので、それを中心に集めていたが、やはり網羅的とは限らないで探すともっとたくさん見つかるようだ。もちろん網羅性にはトレードオフがある) Frama-C …… C言語に形式手法を適用するための汎用のフレームワークで、静的検証のためのプラグインも多数(WPとかValueとか)存在する。網羅的な検証から発見的な手法、動的な手法まで様々ある。研究で使うのに便利そう Ast
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Rubyが 静的型付けであることの 証拠の発表
The Best React-Based Framework | Gatsby
GitHub - gatsbyjs/gatsby: The best React-based framework with performance, scalability and security built in.
GitHub - r7kamura/katatema: A handy static site generator using React.js
