-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
320 lines (306 loc) · 78.4 KB
/
index.html
File metadata and controls
320 lines (306 loc) · 78.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
<!DOCTYPE html><html><head><title>Верстающий Фатеж — Наверстай упущенное</title><meta name="viewport" content="width=device-width, initial-scale=1.0, ya-title=fade, ya-dock=fade"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-title" content="Фатеж"/><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/><meta name="theme-color" content="#ffffff"/><link rel="stylesheet" href="/stylesheets/application.css"/><link rel="apple-touch-icon" href="/images/touch-icon.png"/></head><body><script>document.body.className += " in-production"
</script><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-1522660-23', 'auto');
ga('send', 'pageview');
</script><div id="application-root"><table class="application_container" data-reactid=".giox8iss8w" data-react-checksum="1680400695"><tbody data-reactid=".giox8iss8w.0"><tr data-reactid=".giox8iss8w.0.0"><td class="application_header" data-reactid=".giox8iss8w.0.0.0"><h1 class="application_header-title" data-reactid=".giox8iss8w.0.0.0.0"><a class=" active" href="/" data-reactid=".giox8iss8w.0.0.0.0.0">Верстающий Фатеж</a></h1></td></tr><tr data-reactid=".giox8iss8w.0.1"><td data-reactid=".giox8iss8w.0.1.0"><section class="posts_list" data-reactid=".giox8iss8w.0.1.0.$=1$/"><article class="post" data-reactid=".giox8iss8w.0.1.0.$=1$/.$4-rspec-best-practices"><header class="post_header" data-reactid=".giox8iss8w.0.1.0.$=1$/.$4-rspec-best-practices.0"><h2 class="post_header-title" data-reactid=".giox8iss8w.0.1.0.$=1$/.$4-rspec-best-practices.0.0"><a class="" href="/posts/4-rspec-best-practices.html" data-reactid=".giox8iss8w.0.1.0.$=1$/.$4-rspec-best-practices.0.0.0">RSpec Best Practices 2015</a></h2><small class="post_header-date" data-reactid=".giox8iss8w.0.1.0.$=1$/.$4-rspec-best-practices.0.1">30 сентября 2015</small></header><section class="post-contents" data-reactid=".giox8iss8w.0.1.0.$=1$/.$4-rspec-best-practices.1"><p>Многие умеют писать тесты<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>но мало кто пишет хорошо. Конструкции знают<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>а получается шифровка:</p>
<pre><code class="lang-ruby"><span class="hljs-operator"><span class="hljs-keyword">describe</span> <span class="hljs-keyword">User</span> <span class="hljs-keyword">do</span>
<span class="hljs-keyword">describe</span> <span class="hljs-string">"#admin?"</span> <span class="hljs-keyword">do</span>
<span class="hljs-keyword">context</span> <span class="hljs-string">"when user is locked"</span> <span class="hljs-keyword">do</span>
# ...
<span class="hljs-keyword">end</span>
<span class="hljs-keyword">end</span>
<span class="hljs-keyword">end</span></span>
</code></pre>
<p>В этом посте я постараюсь показать<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>как писать понятные<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>интересные и насыщенные тесты с хорошей структурой.</p>
<h3 id="-">Не указывайте явно тестируемый метод</h3>
<p>Заинтересуйте читателя<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>сыграв на его инстинктах. Добавьте эмоций и местоимений:</p>
<pre><code class="lang-ruby"><span class="hljs-comment"># плохо</span>
describe <span class="hljs-string">".authenticate"</span>
describe <span class="hljs-string">"<span class="hljs-subst">#admin</span>?"</span>
</code></pre>
<pre><code class="lang-ruby"><span class="hljs-comment"># хорошо</span>
<span class="hljs-title">describe</span> <span class="hljs-string">"5 Crazy Methods To See Before You Die"</span>
describe <span class="hljs-string">"The One Weird Method That Lets You Write To File Atomically"</span>
</code></pre>
<h3 id="-context-">Не используйте <code>context</code></h3>
<p><code>context</code> добавляет вложенности и увеличивает цикломатическую сложность тестов. Не надо так.</p>
<pre><code class="lang-ruby"><span class="hljs-comment"># плохо</span>
context <span class="hljs-string">"when logged in"</span> <span class="hljs-built_in">do</span>
<span class="hljs-keyword">it</span> { is_expected.<span class="hljs-built_in">to</span> respond_with <span class="hljs-number">200</span> }
<span class="hljs-function"><span class="hljs-keyword">end</span>
<span class="hljs-title">context</span> "<span class="hljs-title">when</span> <span class="hljs-title">logged</span> <span class="hljs-title">out</span>" <span class="hljs-title">do</span></span>
<span class="hljs-keyword">it</span> { is_expected.<span class="hljs-built_in">to</span> respond_with <span class="hljs-number">401</span> }
<span class="hljs-keyword">end</span>
</code></pre>
<pre><code class="lang-ruby"># хорошо
it <span class="hljs-string">"has quite normal HTTP 200 status code if logged in"</span> <span class="hljs-keyword">do</span>
<span class="hljs-built_in">response</span>.should respond_with <span class="hljs-number">200</span>
<span class="hljs-keyword">end</span>
it <span class="hljs-string">"has absolutely insane HTTP 401 status code if not logged in"</span> <span class="hljs-keyword">do</span>
<span class="hljs-built_in">response</span>.should respond_with <span class="hljs-number">401</span>
<span class="hljs-keyword">end</span>
</code></pre>
<h3 id="-">Один тест — куча проверок</h3>
<p>Каждый тест должен производить несколько проверок. Так мы сэкономим время на запись и запуск проверок. Сравните:</p>
<pre><code class="lang-ruby"># плохо
<span class="hljs-operator"><span class="hljs-keyword">describe</span> <span class="hljs-string">"#reported_conclusion"</span> <span class="hljs-keyword">do</span>
subject { <span class="hljs-keyword">test</span>.reported_conclusion }
<span class="hljs-keyword">context</span> <span class="hljs-string">"when conclusion is true"</span> <span class="hljs-keyword">do</span>
<span class="hljs-keyword">before</span> { <span class="hljs-keyword">test</span>.conclusion = <span class="hljs-literal">true</span> }
it { is_expected.<span class="hljs-keyword">to</span> eq <span class="hljs-string">"Cool"</span> }
<span class="hljs-keyword">end</span>
<span class="hljs-keyword">context</span> <span class="hljs-string">"when conclusion is false"</span> <span class="hljs-keyword">do</span>
<span class="hljs-keyword">before</span> { <span class="hljs-keyword">test</span>.conclusion = <span class="hljs-literal">false</span> }
it { is_expected.<span class="hljs-keyword">to</span> eq <span class="hljs-string">"Not Cool"</span> }
<span class="hljs-keyword">end</span>
<span class="hljs-keyword">end</span></span>
</code></pre>
<pre><code class="lang-ruby"># хорошо
<span class="hljs-operator"><span class="hljs-keyword">describe</span> <span class="hljs-string">"That Conclusion Method All Humans Would Fall In Love"</span> <span class="hljs-keyword">do</span>
it <span class="hljs-string">"should be always correct"</span> <span class="hljs-keyword">do</span>
<span class="hljs-keyword">test</span>.conclusion = <span class="hljs-literal">true</span>
<span class="hljs-keyword">test</span>.reported_conclusion.should eq <span class="hljs-string">"Cool"</span>
<span class="hljs-keyword">test</span>.conclusion = <span class="hljs-literal">false</span>
<span class="hljs-keyword">test</span>.reported_conclusion.should eq <span class="hljs-string">"Not Cool"</span>
<span class="hljs-keyword">end</span>
<span class="hljs-keyword">end</span></span>
</code></pre>
<h3 id="-should-">Используйте <code>should</code></h3>
<p>Не пишите тексты тестов в третьем лице. Пусть сраный компьютер знает<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>что он обязан так работать: используйте <code>should</code>. Заодно потренируете скорость набора слова<span class="typograf-oa-sp-lquot"> </span><span class="typograf-oa-lquot">«</span>should». Точно пригодится!</p>
<pre><code class="lang-ruby"><span class="hljs-comment"># плохо</span>
<span class="hljs-keyword">it</span> <span class="hljs-string">"does not change timings"</span> do
expect(consumption.occur_at).<span class="hljs-keyword">to</span> <span class="hljs-keyword">equal</span>(valid.occur_at)
<span class="hljs-keyword">end</span>
</code></pre>
<pre><code class="lang-ruby"><span class="hljs-comment"># хорошо</span>
<span class="hljs-keyword">it</span> <span class="hljs-string">"should not change timings"</span> <span class="hljs-built_in">do</span>
consumption.occur_at.should == valid.occur_at
<span class="hljs-keyword">end</span>
</code></pre>
<p>Если вы используете данные советы<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>вам никогда не будет стыдно за написанное.</p></section><footer class="post_footer" data-reactid=".giox8iss8w.0.1.0.$=1$/.$4-rspec-best-practices.2"><section class="post_author" data-reactid=".giox8iss8w.0.1.0.$=1$/.$4-rspec-best-practices.2.0"><img src="/images/globa.jpg" alt="" class="post_author-img" data-reactid=".giox8iss8w.0.1.0.$=1$/.$4-rspec-best-practices.2.0.0"><h3 class="post_author-name" data-reactid=".giox8iss8w.0.1.0.$=1$/.$4-rspec-best-practices.2.0.1"><a href="https://vk.com/pavsekakii" data-reactid=".giox8iss8w.0.1.0.$=1$/.$4-rspec-best-practices.2.0.1.0">Павел Глобла</a></h3><p class="post_author-bio" data-reactid=".giox8iss8w.0.1.0.$=1$/.$4-rspec-best-practices.2.0.2">Clojure-разработчик, ушедший в Ruby. В детстве любил аттракцион «Осциллограф»</p></section></footer></article><article class="post" data-reactid=".giox8iss8w.0.1.0.$=1$/.$3-deprecate-your-css"><header class="post_header" data-reactid=".giox8iss8w.0.1.0.$=1$/.$3-deprecate-your-css.0"><h2 class="post_header-title" data-reactid=".giox8iss8w.0.1.0.$=1$/.$3-deprecate-your-css.0.0"><a class="" href="/posts/3-deprecate-your-css.html" data-reactid=".giox8iss8w.0.1.0.$=1$/.$3-deprecate-your-css.0.0.0">Заклинаю вас, откажитесь от CSS</a></h2><small class="post_header-date" data-reactid=".giox8iss8w.0.1.0.$=1$/.$3-deprecate-your-css.0.1">20 июня 2015</small></header><section class="post-contents" data-reactid=".giox8iss8w.0.1.0.$=1$/.$3-deprecate-your-css.1"><p>Вы веб-разработчик? Конечно<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>раз читаете наш журнал.</p>
<p>Откройте исходники последней сверстанной вами страницы. Сколько языков вы использовали? Скорее всего<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>там есть немного HTML<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>CSS<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>PHP<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>JavaScript или Node. Хватит пальцев одной руки<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>чтобы сосчитать. Но сможете ли вы писать код оставшимися свободными пальцами?</p>
<div class="outstanding">
<p>
Если вы не можете писать код<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>вы не программируете.
Если вы не программируете<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>вы не работаете.
Разработчиков увольняли и за меньшее.
</p>
</div>
<p>Попробуем разгрузить занятую руку<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>избавившись от одного из используемых языков. HTML можно заменить лишь на XML — шило на мыло. Без Node или PHP не обойтись. Остается CSS. К счастью<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>мы можем заменить его на Node.</p>
<h3 id="-">Немного истории</h3>
<p>CSS<span class="typograf-oa-sp-lbracket"> </span><span class="typograf-oa-lbracket">(</span>California Style Sheets) — это стандарт. Есть группа ребят в W3School<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>которые каждый год придумывают новые свойства<span class="typograf-oa-sp-lbracket"> </span><span class="typograf-oa-lbracket">(</span>например<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span><code>border-radius</code> и <code>box-shadow</code>). Долгое время они не знали<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>что Node группа из W3School придумала свой способ написания стилей без CSS. Недавно они встретились<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>увидели похожий функционал и выкинули CSS. Так появился HTML5.</p>
<p>Все больше и больше разработчиков используют HTML5<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>но не подозревают<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>что CSS не нужен.</p>
<h3 id="css-node">CSS -> Node</h3>
<p>Переезд с CSS на Node прост и интуитивно понятен. Откройте <code>.js</code> файл и добавьте инструкции для изменения стилей элемента. Взгляните на CSS для изменения цвета и паддинга элемента с <code>id="gulp"</code>:</p>
<pre><code class="lang-css"><span class="hljs-id">#gulp</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">color </span>:<span class="hljs-value"> <span class="hljs-hexcolor">#0000ff</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">padding </span>:<span class="hljs-value"> <span class="hljs-number">10px</span></span></span>;
}</span>
</code></pre>
<p>4 строки и 13 пробелов. На Node:</p>
<pre><code class="lang-javascript"><span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'gulp'</span>).style.color=<span class="hljs-string">'#00f'</span>;
<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'gulp'</span>).style.padding=<span class="hljs-string">'10px'</span>;
</code></pre>
<p>2 строки и 0 пробелов. Меньше строк<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>меньше пробелов<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>меньше файлов<span class="typograf-oa-sp-lbracket"> </span><span class="typograf-oa-lbracket">(</span>удалите оставшийся <code>.css</code>)!</p>
<h3 id="-css">Будущее CSS</h3>
<p>Вспомните <code><blink></code> и <code><marquee></code>. Браузеры скоро перестанут поддерживать CSS. Чем быстрее вы начнете использовать HTML5<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>тем дольше проживут ваши проекты.</p>
<p>Настало время освободить наши пальцы и вернуть нам наши пробелы. Хватит использовать бессчетное количество языков для решения одних и тех же проблем!</p></section><footer class="post_footer" data-reactid=".giox8iss8w.0.1.0.$=1$/.$3-deprecate-your-css.2"><section class="post_author" data-reactid=".giox8iss8w.0.1.0.$=1$/.$3-deprecate-your-css.2.0"><img src="/images/jenn.jpeg" alt="" class="post_author-img" data-reactid=".giox8iss8w.0.1.0.$=1$/.$3-deprecate-your-css.2.0.0"><h3 class="post_author-name" data-reactid=".giox8iss8w.0.1.0.$=1$/.$3-deprecate-your-css.2.0.1"><a href="https://medium.com/cool-code-pal/a-call-for-web-developers-to-deprecate-their-css-1f6430781393" data-reactid=".giox8iss8w.0.1.0.$=1$/.$3-deprecate-your-css.2.0.1.0">Джен Шиффер</a></h3><p class="post_author-bio" data-reactid=".giox8iss8w.0.1.0.$=1$/.$3-deprecate-your-css.2.0.2">Веб-разработчик, теоретик сложных вычислений. Автор “PHP: The Hood Parts” и других программно-фантастических бестселлеров на Amazon Kindle и Zune</p></section></footer></article><article class="post" data-reactid=".giox8iss8w.0.1.0.$=1$/.$3-top-5-css-mistakes"><header class="post_header" data-reactid=".giox8iss8w.0.1.0.$=1$/.$3-top-5-css-mistakes.0"><h2 class="post_header-title" data-reactid=".giox8iss8w.0.1.0.$=1$/.$3-top-5-css-mistakes.0.0"><a class="" href="/posts/3-top-5-css-mistakes.html" data-reactid=".giox8iss8w.0.1.0.$=1$/.$3-top-5-css-mistakes.0.0.0">Топ 5 ошибок в CSS</a></h2><small class="post_header-date" data-reactid=".giox8iss8w.0.1.0.$=1$/.$3-top-5-css-mistakes.0.1">20 июня 2015</small></header><section class="post-contents" data-reactid=".giox8iss8w.0.1.0.$=1$/.$3-top-5-css-mistakes.1"><p>Хоть я и с Восточного побережья<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>я — бэкенд-разработчик и эксперт по California Style Sheets. Работал над фронтендом облачных приложений 19 минут<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>но уже научился многому. Не делаю ошибок<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>которые допускают самые лучшие и опытные разработчики. Вот топ 5 ошибок в C.S.S<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>которых следует избегать<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>чтобы сберечь время.</p>
<h3 id="-">Недостаточно специфичные селекторы</h3>
<p>Классы — для одинаковых элементов. Одинаковые элементы — это большая проблема с избыточностью данных. Используйте идентификаторы для всего<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>потому что все на странице должно быть <em>уникальным</em>.</p>
<pre><code class="lang-css"><span class="hljs-comment">/* Плохо */</span>
<span class="hljs-class">.pull-quote</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">font-style</span>:<span class="hljs-value"> italic</span></span>;
}</span>
<span class="hljs-comment">/* Хорошо */</span>
<span class="hljs-id">#first-pull-quote-about-pizza-with-sausage</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">font-style</span>:<span class="hljs-value"> italic</span></span>;
}</span>
</code></pre>
<h3 id="-">Виртуальные единицы измерения</h3>
<p><code>px</code>, <code>pt</code>, <code>em</code> — виртуальные единицы измерения. Ими не измерить объекты из реального мира. Раз программисты пишут в объектно-ориентированном стиле<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>используйте единицы измерения<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>соответствующие объектам. Если картинка в длину ровно три хот-дога<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>то и в C.S.S используйте эту единицу измерения. Семантика<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>старичок!</p>
<pre><code class="lang-css"><span class="hljs-comment">/* Плохо */</span>
<span class="hljs-tag">img</span><span class="hljs-id">#first-image-of-three-hot-dogs-laid-end-to-end</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">50px</span></span></span>;
}</span>
<span class="hljs-comment">/* Хорошо */</span>
<span class="hljs-tag">img</span><span class="hljs-id">#first-image-of-three-hot-dogs-laid-end-to-end</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> .<span class="hljs-number">5</span>threehotdogslaidendtoend</span></span>;
}</span>
</code></pre>
<h3 id="-">Лаконичные имена у идентификаторов</h3>
<p>Мы создаем более семантичный Интернет<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>поэтому код должен рассказывать больше о контенте. Используйте дополнительные идентификаторы<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>чтобы рассказать больше о контенте. Даже если не пользуетесь ими в C.S.S или JarvisScript<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>используйте их ради доступности сайта:</p>
<pre><code class="lang-html"><span class="hljs-comment"><!-- Плохо --></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"hotdogs.bmp"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"three-hot-dogs-laid-end-to-end"</span> /></span>
</code></pre>
<p>Почему именно три хот-дога? Что произошло? Пользователю нужно больше информации. Добавьте идентификаторы<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>чтобы ответить на вопросы и рассказать всю историю. Разделяйте их пробелами<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>как учил нас сэр Тим Бернерс-Ли:</p>
<pre><code class="lang-html"><span class="hljs-comment"><!-- Хорошо --></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"hotdogs.bmp"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"three-hot-dogs-laid-end-to-end because-they-fell-that-way after-my-cat-tripped-me"</span> /></span>
</code></pre>
<h3 id="-css-">Весь CSS в одном месте</h3>
<p>Нерадивые программисты советуют держать весь C.S.S в одном файле. Если этот файл будет недоступен<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>то сайт останется без дизайна. Чтобы избежать этого<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>раскидайте C.S.S по разным файлам и добавьте их в <code><head></code> и в <code><style></code>.</p>
<h3 id="-">Правила без приоритетов</h3>
<p>Часть правил C.S.S особенно важна. Используйте <code>!important</code>, чтобы указать браузеру<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>какое правило он должен использовать в случае сомнений.</p>
<p>Кроме того<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>если вы не используете <code>!important</code>, как ваш начальник узнает<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>что вы пишете код важный для проекта?</p></section><footer class="post_footer" data-reactid=".giox8iss8w.0.1.0.$=1$/.$3-top-5-css-mistakes.2"><section class="post_author" data-reactid=".giox8iss8w.0.1.0.$=1$/.$3-top-5-css-mistakes.2.0"><img src="/images/jenn.jpeg" alt="" class="post_author-img" data-reactid=".giox8iss8w.0.1.0.$=1$/.$3-top-5-css-mistakes.2.0.0"><h3 class="post_author-name" data-reactid=".giox8iss8w.0.1.0.$=1$/.$3-top-5-css-mistakes.2.0.1"><a href="https://medium.com/cool-code-pal/top-5-c-s-s-mistakes-to-avoid-before-you-die-ee3221e30f6c" data-reactid=".giox8iss8w.0.1.0.$=1$/.$3-top-5-css-mistakes.2.0.1.0">Джен Шиффер</a></h3><p class="post_author-bio" data-reactid=".giox8iss8w.0.1.0.$=1$/.$3-top-5-css-mistakes.2.0.2">Фотограф-любитель хот-догов</p></section></footer></article><article class="post" data-reactid=".giox8iss8w.0.1.0.$=1$/.$3-horoscope"><header class="post_header" data-reactid=".giox8iss8w.0.1.0.$=1$/.$3-horoscope.0"><h2 class="post_header-title" data-reactid=".giox8iss8w.0.1.0.$=1$/.$3-horoscope.0.0"><a class="" href="/posts/3-horoscope.html" data-reactid=".giox8iss8w.0.1.0.$=1$/.$3-horoscope.0.0.0">Рубрика. Советы от Павла Глоблы</a></h2><small class="post_header-date" data-reactid=".giox8iss8w.0.1.0.$=1$/.$3-horoscope.0.1">20 июня 2015</small></header><section class="post-contents" data-reactid=".giox8iss8w.0.1.0.$=1$/.$3-horoscope.1"><p><em>Овны</em>. Вы вдруг осознаете<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>как много написали велосипедов. Сможете пересчитать их по пальцам<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>хотя даже пальцев не хватит.</p>
<p><em>Тельцы</em>. Откроете в себе неожиданные способности — сможете писать на Clojure или предсказывать результаты билда.</p>
<p><em>Близнецы</em>. У вас начнется новый период. Или в проекте<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>или в карьере<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>или в диете.</p>
<p><em>Раки</em>. Сегодня вы чаще будете говорить<span class="typograf-oa-sp-lquot"> </span><span class="typograf-oa-lquot">«</span>спасибо», чем<span class="typograf-oa-sp-lquot"> </span><span class="typograf-oa-lquot">«</span>что за херню ты несешь». Это значит<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>что для вас сегодня будут больше стараться.</p>
<p><em>Львы</em>. Советуем вам хорошо отдохнуть<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>потому что вечером ожидается спонтанный бурный хакатон.</p>
<p><em>Девы</em>. Сегодня можете экспериментировать с собственным образом. Может быть вы скрам-мастер или Андроид-разработчик?</p>
<p><em>Весы</em>. Может произойти мелкая неприятность. Она будет настолько мелкой<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>что вы ее заметите уже в продакшене.</p>
<p><em>Скорпионы</em>. Ваша задача сегодня — дарить любовь и писать плагины к PostCSS. За это и вы будете в плюсе: получите открытку или партию поцелуев.</p>
<p><em>Стрельцы</em>. Развивайте чувство прекрасного. Это несложно. Обращайте внимание на все красивое. Например<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>на БЭМ или БЭМ.</p>
<p><em>Козероги</em>. Если у вас есть любимый человек — сделайте ему блог на Реакте<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>чтобы он посчитал сегодняшний день лучшим днем в своей жизни.</p>
<p><em>Водолеи</em>. У вас обострится восприятие<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>поэтому открывайте <code>Gruntfile.js</code> с осторожностью<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>а <code>gulpfile.js</code> вообще не открывайте.</p>
<p><em>Рыбы</em>. Обстоятельства будут складываться в вашу пользу. Скажите родителям<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>что больше не пишете на PHP<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>и сделайте это с уверенным видом.</p></section><footer class="post_footer" data-reactid=".giox8iss8w.0.1.0.$=1$/.$3-horoscope.2"><section class="post_author" data-reactid=".giox8iss8w.0.1.0.$=1$/.$3-horoscope.2.0"><img src="/images/globa.jpg" alt="" class="post_author-img" data-reactid=".giox8iss8w.0.1.0.$=1$/.$3-horoscope.2.0.0"><h3 class="post_author-name" data-reactid=".giox8iss8w.0.1.0.$=1$/.$3-horoscope.2.0.1"><a href="https://vk.com/pavsekakii" data-reactid=".giox8iss8w.0.1.0.$=1$/.$3-horoscope.2.0.1.0">Павел Глобла</a></h3><p class="post_author-bio" data-reactid=".giox8iss8w.0.1.0.$=1$/.$3-horoscope.2.0.2">Маг, экстрасенс, носитель положительной энергетики и трансцендентная личность</p></section></footer></article><article class="post" data-reactid=".giox8iss8w.0.1.0.$=1$/.$2-html5-table-api"><header class="post_header" data-reactid=".giox8iss8w.0.1.0.$=1$/.$2-html5-table-api.0"><h2 class="post_header-title" data-reactid=".giox8iss8w.0.1.0.$=1$/.$2-html5-table-api.0.0"><a class="" href="/posts/2-html5-table-api.html" data-reactid=".giox8iss8w.0.1.0.$=1$/.$2-html5-table-api.0.0.0">Введение в табличный API HTML5</a></h2><small class="post_header-date" data-reactid=".giox8iss8w.0.1.0.$=1$/.$2-html5-table-api.0.1">12 июня 2015</small></header><section class="post-contents" data-reactid=".giox8iss8w.0.1.0.$=1$/.$2-html5-table-api.1"><p>Создание сайтов с гибкой и устойчивой раскладкой — проблема<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>которой лет столько же<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>сколько и Интернету. Ее решают<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>делая раскладку дивами. Это работает<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>но это хак<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>не лишенный проблем:</p>
<ul>
<li>дивы несемантичны;</li>
<li>с ними используют сложный C.S.S<span class="typograf-oa-sp-lbracket"> </span><span class="typograf-oa-lbracket">(</span>California Style Sheet);</li>
<li>они неадаптивные;</li>
<li>у них есть проблемы с производительностью на мобильных устройствах;</li>
<li>поисковые роботы их не жалуют;</li>
<li>требуется jQuery<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>чтобы добавлять контент в дивы.</li>
</ul>
<p>Я наткнулся на новый табличный HTML5 API на сайте W3Schools<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>лучшем ресурсе для новичков и экспертов в веб-разработке. Знаю<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>вы сейчас думаете:<span class="typograf-oa-sp-lquot"> </span><span class="typograf-oa-lquot">«</span>Ну<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>уж<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>нет<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>я не буду использовать экспериментальный API в моем блоге». Согласен<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>но вот какая штука: Microsoft пропатчил свои старые браузеры<span class="typograf-oa-sp-lbracket"> </span><span class="typograf-oa-lbracket">(</span>IE5.5+) и добавил в них поддержку HTML5 таблиц. Можно использовать.</p>
<h3 id="-">Основы</h3>
<p>Если вы использовали CSS сетки на дивах<span class="typograf-oa-sp-lbracket"> </span><span class="typograf-oa-lbracket">(</span>DIV based CSS grids<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>DBCG), то для вас нет ничего нового в HTML5 таблицах.</p>
<p>HTML5 таблица состоит из трех частей. <code><table></code> — основа таблицы; <code><tr></code> — ее строка<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>а <code><tc></code> — колонка. Запомнить просто: <code><table></code> — table<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span><code><tr></code> — table row<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span><code><tc></code> — table column.</p>
<p>В DBCG таблицы<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>строки и колонки — это <code><div></code> элементы<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>уничтожающие иерархию и семантику контента. Не круто. Люди<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>верстающие так, — антисемантисты.</p>
<p>С таблицами мы заменяем дивы на их семмантически-верных родственников<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span><code><table></code>, <code><tr></code>, <code><td></code>. И не нужно никакого C.S.S: поддержка таблиц встроена в браузер.</p>
<h3 id="-">Пример</h3>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-title">table</span>></span>
<span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-title">h2</span>></span>row 1<span class="hljs-tag"></<span class="hljs-title">h2</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>left column<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>middle column<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>right column<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-title">h2</span>></span>row 1<span class="hljs-tag"></<span class="hljs-title">h2</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>left column<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>middle column<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>right column<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
<span class="hljs-tag"></<span class="hljs-title">table</span>></span>
</code></pre>
<p><img src="/images/table.png" alt="" /></p>
<p>Никакого C.S.S. Работает и масштабируется во всех браузерах. Да и выглядит великолепно.</p>
<h3 id="-">Это. Не. Можыд. Быт.</h3>
<p>У таблиц есть и проблемы: с ними тяжело начинать верстать. Чтобы помочь с этим<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>я создал <a href="http://downwith.us/tablr">Tablr</a>, табличный HTML5 фреймворк. Скачивайте<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>настраивайте и используйте в некоммерческих проектах. По запросу есть и коммерческие/корпоративные лицензии.</p>
<h3 id="-">Ответ<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>который мы ждали</h3>
<p>Microsoft услышала нас и дала инструмент для создания изящнейших сайтов. Это именно то<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>о чем мечтали разработчики. Я <em>верю</em> в таблицы.</p></section><footer class="post_footer" data-reactid=".giox8iss8w.0.1.0.$=1$/.$2-html5-table-api.2"><section class="post_author" data-reactid=".giox8iss8w.0.1.0.$=1$/.$2-html5-table-api.2.0"><img src="/images/nicolas.jpeg" alt="" class="post_author-img" data-reactid=".giox8iss8w.0.1.0.$=1$/.$2-html5-table-api.2.0.0"><h3 class="post_author-name" data-reactid=".giox8iss8w.0.1.0.$=1$/.$2-html5-table-api.2.0.1"><a href="https://medium.com/@p_arithmetic/introducing-the-html5-table-api-453a163a3265" data-reactid=".giox8iss8w.0.1.0.$=1$/.$2-html5-table-api.2.0.1.0">Николас Ортензио</a></h3><p class="post_author-bio" data-reactid=".giox8iss8w.0.1.0.$=1$/.$2-html5-table-api.2.0.2">разработчик, призер Олимпиады по ховерборду</p></section></footer></article><article class="post" data-reactid=".giox8iss8w.0.1.0.$=1$/.$2-js-hacks-for-faster-web"><header class="post_header" data-reactid=".giox8iss8w.0.1.0.$=1$/.$2-js-hacks-for-faster-web.0"><h2 class="post_header-title" data-reactid=".giox8iss8w.0.1.0.$=1$/.$2-js-hacks-for-faster-web.0.0"><a class="" href="/posts/2-js-hacks-for-faster-web.html" data-reactid=".giox8iss8w.0.1.0.$=1$/.$2-js-hacks-for-faster-web.0.0.0">4 фишки, чтобы сделать Javascript быстрее</a></h2><small class="post_header-date" data-reactid=".giox8iss8w.0.1.0.$=1$/.$2-js-hacks-for-faster-web.0.1">12 июня 2015</small></header><section class="post-contents" data-reactid=".giox8iss8w.0.1.0.$=1$/.$2-js-hacks-for-faster-web.1"><h3 id="-">Избавьтесь от вложенных циклов</h3>
<p>Вложенные циклы имеют вычислительную сложность O<span class="typograf-oa-sp-lbracket"> </span><span class="typograf-oa-lbracket">(</span>n^2). Если у вас <code>n</code> элементов<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>то цикл выполнится за <code>n*n</code> секунд.</p>
<pre><code class="lang-javascript"><span class="hljs-comment">// из-за того, что цикл вложенный,</span>
<span class="hljs-comment">// он будет выполняться 100 секунд</span>
<span class="hljs-keyword">for</span> (var i=<span class="hljs-number">0</span>; i<<span class="hljs-number">10</span>; i+=<span class="hljs-number">1</span>) {
<span class="hljs-keyword">for</span> (var j=<span class="hljs-number">0</span>; j<<span class="hljs-number">10</span>; j+=<span class="hljs-number">1</span>) {
console.<span class="hljs-built_in">log</span>(i, j);
}
}
</code></pre>
<p>В реальных приложениях<span class="typograf-oa-sp-lbracket"> </span><span class="typograf-oa-lbracket">(</span>например<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>в софте для МРТ<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>над которым я работаю) такие временные затраты недопустимы. Чтобы код выполнялся в два раза быстрее<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>давайте развернем вложенный цикл:</p>
<pre><code class="lang-javascript"><span class="hljs-comment">// хорошо</span>
<span class="hljs-keyword">for</span> (var i=<span class="hljs-number">0</span>, j=<span class="hljs-number">0</span>; i<<span class="hljs-number">10</span> && j<<span class="hljs-number">10</span>; j++, i=(j==<span class="hljs-number">10</span>)?i+<span class="hljs-number">1</span>:i,j=(j==<span class="hljs-number">10</span>)?j=<span class="hljs-number">0</span>:j) {
console.<span class="hljs-built_in">log</span>(i, j);
}
</code></pre>
<p><em>Совет от профессионала</em>: избавьтесь от тела цикла<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>чтобы сделать код еще быстрее.</p>
<pre><code class="lang-javascript"><span class="hljs-comment">// великолепно</span>
<span class="hljs-keyword">for</span> (var i=<span class="hljs-number">0</span>, j=<span class="hljs-number">0</span>; i<<span class="hljs-number">10</span> && j<<span class="hljs-number">10</span>; j++, i=(j==<span class="hljs-number">10</span>)?i+<span class="hljs-number">1</span>:i,j=(j==<span class="hljs-number">10</span>)?j=<span class="hljs-number">0</span>:j, console.<span class="hljs-built_in">log</span>(i, j)) { }
</code></pre>
<h3 id="-">Сдвиг влево вместо умножения</h3>
<p>На молекулярном уровне компьютеры могут лишь складывать<span class="typograf-oa-sp-lbracket"> </span><span class="typograf-oa-lbracket">(</span>да и то у них получается не очень). Компьютеры умножают с помощью логарифмических таблиц и угадывания. Быстрые процессоры быстро угадывают правильный результат.</p>
<p>Вместо умножения используйте побитовый сдвиг влево. Он чуть сложнее<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>но к нему быстро привыкаешь. Формула для умножения <code>x*y</code> проста: <code>x << (y - 1)</code>.</p>
<pre><code class="lang-javascript"><span class="hljs-comment">// умножить на 1</span>
[<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>,<span class="hljs-number">4</span>].forEach(function(n){ <span class="hljs-keyword">return</span> n<<<span class="hljs-number">0</span>; }) <span class="hljs-comment">// 1,2,3,4</span>
<span class="hljs-comment">// умножить на 2</span>
[<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>,<span class="hljs-number">4</span>].forEach(function(n){ <span class="hljs-keyword">return</span> n<<<span class="hljs-number">1</span>; }) <span class="hljs-comment">// 2,4,6,8</span>
<span class="hljs-comment">// умножить на 3</span>
[<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>,<span class="hljs-number">4</span>].forEach(function(n){ <span class="hljs-keyword">return</span> n<<<span class="hljs-number">2</span>; }) <span class="hljs-comment">// 3,6,9,12</span>
</code></pre>
<h3 id="-">Округляйте числа перед умножением</h3>
<p>Трюк выше работает для целых чисел<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>но не работает для чисел с плавающей точкой. Компьютер будет умножать <code>9.52434123 * 2</code> целую вечность<span class="typograf-oa-sp-lbracket"> </span><span class="typograf-oa-lbracket">(</span>в миллисекундах). Чтобы ускорить такие операции<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>пожертвуйте точностью и округлите число с помощью <code>toFixed</code>:</p>
<pre><code class="lang-javascript"><span class="hljs-comment">// примерно то же самое, но работает гораздо быстрее</span>
<span class="hljs-number">9.52434123</span> * <span class="hljs-number">2</span>
<span class="hljs-number">9.52434123</span>.toFixed(<span class="hljs-number">2</span>) * <span class="hljs-number">2</span>
</code></pre>
<h3 id="-firefox-">Добавьте ссылку<span class="typograf-oa-sp-lquot"> </span><span class="typograf-oa-lquot">«</span>Скачать Firefox» на каждую страницу сайта</h3>
<p>Вместо того<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>чтобы оптимизировать код<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>попросите пользователей использовать Firefox вместо Internet Explorer. Firefox — самый быстрый в мире браузер. Призывайте пользователей перейти на него с помощью картинки:</p>
<p><img src="/images/ff.jpeg" alt="" /></p></section><footer class="post_footer" data-reactid=".giox8iss8w.0.1.0.$=1$/.$2-js-hacks-for-faster-web.2"><section class="post_author" data-reactid=".giox8iss8w.0.1.0.$=1$/.$2-js-hacks-for-faster-web.2.0"><img src="/images/nicolas.jpeg" alt="" class="post_author-img" data-reactid=".giox8iss8w.0.1.0.$=1$/.$2-js-hacks-for-faster-web.2.0.0"><h3 class="post_author-name" data-reactid=".giox8iss8w.0.1.0.$=1$/.$2-js-hacks-for-faster-web.2.0.1"><a href="https://medium.com/@p_arithmetic/4-more-javascript-hacks-to-make-your-javascript-faster-1f5fd88a219e" data-reactid=".giox8iss8w.0.1.0.$=1$/.$2-js-hacks-for-faster-web.2.0.1.0">Николас Ортензио</a></h3><p class="post_author-bio" data-reactid=".giox8iss8w.0.1.0.$=1$/.$2-js-hacks-for-faster-web.2.0.2">Разработчик со сложной фамилией</p></section></footer></article><article class="post" data-reactid=".giox8iss8w.0.1.0.$=1$/.$2-chairborn"><header class="post_header" data-reactid=".giox8iss8w.0.1.0.$=1$/.$2-chairborn.0"><h2 class="post_header-title" data-reactid=".giox8iss8w.0.1.0.$=1$/.$2-chairborn.0.0"><a class="" href="/posts/2-chairborn.html" data-reactid=".giox8iss8w.0.1.0.$=1$/.$2-chairborn.0.0.0">Рубрика. Диванный эксперт</a></h2><small class="post_header-date" data-reactid=".giox8iss8w.0.1.0.$=1$/.$2-chairborn.0.1">12 июня 2015</small></header><section class="post-contents" data-reactid=".giox8iss8w.0.1.0.$=1$/.$2-chairborn.1"><p>Вот пользуюсь я CSS для построения дизайна на страницах. Уже настолько привык. Есть конечно некоторые заморочки и как обычно всё приходит с опытом.</p>
<p>Ну, а вопрос на сегодняшний день у меня такой. Постоянно при построении каких-либо дизайнерских решений мне приходилось<span class="typograf-oa-sp-lbracket"> </span><span class="typograf-oa-lbracket">(</span>по требованию клиентов) использовать Flash. Практически всегда это либо шапка<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>либо подвал. Иногда приходилось втавлять какие нить штучки в то или иное место<span class="typograf-oa-sp-lbracket"> </span><span class="typograf-oa-lbracket">(</span>звёздочки<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>лого и прочие интро вставки).</p>
<p>С переходом же на CSS я упростил себе жизнь<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>но мне приходится отказываться от многих клиентов именно потому<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>что я не использую технологию Flash. Неужели эту технологию никак нельзя использовать при описании стилей или же каким-то обходным путём<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>или может быть ведуться какие-либо разработки в следующих версиях CSS?</p>
<p>Пытался использовать PHP. Получается<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>но не всегда. Сегодня они хотят<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>чтобы эти ссылки в подменю были текстовыми<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>завтра говорят<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>давайте заменить на картинки<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>а послезавтра лучше Flash и вставим вообще в другое место.</p>
<p>Короче как я понял CSS с Flash совершенно не дружит. Очень жаль. Было бы удобно если бы вместо статики можно было бы использовать Flash и опелировать теми же описанимями.</p>
<p>Всё ясно. Как и была глухомань в этом направлении<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>так и осталась. Flash в Web дизайне используется уже не знаю сколько давно<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>а CSS как был древним<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>так и остался и не понять зачем тогда все эти CSS2<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>3? Добавили пару фишек и ОООО … CSS2 … добавили ещё парочку и ААААХ CSS3. А толку. Древность как была<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>так и есть</p></section><footer class="post_footer" data-reactid=".giox8iss8w.0.1.0.$=1$/.$2-chairborn.2"><section class="post_author" data-reactid=".giox8iss8w.0.1.0.$=1$/.$2-chairborn.2.0"><img src="/images/chairborn.jpg" alt="" class="post_author-img" data-reactid=".giox8iss8w.0.1.0.$=1$/.$2-chairborn.2.0.0"><h3 class="post_author-name" data-reactid=".giox8iss8w.0.1.0.$=1$/.$2-chairborn.2.0.1"><a href="http://pytalk.ru/forum/web/441/" data-reactid=".giox8iss8w.0.1.0.$=1$/.$2-chairborn.2.0.1.0">JawsIk</a></h3><p class="post_author-bio" data-reactid=".giox8iss8w.0.1.0.$=1$/.$2-chairborn.2.0.2">Активный человек, работающий в CSS и Flash</p></section></footer></article><article class="post" data-reactid=".giox8iss8w.0.1.0.$=1$/.$1-responsive-images-finally"><header class="post_header" data-reactid=".giox8iss8w.0.1.0.$=1$/.$1-responsive-images-finally.0"><h2 class="post_header-title" data-reactid=".giox8iss8w.0.1.0.$=1$/.$1-responsive-images-finally.0.0"><a class="" href="/posts/1-responsive-images-finally.html" data-reactid=".giox8iss8w.0.1.0.$=1$/.$1-responsive-images-finally.0.0.0">Отзывчивые изображения. Наконец-то</a></h2><small class="post_header-date" data-reactid=".giox8iss8w.0.1.0.$=1$/.$1-responsive-images-finally.0.1">30 мая 2015</small></header><section class="post-contents" data-reactid=".giox8iss8w.0.1.0.$=1$/.$1-responsive-images-finally.1"><blockquote>
Самая сложная проблема программирования — отзывчивые изображения
<footer>
— <cite>Рудольф Джулиани</cite>
</footer>
</blockquote>
<p>Вопросу отзывчивых изображений больше десяти лет. После бума доткомов в начале двухтысячных неунывающие разработчики присоединились к <nobr>Веб 2.0</nobr>. Изображения снова стали самой важной частью сайтов и веб-приложений.</p>
<p>Из-за огромного количества девайсов<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>размеров и разрешений экрана мы<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>разработчики<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>остро нуждаемся в решении для загрузки отзывчивых изображений без влияния на скорость и загрузку страницы. К счастью<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>после жарких споров между W3C<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>Kodak и Стивом Балмером у нас наконец-то есть такое решение. Балмер неофициально называет его<span class="typograf-oa-sp-lquot"> </span><span class="typograf-oa-lquot">«</span>Спроси-у-копа».</p>
<p><span class="typograf-oa-n-lquot">«</span>Если вы спросите кого-нибудь<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>полицейский он или нет. Ему придется ответить. Так же и с изображениями. Спросите у сайта<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>какого размера ему нужны изображения. И он ответит» — так объяснил Балмер новую спецификацию для отзывчивых изображений на пресс-конференции.</p>
<p>Я реализовала спецификацию за вас. Не благодарите. Когда вы заходите на страницу<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>вы должны ответить<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>какое у вас устройство: обыкновенный компьютер или мобильник. И в зависимости от ответа<span class="typograf-oa-sp-lbracket"> </span><span class="typograf-oa-lbracket">(</span>а вы обязаны ответить честно<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>это закон) сайт покажет вам правильное изображение.</p>
<p>Код<span class="typograf-oa-sp-lbracket"> </span><span class="typograf-oa-lbracket">(</span><a href="https://github.com/cssperverts/Ask-a-Cop-Responsive-Images-Solution">форкайте на Гитхабе</a>) использует два популярных <nobr>Веб 2.0</nobr> концепта:<span class="typograf-oa-sp-lquot"> </span><span class="typograf-oa-lquot">«</span>switch» и<span class="typograf-oa-sp-lquot"> </span><span class="typograf-oa-lquot">«</span>jQuery», чтобы убедиться<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>что пользователь говорит правду насчет размера устройства<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>и показать правильное изображение.</p>
<pre><code class="lang-javascript">var mobileOrDesktop = prompt(<span class="hljs-string">"Is this a mobile device (y) or desktop (n)? y/n"</span>);
var <span class="hljs-variable">$responsiveImage</span> = $(<span class="hljs-string">'img#responsive'</span>);
<span class="hljs-keyword">switch</span> ( mobileOrDesktop ) {
case <span class="hljs-string">'y'</span>:
<span class="hljs-variable">$responsiveImage</span>.attr({
<span class="hljs-string">'src'</span> : <span class="hljs-string">'mobile.jpg'</span>,
<span class="hljs-string">'alt'</span> : <span class="hljs-string">'mobile image'</span>
});
break;
case <span class="hljs-string">'n'</span>:
<span class="hljs-variable">$responsiveImage</span>.attr({
<span class="hljs-string">'src'</span> : <span class="hljs-string">'desktop.jpg'</span>,
<span class="hljs-string">'alt'</span> : <span class="hljs-string">'desktop image'</span>
});
break;
default:
<span class="hljs-variable">$responsiveImage</span>.attr({
<span class="hljs-string">'src'</span> : <span class="hljs-string">'trojanhorse.jpg'</span>,
<span class="hljs-string">'alt'</span> : <span class="hljs-string">'hack the planet'</span>
});
<span class="hljs-variable">$responsiveImage</span>.after(<span class="hljs-string">'<h1>TOLD YA TO CHOOSE Y OR NO BUT YOU DIDN\'</span>T SO<br />~ * V I R U S * ~<span class="hljs-string">');
break;
}</span>
</code></pre>
<p><img src="/images/responsive-demo.jpeg" alt="" /></p>
<p>Все мы очень долго ждали решения для отзывчивых изображений. Здорово<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>что решение<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>к которому пришли разработчики и производители браузеров<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>такое простое. Простое как для разработчика<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>так и для пользователя.</p></section><footer class="post_footer" data-reactid=".giox8iss8w.0.1.0.$=1$/.$1-responsive-images-finally.2"><section class="post_author" data-reactid=".giox8iss8w.0.1.0.$=1$/.$1-responsive-images-finally.2.0"><img src="/images/jenn.jpeg" alt="" class="post_author-img" data-reactid=".giox8iss8w.0.1.0.$=1$/.$1-responsive-images-finally.2.0.0"><h3 class="post_author-name" data-reactid=".giox8iss8w.0.1.0.$=1$/.$1-responsive-images-finally.2.0.1"><a href="https://medium.com/cool-code-pal/a-client-side-responsive-image-solution-finally-d9a47f94eea7" data-reactid=".giox8iss8w.0.1.0.$=1$/.$1-responsive-images-finally.2.0.1.0">Джен Шиффер</a></h3><p class="post_author-bio" data-reactid=".giox8iss8w.0.1.0.$=1$/.$1-responsive-images-finally.2.0.2">Недавно была включена в список Форбс «Топ 9 людей в ИТ, которым однажды было 9»</p></section></footer></article><article class="post" data-reactid=".giox8iss8w.0.1.0.$=1$/.$1-two-factor-css"><header class="post_header" data-reactid=".giox8iss8w.0.1.0.$=1$/.$1-two-factor-css.0"><h2 class="post_header-title" data-reactid=".giox8iss8w.0.1.0.$=1$/.$1-two-factor-css.0.0"><a class="" href="/posts/1-two-factor-css.html" data-reactid=".giox8iss8w.0.1.0.$=1$/.$1-two-factor-css.0.0.0">Двухфакторный препроцессинг CSS</a></h2><small class="post_header-date" data-reactid=".giox8iss8w.0.1.0.$=1$/.$1-two-factor-css.0.1">30 мая 2015</small></header><section class="post-contents" data-reactid=".giox8iss8w.0.1.0.$=1$/.$1-two-factor-css.1"><p>CSS — язык программирования для форматирования HTML элементов без помощи JavaScript или Node.js. Выпущенный 17 лет назад<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>он буквально изменил внешний вид сайтов и веб-приложений. Как и вы в подростковом возрасте<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>CSS хотел быть самым крутым языком программирования на районе. Так появились препроцессоры.</p>
<p>Sass<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>Less<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>ZendPHP<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>Stylus оптимизировали и улучшили процесс верстки с CSS. Но с ними есть и проблемы:</p>
<ul>
<li>компиляция — бессмысленная трата времени;</li>
<li>надо переключаться между окнами с исходным и скомпилированным кодом. Бесполезная трата времени и экрана;</li>
<li>они не предотвращают ошибки. Все мы люди<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>и все мы совершаем ошибки. Но узнаем о них<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>когда они уже в браузере.</li>
</ul>
<p>Я предлагаю самый лучший тип препроцессоров — двухфакторный браузерный CSS препроцессинг.</p>
<div class="outstanding">
<p>
Двухфакторный браузерный CSS препроцессинг.<br />Да потому что мы можем.
</p>
</div>
<p>Двухфакторный браузерный CSS препроцессинг<span class="typograf-oa-sp-lbracket"> </span><span class="typograf-oa-lbracket">(</span>ДФБЦП) состоит из двух компонентов: двухфакторинг и браузер.</p>
<p>Первый фактор — CSS. Например,<span class="typograf-oa-sp-lquot"> </span><span class="typograf-oa-lquot">«</span>мой_сайт.css»:</p>
<pre><code class="lang-css"><span class="hljs-tag">body</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">font-weight</span>:<span class="hljs-value"> bold</span></span>; <span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"> <span class="hljs-number">20pt</span></span></span>; }</span>
<span class="hljs-tag">img</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">border</span>:<span class="hljs-value"> <span class="hljs-number">1px</span> solid lime</span></span>; }</span>
</code></pre>
<p>Второй фактор добавляем прямо в HTML<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>взгляните на<span class="typograf-oa-sp-lquot"> </span><span class="typograf-oa-lquot">«</span>главная.html»:</p>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-title">html</span>></span>
<span class="hljs-tag"><<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylescripts"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"мой_сайт.css"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/css"</span> /></span>
<span class="hljs-tag"></<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">body</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">"font-weight:bold; font-size: 20pt; "</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"myimage.png"</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">"border: 1px solid magenta;"</span> <span class="hljs-attribute">alt</span>=<span class="hljs-value">""</span> /></span>
<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span>
</code></pre>
<p>Обратите внимание: второй фактор<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>встроенные стили<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>делает границу <em>пурпурной</em>. Значение <code>lime</code> в исходном CSS было человеческой ошибкой<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>которую исправил второй фактор.</p>
<p>Вынося CSS из HTML и встраивая его в HTML<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>мы получаем резервную проверку стилей. Кроме того<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>мы не тратили время на компиляцию CSS и установку препроцессоров<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>потому что все происходило в браузере!</p>
<p>В последнее время браузеры стали более умнее. Как и веб-разработчики. Самое время показать<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>какие мы умные<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>развивая препроцессоры<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>которыми пользовались наши предки.</p>
<p>Двухфакторный браузерный CSS препроцессинг — это только начало.</p></section><footer class="post_footer" data-reactid=".giox8iss8w.0.1.0.$=1$/.$1-two-factor-css.2"><section class="post_author" data-reactid=".giox8iss8w.0.1.0.$=1$/.$1-two-factor-css.2.0"><img src="/images/jenn.jpeg" alt="" class="post_author-img" data-reactid=".giox8iss8w.0.1.0.$=1$/.$1-two-factor-css.2.0.0"><h3 class="post_author-name" data-reactid=".giox8iss8w.0.1.0.$=1$/.$1-two-factor-css.2.0.1"><a href="https://medium.com/cool-code-pal/an-introduction-to-two-factor-in-browser-css-preprocessing-e32792e56b53" data-reactid=".giox8iss8w.0.1.0.$=1$/.$1-two-factor-css.2.0.1.0">Джен Шиффер</a></h3><p class="post_author-bio" data-reactid=".giox8iss8w.0.1.0.$=1$/.$1-two-factor-css.2.0.2">Автор бестселлера «Как CSS убил RSS»</p></section></footer></article><article class="post" data-reactid=".giox8iss8w.0.1.0.$=1$/.$1-chairborn"><header class="post_header" data-reactid=".giox8iss8w.0.1.0.$=1$/.$1-chairborn.0"><h2 class="post_header-title" data-reactid=".giox8iss8w.0.1.0.$=1$/.$1-chairborn.0.0"><a class="" href="/posts/1-chairborn.html" data-reactid=".giox8iss8w.0.1.0.$=1$/.$1-chairborn.0.0.0">Рубрика. Диванный эксперт</a></h2><small class="post_header-date" data-reactid=".giox8iss8w.0.1.0.$=1$/.$1-chairborn.0.1">30 мая 2015</small></header><section class="post-contents" data-reactid=".giox8iss8w.0.1.0.$=1$/.$1-chairborn.1"><p>Немного подумав о роли HTML5<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>я пришёл к выводу<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>что она вряд ли задержит приход XML и поможет чем-то МС<span class="typograf-oa-sp-lbracket"> </span><span class="typograf-oa-lbracket">(</span>Майкрософт). Поскольку я сам политикан-менеджер-маркетоид<span class="typograf-oa-sp-lbracket"> </span><span class="typograf-oa-lbracket">(</span>и по образованию и по работе; вэб-девелопером я стал при весьма своеобразных обстоятельствах<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>очень уж любил это дело со школы<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>да вот склалось заняться только после 25 лет), то моим выводам можно доверять.</p>
<p>Представив расстановку сил<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>я понял<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>что<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>скорее всего<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>в результате консультаций Вэб-консорциума с МС последние выдвинули условие своей любимой обратной совместимости. Наверняка они пригрозили<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>что если не будет стандарта<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>который эту совместимость обеспечит<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>они создадут свой. Фактически<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>бескомпромиссный переход к XHTML 2.0 спровоцировал бы МС к возвращению на тропу войны стандартов. Вэб-консорциуму это не надо. Единственным решением было всё же как-то обеспечить эту пресловутую обратную совместимость.</p>
<p>Такова реальность. Оценим<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>к чему это приведёт. Лично я склонен считать<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>что это был один из самых грубых стратегических промахов МС. Обосновываю. Давно известно: не можешь противостоять течению — возглавь его. А МС по глупости своей пытается противостоять неизбежному. Ну дай им Бог<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>пускай потратят финансовые ресурсы на войну с ветряными мельницами. Вообще<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>они совсем не учатся на своих ошибках. Сколько человеко-тысячелетий они вложили в разработку ИИСа и АСПа? И где всё это теперь? Опять не доходит… Взялись за.Нет. Ну-ну… Они всегда говорят: " Наш потребитель — это пользователь. А на девелоперов нам плевать<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>не они нам деньги платят" . Ой-ёй<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>как же они тут прокололись! И так ничего и не поняли. Теперь плюют на вэб-девелоперов<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>скорее уже вынужденно. И чего они достигнут? Оттянут неизбежное<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>потратят время и ресурсы и придут к кризисному моменту<span class="typograf-oa-sp-lbracket"> </span><span class="typograf-oa-lbracket">(</span>а он будет обязательно!) в ещё более ослабленном состоянии. Это вместо того<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>чтобы прямо сегодня начать заниматься делом.</p>
<p>Ну и дай им бог! Может ИЕ наконец накернится… Когда их Колобок уйдёт с лидирующих позиций<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>проблемы с поддержкой новых стандартов решатся автоматически. Да и вообще многое станет проще. Так что уступка Вэб-консорциума<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>скорее всего<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>окажется для них медвежьей услугой<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>хотя Консорциум вряд ли ставил такую цель. В общем<span class="typograf-oa-comma">,</span><span class="typograf-oa-comma-sp"> </span>жизнь покажет…</p></section><footer class="post_footer" data-reactid=".giox8iss8w.0.1.0.$=1$/.$1-chairborn.2"><section class="post_author" data-reactid=".giox8iss8w.0.1.0.$=1$/.$1-chairborn.2.0"><img src="/images/chairborn.jpg" alt="" class="post_author-img" data-reactid=".giox8iss8w.0.1.0.$=1$/.$1-chairborn.2.0.0"><h3 class="post_author-name" data-reactid=".giox8iss8w.0.1.0.$=1$/.$1-chairborn.2.0.1"><a href="http://pytalk.ru/forum/web/704/" data-reactid=".giox8iss8w.0.1.0.$=1$/.$1-chairborn.2.0.1.0">Alex</a></h3><p class="post_author-bio" data-reactid=".giox8iss8w.0.1.0.$=1$/.$1-chairborn.2.0.2">Политикан, менеджер, маркетоид. Характер нордический</p></section></footer></article></section></td></tr></tbody></table></div><script src="/javascripts/application.js"></script></body></html>