タグ

ブックマーク / coliss.com (8)

  • 最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説

    最近の実装に合わせた、Webページ用のHTMLテンプレートを紹介します。 レスポンシブ用のHTML、ソーシャルメディア用のHTMLをはじめ、高速表示に欠かせないrel="preload"なども含まれています。IEなどの古いブラウザはプログレッシブエンハンスメントで対応しています。 HTMLテンプレートはすべての要素の役割を各行ごとに解説しているので、自分に不必要なものを削除したり加えたりすることもできます。 My current HTML boilerplate by Manuel Matuzović 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLのテンプレート(最終形) HTMLのテンプレートを1行ずつ解説 ページのタイトルと説明文、外部ファイル ソーシャルメディア用のHTML アイコンとアドレスバー もう

    最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説
    su_zu_ki_1010
    su_zu_ki_1010 2021/04/27
    この手の知識は定期的に更新していかないと、一昔前の記述が残ったhtmlファイルを書いてしまう…
  • Web制作者必見! VS Codeのおすすめ機能拡張のまとめ、HTMLやCSSやJavaScriptのコードを書く時に便利

    Visual Studio Code(以下、VS Code)が素晴らしいエディタである理由の一つは、デベロッパーの生産性を向上させるVS Codeの機能拡張の巨大なライブラリがあることです。 その中から、HTMLCSSJavaScriptのコードを書く時に便利なVS Codeの機能拡張を紹介します。 My 12 Favorite VSCode Extensions by Katherine Peterson 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 VS Codeとは VS Codeの機能拡張 VS Codeのおすすめ機能拡張 VS Codeとは VS Code(Visual Studio Code)は、Microsoftが提供する統合ツールを備えた強力で軽量なコードエディタです。MITライセンスで、商用でも完全に無料

    Web制作者必見! VS Codeのおすすめ機能拡張のまとめ、HTMLやCSSやJavaScriptのコードを書く時に便利
    su_zu_ki_1010
    su_zu_ki_1010 2021/03/04
    真に求めているのは、頭の中で思い描いたデザインをちょっと入力するだけですべてをコード化してくれるプラグイン。
  • 2020年、オンラインサービスやWebアプリの開発を独学で勉強したい人に役立つ練習プロジェクトのまとめ

    Webアプリやスマホアプリ、オンラインショップ、オンラインサービスなど、Web開発における一通りの需要に応えられるような知識・スキルを練習するのに役立つプロジェクトを紹介します。 8つのプロジェクトにはそれぞれ異なる課題が設定されており、開発者が行う実際のタスクが反映されています。 バックエンドが中心ですが、フロントエンドCSSのテクニックなども磨けます。 8 Projects with modern designs to become a Full-stack Master 2020 by Thu Nghiem 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Image Uploader My Unsplash CatWiki Authentication App Shoppingify Chat Group Tw

    2020年、オンラインサービスやWebアプリの開発を独学で勉強したい人に役立つ練習プロジェクトのまとめ
    su_zu_ki_1010
    su_zu_ki_1010 2020/09/18
    お勧め度を表すマークが★だったりカートだったり猫だったりと細かい。
  • Gitでよく使用するコマンドをGIFアニメで解説

    Gitでよく使用するコマンドが何を行っているかをGIFアニメで解説した記事を紹介します。 Gitのマージ、リベース、リセット、チェリーピック、フェッチ、プル、リフログなど、コマンドを実行した時にブランチはどのように相互作用し、履歴にどのような影響を与えるのか視覚的に学べます。 🌳🚀 CS Visualized: Useful Git Commands by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Gitのマージ(fast-forward, no-fast-forward) Gitのリベース(rebase) Gitのリセット(reset, revert) Gitのチェリーピック(cherry-pick) Gitのフェッチ(fetch) Gitのプル(pull) Gitのリフログ(re

    Gitでよく使用するコマンドをGIFアニメで解説
    su_zu_ki_1010
    su_zu_ki_1010 2020/04/22
    実際に手を動かしながら見たほうがよさそう。いつかやる。
  • デバッグ作業が快適に!VS Codeにブラウザのプレビュー機能を加える機能拡張 -Browser Preview for VS Code

    エディタで作業しながらデバッグをしたい人にぴったりな、VS Code内にChromeをプレビューとして表示させることができる機能拡張を紹介します。 ブラウザで単に表示するだけでなく、デベロッパーツールと連携させることも可能なので、デバッグがかなり捗ると思います。 Browser Preview for VS Code -GitHub Browser Preview for VS Codeの特徴 Browser Preview for VS Codeのインストール Browser Preview for VS Codeの使い方 Browser Preview for VS Codeの特徴 Browser Previewは、VS Code内に実際のブラウザをプレビューとして表示させることができます。 VS Code内でブラウザのプレビューが可能(Chrome Headlessにより)。 複数の

    デバッグ作業が快適に!VS Codeにブラウザのプレビュー機能を加える機能拡張 -Browser Preview for VS Code
    su_zu_ki_1010
    su_zu_ki_1010 2019/01/28
    Chromeだけって時点で使わないよね。firefoxとかedgeにも対応してから言ってほしい。
  • Vue.jsとReact.jsを習得するために、どのように学んでいけばよいのか -VueとReactのデベロッパ用ロードマップ

    Vue.jsとReact.jsを習得するために、どのように学んでいけばよいのか、次に何を学べばよいのか、その指針となるロードマップを紹介します。 【追記】 Angularのロードマップを追加しました。 基礎知識(HTML, CSS, JavaScript)、制作者として必要なスキル(Git, HTTPSプロトコル, Terminalなど)をはじめ、Vue.jsとReact.jsで何を学ばなければならないのかが、まとめられています。 拡大画像: Vueのロードマップ

    Vue.jsとReact.jsを習得するために、どのように学んでいけばよいのか -VueとReactのデベロッパ用ロードマップ
    su_zu_ki_1010
    su_zu_ki_1010 2018/08/06
    我々のようなこのタイトルに反応する凡人が求めているのはこんなロードマップではなくて、ロードマップに沿った学習ができる書籍や学習サイトなんだよ。
  • [JS]便利なのが登場!実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts

    チャートやグラフを実装するのは面倒、と思われがちですが、そんな人にはこのスクリプトをお勧めします。 div要素一つと外部ファイルを一つ、あとはグラフのデータを設定するだけで、さまざまなチャートやグラフが簡単に実装できてしまう単体のJavaScriptライブラリを紹介します。 レスポンシブ対応で、アニメーションにも対応、カラー変更やグラデーションやパターンにも対応している優れものです。 ApexCharts ApexCharts -GitHub ApexChartsの特徴 ApexChartsのデモ ApexChartsの使い方 ApexChartsの特徴 ApexChartsはシンプルなAPIを使用して、インタラクティブなチャートやビジュアライゼーションを作成するためのモダンJavaScriptのチャート作成ライブラリです。 MITライセンスで、個人でも商用でも無料で利用できます。 レスポ

    [JS]便利なのが登場!実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts
    su_zu_ki_1010
    su_zu_ki_1010 2018/08/02
    使うことなさそうだけど後々なんだっけ?って探す時のためにはてぶにブックマークしておこう。
  • これからは今まで以上に、jQueryが必要なくなるかもしれない

    3, 4年前あたりから、jQuery無しでこう記述するとか、jQueryの一部の機能を代替する軽量スクリプトなどが出始めました。 2017年も半年が過ぎ、その状況はさらに変わり始めています。 (Now More Than Ever) You Might Not Need jQuery 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 現在のブラウザ事情 jQueryに替わる、JavaScriptの選択肢 マイクロライブラリの台頭 IE9への対応はポリフィルで NodeListの反復 jQueryは遅いのか? jQueryについて私が嫌いなもの $なしでは生きていけない? 現在のブラウザ事情 jQueryが2006年にリリースされてから、DOMとブラウザのAPIは飛躍的に向上しています。2013年に「You Might Not Ne

    これからは今まで以上に、jQueryが必要なくなるかもしれない
    su_zu_ki_1010
    su_zu_ki_1010 2017/07/14
    敵は古いIEを使っている現場に合わせたシステムを作らないといけない案件か。
  • 1