<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Monologue &#8211; Mach3.laBlog</title>
	<atom:link href="https://blog.mach3.jp/tag/monologue/feed" rel="self" type="application/rss+xml" />
	<link>https://blog.mach3.jp</link>
	<description></description>
	<lastBuildDate>Fri, 19 Mar 2010 20:23:00 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9</generator>
	<item>
		<title>よりよいWeb開発者の為の10の習慣</title>
		<link>https://blog.mach3.jp/2010/03/19/10-practices-for-webdev.html</link>
		
		<dc:creator><![CDATA[mach3]]></dc:creator>
		<pubDate>Fri, 19 Mar 2010 20:23:00 +0000</pubDate>
				<category><![CDATA[WebClip]]></category>
		<category><![CDATA[Developer]]></category>
		<category><![CDATA[Monologue]]></category>
		<guid isPermaLink="false">http://lab.mach3.jp/2010/03/19/%e3%82%88%e3%82%8a%e3%82%88%e3%81%84web%e9%96%8b%e7%99%ba%e8%80%85%e3%81%ae%e7%82%ba%e3%81%ae10%e3%81%ae%e7%bf%92%e6%85%a3.html</guid>

					<description><![CDATA[Top 10 best practices for front-end web developers フロントエンドのWebデベロッパーの為の10の習慣だそうです。 出来ていない事もあったりするので自分のワークフローを再 [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p><a href="http://www.catswhocode.com/blog/top-10-best-practices-for-front-end-web-developers">Top 10 best practices for front-end web developers</a></p>



<p>フロントエンドのWebデベロッパーの為の10の習慣だそうです。<br />
出来ていない事もあったりするので自分のワークフローを再確認する意味でも。</p>



<p>以下、日本語による解釈。<br />
和訳というより、超訳、もとい跳訳…？<br />
読んで理解した部分だけかいつまんで書いてます。</p>



<span id="more-96"></span>



<h2 class="wp-block-heading">1. どのDIV要素を閉じているのか記述しておく</h2>



<p>div要素で汚くなったソースを読むのは大変。<br />
どのdiv要素を閉じているのかをコメントしておけば浪費する時間の節約になります。</p>


<pre class="wp-block-code"><span><code class="hljs language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"header"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sub"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"first left"</span>&gt;</span>
    ...
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><span class="hljs-comment">&lt;!-- #sub.first.left --&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><span class="hljs-comment">&lt;!-- #header --&gt;</span>
</code></span></pre>


<h2 class="wp-block-heading">2. CSSリセットを使う</h2>



<p>各要素のリセットをしておく事で、<br />
クロスブラウザによるレンダリングの差異を最小限に抑えられ、<br />
CSSを記述する上でも大きな助けになるでしょう。<br />
<a href="http://meyerweb.com/eric/tools/css/reset/index.html">CSS Tools: Reset CSS</a></p>



<h2 class="wp-block-heading">3. @importは使うべからず</h2>



<p>link要素のみで埋め込むのに比べ、はるかに低速になるためです。<br />
<a href="http://www.stevesouders.com/blog/2009/04/09/dont-use-import/">High Performance Web Sites :: don’t use @import</a></p>



<h2 class="wp-block-heading">4. 画像を「Smush」せよ</h2>



<p>最適化されていない画像を使う事は、ビジターの帯域を浪費する原因となります。<br />
<a href="http://developer.yahoo.com/yslow/smushit/">Smush.it<img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2122.png" alt="™" class="wp-smiley" style="height: 1em; max-height: 1em;" /></a>で簡単に画像を最適化してくれるので、これを活用するのも良いでしょう。</p>



<h2 class="wp-block-heading">5. HTMLとCSSを混ぜるべからず</h2>



<p>次の例は悪い例です。スタイル要素とHTMLは分離されているべきです。</p>


<pre class="wp-block-code"><span><code class="hljs language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"http://www.catswhocode.com"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"background:#069;padding:3px;font-weight:bold;color:#fff;"</span>&gt;</span>Cats Who Code<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
</code></span></pre>


<h2 class="wp-block-heading">6. HTMLとJavaScriptを混ぜるべからず</h2>



<p>次の例は悪い例です。JavaScriptとHTMLは分離されているべきです。<br />
jQueryなどのフレームワークは、JavaScriptの分離に大きな助けになるでしょう。</p>


<pre class="wp-block-code"><span><code class="hljs language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"cwc"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"http://www.catswhocode.com"</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"alert('I love this site!');"</span>&gt;</span>Cats Who Code<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
</code></span></pre>


<h2 class="wp-block-heading">7. IEには条件分岐コメントで対処する</h2>



<p>CSSハックは有用な場合もありますが、その多くはバグであり、ValidなCSSではなくなります。<br />
IEに対応させるCSSを書く時は、条件分岐コメントを使いましょう。</p>


<pre class="wp-block-code"><span><code class="hljs language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"style.css"</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/css"</span> /&gt;</span>
<span class="hljs-comment">&lt;!--&#91;if lte IE 6]&gt;
&lt;link href="ie.css" rel="stylesheet" type="text/css"  /&gt;
&lt;!&#91;endif]--&gt;</span>
</code></span></pre>


<h2 class="wp-block-heading">8. JavaScriptファイルは最後に読み込む</h2>



<p>（昔はhead要素内に記述するのが標準的でしたが）<br />
JavaScriptファイルを読み込むscript要素は&lt;/body&gt;の直前に記述すべきです。</p>



<h2 class="wp-block-heading">9. 要素の意味を考えてマークアップすること</h2>



<p>HTMLは文書構造を記述する為のマークアップ言語です。<br />
その内容に相応しい要素を以て記述しましょう。</p>



<h2 class="wp-block-heading">10. クロスブラウザを実現できるまでテストを重ねる</h2>



<p>普段から複数ブラウザでの動作チェックを怠らないようにする事で、<br />
結果的に効率化を図れるでしょう。</p>



<p>結構徹底出来てないケースもあったりするので、注意をせねば。<br />
1.とかはやっていないな…。</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<dl>
<dt>2010/8/30</dt>
<dd>7も違う手法でやってるな…</dd>
</dl>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>良い物だったら使えば良いよ</title>
		<link>https://blog.mach3.jp/2010/03/16/use-you-like.html</link>
		
		<dc:creator><![CDATA[mach3]]></dc:creator>
		<pubDate>Tue, 16 Mar 2010 15:05:00 +0000</pubDate>
				<category><![CDATA[Monologue]]></category>
		<guid isPermaLink="false">http://lab.mach3.jp/2010/03/16/%e8%89%af%e3%81%84%e7%89%a9%e3%81%a0%e3%81%a3%e3%81%9f%e3%82%89%e4%bd%bf%e3%81%88%e3%81%b0%e8%89%af%e3%81%84%e3%82%88.html</guid>

					<description><![CDATA[【レポート】Microsoft社内でiPhoneの利用は許されるか? &#8211; 従業員と幹部の間で大激論 (1) 社内に10,000人近いiPhoneユーザー &#124; パソコン &#124; マイコミジャーナル 社内従業員のシェ [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p><a href="http://journal.mycom.co.jp/articles/2010/03/15/ms_iphone/index.html">【レポート】Microsoft社内でiPhoneの利用は許されるか? &#8211;<br />
従業員と幹部の間で大激論 (1) 社内に10,000人近いiPhoneユーザー | パソコン | マイコミジャーナル</a></p>



<p>社内従業員のシェアにまで食い込んでくるほど魅力的な商品なのだからしょうがない。<br />
叩き壊すくらいなら、とことん使いつぶしてその魅力を解析し自社製品の質をあげるとかいう<br />
青臭いスポーツマンシップ（!?）でもメディアに露出した方が企業イメージあがると思うのですよ。</p>



<p>通信サービス等で自社サービスを使えというのはわからなくもないけど<br />
ハードの面で競合他社の製品を使わずして市場調査もないですよねえ。</p>



<p>最小単位な自営業を営む小生には、<br />
でかい得体の知れないものを背負わざるをえない大企業幹部の気持ちは<br />
到底理解出来ないのかもしれない。<br />
今更なんですけどね。</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
