Мастер-класс наоборот: вы пишете БЭМ-проект, а мы...
DESCRIPTION
На прошлых BEMup’ах мы проводили мастер-классы по полному стеку БЭМ-технологий, на которых в реальном времени писали SSSR — агрегатор информации из социальных сетей. В этот раз мы хотим попробовать новый формат и дать вам возможность писать код самим. Для эффективной работы мы приготовим всё необходимое: настроенное окружение, задания с необходимой теоретической справкой, чтобы вы шаг за шагом освоили БЭМ-технологии, и тесты, на которых вы легко проверите, что выполнили задания правильно. И конечно, останемся в полном вашем распоряжении, чтобы отвечать на вопросы, помогать и советовать. Будет весело! Как подготовиться Для участия в мастер-классе вам потребуется ноутбук и аккаунт на GitHub, так как все задания мы берём из репозитория и складываем туда же выполненные. Нужный репозиторий находится здесь: bem/do-it-yourself-workshop — подпишитесь на него, пожалуйста. Наши инструменты протестированы под Mac OS и Linux. Если вы используете Windows, вам потребуется виртуальная машина с Ubuntu. Мы рекомендуем установить Vagrant, VirtualBox и заранее скачать для него образ Ubuntu. В системе должны быть установлены git, node.js, консоль и браузер. Мы рассчитываем, что у вас есть базовые навыки по общению с Unix-консолью, вы умеете клонировать git-репозитории и имеете представление о npm. Также нелишним будет освежить базовую информацию о БЭМ и пройти туториал «Создаём свой проект на БЭМ», если у вас есть время и желание.TRANSCRIPT
- 1. - : -, , BEMup -, 6 2014
2. [email protected]@dabelitskygithub.com/dab 3. [email protected]@sipayrtgithub.com/sipayrt 4. ?5 5. ?5 6. ? 5 7. ? JavaScript + BEM5 8. ? JavaScript + BEM -5 9. !?6 10. ? 11. ?8 12. ? 8 13. ? , 8 14. ? , , 8 15. ? bem.info bit.ly/1hMHNB2 -bit.ly/1hMCKk59 16. bem.info bit.ly/1eAsQBo bit.ly/1m8ijzQ10 17. do-it-yourself-workshop11 18. do-it-yourself-workshopgit clone github.com/bem/do-it-yourself-workshop11 19. do-it-yourself-workshopgit clone github.com/bem/do-it-yourself-workshopcd do-it-yourself-workshop11 20. do-it-yourself-workshopgit clone github.com/bem/do-it-yourself-workshopcd do-it-yourself-workshopnpm i11 21. do-it-yourself-workshopgit clone github.com/bem/do-it-yourself-workshopcd do-it-yourself-workshopnpm inode bfs-workshop.js11 22. #112 23. #1github.com/bem/generator-bem-stub12 24. #1github.com/bem/generator-bem-stub$ sudo npm install -g generator-bem-stub12 25. #1github.com/bem/generator-bem-stub$ sudo npm install -g generator-bem-stubnode bfs-workshop.js verify12 26. #213 27. #2node bfs-workshop.js13 28. #2node bfs-workshop.jsyo bem-stub13 29. #2node bfs-workshop.jsyo bem-stubnode bfs-workshop.js verify13 30. #314 31. #3$ export PATH=./node_modules/.bin:$PATH14 32. #3$ export PATH=./node_modules/.bin:$PATH$ cd ./bfs-stub/14 33. #3$ export PATH=./node_modules/.bin:$PATH$ cd ./bfs-stub/$ bem make14 34. #3$ export PATH=./node_modules/.bin:$PATH$ cd ./bfs-stub/$ bem make$ bem server14 35. #3$ export PATH=./node_modules/.bin:$PATH$ cd ./bfs-stub/$ bem make$ bem serverlocalhost:8080/desktop.bundles/index/14 36. #315 37. #3 BEMJSON - bit.ly/1kXNzCg15 38. #3 BEMJSON - bit.ly/1kXNzCg'block' - 15 39. #3 BEMJSON - bit.ly/1kXNzCg'block' - 'elem' - 15 40. #3 BEMJSON - bit.ly/1kXNzCg'block' - 'elem' - 'mods' - 15 41. #3 BEMJSON - bit.ly/1kXNzCg'block' - 'elem' - 'mods' - 'elemMods' - 15 42. #316 43. #3'mix' - 16 44. #3'mix' - 'tag' - HTML- 16 45. #3'mix' - 'tag' - HTML- 'attrs' - HTML- 16 46. #3'mix' - 'tag' - HTML- 'attrs' - HTML- 'cls' - 16 47. #3'mix' - 'tag' - HTML- 'attrs' - HTML- 'cls' - 'bem' - - HTML- class16 48. #3'mix' - 'tag' - HTML- 'attrs' - HTML- 'cls' - 'bem' - - HTML- class16 49. BEMHTML 50. 18 51. 18 { } 52. 18 { }.island__header { display: inline-block; } 53. 18 { }.island__header { display: inline-block; }block('island').elem('header')(tag()('a')) 54. BEMJSON 19 55. BEMHTML 20 56. HTML21 57. BEMHTML. 22 58. BEMHTML. 23 59. BEMHTML. 23default 60. BEMHTML. 23default tag HTML 61. BEMHTML. 23default tag HTML js js 62. BEMHTML. 23default tag HTML js js bem - 63. BEMHTML. 23default tag HTML js js bem -cls 64. BEMHTML. 23default tag HTML js js bem -cls mix - DOM- 65. BEMHTML. 23default tag HTML js js bem -cls mix - DOM-attrs HTML- 66. BEMHTML. 23default tag HTML js js bem -cls mix - DOM-attrs HTML- 67. BEMHTML. 23default tag HTML js js bem -cls mix - DOM-attrs HTML- 68. BEMHTML 24 bit.ly/bemhtmlref 69. . 25 70. ymru.bem.info/tools/bem/modules/github.com/ymaps/modules26 71. bem-components27 72. bem-components OpenSource27 73. bem-components OpenSource19 27 74. bem-components OpenSource19 27 75. bem-components OpenSource19 27 76. bem-components OpenSource19 ru.bem.info/libs/bem-components/v2/27 77. i-bem.js?28 78. i-bem.js?28, 79. i-bem.js?28, i-bem JavaScript 80. i-bem.js?28, i-bem JavaScriptjQuery API 81. i-bem.js?29 82. i-bem.js?29 83. i-bem.js?29 84. i-bem.js?29 85. js-{!!!!!block: 'form',!!!!!js: true!}30 86.
31 js- 87.
32 js- 88.
33 js- 89.
34 js- 90.