📃 Webページをそのままの状態でローカルに保存するツールを作った話 - Qiita
はじめまして。yamaimo (@yarnaimodev) です。Qiita 初投稿...というかネット上にちゃんとした記事を上げるの自体初めてな気がします。 1998 年生まれで、プログラミングとか Web デザインは独学で 3 年ぐらいやってます。TypeScript / Firebase / Node.js / React あたりが特に好きです。 この前 coliss で紹介された Can't Unsee を試してみたら 1 回目が 7,630 点、2 回目が 7,930 点でした。1 小規模ですが Mastodon インスタンスを管理してます。あと Helix キーボード をこの前組み立てた2んですがキー配列を変えたのがなかなか覚えられなくて死んでます。 開発環境は基本的に WSL + Hyper + fish shell と VSCode です。 今回 Puppeteer を使っ
Webエンジニアが避けるべき転職先
転職活動でストレスが溜まっているので備忘録、愚痴吐きとして。 人売りSES * 言うまでもなくクソなので行く価値なし。 * 見分け方はみんな知ってるだろうし割愛する。まあ勤務地は東京23区内とか書いてあったら香ばしいですよね？鼻腔に入ってこないで欲しいよな。 * 「多彩な案件を経験」したければ派遣免許取ってちゃんとやってる会社に行きます。違法スレスレの人材屋を選ぶメリットあるか？ * こういうクソを紹介してくる無能な転職エージェントは生まれてきたことを後悔するほど苦しんでから死んで欲しいものである。SESには興味ないって言っただろうクソが。 * ただ連中は節操なく人を採りまくるので、万が一の滑り止めとして一応受けておく選択肢はある。もちろんその際は次の次の転職先を探す必要があるので本当に最終手段である。 * 判断に迷うのは受託や自社開発とSES両方やってるパターン。SESという後ろ暗い商売
ぼくのかんがえたさいきょうの配色Webサービスを公開した話 - Qiita
TL;DR まあぜんぜん最強ではないですが、自分好みの配色 Web サービスをつくってみました yum-yum COLOR 個人で公開まで作りきったのは初めてでしたので、色々とつまずきました そんなつまずきポイントや、 Web サービスを公開するために利用した技術などを紹介していきます ❗ なぜ配色サービス ❓ 色彩検定という資格をご存知でしょうか？ 僕はプログラマーなのに 色が好き で、この試験を受検しました。 その学習をしてる時にこんな風に思ったのです。 この色相環、これを使って配色選べたら便利じゃない？ あっ、このトーン、これを使って配色選べたら便利じゃない？？ と。 受検勉強の追い込みをしないといけないのに、そっちのけで作り始めてしまった...というわけです （一時はどうなるかと思いましたが、無事に検定は合格しましたよ 🎉 ） どんなサービスなの ❓ 使い方 色相環 と Hue
スマホ向けサイトをアプリっぽく見せるために半年間頑張ったことをまとめる - Qiita
この記事は リクルートライフスタイル Advent Calendar2018の20日目の投稿です。 はじめに この記事では スマホ向け web ページをアプリっぽく見せるための Tips を多く紹介します。 (CSS / JS / jQuery / React / WebGL の事例を紹介します) （注） React 環境でのサンプルコードが多めですが、実装方法はどの環境でも変わらないと思います。ライブラリも同種のものが存在しているはずです。 最近だと、僕の大好きなアプリで味わった体験を、どうすれば Web で再現できるかなーって考えていました。そうしたネイティブアプリをWebで模倣したときに、知ったTipsやテクニックをまとめていきます。 この記事に書いてあること アプリっぽい体験はどのようなものがあるか CSS / JS / jQuery / React / GLSL を利用したネイテ
Web Bluetoothを実戦投入すると意外と使えたメモ - Qiita
普段はIoTな製品開発をメインにしているため、JSも王道の斜め横くらいの使い方で楽しんでいる今日このごろ。そんななかで、なかなか触る機会がないであろうWeb Bluetoothをゴリゴリいじくり倒して実戦投入すると意外と使えたので、そのときにわかったことのメモをまとめておきます。Android Chromeがサポート環境だったため、そっち寄りのまとめになります。 なかなかチュートリアル以上のネタがネット上になかったので、他に同じ心境の方が出てきたときの助けになれば... Web Bluetoothの仕様とか参考にしたところ W3C Document GitHub: WebBluetoothCG / web-bluetooth GitHub: WebBluetoothCG / Demos ドキュメントは意外と更新頻度高いので、実装時期によっては意外とできなかったことができてたりします。 対応
「世界最悪のログイン処理コード」を解説してみた
概要 ところでこのツイートを見てほしい。このソースコードをどう思う？ 世界最悪のログイン処理コード。 実際のサービスで可動していたものだとか……https://t.co/C2bG93ZCkj pic.twitter.com/EfVNAEslrn — はっしー@海外プログラマ🇳🇿元社畜 (@hassy_nz) 2018年8月10日 すごく……セキュリティーホールです…… 一応は動いていますが、あまりに問題がありすぎるため、Twitterでも話題になっていました。 問題点は片手に入り切らないぐらいある気がしますが、一つづつ解説していきます。 ※元記事のタイトルに記載されていますが、このコードはイントラネット内で動作していたものです。 問題点リスト 1. クライアント上のJavaScriptで書かれている 他の問題点を全部ぶっ飛ばすぐらいの重大な不具合です。 クライアントと言うのはこの場合、
乃木坂46のメンバーからドラクエ風のパーティを作るWebサービスを作ってみた - Qiita
2018/12/15 updated 個人開発アドベントカレンダーで「坂道駆動開発のご紹介 -ITを通じて乃木坂46を応援する-」を書きました！ タイトルのとおりです。名前を入れるだけで遊べるWebアプリを作ってみました。 https://www.rpgparty.sakamichi46.com/ ツイート結果はこんな感じ。 そういえば自分の試した結果を流していなかった(^^;すごい豪華で恐縮ですが、開発者による調整はしていません。 勇者「キクタロー」のパーティを坂道RPGパーティジェネレータで生成したよ！ #sakagene46 https://t.co/9tKDTmdM0R #sakagene46 @sakagene46さんから — キクタロー@エバスク役職ボッター (@kikutaro_) 2018年7月2日 乃木坂ファンをターゲットにしてますが、乃木坂のメンバーを知らない方にも遊ん
PWA（Progressive Web Apps）がようやく流行り出したけど Push通知 がウザすぎる - albatrosary's blog
PWA（Progressive Web Apps）をやり始めているところが多くなりそれ自体は喜ばしいところです。ただ、最近のWebサイトで「通知しますか？」と言って来ることが多くなり正直ウザすぎです。誰がこんなの考えたんだってくらいイラっとします。 イメージですが、だいたいネイティブってというのは「お前のことが気に入った！いつでも連絡くれよ！」ってことでインストールするのに対して Web の場合は「たまたま今晩偶然に会っていい雰囲気だったけど多分もう会わないよね？」って感じで偶然意気投合しただけなのに後で連絡要らないよなと全てのサイトで思ってしまいます。 例え話がちょっとあれですが、詰まる所 Web とネイティブは同じようなインターフェースじゃ無いんだよと言いたいし、単純にサイト更新したから見てくださいの通知を実装してしまうセンスってどうなんだろうと思ったり。 プッシュ機能に限っては、サイ
現場の Web Components
一部 ES Class の記述に誤りがありました。訂正版は Speaker Deck にアップロードしていますのでそちらをご覧ください 👉 https://speakerdeck.com/aggre/real-world-web-components https://polymer-japan.connpass.com/event/84638/ の登壇資料です
【2018年流行りそう！】気になるWebデザイントレンドまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの藤田です！ 毎回、同じことを言っておりますが、技術の進化と共にWebサイトの表現も目まぐるしく変わってきておりますね。 油断をすると次々と見たことのない表現が増えていく今日この頃なので、自身の備忘録も兼ねてサイト制作に取り入れたいWebデザインのトレンドをまとめてみました！ よろしければ皆様もご覧ください。 2018年気になるWebデザイントレンド 画像を揺らす デザインにひと味足す方法として、最近よく見かけるのがシェーダーで画像を揺らす手法。 アイキャッチに対して誘目性が高まりデザインに奥行き感が出るのが良いですね！ http://www.themustafacelik.com/ http://culture.basicagency.com/ パララックス 手前のものは早く動き奥のものはゆっくりと動く視差効果をスクロールアニメーションに取り入れるこの技術は４〜５年
フロントエンド全然わからないマンが、ちょっとでも見た目のいいWebサービスを作ろうとしてやったこと - Qiita
はじめに サーバーサイドプログラミングを勉強していると、自分でWebサービスを作りたいという気持ちがわいてくるものです（私はそうでした）。しかし、ここで大きな問題が立ちはだかります。どんなにすごい機能をつけても、いい感じのデザインのWebサービスでないとそもそも使ってもらえないのです。 試しに、QiitaのトップページのCSSを無効にしてみました。使える機能は変わらないはずなのに、全く使う気が起きなくなりますね。 しかしそうは言っても、フロントエンドの経験がほとんどないとどうすれば見た目をいい感じにできるかがわかりません。今回は、ちょっとでも見た目のいいWebサービスを作るために、そんな状況の私がやってみたことをまとめました。 (この記事は、あくまで私が試行錯誤した結果をまとめたものであり、その結果出来上がったサービスの見た目の良さを保証するものではありません) 書いている人のプロフィール
嫁の転職を支える技術 - 文字っぽいの。
嫁を面接した企業が「あれ、これって……。」となる画像 はじめに 最近嫁が転職活動をしていたのですが、デザイナーは転職活動をする際に「ポートフォリオ」なるものが必要になるそうです。Webデザイナーである嫁は、このポートフォリオをWebサイトとして製作したいとのこと。 エンジニアリングを生業とする旦那として、ここは一肌脱がねばと思い、ポートフォリオサイトの構築をしました。 コントラクター（僕）のスペック iOSエンジニア Webアプリは過去にやっていた クライアント（嫁）のスペック デザイナー（仕事はWeb系） Ruby, JavaScriptはほぼ書けない HTML, CSSは書ける Git, GitHubは使える クライアント（嫁）の要望 パブリックに公開するのではなく、履歴書に添えたい URLを知っている人しかアクセスしない パスワード（BASIC認証）が欲しい デザインはいちから自分で
“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 は標準仕様
乃木坂46の公式サイトのリデザインで学んだこと｜Miyu Otsuki
先日、ふとしたきっかけで乃木坂46の公式サイトをリデザインを思い立ち、スキルアップの一環も兼ねてトップページをリデザインをしていました。 そのリデザインから学んだことなどをブログに書きたいと思っていたのですが、公式サイトに掲載されているコンテンツの著作権上、なかなか難しいかなと思い、念のため乃木坂46の運営委員会に問い合わせてみたところ、営利目的でなければ使用しても大丈夫（ブログの掲載も可）との許可をいただいたため、こちらに書くことにしました（2/9 16:43：問い合わせの内容は、公式サイトのお問い合わせフォームから送信したため、画像の添付などはしていません。コンテンツの掲載許可は頂きましたが、運営委員会に直接デザインデータを送ったわけではありません）。 なぜリデザインをしたいと思ったのかもともとアイドルが好きで、アイドルグループの公式サイトをチェックする機会が多いのですが、乃木坂46の
社内ネットワークで使うための短縮URLサービス作った - 病みつきエンジニアブログ
社内専用環境とかで“性善説”に基いて運用できる、短縮URLを作ってみた。 github.com 詳細は README に書いているが、 シンプルなUI 命名もできるし、ランダムな文字列もいける 既存の短縮URLの上書き(性善説だし :) DynamoDBがバックエンドで安い Dockerベース ちなみに、イントラネットに置けるようにしたかったので、サーバーレスにはしてない。 モチベーション Google社の勉強会とかにいくと、貼ってあるポスターに http://go/hoge みたいなリンクがあって(あるよね？)そういう“社内専用短縮URL”を実現したかった。 また、Slackのトピックには文字数制限があるが、どうしても制限を超える長いURLへのリンクを貼りたかったという事情があった。かといって、ここに貼りたかったリンクは社内専用の URL なので bit.ly とかの短縮 URL サービ
負荷試験のためのノウハウと Webフレームワークの負荷試験 (Python,Node,Go,PHP) - Qiita
この記事はRetty Advent Calendar 2017 における 22日目の記事です。 昨日は @saku さんの swiftで丸画像をパフォーマンス高く表示する方法 でした。 はじめに 趣味のBot開発から気づけばWebフレームワークの負荷試験を行なっていました。 Software Engineerの@tkngueです。普段業務としては、Data Engineer/Web Service開発/データ分析やってます 「速さは正義」 とは皆の共通の認識で、言うまでもないことだと思うのですが 本記事では、速さってなんだろうって考えてみます。 TL;DR 負荷試験における 速さは面で捉えよう: 品質を50%'ile - 90%'ile - 99%'ile ... で定義する 品質を評価する手段にも気をつかおう: Coordinated Omission は大きな測定誤差を生みます Goも
超高速な静的Webページを作ろう！ - Qiita
PageSpeed Insights 計測結果 モバイル/パソコン 共に100点 速度という点に絞ると信用できるものではないかもしれませんが、100点という数字は単純にうれしい:) それでは！以下が私のやったことです リクエスト数を極限まで減らす CSSはstyle属性やstyleタグで設定 複数箇所で使う場合はstyleタグに、要素固有のスタイルはstyle属性で設定してしまいましょう。 style属性で設定する場合はセレクタでの捜索が発生しないので、ごく僅かながら速くなると思います。 画像はbase64で埋め込む こことかでデータURIスキームに変換してhtmlに埋め込みます。 base64エンコードすると容量が1.3倍くらいに増加するため大きな画像には向かない方法ですが、小さなアイコン程度ならリクエスト数減らすほうが効果的な場面があります。 複数箇所に使う画像の場合はCSS変数でba
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コードレビューが好きになるプログラミングの原則 - Speaker Deck
Laravelを使った既存WebサービスのAPI化
dev.toが与えたインパクト
