-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
553 lines (484 loc) · 26.2 KB
/
index.html
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
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>Заголовок</title>
<link href='http://fonts.googleapis.com/css?family=Cuprum&subset=cyrillic,latin' rel='stylesheet' type='text/css'></link>
<link rel="stylesheet" type="text/css" media="screen, projection" href="css/screen.css" />
<link rel="stylesheet" type="text/css" media="print, handheld" href="css/print.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/highlight.pack.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="sidebar">
<ul class="main-nav">
<li>
<a href="#general">Общие вопросы</a>
</li>
<li>
<a href="#">Опыт разработки</a>
<ul class="submenu">
<li>
<a href="#my-experience">
Расскажите нам о вашем опыте разработки.
</a>
</li>
<li>
<a href="#language">
Какие языки программирования, фреймворки и технологии вы использовали?
</a>
</li>
<li>
<a href="#ide">
Какие редакторы и среды разработки вы использовали? Чем обычно пользуетесь?
</a>
</li>
<li>
<a href="#os">
С какими ОС приходилось сталкиваться? Для каких целей вы их использовали?
</a>
</li>
<li>
<a href="#cvs">
Приходилось ли вам пользоваться системами контроля версий? Если да, то какими? Какая из них вам нравится больше всего?
</a>
</li>
<li>
<a href="#crm">
Использовали ли вы системы постановки и ведения задач?
</a>
</li>
<li>
<a href="#resource">
Какие полезные для фронтенд-разработчика ресурсы вы используете и можете посоветовать?
</a>
</li>
<li>
<a href="#job">
Работали ли вы где-нибудь? Какие у вас были должностные обязанности? Есть ли опыт работы в команде?
</a>
</li>
</ul>
</li>
<li>
<a href="#">Технические вопросы</a>
<ul class="submenu">
<li>
<a href="#tool">
Перечислите известные вам инструменты и приёмы для отладки кода в разных браузерах
</a>
</li>
<li>
<a href="#click">
Опишите своими словами, что происходит в браузерах при клике на ссылку yandex.ru
</a>
</li>
<li>
<a href="#js-task">
Предположим, что мы представляем автосалон по продаже японских и немецких автомобилей. Допишите недостающий код
</a>
</li>
<li>
<a href="#find">
Найдите все текстовые файлы (*.txt), в имени которых содержится «yandex», а в содержимом — «школа разработки интерфейсов»
</a>
</li>
<li>
<a href="#verbose">
Дана программа, реализованная одновременно на Bash, Python и Perl. Программа принимает произвольное количество аргументов и печатает их количество. Нужно добавить опцию -v для verbose-режима, в котором дополнительно выводится значение каждого из аргументов
</a>
</li>
<li>
<a href="#learn">
Расскажите, в каком объёме и при каких обстоятельствах вы изучали следующие темы: языки программирования (императивные/декларативные, разные системы типов), структуры (классы, структуры данных, примитивные типы), парадигмы (события, ООП, параллельность/асинхронность, кеширование), алгоритмы (парсинг, сортировка, поиск), паттерны
</a>
</li>
</ul>
</li>
</ul>
</div>
<div id="content">
<h1><a name="general">Общие вопросы</a></h1>
<div class="container">
<h2><a name="fio">ФИО</a></h2>
<div class="desc">Lorem ipsum</div>
<h2><a name="email">Email</a></h2>
<div class="desc">[email protected]</div>
<h2><a name="phone">Телефон</a></h2>
<div class="desc">Lorem ipsum</div>
<h2><a name="year">Год рождения</a></h2>
<div class="desc">1989</div>
<h2><a name="city">Город проживания</a></h2>
<div class="desc">Москва</div>
<h2><a name="university">Вуз, факультет, специальность, кафедра</a></h2>
<div class="desc">
<ul>
<li>МЭСИ, Институт компьютерных технологий, прикладная информатика (магистратура)</li>
<li>ОрелГТУ, факультет электроники и приборостроения, прикладная информатика (бакалавриат)</li>
</ul>
</div>
<h2><a name="endyear">Год окончания ВУЗа</a></h2>
<div class="desc">
<ul>
<li>2013</li>
<li>2011</li>
</ul>
</div>
<h2><a name="endyear">На каком уровне владеете английским языком?</a></h2>
<div class="desc">
Неплохо понимаю технические тексты, говорю и устную речь вопринимаю не очень хорошо.
</div>
<h2><a name="endyear">Чего вы ожидаете от участия в Школе?</a></h2>
<div class="desc">
Ожидаю получить максимум знаний и опыта от профессионалов в своей области, изучить новые технологии и приемы программирования и разработки.
</div>
<h2><a name="endyear">Откуда вы о нас узнали?</a></h2>
<div class="desc">
С Я.Субботника, который проходил 28 июля.
</div>
<h2><a name="endyear">Сколько времени вы были бы готовы уделять стажировке или работе в Яндексе?</a></h2>
<div class="desc">
Сколько потребуется. Занятия в университете начинаются вечером и проходят не каждый день.
</div>
</div>
<h1><a name="experience">Опыт разработки</a></h1>
<div class="container">
<h2><a name="my-experience">Расскажите нам о вашем опыте разработки.</a></h2>
<div class="desc">
В университете (Орел) занимался доработкой и развитием сайта факультета (<a href="http://uniiit.ostu.ru/" target="_blank">uniiit.ostu.ru</a>) и местной системы дистанционного обучения (<a href="http://dist.uchimvas.ru/" target="_blank">dist.uchimvas.ru</a>) - php, mysql, всякие эффекты на jquery и простенький аякс. Затем пару месяцев работал над разработкой системы <a href="http://yourdocs.biz/" target="_blank">YourDocs</a> (аля Dropbox) - также универский проект (python и postgresql). Затем переехал учиться в Москву. Подробнее js и версткой стал интересоваться недавно, сейчас в качестве стажера работаю верстальщиком над еще незапущенным проектом.
</div>
<h2><a name="language">Какие языки программирования, фреймворки и технологии вы использовали?</a></h2>
<div class="desc">В универе основным преподаваемым языком был Pascal и Object Pascal, два семетра преподавали Assembler.
Кроме того был курс на один семестр Prolog/Haskell и OpenGL. Два семестра теории баз данных (InterBase).
Самостоятельно изучал HTML, CSS (Bootstrap), PHP, JS (jQuery), Python.</div>
<h2><a name="ide">Какие редакторы и среды разработки вы использовали? Чем обычно пользуетесь?</a></h2>
<div class="desc">Использовал NotePad++, Komodo Edit и Eclipse. Сейчас остановился на Sublime Text 2 - быстрый, приятный, функциональный плюс куча плагинов на любой вкус.</div>
<h2><a name="os">С какими ОС приходилось сталкиваться? Для каких целей вы их использовали?</a></h2>
<div class="desc">Начинал с Windows Millenium Edition, т.к. она была предустановлена на купленном компьютере. Потом Windows XP и 7. На третьем курсе пересел на Ubuntu, получилось, правда, только с третьего раза. Затем перелез на Дебиан. На виртуалке приходится держать WinXP.
Windows использую редко, в основном для игр. Linux для разработки и всего остального - он не требователен к железу, нет вирусов, свободен, более стабилен и устойчив.
</div>
<h2><a name="cvs">Приходилось ли вам пользоваться системами контроля версий? Если да, то какими? Какая из них вам нравится больше всего?</a></h2>
<div class="desc">
Использовал svn (в т.ч. assembla.com) и git. Каких то существенных различий по удобству использования выделить не могу, разве что svn в каждой папке проекта создает свою служебную папку (во всяком случае когда я ее использовал), а git нет. Плюс git является распределенной СУВ, т.е. каждый клиент хранит копию репозитория и в случае отказа центрального сервера может продолжать работу и коммитить локально.
</div>
<h2><a name="crm">Использовали ли вы системы постановки и ведения задач?</a></h2>
<div class="desc">Сталкивался с Redmine</div>
<h2><a name="resource">Какие полезные для фронтенд-разработчика ресурсы вы используете и можете посоветовать?</a></h2>
<div class="desc">
<ul>
<li>
<a href="http://jsfiddle.net" target="_blank">jsfiddle.net</a>
</li>
<li>
<a href="http://htmlbook.ru/" target="_blank">htmlbook.ru</a>
и
<a href="http://dochub.io/" target="_blank">dochub.io</a>
</li>
<li>
<a href="http://javascript.ru/" target="_blank">javascript.ru</a> в целом
и
<a href="http://learn.javascript.ru/" target="_blank">learn.javascript.ru</a> в частности, как хороший учебник по js для начинающих
</li>
<li>
<a href="http://www.fontsquirrel.com/fontface/generator" target="_blank">Font-Face Generator</a>
</li>
<li>
<a href="http://www.display-inline.fr/projects/css-gradient/" target="_blank">CSS Gradient Generator</a>
</li>
<li>
<a href="http://css3generator.com/" target="_blank">CSS3 Generator</a>
</li>
</ul>
</div>
<h2><a name="job">Работали ли вы где-нибудь? Какие у вас были должностные обязанности? Есть ли опыт работы в команде?</a></h2>
<div class="desc">
Впринципе я ответил на этот вопрос в <a href="#my-experience">"Расскажите нам о вашем опыте разработки"</a>. Работал в качестве программиста на четверть/полставки в университете, в команде были такие же студенты/аспиранты.
</div>
</div>
<h1><a name="technical">Технические вопросы</a></h1>
<div class="container">
<h2><a name="tool">Перечислите известные вам инструменты и приёмы для отладки кода в разных браузерах.</a></h2>
<div class="desc">
<ul>
<li>Web Developer Tools (Chrome, Safari) - родной инструмент, очень функциональный;</li>
<li>FireBug (Firefox);</li>
<li>FireBug Lite;</li>
<li>DragonFly (Opera);</li>
<li>Opera Mobile Emulator - не совсем инструмент отладки, можно смотреть как выглядит страничка в Opera Mobile на разных устройствах;</li>
</ul>
</div>
<h2><a name="click">Опишите своими словами, что происходит в браузерах при клике на ссылку yandex.ru</a></h2>
<div class="desc">Для начала определяется, что за протокол запросили. Это часть http://, ftp:// или file://.
Далее определяется реальный IP адрес, к которому необходимо обратиться. Для HTTP делается запрос в DNS, если file, то к файловой системе.
Часто используемые адреса кешируются и в DNS запросы постоянно не шлются. Если DNS дал положительный ответ и адрес удалось определить, то браузер открывает по указанному адресу и порту соединение.
Если соединение открыто, то к серверу посылается запрос. Для HTTP это GET, POST или HEAD запрос. Если страница закеширована, посылается HEAD запрос, чтобы понять, надо ли обновлять страницу.
Затем сервер обрабатывает полученный запрос и генерирует ответ (или сразу отдает страницу, если это статичный html). Браузер принимает ответ, парсит его. Далее, по мере показа страницы, также делаются запросы для стилей, скриптов, картинок. Поэтому рекомендуется css и js файлы объединять в один, чтобы уменьшить количество запросов к серверу.
</div>
<h2><a name="js-task">Предположим, что мы представляем автосалон по продаже японских и немецких автомобилей. Допишите недостающий код.</a></h2>
<div class="desc">
<h3>Javascript:</h3>
<a href="#" class="show-code"><span>Показать код</span><span class="hide">Спрятать</span></a>
<pre><code class="javascript">/**
* Создает экземпляр Машины
* @this {Car}
* @param {string} manufacturer Производитель
* @param {string} model Модель
* @param {number} year Год производство
*/
function Car(manufacturer, model, year) {
this.manufacturer = manufacturer;
this.model = model;
this.year = year || (new Date()).getFullYear();
}
Car.prototype.toString = function() {
return this.manufacturer + ' ' + this.model + ' ' + this.year;
}
/**
* Вывести информацию о машине
*/
Car.prototype.getInfo = function() {
return ''+this;
}
/**
* Вывести подробную информацию о машине
*/
Car.prototype.getDetailedInfo = function() {
return 'Производитель: '+this.manufacturer + '. Модель: ' + this.model + '. Год: ' + this.year;
}
var bmw = new Car("BMW", "X5", 2010),
audi = new Car("Audi", "Q5", 2012),
toyota = new Car("Toyota", "Camry");
console.log('' + bmw); // BMW X5 2010
console.log(bmw.getInfo()); // BMW X5 2010
console.log(toyota.getDetailedInfo()); // Производитель: BMW. Модель: X5. Год: 2010
/**
* Создает экземпляр Автосалона
* @this {CarDealer}
* @param {string} name Название автосалона
*/
function CarDealer(name) {
this.name = name;
this.cars = [];
this.currencyAlias = {};
this.currencyAlias['€'] = 'eur';
this.currencyAlias['¥'] = 'jpy';
}
/**
* Добавить машину в автосалон
*/
CarDealer.prototype.add = function () {
/* Без проверки типа */
/*
var args = [].slice.call(arguments);
this.cars = this.cars.concat(args);
return this;
*/
/* С проверкой типа */
for (var i = 0; i < arguments.length; i++) {
if (arguments[i] instanceof Car) {
this.cars.push(arguments[i]);
}
}
return this;
}
var yandex = new CarDealer('Яндекс.Авто');
yandex
.add(toyota)
.add(bmw, audi);
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
/**
* Установить цену на машину
* @param {string} car идентификатор машины
* @param {string} price стоимость
*/
// идентификатор машины составляется следующим образом "производитель модель год"
// стоимость машины может быть задана в двух валютах: йена и евро.
CarDealer.prototype.setPrice = function (car, price) {
var currency = price[0],
priceValue = price.slice(1);
if ((currency === '€' || currency === '¥') && isNumeric(priceValue)) {
for (var i = 0; i < this.cars.length; i++) {
if (car.toLowerCase() === (''+this.cars[i]).toLowerCase()) {
this.cars[i].currency = this.currencyAlias[currency];
this.cars[i].price = +priceValue;
break;
}
}
}
return this;
}
yandex
.setPrice('BMW X5 2010', '€2000')
.setPrice('Audi Q5 2012', '€3000')
.setPrice('Toyota Camry 2012', '¥3000');
function getCountry() {
switch (this.manufacturer.toLowerCase()) {
case 'bmw':
case 'audi':
return 'Germany';
case 'toyota':
return 'Japan';
}
}
Car.prototype.getCountry = getCountry;
/**
* Вывод списка автомобилей
*/
CarDealer.prototype.list = function () {
var result = [];
for (var i = 0; i < this.cars.length; i++) {
result.push('' + this.cars[i]);
}
return result.join(', ');
}
/**
* Вывод списка автомобилей с фильтрацией по стране производителю
* @param {string} countryName страна-производитель автомобиля
*/
CarDealer.prototype.listByCountry = function (countryName) {
var result = [];
for (var i = 0; i < this.cars.length; i++) {
if (countryName.toLowerCase() == this.cars[i].getCountry().toLowerCase()) {
result.push(this.cars[i]);
}
}
return result.join(', ');
}
/**
* Вывод списка автомобилей с ценой в рублях
* @param {object} exchangeList объект с обменными курсами евро и йены к рублю
*/
CarDealer.prototype.listWithRurPrice = function (exchangeList) {
var result = [];
for (var i = 0; i < this.cars.length; i++) {
result.push(''+this.cars[i]+' '+(exchangeList[this.cars[i].currency]*this.cars[i].price)+' руб.');
}
return result.join(', ');
}
console.log(yandex.list()); //BMW X5 2010, Audi Q5 2012, Toyota Camry 2012
console.log(yandex.listByCountry('Germany')); //BMW X5 2010, Audi Q5 2012
console.log(yandex.listWithRurPrice({eur: 35, jpy: 40}));//BMW X5 2010 70000 руб, Audi Q5 2012 105000 руб, Toyota Camry 2012 120000</code></pre>
</div>
<h2><a name="find">Найдите все текстовые файлы (*.txt), в имени которых содержится «yandex», а в содержимом — «школа разработки интерфейсов».</a></h2>
<div class="desc">
<h3>Bash:</h3>
<a href="#" class="show-code"><span>Показать код</span><span class="hide">Спрятать</span></a>
<pre><code class="bash">#если нужно искать без учета регистра, то нужно добавить опцию -i к команде grep
find ./ -type f -name '*yandex*.txt' | xargs grep -l 'школа разработки интерфейсов'
</code></pre>
</div>
<h2><a name="verbose">Дана программа, реализованная одновременно на Bash, Python и Perl. Программа принимает произвольное количество аргументов и печатает их количество. Нужно добавить опцию -v для verbose-режима, в котором дополнительно выводится значение каждого из аргументов</a></h2>
<div class="desc">
<h3>Bash:</h3>
<a href="#" class="show-code"><span>Показать код</span><span class="hide">Спрятать</span></a>
<pre><code class="bash">#!/bin/bash
usage() {
cat << EOF
Usage: printargs.sh [OPTIONS] [ARGUMENTS]
Print the number of arguments.
OPTIONS:
-h print help message
-m MSG custom message
Examples:
printargs.sh a b c
printargs.sh -m 'Arguments count: ' a b c
printargs.sh -h
EOF
}
V_FLAG=false
while getopts “h:m:v” OPTION
do
case $OPTION in
h)
usage
exit 1
shift;;
m)
MESSAGE=$OPTARG
shift;shift;;
v)
V_FLAG=true
shift;;
esac
done
COUNT=0
for ARG in $@; do
if $V_FLAG ; then
echo $ARG
fi
let COUNT+=1
done
if [[ "$MESSAGE" != "" ]]; then
echo $MESSAGE
fi
echo $COUNT</code></pre>
<h3>Python:</h3>
<a href="#" class="show-code"><span>Показать код</span><span class="hide">Спрятать</span></a>
<pre><code class="python">#!/usr/bin/env python
import argparse
parser = argparse.ArgumentParser(description = 'Print the number of arguments.')
parser.add_argument('arguments', metavar = 'ARG', type = str, nargs = '*', help = 'some arguments')
parser.add_argument('-m', dest = 'message', default = '', help = 'custom message')
parser.add_argument("-v", "--verbose", action = "store_true")
args = parser.parse_args()
count = 0
for a in args.arguments:
if args.verbose:
print(a),
count += 1
if args.message != '':
print(args.message)
print
print(count)</code></pre>
<h3>Perl:</h3>
<a href="#" class="show-code"><span>Показать код</span><span class="hide">Спрятать</span></a>
<pre><code class="perl">#!/usr/bin/perl
use strict;
use Getopt::Long;
use Pod::Usage;
my $help;
my $message = '';
my $verbose;
my $param;
@ARGV and GetOptions(
"h" => \$help,
"m:s" => \$message,
"v" => \$verbose,
) or pod2usage(3);
pod2usage(-verbose => 2, -exitval => 2) if $help;
my $count = 0;
foreach $param(@ARGV) {
if ($verbose) {
print $param."\n"
}
$count++;
}
if($message ne "") {
print($message . "\n");
}
print($count . "\n");
__END__
=head1 NAME
printargs.pl - Print the number of arguments.
=head1 SYNOPSIS
printargs.pl [options] [arguments]
=head1 OPTIONS
-h Show help message.
-m MSG Specify a custom message.
=head1 EXAMPLE
printargs.sh a b c
printargs.sh -m 'Arguments count: ' a b c
printargs.sh -h
</code></pre>
</div>
<h2><a name="learn">Расскажите, в каком объёме и при каких обстоятельствах вы изучали следующие темы: языки программирования (императивные/декларативные, разные системы типов), структуры (классы, структуры данных, примитивные типы), парадигмы (события, ООП, параллельность/асинхронность, кеширование), алгоритмы (парсинг, сортировка, поиск), паттерны</a></h2>
<div class="desc">В университете изучали Pascal и Delphi 3 семестра (сюда же входили алгоритмы сортировки, поиска, ООП и события), был курс Prolog/Haskell на 1 семестр. Самостоятельно изучал PHP, JS и Python. Соответственно изучал примитивные типы этих языков. С некоторыми паттернами знаком по книге Гаммы, Хелма и ко, но до конца ее пока не осилил.
</div>
</div>
</div>
</body>
</html>