グーグル、検索結果から低品質サイトを削減へ
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
“Web Componentsだけ” で新サービスを実装して見えたこと - Qiita
Double O というサービスを作りました。 フロントエンドはピュアな Web Components を採用していて、バックエンドは Lambda と DynamoDB のみで構成しました。 (厳密には CloudFront とか API Gateway とかもあるけどそこは省いていいよね？) REST API 以外の Util 系の Lambda 関数はすべて AWS Cloud9 で管理することで環境構築も不要な Lambda ができて楽でした。 TL;DR サーバーレスについてはごく普通のことしかしていないので、詳しくは触れないでおきます。 ピュアな Web Components だけでサービスを成立させることができた。 HTMLElement クラスを継承するだけなのでメジャーライブラリは不要になった。 Web Components の Custom Elements は標準仕様
日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ 動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の
伊藤直也氏がプロダクトマネジャーの役割を学んだ良書5選と、適材を見極めるポイント - エンジニアtype | 転職type
2015.10.29 ITニュース Kaizen Platform, Inc.など複数の企業で技術顧問を務めている伊藤直也氏。同氏が自身のブログ『naoyaのはてなダイアリー』をほぼ1年ぶりに更新したのが、界隈で話題となっている。 伊藤直也氏（From GitHub_naoya/myprofile） そのエントリテーマは「プロダクトマネジャー」について。Twitterでつぶやいていた内容をまとめられたことをきっかけに、筆を取ったという。 >> プロダクトマネージャーについて – naoyaのはてなダイアリー ここ最近、伊藤氏の下には、顧問契約を結ぶ企業以外にも相次いで相談が寄せられていた。その大半が、「良いプロダクトを作るために、開発体制を整えたい」という内容だ。 こういった問い合わせに対して伊藤氏は、「良い開発体制を作れば、それだけで良いプロダクトができるわけではない」と話し続けてきたと
Web開発が捗るFirebase入門！JavaScriptで「Webユーザー認証」機能を超お手軽に作るチュートリアル大公開！ - paiza times
どうも、まさとらん（@0310lan）です。 今回は、Webサービスなどを開発する際に、ユーザーの管理や識別などで必要になる「ユーザー認証」機能を、できるだけシンプルに作ってみたいと思います。 利用するのは、さまざまなバックエンド機能を提供するGoogleの【 Firebase 】です！ 非常に多機能なサービスですが扱いはとてもシンプルで、簡単なコードを覚えてしまえば誰でも活用できるはずです！ 自分でサーバーを用意する必要もなく、基本的な機能は無料で使えるので今すぐ始められるのも特徴と言えるでしょう。 ■始め方！ 今回は、「メールアドレス」と「パスワード」でログインする一般的な「ユーザー認証」ページの作成に挑戦してみましょう！ そこで、まずはFirebaseにアクセスして新規にプロジェクトを作成します。 好きな「➀プロジェクト名」と、自分の「➁国名」を指定します。 すると、プロジェクト
Atom実践入門、それはエディタの使い方と同時にWeb技術の現在が学べるまったく新しいエディタの本。 - 日々、とんは語る。
2016年7月14日、私にとって『Emacs実践入門』以来4年ぶり2冊目となる書籍『Atom実践入門』が発売されることとなりました。 去年、WEB+DB PRESS Vol.86にてAtom特集を書いたので、もしやと思った勘の鋭い方もおられたかもしれませんが、実はそのときから本書の執筆を行っており、この度ようやく上梓することができたというわけです。 本書は私にとって2冊目の書籍であると同時に、2冊目のエディタの本でもあります。またしてもエディタの本を書いてしまったわけで、これについては色々と思うところがあるのですが、それについてはまた今度詳しく書きたいと思います。本日は、この本に込められた思いについて語っていきます。 はじめてのエディタを使う人にとってベストな解説書を目指して。 エディタの本は、基本的にプログラミングを書く人に向けた書籍です。Emacs実践入門のときは、Emacsという歴史
HTTPSにまつわる怪しい伝説を検証する - Google I/O 2016のセッションから - Qiita
今年はGoogle I/Oに初めて社員ではない立場で参加しました。全体の感想は Google I/O 2016まとめ（Web的視点） で公開していますが、今回はその中で、気に入ったセッションの1つである"Mythbusting HTTPS: Squashing security’s urban legends"について書いてみたいと思います。 セッションは大変良くまとまっていますので、YouTubeにあがっている動画を見れる人は動画を見て貰えれば良いのですが、時間が無いという人のために、その内容をまとめました。基本的には文字起こしに近いものです。 重要だとわかっているけど、なかなか導入に踏み切れない人も多いHTTPS。これについて、最新の状況が理解できるコンテンツとしてお役に立てるならば嬉しいです。 TL;DR HTTPSはPWAppなどWebにとって必須。 しかし、パフォーマンス悪化する
国内でよく使われてそうなwebサービスのアイコン３０個をIllustrator用ベクターとwebフォントで作ったので配布します。 | KYOPPI
需要があるかはわかりませんが、国内でよく使われてそうなwebサービスのアイコン３０個をIllustrator用ベクター(CS5以上)とwebフォントでつくったので配布します。ほんとwebデザインのウの字も出てない当ブログで脈絡なく唐突に素材配布です。 ダウンロードファイルには以下の３０個のサービスのアイコンが含まれてます。 amazon、ask.fm、dropbox、evernote、facebook、feedly、flickr、Google、goole+、gree、Gunosy、hulu、instagram、lastfm、LINE、mixi、NewsPicks、ニコニコ動画、pinterest、pocket、楽天、Skype、soundcloud、twitter、Vine、wikipedia、wordpress、Yahoo、YouTube、はてなブックマーク チョイスは完全に自分の気分で
Webデザイナーになったらまず最初にブックマークしておきたいWebサイトリスト｜ cocoblo [ココブロ]
お気に入りのWebサイトを紹介したいと思います。職場が変わった、パソコンが変わった時にいちいち探すのも少し面倒なのでブログに残しておきたいと思います。 とても勉強になるサイトばかりなのでチェックしてみてはいかがでしょうか？ タグリファレンス HTMLクイックリファレンス 目的別にHTMLやCSSのタグを探すことができる。ど忘れした時に調度良い感じがします。 TAG index HTMLやCSSのタグについてまとめられている。HTML5のタグも追加された。 HTMLやCSSを学び始めた頃から参考にさせてもらっているサイトです。タグの具体的な内容が書かれているので手軽に調べることができます。 デザインリンク Web Design Clip 業種やカラーでWebサイトを探すことができます。 Responsive Web Design JP レスポンシブデザインのサイトデザインを紹介してい
![Webデザイナーになったらまず最初にブックマークしておきたいWebサイトリスト｜ cocoblo [ココブロ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/01048eb6998fe7ef9afe223729d1cc1d814f7e10/height=288;version=1;width=512/http%3A%2F%2Fwww.cocoblo.jp%2Fblog%2Fwp-content%2Fuploads%2F2014%2F12%2Fresponsive-jp.jpg)
人気上昇中のJavaScriptライブラリを調べてみた【2015年版】
altJSの人気が混戦で面白い！ 2014年中に人気が急上昇してきており、「2015年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表。 ← 前回 連載 INDEX 次回 → こちらのページで【2016年版】も発表！ ■ 2015年が始まり、心機一転で「今年こそはWeb開発を頑張ろう」と思っている人も少なくないだろう。そんな方々に向けて本稿では、2014年中に人気が急上昇してきており、「2015年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表する（※昨年の2014年版はこちら）。 なお、本稿のランキング決定では、検索キーワードの流行を調査可能な「Googleトレンド」（「すべての国」「過去 12 か月間」「すべてのカテゴリ」「ウェブ検索」という条件で絞り込み）を使って、ライブラリの人気をジャンルごとに比較した（※ライブラリ名
Webサイトに必要なfaviconが21個になっていた - IT探検の追憶
久しぶりにWebサイトのfaviconを変えようと思い、調べてみると、必要なfaviconが大幅に増えていることがわかりました。 その数、何と21個！ そんなに増えていたとは。 一応、以下にリストアップしてみます。 faviconのリスト favicon.ico: IE用 favicon-16x16.png: タブ表示用 favicon-32x32.png: Mac版Safari用 favicon-96x96.png: Google TV用 favicon-160x160.png: Opera 12 までのスピード・ダイアル用 favicon-196x196.png: Android版Chrome用 mstile-70x70.png: Windows 8 用 mstile-144x144.png mstile-150x150.png mstile-310x310.png mstile-31
Webからリアルまでつなげる集客力を。イベント運営者が「人を動かす」5つのポイント | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。今回初めてLIGブログを執筆させていただくことになりましたDAS株式会社代表のしんすけです。よろしくお願いします。 僕は主に「人を動かすリアルゲーム」の企画開発や各種イベント制作、そして全国各地の施設の集客支援やマーケティング支援をさせていただいております。 さて、Web上の集客については、IT/Web系のみなさんはかなりの知見をお持ちだと思いますが、リアルでの集客はいかがでしょう。 ネットに親和性の低い層にもアプローチする必要は、ビジネスにおいてどうしてもあると思います。 そこで今回は、僕がこれまで手掛けてきたリアルゲームの実例を交えながら、人を動かす体験をつくるための5つの「感」についてお話しいたします。 リアルゲームの定義 リアルゲームにはさまざまなゲームが存在します。 サバイバルゲームや謎解きゲーム、最近ではカードやボードゲームからの派生で人狼ゲームやライヤーゲーム、ブ
なぜHTTPSはHTTPより速いのか
先週、httpvshttps.com というウェブサイトが公開されました。このウェブサイトでは、HTTP と HTTPS を用いてアクセスした場合のウェブページのダウンロード完了までにかかる時間の比較ができるのですが、多くの環境で HTTPS の方が HTTP よりも高速なことに驚きの声が上がっていました。 HTTP が TCP 上で平文を送受信するのに対し、HTTPS は TCP 上で TLS (SSL) という暗号化技術を用いて通信を行います。ならば、TLS のオーバーヘッドのぶん HTTPS のほうが遅いはずだ、という予測に反する結果になったのですから、驚くのも無理はありません。 実は、この結果にはからくりがありました。 Google Chrome、Mozilla Firefox、最近のSafari注1は、Google が開発した通信プロトコル「SPDY」に対応しており、HTTPS
複数のWebサーバでSSLセッションキャッシュを共有してSSL処理を高速化(Apache + mod_ssl + mod_socache_memcache) - 元RX-7乗りの適当な日々
HTTPS(SSL利用)サイトがSEO的に優遇されるトレンドで、世間的にもHTTPS接続でサイト運用するサービスが増えてきています。 これが、ハイトラフィックサイトになってくると、このフロントエンドでSSL処理させることが負荷的にもなかなか辛いのです。 で、Apache 2.3以降では、Shared Object Cache Providerとして、memcachedが選択できるようになっています。 この仕組みを利用して、Apacheとmemcachedを並べることで、各サーバでユーザのSSL Session Cacheを共有しながらHTTPSリクエストを負荷分散できる構成を作ってみました。 WebサーバでSSLオフロード 常時SSLを利用したWebサイトを運用するために、SSLアクセラレータといったアプライアンス製品だとか、ソフトウェアだとApacheやNginxのSSLモジュールを使う
今年のネーミングルール #CSS設計
CSS Architecture Advent Calendar 2014 1日目の記事です。 CSSの設計をしていく上で大事なネーミングルール。 今年僕が関わったプロジェクトでのネーミングルールをゆるく紹介したいと思います。 こうやって名前をつけてました。基本となる設計思想はBEMです。 BEMについては、 CodeGrid を御覧ください。 ネーミングルールを決めるとき、区切り文字をハイフンかアンダースコアか、それとも混在か悩みましたが、とりあえず以下の様なルールでやっていくことにしました。 /*css*/ [Prefix] - [Block] - [Element] -- [[Modifier-Key] - [Modifiler-Value]] { /* Rule Set */ } 一つ一つ解説していきます。 Prefixまずは接頭辞です。 接頭辞としてプロジェクト名や世代などを付与
「サーバーってなに？」～初心者でもよくわかる！VPSによるWebサーバー構築講座(1) | さくらのナレッジ
サーバーの扱いに慣れていない初心者の方を対象に、VPS(Virtual Private Server)を使ってWebサーバーを構築し、WordPressサイトを運用できるようになるまでの連載を始めます。 サーバーの構築方法については、中・上級者向けの情報は多く見つかりますが、 「初めてVPSに触れる方が、Webサイトを構築して運用できるようになるまでのノウハウ」 を体系的に解説しているサイトはあまり多くありません。 ネット上に存在している情報では断片的だったり、分からない専門用語が出てきたりして、途中であきらめてしまった方も多いのではないでしょうか？ 本連載では、初心者の方でも「これさえ読めばVPSを構築できる！」ように、初歩から丁寧に解説します。 「今までレンタルサーバーを使っていたけど、一歩進んでVPSに挑戦してみたい」という方のお役に立てれば幸いです。 本連載は以下の構成で5回に分け
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
人気Webデザインを独学できる至高のWebアプリ8選がヤバイ！ | シェアしたくなる最新のWebサービス・ITニュース情報をチェック！ APPGIGA!!（アプギガ）
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
