非エンジニアの新卒にプログラミング研修を行いました - pixiv inside [archive]
今年のピクシブ株式会社には総合職 2 人とデザイナー 2 人が新卒として入社しました． そんなフレッシュな新卒に新卒エンジニアがプログラミングの基礎を教えろというお達しが出ました． ということで秋卒業で既に入社していた私（@catatsuy）とアルバイトから入社した 2 人（@geta6/@RooandQoo）の合計 3 人中心でプログラミング初心者向けに研修内容を考えました． 題材 @tarbrick からのリクエストで最終目標は『画像投稿掲示板を作る』ことに決まりました． 方針 今回のプログラミング研修の目的は総合職・デザイナーの人たちをエンジニアにすることではありません． エンジニアの人たちが普段の業務でどういったツールをどういった流れで使っているのかを学ぶことで，円滑にエンジニアとコミュニケーションを取れるようにすることが目的です． そこで方針として以下のものを決めました． 全員
![非エンジニアの新卒にプログラミング研修を行いました - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/c5f9cb57c356bd055bcc4941b2635b49e5da47a3/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fc%2Fcatatsuy%2F20140428%2F20140428171910.jpg)
Google が言う 「モバイルフレンドリー」 とは？ モバイルフレンドリーテストツールで色々試してみた
Google が言う 「モバイルフレンドリー」 とは？ モバイルフレンドリーテストツールで色々試してみた Google がモバイル検索の順位決定時に 「モバイルフレンドリー」 かどうかを重要なシグナルとして利用すると発表したことに関連して、そもそも Google は何を根拠に 「モバイルフレンドリー」 かどうかを判断しているのか、という点について調べてみました。 先週ですが、Google が Official Google Webmaster Central Blog で、2015年 4月 21日 （米国時間） から、モバイル検索の順位決定時に、その Web サイトが 「モバイルフレンドリー」 かどうかを重要なシグナルとして利用すると発表しました。 Finding more mobile-friendly search results ： Official Google Webmaster
ネットで簡単にプログラミングが勉強できるProgateが凄すぎる件について - タコの卵
僕はまったくプログラムがわからない。C言語とかJavaScriptとかPHPとかよくみるけど実際には何言ってるかわからん。日本語も怪しいのに英語で…しかもプログラミングなんて全然わからない。 しかし、はてなブログは記事を書く時に 見たまま HTML編集 に分かれており、少しHTML編集でいじる時もある。</p>とかで段落？ってのがわかるぐらいの何とも頼りない知識だ。どうせならもう少しHTMLができるようになってブログをもっと読みやすくしたり軽くしたりといじりたい欲が出てくるが、いかんせん知識がなさすぎてすぐパワー系池沼キャラになっでじまう。 スポンサーリンク プログラミングでもできたらなぁ…何かカッコイイイメージもあるし、就職にも便利そうだなぁ…でも何から学べばいいしどうやって学べばいいかもわからない。まさに打つ手なし！状態だったが、ふとした瞬間閃いてしまった。 ネットで勉強できるんじ
検索じゃ学べない！ HTML/CSS/JavaScriptの気づきTipsまとめ31こ | _level0 - KAYAC Front Engineer Blog
HTMLファイ部のほんだです。 気づきTips！ Σ(・ロ・) カヤックの中でもHTML5のWebフロントエンド実装を担当する エンジニアを集めた部署「HTMLファイ部」では、 制作にあたってはまったことや、気づいたことをメモ的に蓄積・共有しています。 通常は、 1. 制作で何かわからないことがでた ▼ 2. Google等で検索して解決の糸口をさがす ▼ 3. こんな方法があったのか〜 と気づきを得る というフローでスキルアップしていくことがもっぱらだと思うのですが、 学びを増やしていくためには違うアプローチも必要なんじゃないかと思います。 カヤックHTMLファイ部では、 1. みんなで蓄積したTipsをざぁっと読む ▼ 2. こんな方法があったのか〜 と気づきを得る ▼ 3. 制作の際に導入していく というフローを繰り返し実践していくことで、 検索では気づけないことを学び、実装力アップ
フロントエンジニアになってから５ヶ月間で欠かせなくなったツールを晒す - Qiita
概要 今年からフロントエンドエンジニアにシフトチェンジして5ヶ月がたち、これがないと仕事にならんわレベルのツールを整理がてらに晒していこうと思う。 スペック的にはJava歴が10年くらい。 割とツール好きで、できればキーボード（カーソルキー以外）だけですべての操作を完結したいと思っている。 そんなおっさんがお送りします。 5ヶ月間のお仕事内容 PC/タブレット向けのAngularJSを使ったフロントエンド開発 HTML/CSS(SASS)/Javascript PCはIE8~、Chrome。モバイル端末はiPad、Nexus7 職場での開発環境 mac mini (2011) 19インチのシングルモニタ GUI系ツール Sublime Text 2 プログラマ向けのテキストエディタ。 これがないと仕事にならない。 以下、必須なPackage。 Vintage vimっぽいキーバインドにする
ゴールデンウィークにどうぞ。2013〜2014のWeb&デザイン系書籍14
2013年から今にかけての一年間で色んな本に関わったり気になって買ったり頂いたりしたものがあったのですが、棚卸し的にそれらを紹介してみます★ ここ一年前後のうちに色々な書籍を手にする機会があったりしました。もちろん一番推したいのは先日自分が執筆に参加した現場のプロが教えるWeb制作の最新常識なわけですが、他にもたくさん良さげな本を手に入れることがあったので、どういう部分が良かったかざーっと紹介してみます！ 自分が持っている本を紹介する要は宣伝記事なんですが、読書感想文として購入する際のご参考に。私が持ってない本は紹介出来ないので、よりオススメの本があれば教えてほしいです！(他の人も書籍紹介記事書いてねアピール) 一旦ここで紹介はしちゃいますが、これらの本でまだ個別に記事を書いてないものは別記事でも触れようと思います。新卒のweb制作者一年生！みたいな人も参考にしてみてはいかがでしょうか★
ワンランク上のHTMLコーディングを行うための18のポイント | ベイジの社長ブログ
HTMLコーディングの初級というと、どの程度のスキルを差すのでしょうか。弊社では、以下のようなことがひとまずできていると、だいたい初級レベルを越え始めた段階かな、という気がしています。 ターゲットブラウザで大きな崩れがない。 リンク漏れや原稿違いなどのヒューマンエラーの頻度が極めて低い。 バリデーター・チェックでエラーが出ない。 逆に、これだけのことができて、なぜまだ初級レベルなのでしょうか。それは、現場では、これだけでは不十分だからです。ブラウザでひとまず正常に表示されるだけでなく、改修に素早く対応できる柔軟性、協業や運用後の更新を楽にするルールの一貫性や簡潔さ、HTMLの概念をきちんと踏まえた正しい構造設計なども、求められてくるからです。 そこでここでは、脱・初級者を目指す方のために、弊社内で行っているHTMLコーディングの、いわゆるエラーということ以外のチェックポイントを、まとめてみ
「英語のオープンソースドキュメントを日本語翻訳する」html5j英語部キックオフレポート
「英語のオープンソースドキュメントを日本語翻訳する」html5j英語部キックオフレポート 谷拓樹（株式会社サイバーエージェント） html5j英語部では、英語のオープンソースドキュメントを日本語に翻訳する活動を開始しました。そのキックオフとなる11/1（土）に開催された、html5j英語部のイベントの報告をします。 世界を日本に。日本から世界へ。Web開発者のための架け橋となる。 html5j英語部の谷です。html5j英語部では、英語のオープンソースドキュメントを日本語に翻訳する活動を行っています。ただそれだけではなく、日本語の情報を世界に届けるために、日本語を英語に翻訳するといった活動にも今後取り組んでいく予定です。 今回のキックオフイベントでは、部長の斎藤（@cssradar）からこうした英語部発足の目的についての話や、英語部での翻訳フローなどについてのプレゼンテーションをおこないま
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
新人コーダーに知っておいて欲しいリダイレクトの基本｜クロノドライブ
サイトを運営していると、サイト内のページの移動や削除、またはサイト自体の移転をすることがあります。その場合、リダイレクトという処理を用いて新たなページに転送を行いますが、正しい知識と手順を以って対応しなければ、検索順位の下降、ページランクやドメインエイジの喪失といったSEO的なペナルティを招いてしまいます。 そこで、そのようなペナルティを受けないために、ページ移動・サイト移転時の正しいリダイレクトの設定方法と、代表的なリダイレクトの種類やその実装方法をご紹介します。 リダイレクトの種類 リダイレクトには、HTMLやJavaScriptといったクライアントサイドプログラム、PHPやPerlといったサーバサイドプログラム、あるいは.htaccessの設定変更を行う等、様々な対応方法があります。そのうちのいくつかを、実際のサンプルソースとともに解説します。 metaタグによるリダイレクト hea
CSSだけで作る「多階層」なドロップダウンメニュー
以前書いた「CSSだけで作る動きのあるドロップダウンメニュー｜Webpark」という記事が検索エンジン経由でそこそこアクセスがあり、よく質問をいただきます。そのなかで多階層にできないのかという質問があったので作ってみました。 IE7の場合擬似要素が使えませんので、次の階層があることを示す矢印が表示されません。ドロップダウンの機能はIE7でも問題ありませんので、IE7に対応させる場合は矢印を画像にするなどすればよいと思います。 それではHTMLからいきます。 HTML かなり長くなるのでメニュー1の部分だけ載せています。 <ul id="dropmenu"> <li><a href="#">メニュー1</a> <ul> <li><a href="#">子メニュー</a> <ul> <li><a href="#">孫メニュー</a></li> <li><a href="#">孫メニュー</a>
html/css 参考サイト総まとめ
作成：2013/10/15 更新：2014/11/01 Web制作 > 先週、WordPressとEC-CUBEのレイアウトを変更しなければいけなくて、久しぶりにいじっておりましたが、忘れていたり知らなかったことが沢山ありました。レイアウトはSEOやUIにも深く関係しているのもあり、ここらへんでCSSやHTML５を触るときに参考にすると捗る記事を一回まとめようと思います。今回はCMSやオリジナルサイトを作るうえで「知っておくと必ず役立つ」ものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 定番まとめ １．勉強になるテクニック／サンプルまとめ 基本知識 ２．セレクタ ３．メディア クエリ ４．コーディング規約 ５．フォント ６．CSSスプライト ７．アニメーション ８．正確なHTML使用方法 ９．CSSハック １０．書き方／読み方 定番まとめ
お願いだからWebフォームではを正しく使ってユーザビリティを上げてくれ | 初代編集長ブログ―安田英久
今日は、Webフォームが「うわ、使いづらい」となってしまわないようにする、意外と対応されていないことが多いHTMLタグ「<label>」について。 HTMLを自分で書かないWeb担当者さんでも、デザイナーさんが作ったフォームに関して最低限これだけはチェックしておくといいですよ、というお話しです。 コンバージョンの要である「Webフォーム」。アクセス解析での改善やEFO（入力フォーム最適化）をしていると思いますが、意外と忘れられていることが多い「<label>」をご存じでしょうか。 フォームの入力項目それぞれの「ラベル（項目名）」を書くためのHTMLの作法なのですが、これをちゃんと使っているかどうかで、フォームの使いやすさがガラッと変わるのです。 一番わかりやすいのは、ラジオボタンやチェックボックス。<label>をちゃんと使っていると、ボタン部分ではなく文字の部分をクリックするだけで項目を
世の中のHTML5アプリケーションが糞だから、俺が「初期化」の作り方を教えてやんよ - mizchi's blog
2chまとめみたいなタイトルにしてみた。(してみたかった) HTML5のアーキテクチャと初期化とキャッシュの考え方が、「ウェブエンジニア」は本当に出来てない。 とくにソシャゲをウェブビューに貼ってスマホ対応しました系。本当にダメ。 じゃあどうするか？基本的に「初期化」の考え方を直せばどうにかなる。 (この記事はBackboneを使うときに考えてることだけど、他でも一緒だと思う) 前提 シングルページアプリケーション セマンティクスやSEOは考慮しない 基本哲学 共通モデルの初期化を徹底的に行う サーバーにリクエストを投げるのは最小限 クライアントでサーバーモデルのキャッシュを作り、更新が期待されるまで再取得しない 理由 いくらDOMの最適化したところでUXに影響が大きいのはサーバーリクエスト(200~2000ms)で、プログラミング段階で辛さがあつまるのは非同期処理の部分。 プログラマとし
WebサイトにもiPhone風の通知を実現·HTML iOS Notifications MOONGIFT
HTML iOS NotificationsはHTML/JavaScritp製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 iOSやAndroidなどのモバイルでは通知機能が便利に使われています。それはアプリに限らず便利に使えるはずです。そこで使ってみたいのがHTML iOS Notificationsです。 デスクトップ版。画面上部に通知が表示されています。しばらく経つと消えます。 複数出すこともできます。 レスポンシブに対応しています。 iPhoneで出す場合は画面幅いっぱいに広がるようです。 Webなので画像やメッセージ、クリックした時のアクションなどは自由に操作できます。スマートフォンに最適化されたWebサイトで使うとまるで本物のネイティブ風になるのではないでしょうか。 MOONGIFTはこう見る HTML iOS Notification
一度書いたコードは二度と探さない！スニペットを究めて快適コーディング！【HTML, CSS, JavaScript】 | WebNAUT by Beeworks
一度書いたコードは二度と探さない！スニペットを究めて快適コーディング！【HTML, CSS, JavaScript】 ※この記事は2013年8月26日に執筆された記事です。現在は仕様が異なる可能性があります。 気がつけば繰り返し同じ単語で検索し、同じコードを書いている…なんてことはありませんか？「この部分の記述、もう一回使うことがあるかも」と思ったらぜひスニペットとして登録しておきましょう！ スニペットとは繰り返し登場するコードの断片、またはそれをすぐに呼び出せるように管理するエディタの機能のことです。自分がよく使用する記述をスニペットにしておけばいちいち検索したり、昔書いたソースを探ってみたりすることなく、使いたい時に正確な記述をサッと呼び出して使うことができます。 Dreamweaver、Sublime Textなどのオーサリングツールやテキストエディタにはスニペットを自在に使うための
Tooling for Modern Web App Developer
Front-end development workflow is becoming increasingly demanding as the complexity of the environment grows. Thankfully, there are many tools that can make your life as a front-end developer easier and perhaps, more rewarding. The primary objective of this session is to get an idea about end-to-end front-end workflow and useful tools. We will discuss hot tools like Yeoman, Grunt and Bower. But th
HTML(.js) - Befriend the DOM!
Intuitive HTML lets you navigate, manipulate and use the DOM with intuitive, readable, consistent code. Powerful HTML's functions enable you to flexibly use all native DOM features with brevity, clarity, and more power than ever. HTML document.documentElement The global HTML is the actual document root element and all element tags queried via the dot operator are descendants. HTML.tag... Element|A
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5とCSS3の実用的なテクニックが丁寧に丁寧に解説されたウェブ制作に真剣に取り組みたい人にオススメの本 -HTML/CSS デザインの教科書
新人ウェブ担の第一関門、HTML、CSS、CMS、JavaScriptを理解 | 脱・新人Web担！あずさのWeb担当者日記
