個人でつくるwebサービス銀座Rails#5 での登壇資料です。個人でwebサービスを作るときのtips集及びturbolinks&stimulusの紹介が主な内容です。 https://ginza-rails.connpass.com/event/112093/
ぼくのかんがえたさいきょうの配色Webサービスを公開した話 - Qiita
TL;DR まあぜんぜん最強ではないですが、自分好みの配色 Web サービスをつくってみました yum-yum COLOR 個人で公開まで作りきったのは初めてでしたので、色々とつまずきました そんなつまずきポイントや、 Web サービスを公開するために利用した技術などを紹介していきます ❗ なぜ配色サービス ❓ 色彩検定という資格をご存知でしょうか？ 僕はプログラマーなのに 色が好き で、この試験を受検しました。 その学習をしてる時にこんな風に思ったのです。 この色相環、これを使って配色選べたら便利じゃない？ あっ、このトーン、これを使って配色選べたら便利じゃない？？ と。 受検勉強の追い込みをしないといけないのに、そっちのけで作り始めてしまった...というわけです （一時はどうなるかと思いましたが、無事に検定は合格しましたよ 🎉 ） どんなサービスなの ❓ 使い方 色相環 と Hue
mkcert: valid HTTPS certificates for localhost
07 Jan 2019 mkcert: valid HTTPS certificates for localhost (or for any other name) The web is moving to HTTPS, preventing network attackers from observing or injecting page contents. But HTTPS needs TLS certificates, and while deployment is increasingly a solved issue thanks to the ACME protocol and Let's Encrypt, development still mostly ends up happening over HTTP because no one can get an unive
Web Performance 101: JS, CSS, HTTP, images & fonts | PerfPerfPerf
This is an introduction to modern web loading performance. Learn why performance is important, what performance optimizations exist, and which tools can help you understand if your app is performing well. Want to apply this advice to your site? We help companies like Framer, Toggl, SitePoint to get faster – and we’d be happy to help you as well! Reach out So: why is web performance important? Firs
Webパフォーマンス虎の巻
Webパフォーマンス向上施策のために、今更ながら超速本1を読んだので、今までの自分の知見と合わせてまとめてみます。 なるべく柔らかく、改善施策ってまず何をどうすればいいの？という疑問を持った人に向けて書いています。 ▪️格言 そもそもWebは速い。遅くしているのは我々です。大抵は技術の問題ではなくて、人の問題。 引用元： テクニックではなく、今、本気で取り組むべきWebパフォーマンス （html5jパフォーマンス部 部長 竹洞さん） 心得 パフォーマンス向上に対する施策は大別すると以下の２通り 軽量化 （単純にやりとりするデータ容量を小さくすること） 圧縮 削除 最適化 （その時に最も適している実装・実行をとること） 経路・順番の変更 非同期 もっとも遅くしている原因を探して、それを対策するのが原則。「対効果」が絶対的正義である。手段から入るのは愚策。まず先に原因を知ることが重要。 ▪️1
Webエンジニア必見！開発に役立つサービスやツールを厳選したキュレーションサイトまとめ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、Web開発をするうえで役に立つ情報源やサービス・ツールを厳選してまとめているサイトを複数ご紹介します！ さまざまな視点・用途におけるリソースが詰まっているサイトばかりなので、これから開発を始めようと考えている人も含めて、ぜひ参考にしてみて下さい！ ■あらゆる「ボイラープレート（ひな型）」を集めたサイト！ 【 Boilrplate 】 すぐにWeb開発ができるように、あらかじめ必要なファイルをすべて用意した「ボイラープレート」と呼ばれる「ひな型」だけを厳選したサイトがこの「Boilrplate」です！ React、Angular、Django、Railsなどの人気フレームワークのボイラープレートから、Android / iOS向けのアプリ開発やWordPressによるWebサイト製作まで幅広く揃っているのが大きな魅力です。 各カテゴリをク
どれ使うべき？3大WebフレームワークRails・Django・Laravelを徹底比較してみた - paiza times
(English article is here) ブラウザを開くだけでWeb開発環境が整う PaizaCloud クラウドIDE こんにちは、吉岡(@yoshiokatsuneo)です。 Webサービスを作成する時に迷うのが、「どのWebアプリケーションフレームワークを使うか？」ですよね。 今からWebサービスを作るなら、Ruby on Rails, Django, Laravelが主流となる3大フレームワークかと思われます。 いずれもフルスタックフレームワークと呼ばれるもので、Web開発に必要な機能を一通り揃えていますが、もちろんそれぞれ開発言語、機能、構成などは異なります。 どれも有名なフレームワークなので、名前だけならすべて知っているという人も多いかと思いますが、実際に全てを使ったことがある人は少ないのではないでしょうか。 すでにどれかを使って開発している人も、ほかのフレームワーク
PuppeteerでWebページからメインコンテンツっぽいところを抽出してみる - Qiita
最近、Webページからざっくりメインコンテンツっぽいものを探し出すプログラムを作成しましたので得られた知見についてまとめてみます。本文などの情報を利用せずに汎用的にメインコンテンツを探したかったので、Elementの位置、幅、高さ(以下rect)等の視覚的な情報を使用して抽出してみました。具体的には puppeteerでページをスクレイピングして各Elementの情報をまとめたツリー構造を作る Elementにスコアを付けて尤もらしいものをメインコンテンツとする というステップで抽出します。 メインコンテンツを抽出する完全なコードについてはgistのサンプルを参照してください。 ページのスクレイピング puppeteerを使ってページをスクレイピングします。最初にdomツリーを探索して必要な情報をjsonとて抽出します。視覚的な情最新のとして各Elementごとにrectの情報を取得します
業務でWebサービス開発をする際に気をつけたいこと（新卒向け） - Qiita
趣味でも業務でも日々Webサービスを開発しているzaruです。こんにちは。ついにアドベントカレンダーも最終日です。まだサンタとしての仕事が残っています。さて今回は仕事としてWebサービスを開発するときに気をつけたいポイントを紹介します。まぁ仕事に限った話じゃないですが…参考になれば幸いです。特に新卒プログラマあたりに読んでもらえればと思います😀 なお僕の業務上インフラ周りはAWSが多いです。 RASISという指標 RASISという指標があります。コンピュータシステムの評価指標5つの頭文字を取ったものです。 Reliability（信頼性） Availability（可用性） Serviceability（保守性） Integrity（保全性） Security（機密性） 今回はこの5つの指標に沿ってポイントを紹介していきます。RASIS自体については色々なところで解説されていると思うので
【凄腕Webエンジニア7人に聞いてみた】どんな開発環境や便利ツール使って仕事してるの？ - paiza times
Photo by Peter Petrus こんにちは。谷口です。 他人の開発環境って気になりませんか？私は気になります。 誰かの作業を見ていて「何そのツール知らなかった」「えっそのコマンド便利そう」となったことありませんか？ 自分以外のエンジニアは、自分の知らない便利な何かを使っているかもしれない。というか多分使っている。 というわけで、paizaの中のエンジニアたちにそれぞれの開発環境やこれがなくなったら開発できないというハードやソフトや便利な設定、毎日のように使っているコマンドなど、とにかく開発環境について聞きまくってきました。エンジニアの皆さんにとって新たな発見となる項目や参考になる部分があればと思います。 ちなみに弊社のPCは基本的に全員MacBook（3年ごとに買い替え可能）です。ディスプレイも自分の好きなものがあれば買ってもらえます。（だからPCとディスプレイは後から入った人
2016年 独りで新規WEBサービスを開発・運用した際の知見 - Qiita
私が新規WEBサービス立ち上げ時に取り組んだ内容についてWEBエンジニア向けにまとめた記事です。 例えばNginxの設定でHTTPヘッダーが正しく設定されているかを確認できるGoogleDevelopers PageSpeed Insights を知っていると大変有利です。もちろんPageSpeed Insightsを知らなくてもWEBサービスを公開・運用可能ですがユーザに意図せず不利益を与えていたり、知らず知らずのうちにモバイルフレンドリーでないとGoogleから検索ペナルティを加えられている可能性があります。この記事は独りで新規WEBサービスを立ち上げた際のノウハウと取り組んだ内容について記述しています。 1. 概要（5行くらいで） スマホ対応は必須。トラフィックの50%はスマホから発生する。 速度は武器！速いサイトはそれだけで価値がある。 SEOの内部対策は内部リンク整備とPageS
Chrome開発者ツールの小技集 | POSTD
最近、普段以上にChromeの開発者ツールを使うことに時間をかける機会がありました。その過程で、自分が今まで気づいていなかった機能をいくつか見つけました（少なくとも今までその機能を探す必要に迫られていなかった、とも言えるのですが。例えばブラックボックス化や非同期のスタックトレースなど）。そのため、開発者ツールでとても気に入っているいくつかの機能についてまとめてみたくなったのです。 小さな虫眼鏡ののアイコンは、特定の要素やCSSプロパティに対して、「どのCSSファイルに書かれているどのセレクタ/クラスが最終的なスタイルを決めているか」を示してくれます。例えば、どれかDOM要素に対して「要素を検証」を選び、右側の「Computed」というタブを選びます。確認したいCSSプロパティを見つけてその虫眼鏡アイコンをクリックすることで、すぐさま右側に正しいCSSファイル内のクラス/セレクタを表示してく
超見やすい！Chromeのデベロッパーツールが劇的に見やすくなる拡張機能｜男子ハック
黒背景でハイライト表示！デベロッパーツール用のテーマが拡張機能として利用可能！うぉぉ！こんな拡張機能があったなんて、もっと早く知りたかった！と思う人が続出しそう（？）ですが、Google Chromeのデベロッパーツールを物凄く見やすい配色に変更するテーマファイルのChrome拡張機能を試してみました！ 今回試してみた拡張機能は「DevTools Theme: Zero Dark Matrix - Chrome ウェブストア」という拡張機能。同様のデベロッパーツールのテーマを変更する拡張機能は他にもありますが、配色の違いなので好みで選択するのが良さそうです。 下記の画像が通常のデベロッパーツールを開いた画面。コードはハイライトされていますが、白背景だと見づらいです。 そこで「DevTools Theme: Zero Dark Matrix - Chrome ウェブストア」を利用すると以下の
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【OSS】PaaSサービスとWeb開発フレームワークの相性---「Azure」「AWS Elastic Beanstalk」と「Django」「CakePHP」
Webアプリケーションのキャッシュ戦略とそのパターン / Pattern and Strategy of Web Application Caching
Web制作で分からないことはすぐに確認！HTML5, CSS3, jQuery, WordPress, Bootstrapなどのチートシートのまとめ
非エンジニアのためのこれだけは押さえておきたいWEBサービスの基礎技術
Webサイトを効率よく運用するための「マニュアル」「帳票」「管理表」サンプルと事例集 | Web制作・運用現場のための「課題解決」の教科書 | Web担当者Forum