CSSの「calc()関数」を使うとすごく便利に！レスポンシブ対応のレイアウトで高さを最適化するテクニック | コリス
レスポンシブ対応のレイアウトを実装する際に手間なのは、ブレイクポイントの定義です。ここ1,2年でもたくさんのデバイスがリリースされ、それに伴いスクリーンサイズの種類も増えてきました。 そんな時に便利なのがCSSの「calc()関数」を使ったテクニック。 calc()を使用して、デスクトップやタブレットやスマホのそれぞれに最適なレイアウトを実装するテクニックを紹介します。 Use calc() to Change the Height of a Hero Component 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 calc()を使ったフォントサイズの可変 paddingとline-heightの場合 ヒーローコンポーネントの場合 calc()を使ったヒーローコンポーネントの実装 calc()のサポートブラウザ 最後に ca
新人にドヤ顔で説明できるか、今風フロントエンド開発ハンズオン(git/node.js/ES6/webpack4/babel7) - Qiita
新人にドヤ顔で説明できるか、今風フロントエンド開発ハンズオン(Git/Node.js/ES6/webpack4/Babel7)JavaScriptNode.jses6webpackbabel 概要 今風の手法でJavaScriptアプリを作ろうとすると色々ツールがあって便利な反面、複雑でわからないことがたくさんあります。 わからないことがあったら、それを放置せず、しっかり理解して大いに寄り道しつつブラウザで動作するJavaScriptアプリをゼロから作っていきます ブラウザ上で動作するフロントエンドアプリを作ったら、ライブラリ化してnpmモジュールとして公開します 対象読者＝今風のJavaScript開発の入門者、初心者 11年前からタイムトラベルしてきたひと ブラウザ用アプリを作りたいが今風の手法の初心者(jQueryだけでなんとか生きてきた人とか） Node.jsの環境をつかってフロン
Webパフォーマンス虎の巻
Webパフォーマンス向上施策のために、今更ながら超速本1を読んだので、今までの自分の知見と合わせてまとめてみます。 なるべく柔らかく、改善施策ってまず何をどうすればいいの？という疑問を持った人に向けて書いています。 ▪️格言 そもそもWebは速い。遅くしているのは我々です。大抵は技術の問題ではなくて、人の問題。 引用元： テクニックではなく、今、本気で取り組むべきWebパフォーマンス （html5jパフォーマンス部 部長 竹洞さん） 心得 パフォーマンス向上に対する施策は大別すると以下の２通り 軽量化 （単純にやりとりするデータ容量を小さくすること） 圧縮 削除 最適化 （その時に最も適している実装・実行をとること） 経路・順番の変更 非同期 もっとも遅くしている原因を探して、それを対策するのが原則。「対効果」が絶対的正義である。手段から入るのは愚策。まず先に原因を知ることが重要。 ▪️1
徳丸浩の日記: ECサイトからクレジットカード情報を盗み出す新たな手口
エグゼクティブサマリ 聖教新聞社が運営する通販サイト「SOKAオンラインストア」から2,481件のクレジットカード情報が漏洩した。リリースによると、漏洩に使われた手口は従来とは異なるもので、改正割賦販売法の実務上のガイドラインである「クレジットカード情報非保持化」では対策できないものであった。 はじめに 今年の9月4日に聖教新聞社の通販サイトSOKAオンラインストアからクレジットカード情報漏洩の可能性がリリースされました。以下は聖教新聞社から運営委託されているトランスコスモス株式会社のリリースです。 「ＳＯＫＡオンラインストア」の件 このたび、弊社が聖教新聞社様より運営を委託されている「ＳＯＫＡオンラインストア」において、クレジットカード情報を入力して商品をご注文いただいた一部のお客さまのクレジットカード情報が、第三者によって不正に取得された可能性があることが発覚い たしました。 http
TypeScript入門以前ガイド - mizchi's blog
某社で自分が React/Redux + TypeScript などの講習をやってみた結果、TypeScript 入門用資料が必要だと思って書いたやつです。 このドキュメントのターゲット TypeScript で書かれたプロジェクトに参加する人 TypeScript を導入するために、その事前知識が必要な人 このドキュメントの読み方 ES2015 for Beginners ES2015 for ES5 Programmers ES Modules 非同期表現: Promise と async/await TypeScript エコシステム編 自分が React/Redux などの講習でいろいろやってみた結果、 ES2015 と TypeScript を同時に教えると、初学者は何がどの概念に由来するかの区別が出来ずに混乱します。なので、ES5 -> ES2015, ES2015 -> Ty
東京五輪ボランティア応募サイトのコードがいかに酷いか - Togetter
リンク 東京2020大会ボランティア | 東京オリンピック・パラリンピック競技大会組織委員会 東京2020大会ボランティア 東京2020大会のボランティア活動についてご紹介します。 11 users 11076 池田 泰延 / ICS @clockmaker オリンピックのボランティア募集サイトが酷いと話題だったので、コードを見てみたら残念品質でした･･･ ・重複したid属性 ・javascript:void(0) ・まともに実装されてないWAI-ARIA （音声読上も酷い） ・body内にstyleタグが頻出 これらは一例。ちなみにReact製。 tokyo2020.org/jp/special/vol… pic.twitter.com/ed6TrpByy1 2018-09-27 14:50:01
むずかしすぎる！五輪大会ボランティア応募フォーム(神田敏晶) - 個人 - Yahoo!ニュース
KNNポール神田です。 いよいよ、東京五輪の大会ボランティア募集が開始となった。 『ブラックボランティア』などとネットでいくら言われようとも、ボランティアする側が納得していれば、それはブラックなボランティアではないと思う。母国の五輪のボランティアで得られる経験は、人生のうち、何度もあるものではないからだ。 ボクが1963年の東京五輪の聖火リレーを見たのは神戸市の兵庫区だった。たった２歳であったが、あの雨の日の聖火リレーは、しっかりと脳裏に焼き付いている。だからこそ、ボランティアでも五輪に参加したいと考えている。 1963年10月神戸市兵庫区上沢通3丁目 出典:神田友治撮影11万人のボランティアが必要とされている大会ボランティアが８万人（組織委員会）、そして、都市ボランティアが３万人（東京都）の募集が昨日（2018/09/26）より開始となった。それぞれの申し込みページが公開された。 大会ボ
先進的プログラマが微妙技術を勧めるという吐き気を催す邪悪 - フロイドの狂気日記
はてブで時折ホッテントリする技術系スライドなりトピックがある。 僕はいつも職業柄それを見るが「何だこの技術」というのも少なくない。 ディファクトスタンダードになっている技術の紹介なら参考になる。だがほんとに聞いたこともない技術でアプリを作りましたみたいなことが度々散見される。 2-3年前からAngular 2.X以降を勉強している人は今でも幸いであるが、もしBackborn.jsをpushする記事に目を止めて、一生懸命勉強していたとしたら今は別のスキルを勉強していることだろう。 2-3年前は勢力を2分する勢いだったgulpやgrantも今や先端技術とは言えない。今はwebpackがそれらに取って代わったらしい。 このようにたった2年で使っている技術が微妙になることはよくある やはり4-5年前はLaravelとPhalconというPHPフレームワークが話題になったが、Phalconの方はもは
【編集済み】G社を半年間で退職した理由 - フリーランスWebディレクターの日常
大人の事情により、記事の内容を非公開とさせていただきます。 シェアしてくださった方々、誠に申し訳ございません。
リクルートテクノロジーズ エンジニアコース新人研修の内容を公開します（2018年度版） | Recruit Tech Blog
こんにちは、フロントエンド開発をリーディングしている古川 (@yosuke_furukawa)です。 昨年、こちらのブログで新人研修の特別講座の内容を紹介したところ、大反響だったので、今年も公開します。 リクルートテクノロジーズの新人研修 7月、リクルートテクノロジーズは新人の部署配属の季節を迎えました。 4月に(株)リクルートの新卒Web採用枠で入社した新人のうち、今年は20名が弊社に配属。3か月の研修期間を経て、早速現場での業務にあたってくれています。 リクルートテクノロジーズでは、配属までの3か月間「ブートキャンプ」という技術研修を実施しています。 ブートキャンプのコースは2つ。 一つは、プログラミングやWebサービスの構造の基礎を学び、その後1つのスマホサイトを企画からリリースまで行うコース。 もう一つは一定以上のプログラミングスキルと開発経験のある層向けに、より現場での技術に即し
HTML5 入れ子チートシート | 吉川ウェブ
HTML 5.2のそれぞれの要素が入れ子にできる「子要素」、包含されることが可能な「親要素」の一覧のルールを視覚化して表示します。 ※1 a要素の親要素が包含可能であること※1 audio要素の親要素が包含可能であること※1 canvas要素の親要素が包含可能であること※1 del要素の親要素が包含可能であること※1 ins要素の親要素が包含可能であること子要素省略※1 map要素の親要素が包含可能であること※1 noscript要素の親要素が包含可能であること かつ body要素の子孫であること子要素省略※1 video要素の親要素が包含可能であること ルート要素＆文書メタデータ html 親 子 head 親 子 title 親 子 base 親 子 link 親 子※HTML 5.2から可能。フレージングコンテンツが期待される場所※head要素の子孫であること meta 親 子※he
人月単価で80万円ぐらいの仕事 - terurouメモ
Twitterでこういうことを書いたら、そこそこ反応があった。 今のご時世、技術難易度が並ぐらい（一人でWebシステムが構築できる程度）で、2‐3人月ぐらいの小さなシステムを一人でヒアリング～実装～運用引き渡しができて、説明責任ちゃんと果たせれば、人月単価換算で80万円ぐらいは一杯転がってる（常にあるとは言ってない）し、その他要因で単価はもっと上がる— てるろー (@terurou) 2018年4月17日 意図通りには伝わらないだろうなぁと思いつつ、所詮Twitterだしなーと思いぶん投げたんだけど、想定してた範疇の誤解が広まってきたので、一応補足する。 「人月単価で80万円ぐらいの仕事」の難易度 ちゃんと書いてないから伝わらなくて当然といえば当然なんだけど、行間をちゃんと補うと、 エンドユーザー直案件 技術難易度的には、いわゆるマスタメンテナンス機能に毛の生えた程度のもの 一覧/詳細/編
米地裁、ツイートのエンベッドが著作権侵害にあたりうるとの判決を下す | p2ptk[.]org
米地裁、ツイートのエンベッドが著作権侵害にあたりうるとの判決を下す投稿者: heatwave_p2p 投稿日: 2018/2/162018/2/16 ニューヨーク連邦地裁は、数年前に確定した判決を否定し、単にウェブページにツイートをエンベッドしただけで著作権を侵害しうるとの判決（PDF）を下した。さらに酷いことに、この判決のロジックはツイートのエンベッドのみならず、あらゆる直リンクに適用されうる。この法的にも技術的にも誤った判決が他の裁判所でも採用されれば一般のインターネットユーザを著作権侵害の恐怖に陥れることになるだろう。 この裁判は、ジャスティン・ゴールドマンが起こしたもので、ブライトバート、タイム、ヤフー、ヴォックス・メディア、ボストン・グローブなどのオンラインパブリッシャがNFL人気選手のトム・ブレイディの写真にリンクする記事を掲載したことが著作権侵害にあたると主張していた。ゴール
![米地裁、ツイートのエンベッドが著作権侵害にあたりうるとの判決を下す | p2ptk[.]org](https://cdn-ak-scissors.b.st-hatena.com/image/square/6153f8ff7399196eba2d0e1158899bb3ceb0622b/height=288;version=1;width=512/https%3A%2F%2Fp2ptk.org%2Fwp-content%2Fuploads%2F2018%2F02%2Ftwitter-censored_t.png)
TVアニメ「魔法少女サイト」公式サイト
どうやらそのサイトは不幸な人間しか出会えないらしい。 だから彼女たちは 選ばれた―。 どこにも居場所のない彼女は、いつも死ぬことばかり、考えている。 学校ではクラスメイトからの いじめを受け、 家では実の兄からの 虐待に耐える日々。 朝霧 彩。中学２年生。14歳。 ある日、彼女は不気味なWEBサイト「魔法少女サイト」と出会い、 魔法の力を秘めた “ステッキ”を手に入れる。 彩は魔法の力を手に入れたことで、 同じくステッキを持つクラスメイトの奴村 露乃、 そしてほかの “魔法少女”とともに、 苛烈な 運命に巻き込まれてしまう。 これは、魔法の力を手に入れた不幸な少女たちの、 友情と青春、そして運命を変える 戦いの記録。
エンジニア年収800万の壁
上場済みのWebベンチャーだけど、うちの会社は年収800万の壁がある。どんなに優秀でもエンジニアでいるかぎり800万が最高値。 昔はそんなことなかったのだけど人事制度が改定されてそうなった。 800万以上は部長以上と明確な線引がされていて、年収を上げたい場合部長を目指すか転職するしかない。20代が多い会社なので大半は 年収500〜600万円代で気にしている人は意外と少ない。その一方で30代以上の優秀なエンジニアがどんどん抜けていっている。 社外の勉強会やカンファレンスで積極的に発表するような人たちは殆どいなくなってしまった。 そして年収がネックになっているのか、入社してくるのは若手かそこそこの中堅ばかりで、エッジの効いた人は抜ける一方になっている。 エンジニアに年収800万以上を目指せない会社が存続していくのは難しいだろう。いまは優秀な彼らが設計したシステムがあるからよい、 今後だれがアー
WebMoneyがつらい
電子マネーWebMoney（ウェブマネー）がつらい. 私はWebMoneyを個人顧客として使ったことはありません. 決済手段として導入しようとしていてとにかく仕様が地獄. 怒りのあまり文章が整ってないですし順序も支離滅裂です. 私の怒りを整理するために書いているのであまり参考にはならないかもしれません. 仕様書が簡単にアクセスできる場所にない ｢問い合わせ｣をしないと仕様書が見れません. 普通にweb上にパブリックに公開していません. 我々の場合, 詳細な仕様書が来たのは契約後でした. なので私は契約する前にWebMoneyの仕様書を確認することが出来なかったので, 契約することを止められませんでした. 仕様書がPDF WebなんだからHTMLで提供してほしい. コピーも難しいしコード例もとても見づらい. 動作確認環境が古すぎる Linux glibc2 (kernel 2.4/2.6)に
SVGでリアルな湯気を作ってみる ｜ Tips Note by TAM
もう7年ほど前になりますがFlashでサイト製作をしていた時代に、表現に悩まされるものがありました。 それが『湯気』です。 イラストを使った可愛い表現なら問題ないですが、リアルな感じを作ろうと思うとこれがなかなか難しい。最近では動画やアニメGIFなどで代用されていたりすることも多いと思いますが、今回はそんな素材がない時に使える 『SVGで作るリアルな湯気』 を紹介したいと思います！ See the Pen Steam by uenaka (@uenaka) on CodePen. SVGで湯気を書く まずはSVGで湯気の形を自由に書いてみてください。 難しく聞こえるかもしれませんが、後々ボカして使用しますので形に拘る必要はありません。 参考までに私が書いてみた湯気がこちらです。 SVGにanimateを追記して動す よりリアルな動きに見せるため、SVGで書いた湯気を動かします。 ここも動き
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
充実するフロントエンドの便利ツール、むしろエンジニアの新たな「悩みの種」に？｜WIRED.jp
グリッドマンの公式サイトのストーリー紹介でURL弄ったら結城友奈は勇者であるのストーリー紹介が出てくるバグを発見したんだが
東京オリンピックのボランティア応募ページが『webサイトでやっちゃダメな事を全部やっている』らしい「応募の時点で根性試されてる」 - Togetter
