diff --git a/.nojekyll b/.nojekyll
new file mode 100644
index 0000000..e69de29
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..9c93109
--- /dev/null
+++ b/README.md
@@ -0,0 +1,29 @@
+||
+|--|
+
+
+# Русская документация Svelte
+
+(доступна также [русская документация SvelteKit](https://romkar.github.io/sveltekit-docs-rus/))
+
+Svelte — это принципиально новый подход к созданию пользовательских интерфейсов. Когда традиционные фреймворки, такие как React и Vue, выполняют основную часть своей работы в браузере, Svelte переносит эту работу на этап компиляции, который происходит при сборке приложения.
+
+Вместо использования таких тяжелых приёмов, как сравнение состояний виртуального DOM, Svelte пишет код, который точечно обновляет DOM при изменении состояния вашего приложения.
+
+Мы гордимся тем, что Svelte был признан самым [любимым web-фреймворком](https://insights.stackoverflow.com/survey/2021#section-most-loved-dreaded-and-wanted-web-frameworks) и [наиболее удовлетворившим](https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/) в паре широких опросов разработчиков. Думаем, вы тоже полюбите его. [Прочтите вводную статью в блоге](/blog/2019-04-22-svelte-3-rethinking-reactivity), чтобы узнать больше.
+
+
+---
+
+> Оригинал перевода тут [https://github.com/AlexxNB/svelte3-translation-ru](https://github.com/AlexxNB/svelte3-translation-ru)
+и тут [https://github.com/sveltejs-translations](https://github.com/sveltejs-translations)
+
+---
+**TODO:**
+- [ ] Обновить перевод документации до текущей версии (актуализировать)
+- [ ] Исправить внутренние ссылки
+
+---
+||
+|--|
+|[Работает на docsify](https://docsify.js.org)|
\ No newline at end of file
diff --git a/_media/favicon.png b/_media/favicon.png
new file mode 100644
index 0000000..21bc302
Binary files /dev/null and b/_media/favicon.png differ
diff --git a/_media/icon_docsify.svg b/_media/icon_docsify.svg
new file mode 100644
index 0000000..6d6718b
--- /dev/null
+++ b/_media/icon_docsify.svg
@@ -0,0 +1,30 @@
+
+
\ No newline at end of file
diff --git a/_media/sk.css b/_media/sk.css
new file mode 100644
index 0000000..740ead1
--- /dev/null
+++ b/_media/sk.css
@@ -0,0 +1,887 @@
+@import url("https://fonts.googleapis.com/css2?family=Fira+Mono&family=Overpass:wght@300;600&display=swap");
+* {
+ -webkit-font-smoothing:antialiased;
+ -webkit-overflow-scrolling:touch;
+ -webkit-tap-highlight-color:rgba(0,
+ 0,
+ 0,
+ 0);
+ -webkit-text-size-adjust:none;
+ -webkit-touch-callout:none;
+ box-sizing:border-box
+}
+body:not(.ready) {
+ overflow:hidden
+}
+body:not(.ready) .app-nav,
+body:not(.ready)>nav,
+body:not(.ready) [data-cloak] {
+ display:none
+}
+div#app {
+ font-size:30px;
+ font-weight:lighter;
+ margin:40vh auto;
+ text-align:center
+}
+div#app:empty:before {
+ content:"Loading..."
+}
+img.emoji {
+ height:1.2em
+}
+img.emoji,
+span.emoji {
+ vertical-align:middle
+}
+span.emoji {
+ font-family:Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
+ font-size:1.2em
+}
+.progress {
+ background-color:#42b983;
+ background-color:var(--theme-color,#42b983);
+ height:2px;
+ left:0;
+ position:fixed;
+ right:0;
+ top:0;
+ transition:width .2s,opacity .4s;
+ width:0;
+ z-index:999999
+}
+.search .search-keyword,
+.search a:hover {
+ color:#42b983;
+ color:var(--theme-color,#42b983)
+}
+.search .search-keyword {
+ font-style:normal;
+ font-weight:700
+}
+body,
+html {
+ height:100%
+}
+body {
+ -moz-osx-font-smoothing:grayscale;
+ -webkit-font-smoothing:antialiased;
+ /* color:#34495e; */
+ color:#000;
+ font-family: "Overpass", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+ font-size:17px;
+ letter-spacing:0;
+ margin:0;
+ overflow-x:hidden
+}
+img {
+ max-width:100%
+}
+a[disabled] {
+ cursor:not-allowed;
+ opacity:.6
+}
+kbd {
+ border:1px solid #ccc;
+ border-radius:3px;
+ display:inline-block;
+ font-size:12px!important;
+ line-height:12px;
+ margin-bottom:3px;
+ padding:3px 5px;
+ vertical-align:middle
+}
+li input[type=checkbox] {
+ margin:0 .2em .25em 0;
+ vertical-align:middle
+}
+.app-nav {
+ margin:25px 60px 0 0;
+ position:absolute;
+ right:0;
+ text-align:right;
+ z-index:10
+}
+.app-nav.no-badge {
+ margin-right:25px
+}
+.app-nav p {
+ margin:0
+}
+.app-nav>a {
+ margin:0 1rem;
+ padding:5px 0
+}
+.app-nav li,
+.app-nav ul {
+ display:inline-block;
+ list-style:none;
+ margin:0
+}
+.app-nav a {
+ color:inherit;
+ font-size:16px;
+ text-decoration:none;
+ transition:color .3s
+}
+.app-nav a.active,
+.app-nav a:hover {
+ color:#42b983;
+ color:var(--theme-color,#42b983)
+}
+.app-nav a.active {
+ border-bottom:2px solid #42b983;
+ border-bottom:2px solid var(--theme-color,#42b983)
+}
+.app-nav li {
+ display:inline-block;
+ margin:0 1rem;
+ padding:5px 0;
+ position:relative;
+ cursor:pointer
+}
+.app-nav li ul {
+ background-color:#fff;
+ border:1px solid;
+ border-color:#ddd #ddd #ccc;
+ border-radius:4px;
+ box-sizing:border-box;
+ display:none;
+ max-height:calc(100vh - 61px);
+ overflow-y:auto;
+ padding:10px 0;
+ position:absolute;
+ right:-15px;
+ text-align:left;
+ top:100%;
+ white-space:nowrap
+}
+.app-nav li ul li {
+ display:block;
+ font-size:14px;
+ line-height:1rem;
+ margin:8px 14px;
+ white-space:nowrap
+}
+.app-nav li ul a {
+ display:block;
+ font-size:inherit;
+ margin:0;
+ padding:0
+}
+.app-nav li ul a.active {
+ border-bottom:0
+}
+.app-nav li:hover ul {
+ display:block
+}
+.github-corner {
+ border-bottom:0;
+ position:fixed;
+ right:0;
+ text-decoration:none;
+ top:0;
+ z-index:1
+}
+.github-corner:hover .octo-arm {
+ animation:octocat-wave .56s ease-in-out
+}
+.github-corner svg {
+ color:#fff;
+ fill:#42b983;
+ fill:var(--theme-color,#42b983);
+ height:80px;
+ width:80px
+}
+main {
+ display:block;
+ position:relative;
+ width:100vw;
+ height:100%;
+ z-index:0
+}
+main.hidden {
+ display:none
+}
+.anchor {
+ display:inline-block;
+ text-decoration:none;
+ transition:all .3s
+}
+.anchor span {
+ color:#34495e
+}
+.anchor:hover {
+ text-decoration:underline
+}
+
+.sidebar {
+ border-right:1px solid rgba(0,0,0,.07);
+ overflow-y:auto;
+ padding:40px 0 0;
+ position:absolute;
+ top:0;
+ bottom:0;
+ left:0;
+ transition:transform .25s ease-out;
+ width:300px;
+ z-index:20;
+}
+.sidebar>h1 {
+ margin:0 auto 1rem;
+ font-size:1.5rem;
+ font-weight:300;
+ text-align:center
+}
+.sidebar>h1 a {
+ color:inherit;
+ text-decoration:none
+}
+.sidebar>h1 .app-nav {
+ display:block;
+ position:static
+}
+.sidebar .sidebar-nav {
+ line-height:1.5em;
+ padding-bottom:40px
+}
+.sidebar li.collapse .app-sub-sidebar {
+ display:none
+}
+.sidebar ul {
+ margin:0 0 0 15px;
+ padding:0
+}
+.sidebar li>p {
+ font-weight:700;
+ margin:0
+}
+.sidebar ul,
+.sidebar ul li {
+ list-style:none
+}
+.sidebar ul li a {
+ border-bottom:none;
+ display:block
+}
+.sidebar ul li ul {
+ padding-left:20px
+}
+.sidebar::-webkit-scrollbar {
+ width:4px
+}
+.sidebar::-webkit-scrollbar-thumb {
+ background:transparent;
+ border-radius:4px
+}
+.sidebar:hover::-webkit-scrollbar-thumb {
+ background:hsla(0,0%,53.3%,.4)
+}
+.sidebar:hover::-webkit-scrollbar-track {
+ background:hsla(0,0%,53.3%,.1)
+}
+.sidebar-toggle {
+ background-color:transparent;
+ background-color:hsla(0,0%,100%,.8);
+ border:0;
+ outline:none;
+ padding:10px;
+ position:absolute;
+ bottom:0;
+ left:0;
+ text-align:center;
+ transition:opacity .3s;
+ width:284px;
+ z-index:30;
+ cursor:pointer
+}
+.sidebar-toggle:hover .sidebar-toggle-button {
+ opacity:.4
+}
+.sidebar-toggle span {
+ background-color:#42b983;
+ background-color:var(--theme-color,#42b983);
+ display:block;
+ margin-bottom:4px;
+ width:16px;
+ height:2px
+}
+body.sticky .sidebar,
+body.sticky .sidebar-toggle {
+ position:fixed
+}
+.content {
+ padding-top:60px;
+ position:absolute;
+ top:0;
+ right:0;
+ bottom:0;
+ left:300px;
+ transition:left .25s ease
+}
+.markdown-section {
+ margin:0 auto;
+ max-width:80%;
+ padding:30px 15px 40px;
+ position:relative
+}
+.markdown-section>* {
+ box-sizing:border-box;
+ font-size:inherit
+}
+.markdown-section>:first-child {
+ margin-top:0!important
+}
+.markdown-section hr {
+ border:none;
+ border-bottom:1px solid #eee;
+ margin:2em 0
+}
+.markdown-section iframe {
+ border:1px solid #eee;
+ width:1px;
+ min-width:100%
+}
+.markdown-section table {
+ border-collapse:collapse;
+ border-spacing:0;
+ display:block;
+ margin-bottom:1rem;
+ overflow:auto;
+ width:100%
+}
+.markdown-section th {
+ font-weight:700
+}
+.markdown-section td,
+.markdown-section th {
+ /* border:1px solid #ddd; */
+ padding:6px 13px
+}
+.markdown-section tr {
+ /* border-top:1px solid #ccc */
+}
+.markdown-section p.tip,
+.markdown-section tr:nth-child(2n) {
+ background-color:#f8f8f8
+}
+.markdown-section p.tip {
+ border-bottom-right-radius:2px;
+ border-left:4px solid #f66;
+ border-top-right-radius:2px;
+ margin:2em 0;
+ padding:12px 24px 12px 30px;
+ position:relative
+}
+.markdown-section p.tip:before {
+ background-color:#f66;
+ border-radius:100%;
+ color:#fff;
+ content:"!";
+ font-family:Dosis,Source Sans Pro,Helvetica Neue,Arial,sans-serif;
+ font-size:14px;
+ font-weight:700;
+ left:-12px;
+ line-height:20px;
+ position:absolute;
+ height:20px;
+ width:20px;
+ text-align:center;
+ top:14px
+}
+.markdown-section p.tip code {
+ background-color:#efefef
+}
+.markdown-section p.tip em {
+ color:#34495e
+}
+.markdown-section p.warn {
+ background:rgba(66,185,131,.1);
+ border-radius:2px;
+ padding:1rem
+}
+.markdown-section ul.task-list>li {
+ list-style-type:none
+}
+body.close .sidebar {
+ transform:translateX(-300px)
+}
+body.close .sidebar-toggle {
+ width:auto
+}
+body.close .content {
+ left:0
+}
+@media print {
+ .app-nav,
+ .github-corner,
+ .sidebar,
+ .sidebar-toggle {
+ display:none
+ }
+}
+@media screen and (max-width:768px) {
+ .github-corner,
+ .sidebar,
+ .sidebar-toggle {
+ position:fixed
+ }
+ .app-nav {
+ margin-top:16px
+ }
+ .app-nav li ul {
+ top:30px
+ }
+ main {
+ height:auto;
+ min-height:100vh;
+ overflow-x:hidden
+ }
+ .sidebar {
+ left:-300px;
+ transition:transform .25s ease-out
+ }
+ .content {
+ left:0;
+ max-width:100vw;
+ position:static;
+ padding-top:20px;
+ transition:transform .25s ease
+ }
+ .app-nav,
+ .github-corner {
+ transition:transform .25s ease-out
+ }
+ .sidebar-toggle {
+ background-color:transparent;
+ width:auto;
+ padding:30px 30px 10px 10px
+ }
+ body.close .sidebar {
+ transform:translateX(300px)
+ }
+ body.close .sidebar-toggle {
+ background-color:hsla(0,0%,100%,.8);
+ transition:background-color 1s;
+ width:284px;
+ padding:10px
+ }
+ body.close .content {
+ transform:translateX(300px)
+ }
+ body.close .app-nav,
+ body.close .github-corner {
+ display:none
+ }
+ .github-corner:hover .octo-arm {
+ animation:none
+ }
+ .github-corner .octo-arm {
+ animation:octocat-wave .56s ease-in-out
+ }
+}
+@keyframes octocat-wave {
+ 0%,
+ to {
+ transform:rotate(0)
+ }
+ 20%,
+ 60% {
+ transform:rotate(-25deg)
+ }
+ 40%,
+ 80% {
+ transform:rotate(10deg)
+ }
+}
+section.cover {
+ position:relative;
+ align-items:center;
+ background-position:50%;
+ background-repeat:no-repeat;
+ background-size:cover;
+ min-height:100vh;
+ width:100%;
+ display:none
+}
+section.cover.show {
+ display:flex
+}
+section.cover.has-mask .mask {
+ background-color:#fff;
+ opacity:.8;
+ position:absolute;
+ top:0;
+ bottom:0;
+ width:100%
+}
+section.cover .cover-main {
+ flex:1;
+ margin:0 16px;
+ text-align:center;
+ position:relative
+}
+section.cover a {
+ color:inherit
+}
+section.cover a,
+section.cover a:hover {
+ text-decoration:none
+}
+section.cover p {
+ line-height:1.5rem;
+ margin:1em 0
+}
+section.cover h1 {
+ color:inherit;
+ font-size:2.5rem;
+ font-weight:300;
+ margin:.625rem 0 2.5rem;
+ position:relative;
+ text-align:center
+}
+section.cover h1 a {
+ display:block
+}
+section.cover h1 small {
+ bottom:-.4375rem;
+ font-size:1rem;
+ position:absolute
+}
+section.cover blockquote {
+ font-size:1.5rem;
+ text-align:center
+}
+section.cover ul {
+ line-height:1.8;
+ list-style-type:none;
+ margin:1em auto;
+ max-width:500px;
+ padding:0
+}
+section.cover .cover-main>p:last-child a {
+ border-radius:2rem;
+ border:1px solid #42b983;
+ border-color:var(--theme-color,#42b983);
+ box-sizing:border-box;
+ color:#42b983;
+ color:var(--theme-color,#42b983);
+ display:inline-block;
+ font-size:1.05rem;
+ letter-spacing:.1rem;
+ margin:.5rem 1rem;
+ padding:.75em 2rem;
+ text-decoration:none;
+ transition:all .15s ease
+}
+section.cover .cover-main>p:last-child a:last-child {
+ background-color:#42b983;
+ background-color:var(--theme-color,#42b983);
+ color:#fff
+}
+section.cover .cover-main>p:last-child a:last-child:hover {
+ color:inherit;
+ opacity:.8
+}
+section.cover .cover-main>p:last-child a:hover {
+ color:inherit
+}
+section.cover blockquote>p>a {
+ border-bottom:2px solid #42b983;
+ border-bottom:2px solid var(--theme-color,#42b983);
+ transition:color .3s
+}
+section.cover blockquote>p>a:hover {
+ color:#42b983;
+ color:var(--theme-color,#42b983)
+}
+.sidebar,
+body {
+ background-color:#fff
+}
+.sidebar {
+ color:#364149
+}
+.sidebar li {
+ margin:6px 0
+}
+.sidebar ul li a {
+ color:#505d6b;
+ font-size:14px;
+ font-weight:400;
+ overflow:hidden;
+ text-decoration:none;
+ text-overflow:ellipsis;
+ white-space:nowrap
+}
+.sidebar ul li a:hover {
+ text-decoration:underline
+}
+.sidebar ul li ul {
+ padding:0
+}
+.sidebar ul li.active>a {
+ border-right:2px solid;
+ color:#42b983;
+ color:var(--theme-color,#42b983);
+ font-weight:600
+}
+.app-sub-sidebar li:before {
+ content:"-";
+ padding-right:4px;
+ float:left
+}
+.markdown-section h1,
+.markdown-section h2,
+.markdown-section h3,
+.markdown-section h4,
+.markdown-section strong {
+ color:#2c3e50;
+ font-weight:600
+}
+.markdown-section a {
+ color:#42b983;
+ color:var(--theme-color,#42b983);
+ font-weight:600
+}
+.markdown-section h1 {
+ font-size:2.5rem;
+ margin:0 0 1rem
+}
+.markdown-section h2 {
+ font-size:1.75rem;
+ margin:45px 0 .8rem;
+ border-bottom: 1px solid hsl(206,44%,93%);
+}
+.markdown-section h3 {
+ font-size:1.3rem;
+ margin:40px 0 .6rem
+}
+.markdown-section h4 {
+ font-size:1.25rem
+}
+.markdown-section h5 {
+ font-size:1rem
+}
+.markdown-section h6 {
+ color:#777;
+ font-size:1rem
+}
+.markdown-section figure,
+.markdown-section p {
+ margin: 1em 0
+}
+.markdown-section ol,
+.markdown-section p,
+.markdown-section ul {
+ line-height:1.6rem;
+ word-spacing:.05rem
+}
+.markdown-section ol,
+.markdown-section ul {
+ padding-left:1.5rem
+}
+.markdown-section blockquote {
+ background: white;
+ color: black;
+ border: 1px solid hsl(15,100%,50%);
+ border-radius: .4rem;
+ padding: 1rem;
+ filter: drop-shadow(2px 2px 6px hsla(15,100%,50%,.2));
+}
+.markdown-section blockquote p {
+ font-weight:600;
+ margin:0
+}
+.markdown-section iframe {
+ margin:1em 0
+}
+.markdown-section em {
+ color:#7f8c8d;
+}
+.markdown-section code,
+.markdown-section output:after,
+.markdown-section pre {
+ font-family:Fira Mono, monospace
+}
+.markdown-section code,
+.markdown-section pre {
+ /* background-color:#F6FBFF; */
+ background-color:#F2F6F9;
+}
+
+.markdown-section a code{
+ background-color: #FFEBE5;
+ font-weight: 300;
+ color: --theme-color;
+}
+
+.markdown-section a:link{
+ text-decoration: none;
+}
+
+.markdown-section a:hover{
+ text-decoration: underline;
+}
+
+.markdown-section output,
+.markdown-section pre {
+ margin:1.2em 0;
+ position:relative
+}
+.markdown-section output,
+.markdown-section pre>code {
+ border-radius:2px;
+ display:block
+}
+.markdown-section output:after,
+.markdown-section pre>code {
+ -moz-osx-font-smoothing:initial;
+ -webkit-font-smoothing:initial
+}
+.markdown-section code {
+ border-radius:2px;
+ color:#454545;
+ margin:0 2px;
+ padding:3px 5px;
+ white-space:pre-wrap
+}
+.markdown-section>:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) code {
+ font-size:.8rem
+}
+.markdown-section pre {
+ padding:0 1.4rem;
+ line-height:1.5rem;
+ overflow:auto;
+ word-wrap:normal
+}
+.markdown-section pre>code {
+ color:#525252;
+ font-size:.8rem;
+ padding: 1em 5px;
+ line-height:inherit;
+ margin:0 2px;
+ max-width:inherit;
+ overflow:inherit;
+ white-space:inherit
+}
+.markdown-section output {
+ padding:1.7rem 1.4rem;
+ border:1px dotted #ccc
+}
+.markdown-section output>:first-child {
+ margin-top:0
+}
+.markdown-section output>:last-child {
+ margin-bottom:0
+}
+.markdown-section code:after,
+.markdown-section code:before,
+.markdown-section output:after,
+.markdown-section output:before {
+ letter-spacing:.05rem
+}
+.markdown-section output:after,
+.markdown-section pre:after {
+ color:#ccc;
+ font-size:.6rem;
+ font-weight:600;
+ height:15px;
+ line-height:15px;
+ padding:5px 10px 0;
+ position:absolute;
+ right:0;
+ text-align:right;
+ top:0;
+ content:attr(data-lang)
+}
+.token.cdata,
+.token.comment,
+.token.doctype,
+.token.prolog {
+ color:#8e908c
+}
+.token.namespace {
+ opacity:.7
+}
+.token.boolean,
+.token.number {
+ color:#c76b29
+}
+.token.punctuation {
+ color:#525252
+}
+.token.property {
+ color:#c08b30
+}
+.token.tag {
+ color:#2973b7
+}
+.token.string {
+ color:#42b983;
+ color:var(--theme-color,#42b983)
+}
+.token.selector {
+ color:#6679cc
+}
+.token.attr-name {
+ color:#2973b7
+}
+.language-css .token.string,
+.style .token.string,
+.token.entity,
+.token.url {
+ color:#22a2c9
+}
+.token.attr-value,
+.token.control,
+.token.directive,
+.token.unit {
+ color:#42b983;
+ color:var(--theme-color,#42b983)
+}
+.token.function,
+.token.keyword {
+ color:#e96900
+}
+.token.atrule,
+.token.regex,
+.token.statement {
+ color:#22a2c9
+}
+.token.placeholder,
+.token.variable {
+ color:#3d8fd1
+}
+.token.deleted {
+ text-decoration:line-through
+}
+.token.inserted {
+ border-bottom:1px dotted #202746;
+ text-decoration:none
+}
+.token.italic {
+ font-style:italic
+}
+.token.bold,
+.token.important {
+ font-weight:700
+}
+.token.important {
+ color:#c94922
+}
+.token.entity {
+ cursor:help
+}
+code .token {
+ -moz-osx-font-smoothing:initial;
+ -webkit-font-smoothing:initial;
+ min-height:1.5rem;
+ position:relative;
+ left:auto
+}
+
+
+img[alt="icon_docsify"]{
+ width: 50px;
+}
\ No newline at end of file
diff --git a/_media/sk.png b/_media/sk.png
new file mode 100644
index 0000000..179fe9b
Binary files /dev/null and b/_media/sk.png differ
diff --git a/_media/svelte-logo-horizontal.svg b/_media/svelte-logo-horizontal.svg
new file mode 100644
index 0000000..0ebb565
--- /dev/null
+++ b/_media/svelte-logo-horizontal.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/_sidebar.md b/_sidebar.md
new file mode 100644
index 0000000..483022c
--- /dev/null
+++ b/_sidebar.md
@@ -0,0 +1,46 @@
+* [Главная](/)
+
+* Документация
+ * [Важное замечание](docs/00-introduction.md)
+ * [Формат компонента](docs/01-component-format.md)
+ * [Синтаксис шаблонов](docs/02-template-syntax.md)
+ * [Рантайм](docs/03-run-time.md)
+ * [Компиляция](docs/04-compile-time.md)
+ * [Предупреждения a11y](docs/05-accessibility-warnings.md)
+
+* FAQ
+ * [FAQ](faq/faq.md)
+
+* Блог
+ * [Ускорение развития Svelte](blog/2022-01-13-accelerating-sveltes-development.md)
+ * [Что нового в Svelte: Январь 2022](blog/2022-01-01-whats-new-in-svelte-january-2022.md)
+ * [Что нового в Svelte: Декабрь 2021](blog/2021-12-01-whats-new-in-svelte-december-2021.md)
+ * [Что нового в Svelte: Ноябрь 2021](blog/2021-11-01-whats-new-in-svelte-november-2021.md)
+ * [Что нового в Svelte: Октябрь 2021](blog/2021-10-01-whats-new-in-svelte-october-2021.md)
+ * [Что нового в Svelte: Сентябрь 2021](blog/2021-09-01-whats-new-in-svelte-september-2021.md)
+ * [Что нового в Svelte: Август 2021](blog/2021-08-01-whats-new-in-svelte-august-2021.md)
+ * [Что нового в Svelte: Июль 2021](blog/2021-07-01-whats-new-in-svelte-july-2021.md)
+ * [Что нового в Svelte: Июнь 2021](blog/2021-06-01-whats-new-in-svelte-june-2021.md)
+ * [Что нового в Svelte: Май 2021](blog/2021-05-01-whats-new-in-svelte-may-2021.md)
+ * [Что нового в Svelte: Апрель 2021](blog/2021-04-01-whats-new-in-svelte-april-2021.md)
+ * [SvelteKit вышел в бета-версии](blog/2021-03-23-sveltekit-beta.md)
+ * [Что нового в Svelte: Март 2021](blog/2021-03-01-whats-new-in-svelte-march-2021.md)
+ * [Что нового в Svelte: Февраль 2021](blog/2021-02-01-whats-new-in-svelte-february-2021.md)
+ * [Что нового в Svelte: Январь 2021](blog/2021-01-01-whats-new-in-svelte-january-2021.md)
+ * [Что нового в Svelte: Декабрь 2020](blog/2020-12-01-whats-new-in-svelte-december-2020.md)
+ * [В чем дело со SvelteKit?](blog/2020-11-05-whats-the-deal-with-sveltekit.md)
+ * [Что нового в Svelte: Ноябрь 2020](blog/2020-11-01-whats-new-in-svelte-november-2020.md)
+ * [Что нового в Svelte: Октябрь 2020](blog/2020-10-01-whats-new-in-svelte-october-2020.md)
+ * [Svelte <3 TypeScript](blog/2020-07-17-svelte-and-typescript.md)
+ * [Svelte 3: Переосмысление реактивности](blog/2019-04-22-svelte-3-rethinking-reactivity.md)
+ * [Пишите меньше кода](blog/2019-04-20-write-less-code.md)
+ * [Svelte для новичков](blog/2019-04-16-svelte-for-new-developers.md)
+ * [Настройка редактора кода](blog/2019-04-15-setting-up-your-editor.md)
+ * [Svelte в подкасте The Changelog](blog/2019-01-31-svelte-on-the-changelog.md)
+ * [Виртуальный DOM — это реально оверхед](blog/2018-12-27-virtual-dom-is-pure-overhead.md)
+ * [Использование CSS-in-JS в Svelte](blog/2018-12-26-svelte-css-in-js.md)
+ * [Вышел Svelte v2!](blog/2018-04-18-version-2.md)
+ * [Sapper: На пути к идеальному фреймворку Web-приложений](blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md)
+ * [Дзэн CSS](blog/2017-09-06-the-zen-of-just-writing-css.md)
+ * [Легкий способ начать использовать Svelte](blog/2017-08-07-the-easiest-way-to-get-started.md)
+ * [Фреймворки без фреймворка: почему мы не подумали об этом раньше?](blog/2016-11-26-frameworks-without-the-framework.md)
diff --git a/blog/2016-11-26-frameworks-without-the-framework.md b/blog/2016-11-26-frameworks-without-the-framework.md
new file mode 100644
index 0000000..c19d4f5
--- /dev/null
+++ b/blog/2016-11-26-frameworks-without-the-framework.md
@@ -0,0 +1,56 @@
+---
+- title: "Фреймворки без фреймворка: почему мы не подумали об этом раньше?"
+- description: Вы не можете писать серьезные приложения на ванильном JavaScript. Но компилятор может сделать это за вас.
+- author: Rich Harris
+- authorURL: https://twitter.com/Rich_Harris
+- translator: Alexey Schebelev
+---
+
+> Этот новый фреймворк работает в *рантайме*? Фи. Спасибо, мне не надо.
+> **- фронтендеры 2018 года**
+
+Мы отправляем слишком много кода нашим пользователям. Как и многие разработчики фронтендеры, я отрицал этот факт, думая, что ничего страшного в лишних 100 КБ JavaScript нет и при загрузке страницы можно просто убрать [один .jpg файлик](https://twitter.com/miketaylr/status/227056824275333120)- ведь в *реальности*, когда ваше приложение уже стало интерактивным, гораздо большее значение имеет производительность.
+
+Но я ошибался. 100 КБ .js не то же самое, что 100 КБ .jpg. Это не только время загрузки из сети, которое убивает производительность первого запуска вашего приложения, но и время, потраченное на анализ и оценку вашего скрипта, в течение которого браузер перестаёт отвечать на запросы. На мобильных устройствах эти миллисекунды копятся ещё быстрее.
+
+Если вы не уверены в существовании такой проблемы, почитайте Twitter [Алекса Рассела](https://twitter.com/slightlylate). Алекс [не приобрёл друзей в сообществе фреймворков](https://twitter.com/slightlylate/status/728355959022587905), но он прав. Но предложенный [Polymer](https://www.polymer-project.org/1.0/), в качестве альтернативы Angular, React и Ember ещё не завоевал популярность в мире фронтенда и, конечно,не из-за отсутствия маркетинга.
+
+Возможно, нам нужно полностью переосмыслить всё это.
+
+
+## Какую *именно* проблему решают фреймворки?
+
+Общепринятое мнение состоит в том, что фреймворки облегчают управление сложностью вашего кода: фреймворк абстрагирует все скучные детали реализации с помощью таких методов, как, например, нахождение различий в виртуальном DOM. Но это не совсем так. В лучшем случае фреймворки *перемещают сложные штуки* из кода, который вы должны были бы написать, в код, который вы не писали.
+
+Вместо этого причина, по которой такие идеи, как React, настолько заслуженно популярны, заключается в том, что они облегчают управление сложностью ваших *концептов*. Фреймворки — это прежде всего инструмент для структурирования ваших мыслей, а не кода.
+
+Таким образом, что, если бы фреймворк *на самом деле не работал в браузере*? Что если бы вместо этого он преобразовывал ваше приложение в чистый ванильный JavaScript, точно так же, как Babel конвертирует ES2016 + в ES5? Вам не нужно тащить здоровенный рантайм, и ваше приложение будет работать очень быстро, потому что между вашим приложением и браузером не будет слоёв абстракции.
+
+
+## Представляем Svelte
+
+Svelte — это новый фреймворк, который делает именно это. Вы пишете свои компоненты, используя HTML, CSS и JavaScript (плюс несколько дополнительных фишек, которые вы можете [изучить менее чем за 5 минут](https://v2.svelte.dev/guide)), и в процессе сборки Svelte компилирует их в крошечные автономные модули JavaScript. Статически анализируя шаблон компонента, мы можем быть уверены, что браузер будет выполнять необходимый минимум всей работы.
+
+[Реализация TodoMVC на Svelte](https://svelte-todomvc.surge.sh/) весит 3,6 КБ в сжатом виде. Для сравнения, React + ReactDOM *без кода приложения* весит около 45 КБ в сжатом виде. Для разбора React браузеру требуется примерно в 10 раз больше времени, чем для Svelte, чтобы только запустить интерактивный TodoMVC.
+
+И когда ваше приложение *уже* запущено и запущено, в соответствии с [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) **Svelte работает быстро, чёрт возьми**. Это быстрее, чем React. Это быстрее, чем Vue. Это быстрее, чем Angular, или Ember, или Ractive, или Preact, или Riot, или Mithril. В настоящее время он конкурирует с Inferno, который, вероятно, является самым быстрым фреймворком в мире, потому что [Доминик Ганнауэй](https://twitter.com/trueadm) — волшебник. (Svelte медленнее удаляет элементы, но мы над этим [работаем](https://github.com/sveltejs/svelte/issues/26).)
+
+По сути он такой же быстрый, как ванильный JS, что имеет смысл, потому что это и *есть* ванильный JS, который вам не нужно было писать.
+
+
+## Но это не самое главное
+
+Конечно, производительность очень важна. Но что действительно впечатляет в этом подходе, так это то, что мы наконец-то можем решить некоторые из самых сложных проблем в веб-разработке.
+
+Проблемы с совместимостью. Хотите сделать `npm install cool-calendar-widget` и использовать его в своём приложении? Ранее вы могли сделать это только в том случае, если виджет был разработан под уже используемый вами фреймворк — если `cool-calendar-widget` был сделан в React и вы используете Angular, то, конечно, ничего не получится. Но если автор виджета использовал Svelte, приложения, которые его используют, могут быть созданы с использованием любой технологии, которая вам нравится.
+
+Или [разделение кода](https://twitter.com/samccone/status/797528710085652480). Это отличная идея (загрузить только тот код, который необходим для конкретной страницы), но есть проблема — даже если вы изначально посылаете только один компонент React вместо сотни, *вам всё равно придётся посылать сам React*. С Svelte разделение кода может быть намного более эффективным, потому что структура встроена в компонент, а сам компонент получается крошечный.
+
+И, наконец, кое-что, с чем я боролся как разработчик ПО с открытым исходным кодом: ваши пользователи всегда хотят, чтобы нужные им функции были в приоритете, и им всё равно, что это будет пустой балласт для других людей, которым эти функции не нужны. Автор фреймворка всегда должен сбалансировать долгосрочную работоспособность проекта с желанием удовлетворить потребности своих пользователей. Это невероятно сложно, потому что трудно предвидеть последствия постепенного раздувания фреймворка, и требуются серьёзные социальные навыки, чтобы сказать людям (которые, возможно, с энтузиазмом проповедовали ваш инструмент до этого момента), что интересующая их функциональность мягко говоря никому не нужна. Но с таким подходом, как в Svelte, любые функции могут быть добавлены абсолютно свободно, без ущерба для людей, которые их не используют, потому что код, реализующий эти функции, просто не генерируется компилятором, если он не требуется.
+
+
+## И это только начало
+
+Svelte ещё очень молод. Ещё предстоит проделать большую работу — создание интеграций для сборщиков, добавление рендеринга на стороне сервера, горячая перезагрузка, переходы, дополнительная документация и примеры, стартовые наборы и так далее.
+
+Но вы уже можете создавать крутые компоненты с его помощью, поэтому мы начали сразу со стабильной версии 1.0.0. [Прочитайте руководство](https://v2.svelte.dev/guide), [попробуйте поиграть в REPL](https://v2.svelte.dev/repl) или перейдите на [GitHub](https://github.com/sveltejs/svelte), чтобы помочь начать новую эру разработки UI.
diff --git a/blog/2017-08-07-the-easiest-way-to-get-started.md b/blog/2017-08-07-the-easiest-way-to-get-started.md
new file mode 100644
index 0000000..649d170
--- /dev/null
+++ b/blog/2017-08-07-the-easiest-way-to-get-started.md
@@ -0,0 +1,66 @@
+---
+- title: Легкий способ начать использовать Svelte
+- description: Это займет всего лишь 1 минуту.
+- author: Rich Harris
+- authorURL: https://twitter.com/Rich_Harris
+- translator: Alexey Schebelev
+---
+
+Svelte — это [фреймворк нового типа](/blog/frameworks-without-the-framework). Не нужно помещать на страницу тег `
+
diff --git a/blog/2019-04-15-setting-up-your-editor.md b/blog/2019-04-15-setting-up-your-editor.md
new file mode 100644
index 0000000..68e7e93
--- /dev/null
+++ b/blog/2019-04-15-setting-up-your-editor.md
@@ -0,0 +1,71 @@
+---
+- title: Настройка редактора кода
+- description: Инструкция по конфигурации линтера и подсветки синтаксиса
+- author: Rich Harris
+- authorURL: https://twitter.com/Rich_Harris
+- draft: true
+---
+
+*__Coming soon__*
+
+ This post will walk you through setting up your editor so that recognises Svelte files:
+
+* eslint-plugin-svelte3
+* svelte-vscode
+* associating .svelte files with HTML in VSCode, Sublime, etc.
+
+## Atom
+
+Чтобы файлы `.svelte` воспринимались как HTML, в меню выберите *__Правка → Настройки__* и добавьте следующие две строки в раздел `core`:
+
+```cson
+"*":
+ core:
+ …
+ customFileTypes:
+ "text.html.basic": [
+ "svelte"
+ ]
+```
+
+## Vim/Neovim
+
+Лучше всего установить [расширение coc-svelte](https://github.com/coc-extensions/coc-svelte), которое использует официальный языковой сервер.
+
+Либо просто укажите редактору подсвечивать все `*.svelte` файлы HTML синтаксисом, добавив следующую строку в файл `init.vim`:
+
+```
+au! BufNewFile,BufRead *.svelte set ft=html
+```
+
+Чтобы временно включить подсветку синтаксиса HTML для текущего буфера используйте:
+
+```
+:set ft=html
+```
+
+Для того чтобы прописать тип для конкретного файла, используйте [modeline](https://vim.fandom.com/wiki/Modeline_magic):
+
+```
+
+```
+
+## Visual Studio Code
+
+Чтобы файлы `*.svelte` воспринимались как HTML, добавьте следующие строки в файл `settings.json`:
+
+```cson
+ "files.associations": {
+ "*.svelte": "html"
+ }
+```
+
+## JetBrains WebStorm
+
+Для добавления поддержки Svelte в WebStorm (или иную IDE от Jetbrains) следует установит плагин [Svelte Framework Integration](https://plugins.jetbrains.com/plugin/12375-svelte/). Подробнее об использовании плагинов вы можете узнать на [официальном сайте Jetbrains](https://www.jetbrains.com/help/webstorm/managing-plugins.html).
+
+## Sublime Text 3
+
+Откройте любой файл `.svelte`.
+
+Выберите пункт меню *__View → Syntax → Open all with current extension as... → HTML__*.
\ No newline at end of file
diff --git a/blog/2019-04-16-svelte-for-new-developers.md b/blog/2019-04-16-svelte-for-new-developers.md
new file mode 100644
index 0000000..84b7261
--- /dev/null
+++ b/blog/2019-04-16-svelte-for-new-developers.md
@@ -0,0 +1,110 @@
+---
+- title: Svelte для новичков
+- description: Никогда не использовали Node.js или терминал? Не проблема!
+- author: Rich Harris
+- authorURL: https://twitter.com/Rich_Harris
+---
+
+Это краткое руководство предназначено для тех, кто уже прошёл наш [учебник](/tutorial) и горит идеями новых приложений на Svelte, но при этом не имеет большого опыта работы с инструментами сборки Javascript.
+
+Если встретите что-то непонятное или вам покажется, что какие-то вещи нужно описать подробнее, [напишите нам об этом](https://github.com/sveltejs/svelte/issues) или самостоятельно [отредактируйте эту страницу](https://github.com/sveltejs/svelte/blob/master/site/content/blog/2019-04-16-svelte-for-new-developers.md) — это поможет другим новичкам.
+
+Если у вас возникнут трудности с прохождением этого руководства, лучшее место для где вы можете спросить совета — это русскоязычный канал в Telegram ([@sveltejs](tg://resolve?domain=sveltejs)).
+
+
+## Начнём с азов
+
+Вы будете использовать *командную строку*, также известную как терминал. В Windows вы можете открыть терминал запустив приложение **Командная строка** из меню Пуск. В MacOS нажмите вместе на клавиатуре клавиши `Cmd` и `Пробел` для запуска **Spotlight** и введите в строку поиска `Terminal.app`. На большинстве Linux дистрибутивах достаточно нажать вместе `Ctrl-Alt-T` для открытия терминала.
+
+Командная строка позволяет взаимодействовать с вашим компьютером(или удалённым компьютером, но об этом в другой раз) с гораздо большими возможностями и контролем, чем предоставляет GUI(графический интерфейс пользователя), который ежедневно используют большинство людей.
+
+Оказавшись в командной строке, вы можете перемещаться по файловой системе, используя команду `ls` (`dir` на Windows) для отображения списка файлов в текущей директории и команду `cd` для перемещения в другую директорию. Например, если в вашей домашней папке есть директория `Development`, то нужно напечатать
+
+```bash
+cd Development
+```
+
+чтобы войти в нее. Тут вы можете создать директорию для нового проекта командой `mkdir`:
+
+```bash
+mkdir svelte-projects
+cd svelte-projects
+```
+
+Знакомство с обширным списком всех доступных команд в терминале выходит за рамки этого руководства, но запомните еще несколько полезных команд:
+
+* `cd ..` — перемещает в родителькую директорию
+* `cat my-file.txt` — в Mac/Linux (`type my-file.txt` на Windows), отображает содержимое файла `my-file.txt`
+* `open .` (или `start .` в Windows) — открывает текущую папку в Finder или Проводнике
+
+
+## Установка Node.js
+
+[Node](https://nodejs.org/en/) позволяет запускать JavaScript в терминале. Это приложение используется множеством инструментов, включая Svelte. Если оно еще не установлено на вашем компьютере, то проще всего скачать последнюю версию прямо с [сайта Node](https://nodejs.org/en/).
+
+После установки Node у вас появится три новые команды:
+
+* `node my-file.js` — запустит выполнение JavaScript в файле `my-file.js`
+* `npm [команда]` — [npm](https://www.npmjs.com/) способ установки 'пакетов', от которых зависит ваше приложение, например [svelte](https://www.npmjs.com/package/svelte).
+* `npx [команда]` — удобный способ запуска приложений, доступных на npm, без их непосредственной установки на компьютере
+
+
+## Установка редактора кода
+
+Чтобы писать код, необходим хороший редактор. Наиболее популярный выбор сейчас — это [Visual Studio Code](https://code.visualstudio.com/) или VSCode, что вполне оправдывается его продуманностью, полнофункциональностью и богатством расширений ([в т.ч. для Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), которое обеспечивает подсветку синтаксиса и проверку ошибок при написании кода компонентов).
+
+
+## Создание проекта
+
+Мы последуем инструкциям из второй части статьи [Легкий способ начать использовать Svelte](/blog/the-easiest-way-to-get-started).
+
+
+
+Сначала, воспользуемся npx для запуска приложения [degit](https://github.com/Rich-Harris/degit), которое умеет копировать шаблоны проектов из репозиториев [GitHub](https://github.com) и других подобных сервисов. Вы можете и не использовать готовый шаблон приложения, но он позволяет не делать первоначальную настройку проекта и экономит ваше время. Для того, чтобы `degit` заработал, на компьютере уже должен быть установлен [Git](https://git-scm.com/) (Позднее, вам скорее всего придется узнать как работать с [Git](https://git-scm.com/), который большинство разработчиков используют для управления своими проектами).
+
+В командной строке перейдите в директорию, где вы хотите создать новый проект, затем напечатайте следуюшие команды (вы, безусловно, можете скопировать все команды сразу и вставить их в терминал, но лучше вручную напишите каждую строчку, чтобы они отложились в вашей мышечной памяти):
+
+```bash
+npx degit sveltejs/template my-svelte-project
+cd my-svelte-project
+npm install
+```
+
+
+После этого будет создана новая директория, `my-svelte-project`, произойдёт загрузка в неё файлов шаблона из репозитория [sveltejs/template](https://github.com/sveltejs/template) и установка некоторого количества пакетов из npm. Откройте эту папку в редакторе кода и осмотритесь. 'Исходный код' приложения находится в директории `src`, а ресурсы, которые приложение сможет использовать, в папке `public`.
+
+В файле `package.json` есть раздел `"scripts"`. Это команды для работы с вашим приложением — `dev`, `build` и `start`. Чтобы запустить приложение в режиме разработки, выполните такую команду:
+
+```bash
+npm run dev
+```
+
+Вызов скрипта `dev` приведёт к запуску программы, которая называется [Rollup](https://rollupjs.org/guide/en/). Rollup занимается тем, что берёт исходный код вашего приложения (на данный момент у нас есть только `src/main.js` и `src/App.svelte`), передаёт его в другие программы (в нашем случае Svelte) и на выходе собирает в код, который будет выполняться, когда вы откроете своё приложение в браузере.
+
+Раз мы упомянули браузер, то давайте откроем его и прейдем по адресу http://localhost:5000. Это ваше приложение, которое запущено на локальном *web сервере* на порту номер 5000.
+
+Попробуйте отредактировать `src/App.svelte` и сохранить его. Приложение перезагрузится и отобразит ваши изменения.
+
+
+## Сборка приложения
+
+Ранее мы запускали приложение в 'режиме разработчика'. В этом режиме Svelte добавляет дополнительный код, который помогает отлаживать приложение. Кроме того, Rollup не минимизирует итоговый JavaScript код при помощи плагина [Terser](https://terser.org/).
+
+Когда настанет время поделиться вашим приложением с миром, нужно собрать его как можно более компактным и эффективным. Для этого используйте команду `build`:
+
+```bash
+npm run build
+```
+
+После этого, в директории `public` уже будет минимизированный файл `bundle.js`, содержащий JavaScript код вашего приложения. Вы можете запустить его командой:
+
+```bash
+npm run start
+```
+
+Приложение будет запущено по адресу http://localhost:5000.
+
+
+## Дальнейшие шаги
+
+Для распространения вашего приложения необходимо его где-то разместить. Существует множество вариантов как это сделать — наиболее популярные описаны в файле `README.md`, который вы найдете в папке вашего проекта.
diff --git a/blog/2019-04-20-write-less-code.md b/blog/2019-04-20-write-less-code.md
new file mode 100644
index 0000000..157cdbd
--- /dev/null
+++ b/blog/2019-04-20-write-less-code.md
@@ -0,0 +1,165 @@
+---
+- title: Пишите меньше кода
+- description: Самый важный показатель, на который вы не обращаете внимания
+- author: Rich Harris
+- authorURL: https://twitter.com/Rich_Harris
+- translator: Alexey Schebelev
+---
+
+В любом коде могут быть баги. Соответственно, число возможных багов в приложении растёт вместе с количеством кода, который вы пишите.
+
+Очевидно, что, чем больше кода нам приходится писать, тем больше это отнимает времени. Вскоре, его перестёт хватать для таких нужных вещей, как оптимизация, добавление новых возможностей в приложение, ну, или для прогулок на открытом воздухе вместо корпения за ноутбуком.
+
+На самом деле, широко известно, что, с увеличением кодовой базы приложения, [время разработки проекта](https://blog.codinghorror.com/diseconomies-of-scale-and-lines-of-code/) и [количество багов](https://www.mayerdan.com/ruby/2012/11/11/bugs-per-line-of-code-ratio) растут даже не с линейной, а с *квадратичной* зависимостью. Этим можно объяснить наше подсознательное поведение, когда пулл-реквесту на 10 строк мы с лёгкостью уделим такой уровень внимания, который редко достаётся коду размером более 100 строк. А как только код становится слишком длинным, и перестаёт помещаться на одном экране, когнитивные усилия, необходимые для его понимания, значительно возрастают. Мы пытаемся исправить ситуацию путём рефакторинга и добавлением комментариев — действия, которые почти наверняка приводят к ещё *бо́льшему количеству* кода. Это порочный круг.
+
+Мы все немного одержимы, верно? Мы следим за производительностью приложения, размером бандла и всего прочего, что мы можем хоть как-то измерить, но мы редко обращаем внимание на объём кода, который пишем.
+
+
+## Читаемость кода — это важно
+
+Само собой, я не утверждаю, что мы должны использовать любые хитрые уловки, чтобы сделать наш код максимально компактным в ущерб читабельности. Также я не утверждаю, что уменьшение *строк* кода — это самоцель, так как это может способствовать превращению нормального читаемого кода, вроде этого...
+
+```js
+for (let i = 0; i <= 100; i += 1) {
+ if (i % 2 === 0) {
+ console.log(`${i} — чётное`);
+ }
+}
+```
+
+...во что-то неудобоваримое:
+
+```js
+for (let i = 0; i <= 100; i += 1) if (i % 2 === 0) console.log(`${i} — чётное`);
+```
+
+Я просто хочу убедить вас, что лучше отдавать предпочтение языкам и шаблонам, которые позволяют нам писать меньше кода естественным образом.
+
+## Да, я говорю о Svelte
+
+Сокращение объёма кода, который нужно писать, является очевидным преимуществом Svelte. Чтобы проиллюстрировать это, давайте посмотрим на очень простой компонент, реализованный на React, Vue и Svelte. Сначала, версия Svelte:
+
+
+
+
+
+Как мы сделаем то же самое в React? Скорее всего, это будет выглядеть примерно так:
+
+```js
+import React, { useState } from 'react';
+
+export default () => {
+ const [a, setA] = useState(1);
+ const [b, setB] = useState(2);
+
+ function handleChangeA(event) {
+ setA(+event.target.value);
+ }
+
+ function handleChangeB(event) {
+ setB(+event.target.value);
+ }
+
+ return (
+
+
+
+
+
{a} + {b} = {a + b}
+
+ );
+};
+```
+
+И, наконец, в Vue:
+
+```html
+
+
+
+
+
+
{{a}} + {{b}} = {{a + b}}
+
+
+
+
+```
+
+
+
+Иначе говоря, требуется 442 символа в React и 263 символа в Vue, чтобы достичь чего-то, что в Svelte занимает 145 символов. Версия React буквально в три раза больше!
+
+Такая *сильная* разница скорее исключение — из моего опыта, компонент React обычно примерно на 40% больше, чем его эквивалент на Svelte. Давайте теперь взглянем на особенности Svelte, которые позволяют компактнее излагать наши идеи.
+
+
+### Элементы верхнего уровня
+
+В Svelte компонент может иметь столько элементов верхнего уровня, сколько вам нужно. В React и Vue компонент обязан иметь единственный элемент верхнего уровня — в случае React попытка вернуть два элемента верхнего уровня из функции компонента приведет к синтаксической ошибке. Вы можете использовать фрагмент — `<>` — вместо `
`, но дополнительный уровень вложенности никуда не денется.
+
+В Vue разметка должна быть размещена внутри элемента ``, который, на мой взгляд тут лишний.
+
+
+### Привязки
+
+В React мы должны самостоятельно обрабатывать события полей ввода вроде ``:
+
+```js
+function handleChangeA(event) {
+ setA(+event.target.value);
+}
+```
+
+Это не просто весьма скучная конструкция, занимающая место на экране, это ещё и дополнительная часть кода, где могут появиться ошибки. Концептуально, значение текстового поля привязано к значению `a` и наоборот, но это отношение не выражено чётко — вместо этого у нас есть два тесно связанных, но физически отдельных фрагмента кода (обработчик события и свойство `value={a}`). Кроме этого, мы должны помнить, что необходимо принудительно привести строковое значение в числовое с помощью оператора `+`, иначе `2 + 2` будет равно `22` вместо `4`.
+
+Как и в Svelte, у Vue есть свой способ выразить привязку — атрибут `v-model`, но, и тут мы должны быть внимательны и использовать `v-model.number`, несмотря на то, что берём значение из ``.
+
+
+### Стейт
+
+В Svelte обновление локального состояния компонента происходит с помощью простого оператора присваивания:
+
+```js
+let count = 0;
+
+function increment() {
+ count += 1;
+}
+```
+
+В React, мы используем хук `useState`:
+
+```js
+const [count, setCount] = useState(0);
+
+function increment() {
+ setCount(count + 1);
+}
+```
+
+Тут сильно больше постороннего *шума* — оба фрагмента кода выражают одну и ту же концепцию, но во втором случае было использовано на 60% больше символов. Поэтому, когда вы читаете такой код, вам придётся приложить гораздо больше усилий, чтобы понять замысел автора.
+
+Ну, а в Vue у нас есть экспорт по умолчанию, содержащий функцию `data`, которая возвращает литерал объекта со свойствами, соответствующими локальному состоянию приложения. Отмечу также, что в Vue нельзя просто импортировать и сразу использовать в разметке такие вещи, как функции из внешних файлов и дочерние компоненты, так как сначала их необходимо 'зарегистрировать', указав в определённой части экспорта по умолчанию.
+
+
+## Забудем про шаблонный код
+
+Это лишь малая часть возможностей Svelte, которые помогают с минимальными усилиями создавать UI приложения. Есть ещё много других — например, [реактивные объявления](/tutorial/reactive-declarations), которые по своей сути выполняют работу функций `useMemo`,` useCallback` и `useEffect` из React без лишнего многословного шаблонного кода (который при этом сильно нагружает сборщик мусора созданием инлайновых функций и массивов при каждом изменении состояния приложения).
+
+Как? Мы выбрали путь, позволяющий обойти ограничения среды выполнения в браузере. Поскольку [Svelte — это компилятор](/blog/frameworks-without-the-framework), мы не привязаны к особенностям JavaScript: мы можем *создавать* метод разработки компонентов как нам нравится, а не приспосабливать его к семантике языка. Как это ни парадоксально, но с таким подходом код становится *более* идиоматическим. Например, мы используем переменные естественным путём, а не через прокси или хуки, при этом получая значительно более производительные приложения.
\ No newline at end of file
diff --git a/blog/2019-04-22-svelte-3-rethinking-reactivity.md b/blog/2019-04-22-svelte-3-rethinking-reactivity.md
new file mode 100644
index 0000000..f6aa6cc
--- /dev/null
+++ b/blog/2019-04-22-svelte-3-rethinking-reactivity.md
@@ -0,0 +1,96 @@
+---
+- title: "Svelte 3: Переосмысление реактивности"
+- description: Наконец-то он здесь
+- author: Rich Harris
+- authorURL: https://twitter.com/Rich_Harris
+- translator: Pavel Malyshev
+---
+
+После нескольких месяцев, которые пролетели как пара дней, мы на седьмом небе от счастья потому, что можем объявить о стабильном релизе Svelte 3. Этот по-настоящему огромный релиз, результат сотен часов работы многих людей в сообществе Svelte, включая бета-тестеров, чьи бесценные отзывы помогали оттачивать дизайн фреймворка на каждом этапе этого пути.
+
+Мы думаем, он вам понравится.
+
+
+## Что такое Svelte?
+
+Svelte — это компонентный фреймворк, похожий на React или Vue, но с важным отличием. Традиционные фреймворки позволяют вам писать *декларативный* state-driven код, но не без наказаний: браузер должен выполнить дополнительную работу для преобразования этих декларативных структур в манипуляции с DOM, используя техники, такие как [virtual DOM diffing](/blog/virtual-dom-is-pure-overhead), которые проедают имеющийся бюджет кадров отрисовки и добавляют обязанностей сборщику мусора.
+
+Вместо этого Svelte работает во *время сборки*, преобразуя ваши компоненты в высокоэффективный *императивный* код, который с хирургической точностью обновляет DOM. В результате вы можете писать амбициозные приложения с отличными характеристиками по производительности.
+
+Первая версия Svelte была посвящена [проверке гипотезы](/blog/frameworks-without-the-framework) — что специально созданный компилятор может генерировать надёжный код и обеспечивает отличный пользовательский опыт. Вторая версия была посвящена небольшим улучшениям, которые привели ряд вещей в порядок.
+
+Svelte 3 — это уже существенный пересмотр. В течение последних пяти или шести месяцев мы уделяли особое внимание пользовательскому опыту разработчиков. Теперь можно писать компоненты с количеством шаблонного кода, [значительно меньшим](/blog/write-less-code), чем где либо ещё. Попробуйте наш совершенно новый [учебник](/tutorial) и посмотрите, что мы имеем ввиду — если вы уже знакомы с другими фреймворками, думаем, вы будете приятно удивлены.
+
+Чтобы эта возможность стала реальностью, нам сначала нужно было переосмыслить концепцию, лежащую в основе современных UI фреймворков: *реактивность*.
+
+
+
+
+## Перемещение реактивности в язык
+
+В предыдущих версиях Svelte, вы должны были сообщить компьютеру, что какая-то часть состояния изменилась с помощью вызова метода `this.set`:
+
+```js
+const { count } = this.get();
+this.set({
+ count: count + 1
+});
+```
+
+Он заставлял компонент *реагировать*. Кстати говоря, `this.set` практически идентичен методу `this.setState`, который использовался в классическом (до хуков) React:
+
+```js
+const { count } = this.state;
+this.setState({
+ count: count + 1
+});
+```
+Тут есть важные технические различия (как я объясняю в видео выше — React не реагирует), но концептуально это одно и то же.
+
+
+
+Все изменилось с появлением [хуков в React](https://reactjs.org/docs/hooks-intro.html), которые управляют состоянием совсем по-другому. Многие фреймворки начали экспериментировать со своими собственными реализациями хуков, но мы быстро пришли к выводу, что это не то направление, куда бы мы хотели идти. Хуки имеют некоторые интригующие свойства, но они также включают в себя неестественный код и создают ненужную работу для сборщика мусора. Для фреймворка, который используется на [embedded-устройствах](https://mobile.twitter.com/sveltejs/status/1088500539640418304), а также в тяжелых интерактивных анимациях, это не хорошо.
+
+Поэтому мы сделали шаг назад и спросили себя, какой тип API был бы лучшим для нас... и поняли, что лучший API — это отсутствие API. Мы можем просто *использовать язык*. Обновление значения `count` и всех вещей, которые зависят от него, должно быть простым:
+
+```js
+count += 1;
+```
+
+Поскольку мы являемся компилятором, мы можем сделать это, осуществляя фактическое присваивание за кулисами:
+
+```js
+count += 1; $$invalidate('count', count);
+```
+Важно отметить, что мы можем сделать всё это без лишних затрат и сложности использования прокси или аксессоров. Это просто переменная.
+
+## Новый облик
+
+Не только компоненты получили подтяжку лица. Сам Svelte теперь имеет совершенно новый внешний вид благодаря удивительной дизайнерской работе [Achim Vedam](https://vedam.de/), создавшего новый логотип и веб-сайт, который переехал со [svelte.technology](https://svelte.technology) на [svelte.dev](https://svelte.dev).
+
+Мы также изменили наш слоган с «Магически исчезающего UI фреймворка» на «Кибернетически улучшенные web-приложения». У Svelte много сильных сторон — отличная производительность, небольшой размер бандла, доступность, встроенная инкапсуляция стилей, декларативные анимации переходов, простота использования, тот факт, что это компилятор и многие другие. Поэтому сосредоточение внимания на одной из них кажется несправедливым по отношению к другим.
+
+## Обновление с версии 2
+
+Если вы уже являетесь пользователем Svelte 2, боюсь, потребуется ручное обновление ваших проектов. В ближайшие дни мы выпустим руководство по миграции и обновлённую версию утилиты [svelte-upgrade](https://github.com/sveltejs/svelte-upgrade), которая сделает всё возможное, чтобы автоматизировать процесс. Но изменения *слишком существенные*, поэтому не всё может быть обработано автоматически.
+
+Такое решение далось нам не легко: надеюсь, что, испытав Svelte 3, вы поймете, почему мы сочли необходимым порвать с прошлым.
+
+
+## Все ещё впереди
+
+Каким бы изнурительным ни был этот релиз, мы ещё не закончили. У нас есть масса идей как генерировать код умнее, более компактно, и длинный список пожеланий. [Sapper](https://ru.sapper.svelte.dev), наш фреймворк для приложений в стиле Next.js, всё ёще находится в процессе обновления для использования совместно со Svelte 3. Проект сообщества [Svelte Native](https://svelte-native.technology/), который позволяет писать приложения для Android и iOS на Svelte, продвигается вперед и заслуживает более полной поддержки со стороны ядра.
+
+У нас пока нет множества расширений для редакторов, подсветки синтаксиса, наборов компонентов, devtools и т. д., которые есть у других фреймворков, и мы должны это исправить. И мы *действительно* хотим добавить первоклассную поддержку TypeScript.
+
+Несмотря на всё это, мы считаем, что сейчас Svelte 3 — лучший способ создания веб-приложений. Потратьте час, чтобы пройти [учебник](/tutorial) и мы надеемся, что убедим вас в этом. В любом случае, мы хотели бы видеть вас в нашем [Discord чате](https://svelte.dev/chat), русскоязычном [канале Telegram](https://t.me/sveltejs) и на [GitHub](https://github.com/sveltejs/svelte) — добро пожаловать всем, особенно вам.
diff --git a/blog/2020-07-17-svelte-and-typescript.md b/blog/2020-07-17-svelte-and-typescript.md
new file mode 100644
index 0000000..1014498
--- /dev/null
+++ b/blog/2020-07-17-svelte-and-typescript.md
@@ -0,0 +1,138 @@
+---
+- title: Svelte <3 TypeScript
+- description: Typernetically enhanced web apps
+- author: Orta Therox
+- authorURL: https://twitter.com/orta
+---
+
+Поддержка Typescript, без сомнения, была самой желанной и востребованной фичей в течении долгого времени и вот она здесь: Svelte официально поддерживает TypeScript!
+
+Мы полагаем, что это даст вам гораздо более приятный опыт разработки. Который прекрасно масштабируется на больших приложениях, независимо от того, используете ли вы TypeScript или JavaScript.
+
+
+
+ TypeScript + Svelte в VS Code (тема Kary Pro.)
+
+
+
+## Попробуйте прямо сейчас
+
+Вы можете просто начать новый Svelte + Typescript проект, скачав [обычный шаблон](https://github.com/sveltejs/template) и запустив специальный скрипт-настройщик `node scripts/setupTypeScript.js`.
+
+```bash
+npx degit sveltejs/template svelte-typescript-app
+cd svelte-typescript-app
+node scripts/setupTypeScript.js
+```
+
+Если вы используете VS Code, убедитесь что вы используете новое [официальное расширение](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), которое заменяет популярное расширение от James Birtles. Далее мы подробно рассмотрим отдельные шаги, связанные с использованием TypeScript в существующем проекте Svelte.
+
+## Что означает поддержка TypeScript в Svelte?
+
+На самом деле, поддержка Typescript в Svelte приложениях уже была возможна в течении долгого времени. Однако вам приходилось смешивать множество разрозненных инструментов, и каждый проект выполнялся независимо. Сегодня почти все эти инструменты находятся в ведении организации Svelte и официально поддерживаются группой людей, которые берут на себя ответственность за весь конвейер и преследуют общие цели.
+
+За неделю до того как COVID был объявлен пандемией, я [внес предложение](https://github.com/sveltejs/svelte/issues/4518)консолидировать лучшие инструменты и идеи Svelte из аналогичных dev-экосистем и предоставил набор шагов, чтобы получить первокласную поддержку TypeScript. С тех пор многие люди присоединились к этому предложению и написали код, чтобы реализовать задуманное.
+
+Итак, когда мы говорим, что Svelte теперь поддерживает TypeScript, мы имеем в виду несколько различных вещей:
+
+* Можно использовать TypeScript внутри блоков `
+```
+Это гарантирует, что вы можете вызывать отправку только с указанными именами событий и их типами. Расширение Svelte для VS Code также было обновлено с учетом этой новой функции. Оно обеспечит строгую типизацию для этих событий, а также подсказки для автодополнения и при наведении курсора.
+
+**Новое в Sapper!**
+Только что вышел Sapper 0.28.9. Основные новшества: лучшая поддержка атрибута `nonce` для CSP, поддержка предварительной загрузки ресурсов для экспортированных страниц и сведения об ошибках, которые теперь доступны в хранилище `$page` на страницах ошибок.
+
+Кроме того, переписана обработка CSS, чтобы исправить существующие ошибки, теперь CSS обрабатывается отдельным плагином Rollup, что устранило необходимость внутренней регистрации CSS в системе маршрутизации. Поздравляем и благодарим всех, кто работает над Sapper, за их солидную работу!
+
+
+## Багфиксы
+- Компиляция CSS больше не удаляет правила для атрибута `open` в элементах `` ([Пример](https://svelte.dev/repl/ab4c0c177d1f4fab92f46eb8539cea9a?version=3.26.0), **3.26.0**)
+- `prettier-plugin-svelte` теперь будет лучше справляться с пробелами, особенно вокруг встроенных элементов. Он также сохранит форматирование внутри тегов `
` и больше не будет форматировать языки, которые не поддерживаются Prettier, такие как SASS, Pug или Stylus.
+
+
+## Скоро
+- [Svelte Summit](https://sveltesummit.com/), Вторая глобальная онлайн-конференция Svelte состоится 18 октября! Зарегистрируйтесь бесплатно, чтобы получать напоминания и обсуждать обновления!
+
+Чтобы узнать обо всех функциях и исправлениях, см. CHANGELOG для [Svelte](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md) и [Sapper](https://github.com/sveltejs/sapper/blob/master/CHANGELOG.md).
+
+
+---
+
+## Svelte Showcase
+- [This CustomMenu example](https://svelte.dev/repl/3a33725c3adb4f57b46b597f9dade0c1?version=3.25.0) демонстрации того, как заменить контекстное меню браузера
+- [Github Tetris](https://svelte.dev/repl/cc1eaa7c66964fedb5e70e3ecbbaa0e1?version=3.25.1) тетрис, в истории коммитов git
+- [Who are my representatives?](https://whoaremyrepresentatives.us/) веб-сайт, созданный с помощью Svelte, чтобы помочь жителям США получить больше информации о своих представителях в Конгрессе
+- [Pick Palette](https://github.com/bluwy/pick-palette) крутой менеджер цветовой палитры, созданный с помощью Svelte!
+
+### Обучение:
+- [Svelte 3 Up and Running](https://www.amazon.com/dp/B08D6T6BKS/ref=cm_sw_r_tw_dp_x_OQMtFb3GPQCB2) новая книга о создании готовых к работе статических веб-приложений с помощью Svelte 3
+- [Sapper Tutorial (Crash Course)](https://www.youtube.com/playlist?list=PL4cUxeGkcC9gdr4Qhx83gBBcID-KMe-PQ) подробно рассказывает о Sapper, фреймворке для приложений на базе Svelte.
+- [Svelte Society Day France](https://france.sveltesociety.dev/) 27 сентября мы обсудили самые разные темы на французском языке! Вы можете найти полную запись [здесь](https://www.youtube.com/watch?v=aS1TQ155JK4).
+
+### Переиспользуемые компоненты:
+- [svelte-zoom](https://github.com/vaheqelyan/svelte-zoom) обеспечивает "почти родное" панорамирование и масштабирование изображений на компьютерах и мобильных устройствах.
+- [svelte-materialify](https://github.com/TheComputerM/svelte-materialify) библиотека Material компонентов для Svelte с более чем 50 компонентами
+- [svelte-undoable](https://github.com/macfja/svelte-undoable) упрощает операции отмены и повтора с помощью `bind:`
+- [This Tilt component](https://svelte.dev/repl/7b23ad9d2693424482cd411b0378b55b?version=3.24.1) при наведлении мыши элемент наклоняется в перспективе следуя за мышью
+
+### В этом месяце появилось множество примеров использования технологии JS:
+ - [Sapper with PostCSS and Tailwind](https://codechips.me/sapper-with-postcss-and-tailwind/)
+ - [PrismJS (Code block syntax highlighting)](https://github.com/phptuts/Svelte-PrismJS)
+ - [Filepond (Drag-and-drop file upload)](https://github.com/pqina/svelte-filepond)
+ - [Ionic (UI Components)](https://github.com/Tommertom/svelte-ionic-app)
+ - [Pell (WYSIWYG Editor)](https://github.com/Demonicious/svelte-pell/)
+ - [Leaflet (Mapping)](https://github.com/anoram/leaflet-svelte)
+
+**Напоминание**: [Svelte integrations repo](https://github.com/sveltejs/integrations) который демонстрирует способы включения Svelte в ваш стек (и наоборот). Если у вас есть вопросы о том, как использовать определенную технологию со Svelte, вы можете найти там свой ответ ... и если у вас есть что-то для работы со Svelte, подумайте об участии!
+
+Чтобы увидеть больше потрясающих проектов Svelte, посетите [Svelte Society](https://sveltesociety.dev/), [Reddit](https://www.reddit.com/r/sveltejs/) и [Discord](https://discord.com/invite/yy75DKs)… и обязательно разместите свой пост!
+
+## Увидимся в следующем месяце!
+
+Кстати, у Svelte теперь есть [OpenCollective](https://opencollective.com/svelte)! и все расходы публикуются публично. Узнайте, кто жертвует, сколько, куда идут эти деньги, укажите расходы, получите возмещение и многое другое!
diff --git a/blog/2020-11-01-whats-new-in-svelte-november-2020.md b/blog/2020-11-01-whats-new-in-svelte-november-2020.md
new file mode 100644
index 0000000..3793532
--- /dev/null
+++ b/blog/2020-11-01-whats-new-in-svelte-november-2020.md
@@ -0,0 +1,46 @@
+---
+- title: "Что нового в Svelte: Ноябрь 2020"
+- description: Исправления переадресации слотов, SvelteKit для более быстрой локальной разработки и многое другое со Svelte Summit France
+- author: Daniel Sandoval
+- authorURL: https://desandoval.net
+---
+
+С возвращением в серию "Что нового в Svelte"! В этом месяце мы расскажем о новых функциях и исправлениях ошибок, о прошедшем в прошлом месяце Svelte Summit France, а также о некоторых выдающихся сайтах и библиотеках ...
+
+## Новые возможности и багфиксы
+
+1. Destructuring Promises теперь работает должным образом, используя синтаксис `{#await}`
+ (**3.29.3**, [Пример](https://svelte.dev/repl/3fd4e2cecfa14d629961478f1dac2445?version=3.29.3))
+2. Проброс слотов (выпущено в 3.29.0) больше не должен зависать во время компиляции (**3.29.3**, [Пример](https://svelte.dev/repl/29959e70103f4868a6525c0734934936?version=3.29.3))
+3. Улучшенная типизация для `get` функции в `svelte/store` и на хуках жизненного цикла (**3.29.1**)
+
+**Что с Sapper?**
+
+Sapper получил несколько новых типов в `preload` функцию, которые упростят типизацию, если вы используете TypeScript. Посмотрите в [Sapper docs](https://sapper.svelte.dev/docs#Typing_the_function) как лучше их использовать. Также были исправлены ошибки `preload` ссылок на экспортированных сайтах. Макеты маршрутов также получили несколько исправлений, в том числе обеспечение применения CSS к вложенным макетам маршрутов. Вы также можете лучше организовать свои файлы, теперь, когда поддерживаются расширения с несколькими точками. (**0.28.10**)
+
+
+Все функции и исправления в CHANGELOG для [Svelte](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md) и [Sapper](https://github.com/sveltejs/sapper/blob/master/CHANGELOG.md).
+
+
+## [Svelte Summit](https://sveltesummit.com/) was Svelte-tacular!
+- Рич Харрис продемонстрировал возможное будущее разработки Svelte в докладе под названием «Футуристическая веб-разработка». Еще не публичный проект называется SvelteKit (название может измениться) и принесет первоклассный опыт разработчика и большую гибкость для результатов сборки. Если вы хотите получить полную картину, [смотрите видео](https://www.youtube.com/watch?v=qSfdtmcZ4d0).
+- 17 докладчиков максимально использовали виртуальный формат конференции ... От плавающих голов до бесшовных демонстраций, разработчики Svelte любого уровня подготовки найдут что-то интересное в этом году [YouTube playlist](https://www.youtube.com/playlist?list=PL8bMgX1kyZThM1sbYCoWdTcpiYysJsSeu)
+
+---
+
+## Community Showcase
+- [Svelte Lab](https://sveltelab.app/) демонстрирует различные компоненты, визуализации и взаимодействия. Вы можете щелкнуть любой компонент, чтобы увидеть его источник или отредактировать его, используя встроенный REPL сайта.
+- [svelte-electron-boilerplate](https://github.com/hjalmar/svelte-electron-boilerplate) быстрый способ начать работу с приложением Svelte, для десктопов на Electron
+- [React Hooks in Svelte](https://github.com/joshnuss/react-hooks-in-svelte) демонстрирует примеры распространенных хуков React, портированных на Svelte.
+- [gurlic](https://gurlic.com/) социальная сеть и интернет-эксперимент, который очень быстр благодаря Svelte
+- [Interference 2020](https://interference2020.org/) визуализирует сообщения об иностранном вмешательстве в выборы в США 2020 года. Вы можете узнать больше о том, как он был встроен в [YYY's talk at Svelte Summit]()
+- [jitsi-svelte](https://github.com/relm-us/jitsi-svelte) позволяет легко создавать свой собственный клиент Jitsi, предоставляя готовые компоненты, созданные с помощью Svelte
+- [Ellx](https://ellx.io/) электронная таблица, записная книжка и IDE. Это супер гладко благодаря Svelte 😎
+- [This New Zealand news site](https://www.nzherald.co.nz/nz/election-2020-latest-results-party-vote-electorate-vote-and-full-data/5CFVO4ENKNQDE3SICRRNPU5GZM/) разбивает результаты парламентских выборов 2020 года с помощью Svelte
+- [Budibase](https://github.com/Budibase/budibase) конструктор приложений без кода, работающий на Svelte
+- [Svelt-yjs](https://github.com/relm-us/svelt-yjs) сочетает в себе совместную технологию Yjs, ориентированную на локальное взаимодействие, с мощью Svelte, позволяющую нескольким пользователям в Интернете оставаться в синхронизации.
+- [tabler-icons-svelte](https://github.com/benflap/tabler-icons-svelte) обёртка Svelte для более чем 850 бесплатных высококачественных SVG-иконок, под бесплатной лицензией MIT, которые вы можете использовать в своих веб-проектах.
+
+## Увидимся в следующем месяце!
+
+Есть, что показать? Хотите больше участвовать в Svelte? Мы всегда ищем сопровождающих, участников и фанатиков ... Ознакомьтесь с [Svelte Society](https://sveltesociety.dev/), [Reddit](https://www.reddit.com/r/sveltejs/) и [Discord](https://discord.com/invite/yy75DKs)!
diff --git a/blog/2020-11-05-whats-the-deal-with-sveltekit.md b/blog/2020-11-05-whats-the-deal-with-sveltekit.md
new file mode 100644
index 0000000..37255dc
--- /dev/null
+++ b/blog/2020-11-05-whats-the-deal-with-sveltekit.md
@@ -0,0 +1,103 @@
+---
+- title: В чем дело со SvelteKit?
+- description: Мы переосмысливаем, как создавать приложения Svelte. Вот что вам нужно знать...
+- author: Rich Harris
+- authorURL: https://twitter.com/rich_harris
+---
+
+
+
+Если вы посещали в прошлом месяце [Svelte Summit](https://sveltesummit.com/) то, возможно, видели мой доклад «Футуристическая веб-разработка», в котором я наконец ответил на один из наиболее часто задаваемых вопросов о Svelte: когда Sapper достигнет версии 1.0?
+
+Ответ: никогда.
+
+Это была ирония - как объясняется в докладе, на самом деле это больше похоже на переписывание легаси Sapper в сочетании с ребрендингом - но это вызвало много новых вопросов от сообщества, и пришло время прояснить, что вы можете ожидать от преемника Sapper, SvelteKit.
+
+
+
+
+
+
+
+'Futuristic Web Development' from Svelte Summit
+
+
+
+
+## Что такое сапер?
+
+[Sapper](https://sapper.svelte.dev) — это фреймворк приложения (или «метафреймворк»), построенный на основе Svelte (который представляет собой компонентный фреймворк). Его задача - упростить создание приложений Svelte с использованием всех современных передовых методов, таких как рендеринг на стороне сервера (SSR) и разделение кода, а также предоставить структуру проекта, которая делает разработку продуктивной и увлекательной. Он использует маршрутизацию на основе файловой системы (как популяризировано [Next](https://nextjs.org/) и принято многими другими фреймворками, хотя и с некоторыми улучшениями) - файловая структура вашего проекта отражает структуру самого приложения.
+
+Хотя домашняя страница и документация Svelte предлагают вас [degit](https://github.com/Rich-Harris/degit) репозиторий [sveltejs/template](https://github.com/sveltejs/template) чтобы начать создание приложения, Sapper уже давно является нашим рекомендуемым способом создания приложений; этот пост в блоге (на момент написания!) рендерится с помощью Sapper.
+
+
+## Почему мы переходим на что-то новое?
+
+Во-первых, различие между [sveltejs/template](https://github.com/sveltejs/template) и [sveltejs/sapper-template](https://github.com/sveltejs/sapper-template) сбивает с толку, особенно новичков в Svelte. Наличие единого рекомендуемого способа создания приложений с помощью Svelte принесет огромные преимущества: мы упростим адаптацию, уменьшим нагрузку на обслуживание и поддержку и потенциально можем начать исследовать новые возможности, которые открываются при наличии предсказуемой структуры проекта. (Эта последняя часть намеренно расплывчата, потому что потребуется время, чтобы полностью понять, что это за возможности.)
+
+Помимо всего этого, нас соблазнила мысль переписать Sapper. Отчасти это связано с тем, что кодовая база с годами стала немного неопрятной ([Sapper started in 2017](/blog/sapper-towards-the-ideal-web-app-framework)), но в основном потому, что в последнее время Интернет сильно изменился, и пришло время переосмыслить некоторые из наших основополагающих предположений.
+
+
+## В чем же отличие?
+
+Первое отличие в том, что вам необходимо использовать сборщик модулей, например [webpack](https://webpack.js.org/) или [Rollup](https://rollupjs.org/) для создания приложений. Эти инструменты отслеживают график зависимостей вашего приложения, анализируя и преобразуя код по пути (например, превращая компоненты Svelte в модули JS), чтобы создавать пакеты кода, которые могут работать где угодно. Как первоначальный создатель Rollup, я могу засвидетельствовать, что это удивительно сложная проблема с дьявольскими крайними случаями.
+
+Вам определенно нужен был сборщик несколько лет назад, потому что браузеры изначально не поддерживали `import`, но сегодня это гораздо менее актуально. Прямо сейчас мы наблюдаем рост разделенного рабочего процесса разработки, который радикально проще: вместо того, чтобы с нетерпением объединять ваше приложение, сервер разработки может обслуживать модули (преобразованные в JavaScript, если необходимо) по запросу, что означает, что запуск происходит практически мгновенно. каким бы большим ни стало ваше приложение.
+
+[Snowpack](https://www.snowpack.dev/) находится в авангарде этого движения, и именно этим движет SvelteKit. Он удивительно быстр и имеет прекрасный опыт разработки (горячая перезагрузка модулей, наложения ошибок и т. Д.), И мы тесно сотрудничаем с командой Snowpack над такими функциями, как SSR. Горячая перезагрузка модуля особенно важна, если вы привыкли использовать Sapper с Rollup (который никогда не имел первоклассной поддержки HMR из-за его архитектуры, которая отдает приоритет наиболее эффективному выходу).
+
+Это не значит, что мы полностью отказываемся от сборщиков пакетов. По-прежнему важно оптимизировать ваше приложение для производства, и SvelteKit использует Rollup, чтобы сделать ваши приложения максимально быстрыми и экономичными (что включает такие вещи, как извлечение стилей в статические файлы `.css`).
+
+Другое отличие в том, что серверное приложение нуждается в сервере. Sapper фактически имеет два режима — `sapper build`, которая создает автономное приложение, которое должно запускаться на сервере Node, и `sapper export` который превращает ваше приложение в набор статических файлов, подходящих для размещения на таких сервисах, как GitHub Pages.
+
+Статические файлы могут быть какими угодно, но запуск сервера Node (а также его мониторинг / масштабирование и т. д.) не так прост. В настоящее время мы наблюдаем переход к бессерверным платформам, в которых вам как автору приложения не нужно думать о сервере, на котором работает ваш код, со всей сопутствующей сложностью. Вы можете запускать приложения Sapper на бессерверных платформах благодаря таким вещам, как [vercel-sapper](https://github.com/thgh/vercel-sapper), но это, конечно, не то, что вы бы назвали идиоматическим.
+
+
+
+SvelteKit полностью охватывает бессерверную парадигму и будет запущен с поддержкой всех основных бессерверных провайдеров, с «адаптерным» API для нацеливания на любые платформы, которые мы официально не обслуживаем. Кроме того, мы сможем выполнять частичный предварительный рендеринг, что означает, что статические страницы могут быть созданы во время сборки, а динамические - по запросу.
+
+
+## Когда я смогу начать использовать это?
+
+Если вы чувствуете себя смелым, можете начать прямо сейчас:
+
+```bash
+npm init svelte@next
+```
+
+Это создаст основу для нового проекта и установит интерфейс командной строки `@sveltejs/kit`, который предоставляет инструменты для разработки и создания приложения.
+
+Но мы не рекомендуем это делать! Документов нет, и мы не сможем предложить какую-либо поддержку. Это также может часто ломаться.
+
+Работа ведется в частном монорепозитории, пока мы все еще находимся в режиме исследования. Мы планируем подготовить общедоступную бета-версию и объявить о ней здесь, как только мы закроем несколько проблем - репозиторий останется закрытым в это время, но мы создадим место для сбора отзывов от YOLO. После этого мы будем работать над выпуском 1.0, который будет включать открытие репо.
+
+Я не собираюсь давать никаких твердых обещаний относительно сроков, потому что я не люблю нарушать обещания. Но я думаю, что мы говорим о неделях, а не о месяцах.
+
+
+## Что делать, если я не хочу использовать SvelteKit?
+
+Всегда можно будет использовать Svelte как отдельный пакет или через интеграцию сборщика, например [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte). Мы думаем, что очень важно, чтобы вы могли приспособить Svelte к своему рабочему процессу, пусть даже и эзотерическому, и использовать сторонние фреймворки приложений, такие как [Elder.js](https://github.com/Elderjs/elderjs), [Routify](https://routify.dev/), [Plenti](https://plenti.co/), [Crown](https://crownframework.com/), [JungleJS](https://www.junglejs.org/) и другие.
+
+
+## TypeScript?
+
+Не волнуйтесь, мы не запустимся без полной поддержки TypeScript.
+
+
+## Как я могу перенести мои существующие приложения Sapper?
+
+По большей части, перенос кодовой базы Sapper должен быть относительно простым.
+
+Есть некоторые неизбежные изменения (возможность работать на бессерверных платформах означает, что нам нужно заменить пользовательские файлы `server.js` и функции `(req, res) => {...}` более переносимыми эквивалентами), и мы пользуемся возможностью чтобы исправить несколько недостатков дизайна, но в целом приложение SvelteKit будет хорошо знакомо пользователям Sapper.
+
+Подробные руководства по миграции будут сопровождать запуск 1.0.
+
+
+## Как я могу внести свой вклад?
+
+Следите за объявлениями о том, когда мы запустим публичную бета-версию и откроем репо. (Кроме того, теперь у нас есть место [OpenCollective](https://opencollective.com/svelte), где вы можете внести финансовый вклад в проект, если он был для вас ценен. Большое, большое спасибо тем из вас, кто уже сделал это.)
+
+
+## Где я могу узнать больше?
+
+Следите за [@sveltejs](https://twitter.com/sveltejs) и [@SvelteSociety](https://twitter.com/SvelteSociety) в Twitter, и заходите на [svelte.dev/chat](https://svelte.dev/chat). Вам также следует подписаться на [Svelte Radio](https://www.svelteradio.com/), где Кевин и его со-ведущие будут расспрашивать меня об этом проекте в следующем эпизоде (и в период с настоящего момента до следующей недели, когда мы его запишем, [reply to this Twitter thread](https://twitter.com/Rich_Harris/status/1323376048571121665) с вашими дополнительными вопросами).
\ No newline at end of file
diff --git a/blog/2020-12-01-whats-new-in-svelte-december-2020.md b/blog/2020-12-01-whats-new-in-svelte-december-2020.md
new file mode 100644
index 0000000..198ced2
--- /dev/null
+++ b/blog/2020-12-01-whats-new-in-svelte-december-2020.md
@@ -0,0 +1,71 @@
+---
+- title: "Что нового в Svelte: Декабрь 2020"
+- description: Улучшенный инструментарий, экспорт карт и улучшения слотов и контекста
+- author: Daniel Sandoval
+- authorURL: https://desandoval.net
+---
+
+Это последнее «Что нового в Svelte» в этом году, и есть что отпраздновать! Обзор этого месяца включает обновления от `rollup-plugin-svelte`, `Sapper` и `SvelteKit` а также множество демонстраций от сообщества Svelte!
+
+## Новые возможности и багфиксы
+
+1. `$$props`, `$$restProps`, и `$$slots` все теперь поддерживаются в пользовательских веб-компонентах (**3.29.5**, [Пример](https://svelte.dev/repl/ad8e6f39cd20403dacd1be84d71e498d?version=3.29.5)) и `slot` компонентов теперь поддерживают rest props: `` (**3.30.0**)
+2. Новая функция жизненного цикла `hasContext` позволяет легко проверить, был ли установлен `key` в контексте родительского компонента (**3.30.0** & **3.30.1**, [Docs](https://svelte.dev/docs#run-time-svelte-hascontext))
+3. Теперь существует новый класс `SvelteComponentTyped` который упрощает добавление строго типизированных компонентов, расширяющих базовые компоненты Svelte. Авторы библиотеки компонентов и фреймворка радуются! Пример: `export class YourComponent extends SvelteComponentTyped<{aProp: boolean}, {click: MouseEvent}, {default: {aSlot: string}}> {}` (**3.31.0**, [RFC](https://github.com/sveltejs/rfcs/pull/37))
+4. Переходы внутри `{:else}` блока теперь должны успешно завершаться (**3.29.5**, [Example](https://svelte.dev/repl/49cef205e5da459594ef2eafcbd41593?version=3.29.5))
+5. Svelte теперь включает карту экспорта, в которой явно указано, какие файлы можно импортировать из его пакета npm (**3.29.5** с некоторыми исправлениями в **3.29.6**, **3.29.7** и **3.30.0**)
+6. `rollup-plugin-svelte` был новый [7.0.0 release](https://github.com/sveltejs/rollup-plugin-svelte/blob/master/CHANGELOG.md). Самым большим изменением является удаление опции `css`. Пользователи, которые использовали эту опцию, должны добавить еще один плагин, например `rollup-plugin-css-only` как показано [in the template](https://github.com/sveltejs/template/blob/5b1135c286f7a649daa99825a077586655051649/rollup.config.js#L48)
+
+
+## Что с Sapper?
+Множество новых улучшений определений TypeScript, которые делают редактирование приложений Sapper еще проще! CSS для динамического импорта теперь также должен работать в файлах`client.js` files. (Unreleased)
+
+## В чем дело со SvelteKit?
+Мы рады, что вы спросили! Если вы не видели сообщение в блоге Рича в начале прошлого месяца, [вы можете найти его тут](https://svelte.dev/blog/whats-the-deal-with-sveltekit)!
+
+Чтобы узнать обо всех функциях и исправлениях, см. CHANGELOGs [Svelte](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md) и [Sapper](https://github.com/sveltejs/sapper/blob/master/CHANGELOG.md).
+
+---
+
+## Community Showcase
+
+**Apps & Sites**
+- [narration.studio](https://narration.studio/) (Только для Chrome) - это платформа для автоматической записи и редактирования звука в браузере для озвучивания.
+- [Vippet](https://vippet.netlify.app/) инструмент для записи и редактирования видео в браузере.
+- [Pattern Monster](https://pattern.monster/) простой онлайн-генератор шаблонов для создания повторяемых шаблонов SVG.
+- [Plant-based diets](https://planetbaseddiets.panda.org/) веб-сайт Всемирного фонда дикой природы (WWF), созданный с помощью Svelte.
+- [johnells.se](https://www.johnells.se/) шведский сайт электронной коммерции модной одежды, созданный с помощью [Crown](https://crownframework.com/) - фреймворка на базе Svelte.
+- [sentence-length](https://sentence-length.netlify.app/) инструмент обучения и анализа, чтобы показать, как одни авторы играют с разной продолжительностью, в то время как другие придерживаются одной.
+- [svelte-presenter](https://github.com/stephane-vanraes/svelte-presenter) позволяет быстро создавать красивые презентации с помощью Svelte и mdsvex.
+
+**Demos**
+- [u/loopcake got SSR working in Java Spring Boot](https://www.reddit.com/r/sveltejs/comments/jkh5up/svelte_ssr_but_its_java_spring_boot_and_its_native/) для всех магазинов Java, которые хотят рендерить Svelte на стороне сервера.
+- [svelte-liquid-swipe](https://github.com/tncrazvan/svelte-liquid-swipe) демонстрирует причудливый шаблон взаимодействия с использованием путей svg.
+- [Crossfade Link Animation](https://svelte.dev/repl/7f68e148caf04b2787bb6f296208f870?version=3.29.7) демонстрирует, как анимировать между навигационными ссылками с помощью кроссфейда (made by Blu, from the Discord community)
+- [Clip-Path Transitions](https://svelte.dev/repl/b5ad281ae8024b629b545c70c9e8764d?version=3.29.7) демонстрирует, как использовать траектории клипа и пользовательские переходы для создания волшебных входов и выходов (made by Faber, from the Discord community)
+
+**Learning Resources**
+- [lihautan](https://www.youtube.com/channel/UCbmC3HP3FaAFdcZkui8YoMQ/featured) делает простые видеоролики, чтобы поделиться своими глубокими знаниями о Svelte.
+- [Lessons From Building a Static Site Generator](https://nicholasreese.com/lessons-from-building-a-static-site-generator/) делится предысторией и идеями, лежащими в основе Elder.js, а также дизайнерскими решениями, принятыми на этом пути.
+- [Svelte Tutorial and Projects Course ](https://www.udemy.com/course/svelte-tutorial-and-projects-course/) это udemy курс Джона Смилги, в котором студенты изучают Svelte.js, создавая интересные проекты.
+- [Building Pastebin on IPFS - with FastAPI, Svelte, and IPFS](https://amalshaji.wtf/building-pastebin-on-ipfs-with-fastapi-svelte-and-ipfs) объясняет, как сделать распределенное приложение, подобное pastebin.
+
+
+**Components, Libraries & Tools**
+- [svelte-crossword](https://russellgoldenberg.github.io/svelte-crossword/) настраиваемый компонент кроссворда для Svelte.
+- [svelte-cloudinary](https://github.com/cupcakearmy/svelte-cloudinary) упрощает интеграцию Cloudinary со Svelte (включая поддержку Typescript и SSR)
+- [Svelte Nova](https://extensions.panic.com/extensions/sb.lao/sb.lao.svelte-nova/) расширяет новый редактор Nova для поддержки Svelte
+- [saos](https://github.com/shiryel/saos) небольшой изящный компонент для анимации ваших элементов при прокрутке.
+- [Svelte-nStore](https://github.com/lacikawiz/svelte-nStore) замена стора общего назначения, которая выполняет контракт стора Svelte и добавляет функции получения и вычисления.
+- [svelte-slimscroll](https://github.com/MelihAltintas/svelte-slimscroll) Svelte Action, который преобразует любой div в прокручиваемую область с красивой полосой прокрутки.
+- [svelte-typewriter](https://github.com/henriquehbr/svelte-typewriter) простой и многоразовый эффект пишущей машинки для ваших приложений Svelte
+- [svelte-store-router](https://github.com/zyxd/svelte-store-router) маршрутизатор на основе хранилища для Svelte, который предполагает, что маршрутизация - это просто еще одно глобальное состояние, а изменения History API - просто необязательные побочные эффекты этого состояния.
+- [Routify](https://routify.dev/blog/routify-2-released) только что выпустила версию 2 своего роутера Svelte.
+- [svelte-error-boundary](https://www.npmjs.com/package/@crownframework/svelte-error-boundary) предоставляет простой компонент границы ошибок для Svelte, который можно использовать как с DOM, так и с целями SSR.
+- [svelte2dts](https://www.npmjs.com/package/svelte2dts) генерирует файлы d.ts из файлов svelte, создавая по-настоящему совместимые и хорошо типизированные компоненты.
+
+## Увидимся в следующем месяце!
+
+Есть, что показать? Хотите больше участвовать в Svelte? Мы всегда ищем сопровождающих, участников и фанатиков ... Ознакомьтесь с [Svelte Society](https://sveltesociety.dev/), [Reddit](https://www.reddit.com/r/sveltejs/) и [Discord](https://discord.com/invite/yy75DKs)!
+
+Вот и все на год, ребята! Увидимся в январе 😎
diff --git a/blog/2021-01-01-whats-new-in-svelte-january-2021.md b/blog/2021-01-01-whats-new-in-svelte-january-2021.md
new file mode 100644
index 0000000..cc7b23d
--- /dev/null
+++ b/blog/2021-01-01-whats-new-in-svelte-january-2021.md
@@ -0,0 +1,85 @@
+---
+- title: "Что нового в Svelte: Январь 2021"
+- description: A Svelte-packed showcase to kick-off the new year!
+- author: Daniel Sandoval
+- authorURL: https://desandoval.net
+---
+
+С Новым годом от Svelte! В прошлом месяце мы добились прогресса в предстоящем выпуске Sapper, доработали наши типы `SvelteComponent` и увидели несколько замечательных приложений, сайтов и библиотек, выходящих на витрине.
+
+## Что изменилось в Svelte?
+
+В новом минорном релизе заменили `SvelteComponent` класс на `SvelteComponentTyped`. This renaming should help with backwards compatibility. Мы обновили [в декабре](https://svelte.dev/blog/whats-new-in-svelte-december-2020) чтобы избежать путаницы с изменением названия.
+
+Если вы используете `SvelteComponent` или новый `SvelteComponentTyped` в своем проекте или библиотеке, сообщите нам, для чего вы его используете, и мы добавим его в витрину!
+
+
+## Что происходит в Сапере?
+
+Каждый день в предстоящем выпуске появляется больше функций повышения качества жизни. `0.29.0` будет включать новые определения TypeScript, исправления для отслеживания прокрутки и предварительной выборки, а также улучшения в маршрутизаторе для поддержки закодированных параметров запроса.
+
+Если вы обновляетесь с 0.28.x, проверьте [the migration guide](https://sapper.svelte.dev/migrating/#0_28_to_0_29) для шагов по обновлению до Sapper 0.29.
+
+
+## Готов ли SvelteKit?
+
+Чтобы избежать слишком большого оттока во время разработки, SvelteKit все еще работает в частном репо. Объявление будет опубликовано в Discord, блоге и Twitter, когда оно будет готово для большей группы пользователей и участников.
+
+А пока вы можете изучить текущую сборку, запустив `npm init svelte@next` из командной строки.
+
+Как указано в _[What's the deal with SvelteKit?](https://svelte.dev/blog/whats-the-deal-with-sveltekit)_, пока нет доступных документов или поддержки ... Так что используйте на свой страх и риск / для собственного удовольствия!
+
+---
+
+## Community Showcase
+
+**Apps & Sites**
+
+- [manitu.me](https://manitu.me/) таймер фонового звука / помидора для сосредоточения и расслабления
+- [Answer Socrates](https://answersocrates.com/) помогает найти актуальные вопросы в Интернете, чтобы вы могли написать наиболее релевантный пост в блоге, твит или рекламный щит
+- [multris](https://multris.s1h.org/) многопользовательская игра в тетрис. Вы можете прочитать о его развитии [здесь](https://blog.s1h.org/svelte-multiplayer-game/)
+- [weather-ab](https://github.com/ganochenkodg/weather-ab) сравнивает архив погоды в разных городах мира. Незаменим для людей, думающих о миграции
+- [Game Nibs](https://gamenibs.com/) латформа для геймеров, где они могут найти и поделиться краткими игровыми советами, советами, приемами, скриншотами, сборками и многим другим
+- [Ora](https://github.com/cupcakearmy/ora) инструмент с открытым исходным кодом для отслеживания и ограничения веб-сайтов для Chrome и Firefox
+- [vscode-dms](https://github.com/techsyndicate/vscode-dms) приложение для группового чата с прямым обменом сообщениями для VSCode
+- [Zero.2](https://zero.oleksandrdemian.tech/) математическая игра, в которой вы пытаетесь достичь нуля как можно быстрее
+- [Octave Compass](https://octavecompass.com/2741) таблица аккордов и инструмент масштабирования для многих популярных музыкальных гамм
+- [Infinite Walking Bass Generator 2](https://github.com/elialbert/infinitewalkingbass2) онлайн-музыкальный проигрыватель, который воспроизводит уникальную ходячую басовую партию
+- [ListenAddict](https://www.listenaddict.com/) сайт, который уведомляет вас всякий раз, когда у человека новый разговор / интервью в подкасте
+
+**Demos, Libraries & Components**
+
+- [svelte-tiny-virtual-list](https://github.com/Skayo/svelte-tiny-virtual-list) ускоряет длинные списки, отображая только видимые элементы
+- [svelte-query](https://github.com/TanStack/svelte-query) представляет собой набор полезных ловушек для управления, кэширования и синхронизации асинхронных и удаленных данных
+- [svelte-previous](https://github.com/bryanmylee/svelte-previous) компактное хранилище для запоминания предыдущих значений - полезно для переходов или быстрой отмены стека
+- [Let's Build a Confetti Cannon](https://varun.ca/confetti/) объясняет, как создать систему частиц и интегрировать анимацию на основе Canvas в более крупное приложение
+- [svelte-micro](https://github.com/ayndqy/svelte-micro) однокомпонентный роутер
+- [svelte-standalone-router](https://github.com/hjalmar/svelte-standalone-router) автономный маршрутизатор с API на основе [standalone-router](https://github.com/hjalmar/standalone-router)
+- [svelte-datepicker](https://github.com/beyonk-adventures/svelte-datepicker) компонент выбора даты с вариациями выбора времени, диапазонов дат и адаптивных тем
+- [svelte-slimscroll](https://github.com/MelihAltintas/svelte-slimscroll) действие для Svelte.js, которое может преобразовывать любой div в прокручиваемую область с красивой полосой прокрутки
+- [Svelte Zoomable](https://svelte.dev/repl/58dfe87756ee4db897c281b52fdef7b7?version=3.31.0) настраиваемый переход с красивым эффектом масштабирования
+
+**У вас есть компонент, которым вы хотите поделиться?** Посетите страницу [Components](https://sveltesociety.dev/components) на сайте Svelte Society. Вы можете внести свой вклад, сделав [a PR to this file](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json).
+
+**Learning Resources**
+
+- [Using Svelte to create a scroll video effect](https://blog.koenvangilst.nl/tutorial-svelte-scroll-video/) демонстрирует, как команду `bind` можно использовать для создания крутого видеоэффекта прокрутки с очень небольшим количеством кода.
+- [How to make a flappybird game in svelte and typescript](https://www.youtube.com/watch?v=nhrYBoVI8pQ) видеоурок, включающий документы и код для справки
+- [Accessible Svelte Transition](https://www.youtube.com/watch?v=QK_QuRL7nSo&feature=youtu.be) проходит через `prefers-reduced-motion`, чтобы сделать стройные переходы более доступными
+- [Svelte's module scripts explained](https://codechips.me/svelte-module-scripts-explained/) отличное введение в контекст модуля, распространенный паттерн Sapper
+- [Awesome Svelte](https://github.com/TheComputerM/awesome-svelte#readme) тщательно подобранный список ресурсов Svelte
+- [.NET Core and Svelte](https://dev.to/cainux/net-core-and-svelte-f8o) объясняет, как запустить Svelte с .NET Core
+- [A la découverte de Svelte JS](https://www.youtube.com/watch?v=SLpx1Y8e1ek&list=PLff5I1miao9ZEUhpqkrOx7k8RGAZt-nm9) изящная серия учебных пособий на французском языке!
+- [Svelte for React Developers](https://soshace.com/svelte-for-react-developers/) объясняет основные концепции Svelte людям, которые привыкли к React
+- [Building a Svelte Static Website with Smooth Page Transitions](https://www.youtube.com/watch?v=dvPfmcGtmrI&feature=emb_title) показывает, как создать статический веб-сайт с помощью Svelte и добавить плавные переходы между страницами с помощью Three.js и GSAP
+- [Using Apollo Client in Sapper](https://bjornlu.com/blog/using-apollo-client-in-sapper/) объясняет «простейшие» решения для интеграции клиента запросов Apollo в Sapper
+- [Reactive web apps with Crystal + Svelte](https://www.youtube.com/watch?v=i1xjLd6z7BU) eисследует, как создавать приложения Svelte с полным стеком и рендерингом на сервере с помощью [Crystal](https://crystal-lang.org)
+
+**Related Projects**
+
+- [Snowpack's v3 release candidate](https://www.snowpack.dev/posts/2020-12-03-snowpack-3-release-candidate) сейчас выходит в рамках подготовки к дате релиза 6 января. Check out the [Getting Started with Svelte](https://www.snowpack.dev/tutorials/svelte) для получения дополнительной информации о том, как использовать Snowpack.
+- [Uppy](https://uppy.io/blog/2020/12/1.24/), загрузчик файлов с открытым исходным кодом, объявил о поддержке Svelte в своей новой версии 1.24
+
+## Увидимся в следующем месяце!
+
+Есть, что показать? Хотите больше участвовать в Svelte? Мы всегда ищем сопровождающих, участников и фанатиков ... Ознакомьтесь с [Svelte Society](https://sveltesociety.dev/), [Reddit](https://www.reddit.com/r/sveltejs/) и [Discord](https://discord.com/invite/yy75DKs)!
diff --git a/blog/2021-02-01-whats-new-in-svelte-february-2021.md b/blog/2021-02-01-whats-new-in-svelte-february-2021.md
new file mode 100644
index 0000000..95c2b24
--- /dev/null
+++ b/blog/2021-02-01-whats-new-in-svelte-february-2021.md
@@ -0,0 +1,86 @@
+---
+- title: "Что нового в Svelte: Февраль 2021"
+- description: Молниеносные интеграции и улучшения ...
+- author: Daniel Sandoval
+- authorURL: https://desandoval.net
+---
+
+С приближением самого короткого месяца в году сопровождающие Svelte и члены сообщества были заняты в прошлом месяце - от больших изменений в `svelte-loader`, `prettier-plugin-svelte`, `rollup-plugin-svelte` и `language-tools` до устойчивого прогресса в Sapper и `svelte-preprocess`. Между тем, многие люди были заняты интеграцией Svelte с другими популярными фреймворками.
+
+## Новые возможности компилятора
+- Роли Aria из [WAI-ARIA Graphics Module](https://www.w3.org/TR/graphics-aria-1.0/#role_definitions) теперь распознаются как допустимые роли aria в компонентах Svelte (**3.31.1**)
+- Предупреждения компилятора для общих атрибутов React, `className` и `htmlFor`, теперь упрощают перенос компонентов React в Svelte. (**3.31.1**)
+
+У вас есть предложение относительно функции компилятора или вы хотите помочь реализовать новые функции / исправления ошибок? Проверьте ["triage: good first issue" tag for Svelte](https://github.com/sveltejs/svelte/issues?q=is%3Aopen+is%3Aissue+label%3A%22triage%3A+good+first+issue%22)
+
+
+## Новые биты в языковых инструментах
+
+- Предложения по автоматическому импорту, отключенные пользователем, больше не отображаются в VS Code (**103.0.0**)
+- Переименование переменной теперь безопаснее с умным добавлением префикса / суффикса к переименованным переменным (**104.0.0**)
+- Выделение семантики (токена) для пользователей TypeScript позволяет разработчикам тем применять семантический стиль в своих темах, если они его поддерживают (**104.0.0**)
+- "Extract Component" был добавлен в контекстное меню, что позволяет извлекать компоненты из файлов без необходимости открывать командное окно для ввода "Svelte: Extract Component"(**104.0.0**)
+- Расширение VS Code теперь прослушивает изменения файлов JavaScript / TypeScript - вам больше не нужно сохранять файлы, чтобы изменения были заметны (**104.1.0**)
+
+Полный список изменений можно найти в языковых инструментах [Releases page](https://github.com/sveltejs/language-tools/releases).
+
+Отличный способ опробовать языковые инструменты - загрузить [Svelte Extension for VSCode](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). Это расширение обеспечивает подсветку синтаксиса и богатый интеллект для компонентов Svelte в VS Code с использованием сервера svelte language. Проверьте источники расширений вашего редактора, чтобы узнать, есть ли плагин Svelte для вашей IDE или создайте свой собственный (см. [coc-svelte](https://github.com/coc-extensions/coc-svelte) например)!
+
+## Значительные улучшения в экосистеме Svelte
+
+- [svelte-loader](https://github.com/sveltejs/svelte-loader) выпустила основную версию 3.0.0 с поддержкой Webpack 5 и Node 14, улучшенной горячей перезагрузкой и новыми параметрами `compilerOptions` для соответствия `rollup-plugin-svelte`. Критические изменения включают прекращение поддержки Svelte 2 и Node 8 [More info in the changelog](https://github.com/sveltejs/svelte-loader/blob/master/CHANGELOG.md)
+- [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte) теперь имеет версию 7.x - с поддержкой относительных имен файлов, улучшенной обработкой исходных карт и согласованными `compilerOptions`. Обязательно внесите критические изменения при обновлении [checkout the changelog](https://github.com/sveltejs/rollup-plugin-svelte/blob/master/CHANGELOG.md)
+- [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess) В этом месяце был реализован ряд выпусков 4.6.x для улучшения обработки postcss и scss и исправления преобразования исходной карты для пользователей машинописного текста. [More info in the changelog](https://github.com/sveltejs/svelte-preprocess/blob/main/CHANGELOG.md)
+- [Sapper](https://github.com/sveltejs/sapper) получили некоторые улучшения в отслеживании прокрутки и обработке параметров запроса кодирования. Динамический импорт теперь также работает должным образом в браузерах, не поддерживающих модули ES. Эти изменения с версии 0.29.0 и пошаговое руководство по миграции можно найти [in the changelog](https://github.com/sveltejs/sapper/blob/master/CHANGELOG.md)
+- [prettier-plugin-svelte](https://github.com/sveltejs/prettier-plugin-svelte) вышла версия 2. Он подвергся капитальному ремонту, и в нем переработано форматирование HTML. Вывод теперь намного больше соответствует тому, как стандартный Prettier форматирует HTML. Улучшенные значения по умолчанию для `svelteBracketNewLine` и `options-scripts-markup-styles` теперь должны соответствовать тому, как большинство пользователей предпочитают упорядочивать блоки кода. Кроме того, теперь поддерживается настройка Prettier `htmlWhitespaceSensitivity`. [More info in the changelog](https://github.com/sveltejs/prettier-plugin-svelte/blob/master/CHANGELOG.md)
+
+Новые изменения на веб-сайте Svelte Society включают в себя [a new cheat sheet](https://sveltesociety.dev/cheatsheet) для легкого доступа к полезным шаблонам кода и некоторые небольшие визуальные исправления по всему сайту. Хотите помочь подготовить сайт Svelte Society к работе в прайм-тайм? [Checkout the GitHub repo](https://github.com/svelte-society/sveltesociety.dev)!
+
+---
+
+## Community Showcase
+
+**Apps & Sites**
+
+- [The official German vaccination dashboard](https://impfdashboard.de/) отслеживает текущее внедрение вакцины против COVID и содержит несколько хорошо выполненных датавизов
+- [La neuva era de la educatión conectada](https://elfuturoesapasionante.vodafone.es/especiales/educacion-conectada/) сайт Vodaphone, на котором рассказывается о том, как технологии и COVID-19 изменили образовательный ландшафт
+- [sho.rest](https://github.com/Melonai/shorest) сокращенный URL-адрес, размещаемый на собственном хостинге
+- [night.fm](https://night.fm/) радиостанция на тему киберпанка
+
+
+**Demos, Libraries & Components**
+
+- [Svelte Reactive Debugger](https://addons.mozilla.org/en-US/firefox/addon/svelte-reactive-debugger/) способ отслеживать реактивные операторы Svelte в инструментах разработчика Firefox
+- [svelte-actions](https://github.com/sw-yx/svelte-actions) is представляет собой набор прототипов действий Svelte для включения в официальные акции в будущем. [See RFC](https://github.com/sveltejs/rfcs/pull/24) и [Discuss High Level Policy](https://github.com/sw-yx/svelte-actions/issues/7).
+- [This css grid gallery](https://svelte.dev/repl/3a1b7fae13b242fe9cd4a4f7aa092fa4?version=3.31.2) сделанный @joja (в Svelte Discord), показывает переходы сетки в зависимости от положения мыши пользователя.
+- [Patchcab](https://github.com/spectrome/patchcab) модульный синтезатор в стиле Eurorack, созданный с использованием Web Audio.
+- [svelte-knob](https://github.com/MelihAltintas/svelte-knob) ручка для визуализации в стиле спидометра
+- [descent-ripple](https://github.com/micha-lmxt/descent-ripple) астраиваемая анимация пульсации javascript для кнопок
+- [makeItSnow](https://github.com/florianlouvet/make-it-snow/blob/main/makeItSnowAction.js) действие Svelte, созданное @MrPoule (в Svelte Discord), которое можно использовать для добавления ❄️снега❄️ в любой компонент ([Demo](https://svelte.dev/repl/de5223beb45540a5a11c9bd7b318304f?version=3.31.2))
+- [svelte-video-player](https://github.com/meigo/svelte-video-player) настраиваемый компонент `VideoPlayer`
+- [svelte-readonly](https://github.com/Crisfole/svelte-readonly) очень маленький стор, который предоставляет только читаемый интерфейс.
+
+
+**New Integrations & Starters**
+- [svelte-derver-starter](https://github.com/AlexxNB/svelte-derver-starter) стартер для запекания полнофункционального приложения с клиентом на основе Svelte и серверной частью на основе Derver
+- [eleventy-plugin-embed-svelte](https://github.com/shalomscott/eleventy-plugin-embed-svelte) позволяет легко встраивать компоненты Svelte в сайт 11ty
+- [svelte-tailwind-extension-boilerplate](https://github.com/kyrelldixon/svelte-tailwind-extension-boilerplate) является хорошей основой для расширения Chrome, использующего JavaScript или TypeScript, Svelte для внешнего интерфейса, Tailwind CSS для стилизации, Jest для тестирования и Rollup в качестве системы сборки.
+- [snowpack-ui](https://github.com/rajasegar/snowpack-ui) позволяет запускать и управлять проектами Snowpack из браузера вместо терминала
+- [Svelte for Appwrite](https://dev.to/torstendittmann/svelte-for-appwrite-4fkg) объясняет, как интегрироваться с Appwrite, автономной альтернативой Firebase. [Github Repo](https://github.com/appwrite/sdk-for-svelte)
+- [here-maps-svelte](https://github.com/peopledrivemecrazy/here-maps-svelte) позволяет легко включать карты HERE в приложение Svelte
+- [p5-svelte](https://github.com/tonyketcham/p5-svelte) абсолютно простой способ добавить творческий инструмент кодирования / рисования p5 в проект.
+- [svelte-windicss-preprocess](https://github.com/voorjaar/svelte-windicss-preprocess) препроцессор Svelte для компиляции tailwindcss во время сборки на основе компилятора windicss
+- [MitzaCoder/svelte-boilerplate](https://github.com/MitzaCoder/svelte-boilerplate) бойлерплейт Typescript, TailwindCSS, совместимость с IE11 (с Babel) и модули с отложенной загрузкой
+
+**У вас есть компонент, которым вы хотите поделиться?** Посетите страницу [Components](https://sveltesociety.dev/components) на сайте Svelte Society. Вы можете внести свой вклад, сделав [a PR to this file](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json).
+
+**Learning Resources**
+
+- [lihautan's Svelte Actions Playlist](https://www.youtube.com/watch?v=ciaMT_MswzE&list=PLoKaNN3BjQX3Gl14MBygFf8buPIw9pAeK) учит, как работают действия и как они могут помочь в решении типичных проблем при разработке приложений Svelte.
+- [One-click Portfolio/Personal blog generator from dev.to API ](https://dev.to/shriji/one-click-portfolio-personal-blog-generator-from-dev-to-api-3apb) проходит через создание сайта Sapper, который также получает ваши статьи с DEV.to с помощью API.
+- [How to Code a VSCode Extension](https://www.youtube.com/watch?v=a5DX5pQ9p5M) предлагает Svelte как способ визуализации пользовательского интерфейса в VSCode
+- [This YouTube series on Plenti](https://www.youtube.com/watch?v=wyNC7R_VVyQ&list=PLbWvcwWtuDm12y3Hye6oKDwI2gAS0ccHW) подробно ознакомится с новым генератором статических сайтов
+
+## Увидимся в следующем месяце!
+
+Есть, что показать? Хотите больше участвовать в Svelte? Мы всегда ищем сопровождающих, участников и фанатиков ... Ознакомьтесь с [Svelte Society](https://sveltesociety.dev/), [Reddit](https://www.reddit.com/r/sveltejs/) и [Discord](https://discord.com/invite/yy75DKs)!
diff --git a/blog/2021-03-01-whats-new-in-svelte-march-2021.md b/blog/2021-03-01-whats-new-in-svelte-march-2021.md
new file mode 100644
index 0000000..aa5612e
--- /dev/null
+++ b/blog/2021-03-01-whats-new-in-svelte-march-2021.md
@@ -0,0 +1,104 @@
+---
+- title: "Что нового в Svelte: Март 2021"
+- description: Приглашаем спикеров Svelte Summit! Улучшенный SSR, цели компиляции, отличные от HTML5, и поддержка ESLint TypeScript.
+- author: Daniel Sandoval
+- authorURL: https://desandoval.net
+---
+
+В этом месяце есть что рассказать о выпусках по всей экосистеме Svelte. Самое главное, что у Svelte Summit Spring 2021 есть [Open Call for Speakers](https://sessionize.com/svelte-summit-spring-2021). **Крайний срок - 14 марта**, так что если у вас есть идея для выступления, отправьте ее сейчас!
+
+Погрузимся в новости 🐬
+
+## Что нового в `sveltejs/svelte`
+* Обработка хранилища SSR была переработана для подписки и отказа от подписки, в режиме DOM. SSR-сторы теперь должны работать намного более стабильно (**3.31.2**, see [custom stores](https://svelte.dev/examples/custom-stores) and [Server-side component API ](https://svelte.dev/docs#run-time-server-side-component-api))
+* Теперь для элемента разрешено несколько экземпляров одного и того же действия (**3.32.0**, [example](https://svelte.dev/repl/01a14375951749dab9579cb6860eccde?version=3.32.0))
+* Новое `foreign` пространство имен должно упростить использование альтернативных целей компиляции (таких как Svelte Native и SvelteGUI) за счет отключения определенного специфичного для HTML5 поведения и проверок. (**3.32.0**, [more info](https://github.com/sveltejs/svelte/pull/5652))
+* Поддержка встроенных исходных карт комментариев в коде препроцессоров (**3.32.0**)
+* Деструктурированные значения по умолчанию теперь могут ссылаться на другие переменные (**3.33.0**, [example](https://svelte.dev/repl/0ee7227e1b45465b9b47d7a5ae2d1252?version=3.33.0))
+* Пользовательские элементы теперь будут вызывать функции `onMount` при подключении и очищать при отключении. [this PR](https://github.com/sveltejs/svelte/pull/4522) для интересного разговора о том, как люди используют Svelte с веб-компонентами)
+* Параметр `cssHash` был добавлен в параметры компилятора для управления именем класса, используемым для области видимости CSS. (**3.34.0**, [docs](https://svelte.dev/docs#compile-time-svelte-compile))
+* Постоянное улучшение определений TypeScript
+
+Полный список изменений, включая исправления ошибок и ссылки на PR, см. в [CHANGELOG](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md)
+
+
+## Новинки от `sveltejs/language-tools`
+
+- Для клиентов языковых серверов, которые не поддерживают `didChangeWatchedFiles`, вместо этого будет использоваться средство отслеживания резервных файлов.
+- Новые правила выделения для аксессоров хранилища и директив элементов (например, `bind:` и `class :`)
+- HTML-теги теперь можно переименовывать вместе
+- Синтаксический анализ тегов Mustache tags стал более надежным и обеспечит лучший интеллект в большем количестве ситуаций.
+
+Еще не пробовали языковые инструменты? Проверьте [Svelte Extension for VSCode](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) или найдите плагин для своей любимой IDE!
+
+## Другие изменения от `sveltejs/*`
+
+- [eslint-plugin-svelte3](https://github.com/sveltejs/eslint-plugin-svelte3) теперь поддерживает TypeScript с версии 3.1.0
+- [prettier-plugin-svelte](https://github.com/sveltejs/prettier-plugin-svelte/) выпустил ряд второстепенных версий для устранения проблем с обрезкой пробелов и комментариев.
+- [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess/) bug fixes this month include fixes to postcss transformations and support for both v2 and v3 of `postcss-load-config`
+- [sapper](https://github.com/sveltejs/sapper/)'s В выпуске 0.29.1 исправлены некоторые неправильные импорты в определениях типов, обновлены типизации для совместимости с экспресс / полькой и восстановлено хеширование всех имен файлов CSS.
+
+---
+
+## Community Showcase
+
+**Apps & Sites**
+
+- [Tracking the Coronavirus](https://www.nytimes.com/interactive/2021/us/new-york-city-new-york-covid-cases.html) от NYTimes - это пример SvelteKit в производстве
+- [Budibase](https://github.com/Budibase/budibase) платформа с открытым исходным кодом и низким уровнем кода, помогающая разработчикам и ИТ-специалистам создавать, автоматизировать и поставлять внутренние инструменты в 50 раз быстрее в своей собственной инфраструктуре
+- [Track the Parcel](https://tracktheparcel.com/) универсальный инструмент для отслеживания статуса посылки со всеми основными отправителями посылок.
+- [Memo](https://sendmemo.app/features/) замена электронной почты, которая использует Svelte для современного обмена сообщениями.
+- [Userscripts Safari](https://github.com/quoid/userscripts) редактор пользовательских скриптов с открытым исходным кодом для Safari ... нативное приложение Svelte для Mac OS!
+- [SVGX](https://svgx.app/) "настольный SVG-менеджер ресурсов, которого хотели бы видеть дизайнеры и разработчики".
+- [Armoria](https://azgaar.github.io/Armoria/) генератор и редактор процедурной геральдики
+- [FictionBoard](https://www.fictionboard.com) представляет собой платформу виртуальной столешницы (VTT), которая только что выпустила заполняемые и отзывчивые листы персонажей
+- [Castles & Crusades Treasure Generator](https://treasure.playaheadgames.com/) генератор сокровищ для настольной ролевой игры: Castles and Crusades.
+- [NESBit Studio](https://jensa.org/NESBitStudio-web/graphics/spritesheets) набор инструментов, помогающий разрабатывать самодельные игры для NES.
+- [ElectroBlocks](https://electroblocks.org/) онлайн-среда разработки Arduino со встроенным симулятором (только для Chrome)
+- [Goblin.life](https://store.steampowered.com/app/552180/GoblinLife/) конструктор трехмерного мира, пользовательский интерфейс которого построен с помощью Svelte.
+- [farmbox](https://farmbox.ae/) служба доставки продуктов в ОАЭ
+- [heroeswearmasks.fun](https://heroeswearmasks.fun/) инструмент машинного обучения на стороне клиента, который определяет, носите ли вы маску или нет.
+- [weatherify](https://brdtheo-weatherify.netlify.app/) очень красивое (и [open source](https://github.com/brdtheo/weatherify)) погодное приложение
+- [DSN Live](https://dsn-live.netlify.app/#/) позволяет отслеживать связи между NASA / JPL и миссиями межпланетных космических кораблей в режиме реального времени.
+
+
+
+**Demos, Libraries, Tools & Components**
+
+- [spc](https://github.com/khang-nd/spc) компонент выбора специальных символов для Интернета
+- [svelte-injector](https://www.npmjs.com/package/svelte-injector) позволяет внедрять компоненты Svelte в React, Angular, Vue, jQuery, Vanilla JS.
+- [Felte](https://felte.dev/) библиотека форм для Svelte с простой проверкой отчетов.
+- [svelte-use-form](https://github.com/noahsalvi/svelte-use-form#readme) s, которая «проста в использовании и не имеет шаблонов».
+- [Formula](https://formula.svelte.codes/) предоставляет «Реактивные формы с нулевой конфигурацией для Svelte».
+- [Houdini](https://github.com/AlecAivazis/houdini) «исчезающий клиент GraphQL, созданный для Sapper и Sveltekit»
+- [svelte-split-pane](https://www.reddit.com/r/sveltejs/comments/leoe33/sveltesplitpane/) перетаскиваемый компонент с разделенной панелью
+- [svelte-virtualized-auto-sizer](https://github.com/micha-lmxt/svelte-virtualized-auto-sizer) компонент высшего порядка, который автоматически регулирует ширину и высоту одного дочернего элемента.
+- [svelte-window](https://github.com/micha-lmxt/svelte-window) компоненты для эффективной визуализации больших прокручиваемых списков и табличных данных.
+- [Svelte Persistent store](https://github.com/MacFJA/svelte-persistent-store) стор Svelte, который сохраняет свои значения через страницы и перезагружает
+- [Svelte Dark](https://marketplace.visualstudio.com/items?itemName=NickScialli.svelte-dark) тема VSCode, вдохновленная REPL svelte.dev
+- [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost) был обновлен, чтобы поддерживать библиотеки Svelte и помогать разработчикам контролировать размер своих пакетов.
+- [Tree-sitter-svelte](https://github.com/Himujjal/tree-sitter-svelte) предоставляет древовидную грамматику для svelte
+- [Svelte Ripple](https://svelte.dev/repl/b73224a0fd4248178e3eab41943d41a9?version=3.31.2) эффект пульсации в материальном дизайне, который не зависит от `@material/ripple` (made by @karakara in the Svelte Discord)
+- [Analog SVG Clock](https://svelte.dev/repl/270e83f43e7a48918d8f2d497760904f?version=3.32.1) отличный пример функций ослабления (made by @tonmcg in the Svelte Discord)
+- [Console Log Styler](https://svelte.dev/repl/11f609d0d90746f08da6d3d90bba84fc?version=3.32.0) позволяет создавать стилизованный консольный журнал с использованием псевдо-HTML и CSS. (made by @EmNudge in the Svelte Discord)
+- [svelte-heroicons](https://github.com/martinse/svelte-heroicons) удобная оболочка для библиотеки значков Heroicons
+- [supabase-ui-svelte](https://github.com/joshnuss/supabase-ui-svelte) компоненты пользовательского интерфейса для аутентификации Supabase
+
+**У вас есть компонент, которым вы хотите поделиться?** Посетите страницу [Components](https://sveltesociety.dev/components) на сайте Svelte Society. Вы можете внести свой вклад, сделав [a PR to this file](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json).
+
+
+**Learning Resources & Starters**
+
+- [The **unofficial** SvelteKit docs](https://sk-incognito.vercel.app/learn/what-is-sveltekit) были созданы с использованием SvelteKit и [open for contributions](https://github.com/GrygrFlzr/kit-docs)
+- [📦 Svelte Store](https://www.youtube.com/playlist?list=PLoKaNN3BjQX3fG-XOSwsPHtnV8FUY6lgK) курс lihautan охватывает основы Svelte Stores и передовой опыт.
+- [Svelte Events](https://www.youtube.com/watch?v=cbxxbBofjAw&feature=youtu.be) WebJeda объясняет, как директивы вроде `on:` могут использоваться для прослушивания событий DOM.
+- [How to Set Up Protected Routes in Your Svelte Application](https://www.webtips.dev/how-to-set-up-protected-routes-in-your-svelte-application) описывает, как аутентифицировать ваших пользователей для доступа к вашим маршрутам
+- [Using Fauna's streaming feature to build a chat with Svelte](https://dev.to/fauna/using-fauna-s-streaming-feature-to-build-a-chat-with-svelte-1gkd) демонстрирует, как установить и настроить Fauna для создания интерфейса чата в реальном времени с помощью Svelte.
+- [Using TakeShape with Sapper](https://www.takeshape.io/articles/using-takeshape-with-sapper/) демонстрирует, как подключить TakeShape CMS к Sapper
+- [YastPack](https://github.com/rodabt/yastpack) еще один пакет шаблонов Snowpack-Svelte-TailwindCss-Routify
+- [S2T2](https://ralphbliu.medium.com/s2t2-snowpack-svelte-tailwindcss-typescript-8928caa5af6c) шаблон Snowpack + Svelte + TailwindCSS + Typescript
+- [tonyketcham/sapper-tailwind2-template](https://github.com/tonyketcham/sapper-tailwind2-template) шаблон Sapper с Tailwind 2.0, TypeScript, ESLint и Prettier
+
+## Увидимся в следующем месяце!
+
+Есть, что показать? Хотите больше участвовать в Svelte? Мы всегда ищем сопровождающих, участников и фанатиков ... Ознакомьтесь с [Svelte Society](https://sveltesociety.dev/), [Reddit](https://www.reddit.com/r/sveltejs/) и [Discord](https://discord.com/invite/yy75DKs)!
diff --git a/blog/2021-03-23-sveltekit-beta.md b/blog/2021-03-23-sveltekit-beta.md
new file mode 100644
index 0000000..fa2e9e2
--- /dev/null
+++ b/blog/2021-03-23-sveltekit-beta.md
@@ -0,0 +1,67 @@
+---
+- title: SvelteKit вышел в бета-версии
+- description: И мы будем рады получить ваши отзывы
+- author: Rich Harris
+- authorURL: https://twitter.com/rich_harris
+---
+
+
+
+Время пришло. После пяти месяцев и сотен коммитов, приглашаем вас протестировать бета-версию SvelteKit. Он еще не закончен (есть несколько известных ошибок и несколько недостающих функций), но мы очень довольны тем, как все складывается.
+
+Начать новый проект легко:
+
+```bash
+# создайте проект
+mkdir my-app
+cd my-app
+npm init svelte@next
+
+# установите зависимости
+npm install
+
+# запустите сервер разработки и откройте вкладку браузера
+npm run dev -- --open
+```
+
+Документация здесь [ru.kit.svelte.dev/docs](https://ru.kit.svelte.dev/docs). Если у вас есть приложение на [Sapper](https://ru.sapper.svelte.dev), которое вы хотите перенести на SvelteKit, вы найдете инструкции по адресу [ru.kit.svelte.dev/migrating](https://ru.kit.svelte.dev/migrating).
+
+Исходный код доступен по адресу [github.com/sveltejs/kit](https://github.com/sveltejs/kit). Ишьюсы и пул-реквесты пока закрыты (мы заканчиваем приводить наш репозиторий в порядок), но мы сделаем его полностью открытым в ближайшем будущем.
+
+
+## Подождите, а что такое SvelteKit?
+
+Думайте об этом как о [Next](https://nextjs.org/) для Svelte. Это платформа для создания приложений с помощью Svelte, включая рендеринг на стороне сервера, маршрутизацию, разделение кода для JS и CSS, адаптеры для различных бессерверных платформ и так далее.
+
+Если вы знакомы с [Sapper](https://ru.sapper.svelte.dev), SvelteKit его преемник.
+
+## От Snowpack до Vite
+
+После моего лирического рассказа о [Snowpack](https://www.snowpack.dev/) в этом [видео](/blog/whats-the-deal-with-sveltekit), может показаться удивительным, что SvelteKit использует под капотом [Vite](https://vitejs.dev). Когда мы думали, какую форму должен обрести SvelteKit, мы попробовали использовать Snowpack — и это была любовь с первого взгляда.
+
+Snowpack создал совершенно новую категорию инструментов для разработчиков. Вместо того, чтобы собирать приложение для разработки, как мы делали с webpack и Rollup в течение последних нескольких лет, Snowpack - это несобирающий сервер разработки, который использует нативный `import` браузера и на лету выполняет преобразования 1:1 таких вещей, как компоненты Svelte. В результате вы получаете быстрый запуск, простое кеширование и мгновенную горячую перезагрузку модуля. Как только вы испытаете такой способ работы, то не захотите что-то другое.
+
+Vite попадает в ту же категорию, что и Snowpack. В то время как Vite 1 не подходил для SvelteKit - он был ориентирован на Vue (Vite и Vue оба созданы [Evan You](https://twitter.com/youyuxi)) и затруднял рендеринг на стороне сервера - Vite 2 не зависит от фреймворка и разработан с использованием SSR в основе. Он также имеет мощные функции, такие как разделение кода CSS, которые нам раньше приходилось реализовывать самостоятельно. Когда мы сравнили две технологии бок о бок, мы были вынуждены сделать вывод, что Vite более соответствует требованиям SvelteKit и позволит лучше реализовать наши идеи.
+
+Мы глубоко признательны команде Snowpack как за тесное сотрудничество на ранних этапах разработки, так и за освещение пути, по которому веб-разработка пойдет в следующие несколько лет. Это замечательный инструмент, и вы обязательно должны его попробовать.
+
+
+## "Экстрим догфуддинга"
+
+SvelteKit находится в стадии бета-тестирования, но это не значит, что он не использовался в продакшене.
+
+Моя дневная работа - в New York Times, где я провел большую часть последних двенадцати месяцев, работая над нашим [трекером короновируса](https://www.nytimes.com/interactive/2020/us/coronavirus-us-cases.html). Он использует настроенную версию рабочего процесса, которая поддерживает большую часть графики в Times, которая не предназначена для больших многостраничных проектов. Когда в конце прошлого года мы решили создать страницы для каждого из ~3000 округов США, мы быстро поняли, что нам нужно полностью изменить архитектуру проекта.
+
+Несмотря на то, что он был далеко не готов, SvelteKit был единственным фреймворком, который соответствовал нашим эзотерическим требованиям. (Любой, кто работал в отделе новостей и боролся со своей CMS, поймет, о чем я говорю.) Сегодня он поддерживает наш [монитор рисков в округах](https://www.nytimes.com/interactive/2021/us/tom-green-texas-covid-cases.html) и мы находимся в процессе миграции существующих страниц в приложение SvelteKit.
+
+
+
+Использование незавершенного программного обеспечения для создания приложения, которое увидят миллионы людей, представляет собой риск, и в целом я не рекомендую это делать. Но это позволило нам разработать приложение намного быстрее, а сам фреймворк стал намного сильнее, чем он мог бы быть в противном случае.
+
+## Путь к версии 1.0
+
+Вы можете увидеть список нерешенных проблем с этапом 1.0 на странице [issue tracker](https://github.com/sveltejs/kit/issues?q=is%3Aopen+is%3Aissue+milestone%3A1.0). Параллельно с этой работой мы планируем обновить документацию и добавить больше [адаптеров](https://ru.kit.svelte.dev/docs#адаптеры).
+
+Но что еще важнее, нам нужны ваши отзывы, чтобы помочь нам создать наилучшую возможную среду для приложений. Попробуйте и сообщите нам, каких деталей не хватает.
+
+Большое спасибо всем, кто попробовал SvelteKit, несмотря на предупреждения «Осторожно, злая собака» и отсутствие документации; ваша обратная связь неоценима. В частности, я хочу отметить работу [GrygrFlzr](https://github.com/GrygrFlzr), он поддерживал неофициальные документы и форк, и добавлял поддержку Windows, когда нам ее не хватало; и [dominikg](https://github.com/dominikg) чья работа над [Svite](https://github.com/svitejs/svite) заложила фундамент для интеграции SvelteKit с Vite. Оба теперь приветствуются в команде.
\ No newline at end of file
diff --git a/blog/2021-04-01-whats-new-in-svelte-april-2021.md b/blog/2021-04-01-whats-new-in-svelte-april-2021.md
new file mode 100644
index 0000000..506cf55
--- /dev/null
+++ b/blog/2021-04-01-whats-new-in-svelte-april-2021.md
@@ -0,0 +1,73 @@
+---
+- title: "Что нового в Svelte: Апрель 2021"
+- description: SvelteKit beta и новый путь использовать слоты
+- author: Daniel Sandoval
+- authorURL: https://desandoval.net
+---
+
+Два проекта, на создание которых ушли месяцы (или даже годы), увидели свет. SvelteKit сейчас находится в стадии публичной бета-версии, а компоненты со слотами теперь доступны в Svelte!
+
+## Что там со SvelteKit?
+[SvelteKit](https://kit.svelte.dev/) - Универсальный фреймворк Svelte для создания SSR, бессерверных приложений или SPA теперь официально находится в стадии публичной бета-версии. Ожидайте ошибок! Подробнее об этом можно прочитать в [в предыдущем посте](https://ru.svelte.dev/blog/sveltekit-beta). Хотите знать, когда выйдет версия 1.0? Смотрите статус здесь [github](https://github.com/sveltejs/kit/milestone/2).
+
+Хотите узнать больше о том, как начать работу, чем отличается от Sapper, какие есть новые функции и пути миграции? Послушайте [новый эпизод на Svelte Radio](https://www.svelteradio.com/episodes/svelte-kit-public-beta) для глубокого погружения с Antony, Kev и Swyx.
+
+## Новое в Svelte & Language Tools
+- Компоненты со слотами, в том числе `` позволяют потребителям компонентов наполнять указанные слоты содержимым, у котрого нет корневого элемента (**Svelte 3.35.0, Language Tools [104.5.0](https://github.com/sveltejs/language-tools/releases/tag/extensions-104.5.0)**, подробнее в [документации](https://ru.svelte.dev/docs#template-syntax-svelte-fragment) и [учебнике](https://ru.svelte.dev/tutorial/svelte-fragment))
+- Связанное редактирование теперь работает для HTML в Svelte файлах (**Language Tools, [104.6.0](https://github.com/sveltejs/language-tools/releases/tag/extensions-104.6.0)**)
+- Типы определенные в `*.svelte.d.ts` файлах теперь учитываются и имеют приоритет перед связанными с ними `*.svelte` файлами, что позволяет авторам библиотек предоставлять определения типов рядом со своими Svelte файлами. (**Language Tools, [104.7.0](https://github.com/sveltejs/language-tools/releases/tag/extensions-104.7.0)**)
+- [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte) доступен для использования Svelte в Vite. `npm init @vitejs/app` включает параметры Svelte, используя этот плагин.
+
+---
+
+## Крутые примеры сообщества
+
+**Apps & Sites**
+
+- [Nagato](https://nagato.app/) — инструмент управления задачами, который объединяет популярные инструменты отслеживания времени и текущих дел в одном месте.
+- [type-kana](https://type-kana.cass.moe/setup) — викторина, помогающая изучить ひらがな (хигарана) и カタカナ (катакана), японские слоговые азбуки.
+- [Pittsburgh Steps](https://pittsburgh-steps.samlearner.com/) — интерактивная карта из более чем 800 общественных открытых лестниц в Питтсбурге, штат Пенсильвания.
+- [Music Mode Wheels](https://tobx.github.io/music-mode-wheels/) — веб-сайт, на котором музыкальные режимы отображаются в виде интерактивных колес.
+- [Critical Notes](https://www.critical-notes.com/) — помогает мастерам игр и игрокам отслеживать свои кампании и приключения в ролевых играх.
+- [Svelte Game of Life](https://github.com/alanrsoares/svelte-game-of-life) — образовательная реализация Conway's Game of Life на TypeScript + Svelte
+- [foxql](https://github.com/foxql) — одноранговая система полнотекстового поиска, работающая в вашем браузере.
+
+
+**Demos, Libraries, Tools & Components**
+
+- [svelte-nodegui](https://github.com/nodegui/svelte-nodegui) — это способ создавать производительные, нативные и кроссплатформенные настольные приложения с помощью Node.js и Svelte.
+- [Svelte Story Format](https://www.npmjs.com/package/@storybook/addon-svelte-csf) — позволяет вам писать свои «истории» в Storybook, используя синтаксис Svelte. Больше информации в [Storybook blog](https://storybook.js.org/blog/storybook-for-svelte/)
+- [SelectMadu](https://github.com/pavish/select-madu) — замена нативного селекта с поддержкой поиска, множественного выбора, асинхронной загрузки данных и многого другого.
+- [Svelte Checklist](https://www.npmjs.com/package/svelte-checklist) — настраиваемый контрольный список, созданный с помощью Svelte.
+- [Suspense for Svelte](https://www.npmjs.com/package/@jamcart/suspense) — компонент Svelte, реализующий основную идею React ``.
+- [MiniRx](https://spierala.github.io/mini-rx-store/) — RxJS Redux Store который работает со Svelte и TypeScript
+- [svelte-formly](https://github.com/arabdevelop/svelte-formly) — генерирует динамические формы для Svelte и Sapper
+- [7ty](https://www.npmjs.com/package/@jamcart/7ty) — генератор статических сайтов, который использует Svelte, поддерживает частичную гидратацию компонентов и использует файловую маршрутизацию, похожую на Sapper и 11ty.
+
+**Хотите поделиться своим компонентом?** Отправьте [Компонент](https://sveltesociety.dev/components) на сайт Svelte Society, сделав [PR](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json).
+
+
+**Starters**
+
+- [sveltekit-electron](https://github.com/FractalHQ/sveltekit-electron) — стартовый набор для Electron с использованием SvelteKit
+- [sveltekit-tailwindcss-external-api](https://github.com/acidlake/sveltekit-tailwindcss-external-api) — это все, что вам нужно для создания проекта Svelte с помощью TailwindCSS и внешнего API, основанного на create-svelte.
+- [Sapper Netlify](https://www.npmjs.com/package/sapper-netlify) — это проект Sapper, который может работать с функцией Netlify.
+
+
+**Ищете конкретный стартер?** Посмотрите [svelte-adders](https://github.com/svelte-add/svelte-adders) и ряд других примеров шаблонов на сайте сообщества [sveltesociety.dev](https://sveltesociety.dev/templates/)
+
+**Learning Resources**
+- [Как создавать сайты на Svelte и SvelteKit](https://prismic.io/blog/svelte-sveltekit-tutorial) — пошаговое руководство по настройке SvelteKit.
+- [Хранилище Svelte для prefers-reduced-motion](https://geoffrich.net/posts/svelte-prefers-reduced-motion-store/) — демонстрирует, как создать собственное хранилище Svelte, значение которого будет указывать, запросил ли пользователь уменьшение движения и улучшение доступности.
+- [Поддержка TypeScript в Svelte](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript) — руководство MDN по использованию TypeScript в Svelte.
+- [Как объединить ячейки с помощью svelte-window](https://gradientdescent.de/merging-cells/) пошаговое руководство по svelte-window, порту популярного инструмента react-window для объединения ячеек таблицы. Подробнее об этой миграции [от react-window 1:1 к svelte-window](https://gradientdescent.de/porting-react-window/).
+- [Легковстраиваемые компоненты Svelte](https://codeandlife.com/2021/03/06/easy-to-embed-svelte-components/) — объясняет, как использовать Rollup и тег `
+
+
+
+
+```
+
+### <script>
+
+Блок `
+```
+
+---
+
+Для свойства можно указать начальное значение по умолчанию, которое будет использоваться, в случае когда при инициализации экземпляра компонента потребитель компонента не задаст это свойство(или задаст ему значение `undefined`). Учитывайте, что если потребитель позднее уберёт значение для свойства, то его значение станет равным `undefined`, а не начальному.
+
+В режиме разработки (см. [параметры компиляции](/docs#compile-time-svelte-compile)), если потребитель не укажет значения свойства и, при этом не будет начального значения по умолчанию, будет показано предупреждение об ошибке. Чтобы оно не появлялось, убедитесь, что для свойства задано начальное значение по умолчанию, даже если оно равно `undefined`.
+
+```sv
+
+```
+
+---
+
+При экспорте свойств заданных ключевыми словами `const`, `class` или `function`, снаружи они будут доступны только для чтения. В то же время, _функциональные выражения_ являются обычными свойствами.
+
+Доступ к переменным только для чтения можно получить в качестве свойств элемента, привязанных к компоненту с помощью синтаксиса [`bind:this`](/docs#template-syntax-element-directives-bind-element).
+
+```sv
+
+```
+
+---
+
+Есть возможность использовать зарезервированные слова в качестве имен свойств.
+
+```sv
+
+```
+
+#### 2. Присваивания 'реактивны'
+
+---
+
+Чтобы изменить состояние компонента и запустить его перерисовку, просто присвойте что-либо переменной, объявленной локально.
+
+Присваивания с обновлением (`count += 1`) и присваивания свойствам (`obj.x = y`) будут иметь тот же эффект.
+
+```sv
+
+```
+
+---
+
+Поскольку реактивность Svelte основана на присваиваниях, использование методов массива, таких как `.push()` и `.splice()`, не будет автоматически инициировать обновления. Для запуска обновления требуется последующее присваивание. Это и более подробную информацию также можно найти в [учебнике](/tutorial/updating-arrays-and-objects).
+
+```sv
+
+ ```
+
+#### 3. `$:` делает выражение реактивным
+
+---
+
+Любое выражение на верхнем уровне (то есть, не внутри блока или функции) можно сделать реактивным, добавив перед ним [JS метку](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/label) `$:`. Реактивные выражения запускаются непосредственно перед обновлением компонента всякий раз, когда изменяются значения переменных, которые в него входят.
+
+```sv
+
+```
+
+---
+
+Зависимостями реактивного выражения становятся только те переменные, которые явно указаны внутри блока `$:`. Например, в коде ниже значение `total`, будет обновляться только, когда изменится `x`, но не `y`.
+
+```sv
+
+
+Всего: {total}
+
+
+
+```
+
+---
+
+Если выражением является только присваивание значения ранее не объявленной переменной, Svelte самостоятельно объявит такую переменную через оператор `let`.
+
+```sv
+
+```
+
+#### 4. Добавьте префикс `$` к хранилищу для получения его значения
+
+---
+
+Хранилищем является любой объект, который допускает реактивный доступ к своему значению посредством так называемого _контракта хранилища_.
+
+[Модуль `svelte/store`](/docs#run-time-svelte-store) содержит минимальную реализацию хранилищ, соответствующих такому контракту.
+
+Каждый раз, когда вам нужно взять значение из хранилища, вы можете сделать это, поместив перед ним префикс с символом `$`. Это говорит Svelte, что нужно объявить переменную с префиксом и подписаться на хранилище с автоматическим удалением подписки при необходимости.
+
+Присваивание значений переменным с префиксом `$` требует, чтобы эти переменные являлись записываемыми хранилищами, и приведёт к вызову метода хранилища `.set`.
+
+Обратите внимание, что хранилище должно быть объявлено на верхнем уровне компонента, а не, например, внутри функции или блока `if`.
+
+Локальные переменные (которые не являются ссылкой на хранилище) _не должны_ иметь префикс `$`.
+
+```sv
+
+```
+
+#### Контракт хранилища
+
+```js
+store = { subscribe: (subscription: (value: any) => void) => (() => void), set?: (value: any) => void }
+```
+
+Вы можете создавать собственные варианты хранилищ, без участия [`svelte/store`](/docs#run-time-svelte-store), реализовав _контракт хранилища_:
+
+1. Хранилище обязано иметь метод `.subscribe`, который должен принимать в
+ качестве аргумента функцию подписки. При вызове этого метода, сразу же
+ синхронно должна быть вызвана функция подписки, с передачей ей текущего
+ значения хранилища. Далее все полученные функции подписки должны синхронно
+ вызываться при любом изменении значения хранилища.
+2. Метод `.subscribe` должен возвращать функцию отмены подписки. Вызов функции
+ отмены должен привезти к тому, что соответствующая функция подписки более не
+ должна вызываться хранилищем.
+3. _По желанию_, хранилище может иметь метод `.set`, который должен принимать
+ параметром новое значение для хранилища и синхронно вызывать все активные
+ функции подписки. Такое хранилище называется _записываемым хранилищем_.
+
+Для обеспечения совместимости с RxJS Observables метод `.subscribe` может возвращать объект с методом `.unsubscribe`, вместо непосредственно функции отписки. Но если метод `.subscribe` вызывает подписку асинхронно(спецификация Observable это допускает), Svelte будет видеть значение хранилища как `undefined`, пока вызов не завершится.
+
+### <script context="module">
+
+---
+
+Блок `
+
+
+```
+
+### <style>
+
+---
+
+CSS стили внутри блока `
+```
+
+---
+
+Для применения стиля к селектору глобально, используйте модификатор `:global(...)`.
+
+```sv
+
+```
+
+---
+
+Если требуется сделать глобальной анимацию @keyframes, добавьте к имени анимации префикс `-global-`.
+
+Часть имени `-global-` будет удалена при компиляции, и вы сможете обратиться к анимации просто по имени `my-animation-name` в любом месте вашего кода.
+
+```html
+
+```
+
+---
+
+На компонент должен быть только 1 тег верхнего уровня `
+
+```
diff --git a/docs/02-template-syntax.md b/docs/02-template-syntax.md
new file mode 100644
index 0000000..8ef6da1
--- /dev/null
+++ b/docs/02-template-syntax.md
@@ -0,0 +1,1762 @@
+# Синтаксис шаблонов
+---
+
+### Теги
+
+---
+
+Тег в нижнем регистре, например `
` — это обычный HTML элемент. Тег, написанный с большой буквы, такой как `` или ``, обозначает _компонент_.
+
+```sv
+
+
+
+
+
+```
+
+### Атрибуты и свойства
+
+---
+
+По умолчанию атрибуты работают точно так же, как их HTML-аналоги.
+
+```sv
+
+
+
+```
+
+---
+
+Как и в HTML, значения могут быть указаны без кавычек.
+
+```sv
+
+```
+
+---
+
+Значения атрибута могут содержать выражения JavaScript.
+
+```sv
+страница {p}
+```
+
+---
+
+Или они _целиком_ могут быть выражениями JavaScript.
+
+```sv
+
+```
+
+---
+
+Булевые атрибуты присоединяются к элементу, если их значения [истинное](https://developer.mozilla.org/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/Truthy) и убираются с него, когда значения являются [ложными](https://developer.mozilla.org/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/Falsy).
+
+Все остальные атрибуты будут присоединены к элементу, только если их значение не является [null-образным](https://developer.mozilla.org/ru/docs/Glossary/Nullish) (`null` или `undefined`).
+
+```sv
+
+
У этого контейнера нет атрибута title
+```
+
+---
+
+Выражение может содержать символы, которые могут вызвать проблемы при подсветке синтаксиса в обычном HTML, поэтому допускается использование значения в кавычках. Кавычки не влияют на то, как анализируется значение:
+
+```sv
+
+```
+
+---
+
+Когда имя и значение атрибута совпадают (`name = {name}`) — их можно заменить на `{name}`.
+
+```sv
+
+
+
+```
+
+---
+
+Значения, передаваемые в компоненты, называются _свойствами_ или _пропсами_, но не _атрибутами_, поскольку они не относятся к DOM.
+
+Как и в DOM-элементах, `name={name}` можно заменить сокращением `{name}`.
+
+```sv
+
+```
+
+---
+
+_Развёртка атрибутов_ позволяет передать компоненту сразу несколько атрибутов или свойств.
+
+Элемент или компонент может иметь сразу несколько таких развёрток вперемешку с обычными атрибутами.
+
+```sv
+
+```
+
+---
+
+Объект _`$$props`_ содержит в себе все свойства передаваемые компоненту, включая и те, которые не объявлены с помощью оператора `export`. В редких случаях использование этого объекта может быть полезным, но в целом не рекомендуется его использовать, поскольку это вызовет определённые трудности у Svelte при оптимизации приложения.
+
+```sv
+
+```
+
+---
+
+Объект _`$$restProps`_ содержит в себе только те переданные свойства, которые не были объявлены при помощи оператора `export`. Он может быть использован для передачи заранее неизвестных атрибутов какому-либо элементу внутри компонента.
+
+```sv
+
+```
+
+> Атрибут `value` у элемента `input`, а также дочерние элементы `option` не
+> могут быть установлены развёрткой атрибутов когда используются привязки
+> `bind:group` или `bind:checked`. В такой ситуации Svelte необходимо видеть
+> значения атрибутов `value` непосредственно в шаблоне, чтобы связать его с
+> соответствующей переменной.
+
+---
+
+### Текстовые выражения
+
+```sv
+{выражение}
+```
+
+---
+
+Текст также может содержать JavaScript-выражения:
+
+```sv
+
Привет, {name}!
+
{a} + {b} = {a + b}.
+
+
{(/^[A-Za-z ]+$/).test(value) ? x : y}
+```
+
+### Комментарии
+
+---
+
+Вы можете использовать внутри компонентов обычные HTML-комментарии.
+
+```sv
+
+
Привет мир
+```
+
+---
+
+Комментарии, которые начинаются со `svelte-ignore`, отключают определённые предупреждения для следующего за ним блока разметки. Обычно это используется для предупреждения о доступности — убедитесь, что вы отключаете их по уважительной причине.
+
+```sv
+
+
+```
+
+### {#if ...}
+
+```sv
+{#if выражение}...{/if}
+```
+
+```sv
+{#if выражение}...{:else if выражение}...{/if}
+```
+
+```sv
+{#if выражение}...{:else}...{/if}
+```
+
+---
+
+Для отображения содержимого при выполнении какого-либо условия, нужно добавить его в блок `if`.
+
+```sv
+{#if answer === 42}
+
а какой был вопрос?
+{/if}
+```
+
+---
+
+Дополнительные условия могут быть добавлены с помощью `{:else if выражение}`, а блок альтернативной разметки помещен после `{:else}`.
+
+```sv
+{#if porridge.temperature > 35}
+
слишком горячая!
+{:else if 25 > porridge.temperature}
+
слишком холодная!
+{:else}
+
то, что надо!
+{/if}
+```
+
+### {#each ...}
+
+```sv
+{#each выражение as имя}...{/each}
+```
+
+```sv
+{#each выражение as имя, индекс}...{/each}
+```
+
+```sv
+{#each выражение as имя (ключ)}...{/each}
+```
+
+```sv
+{#each выражение as имя, индекс (ключ)}...{/each}
+```
+
+```sv
+{#each выражение as имя}...{:else}...{/each}
+```
+
+---
+
+Перебор списков значений может быть выполнен блоком `each`.
+
+```sv
+
Список покупок
+
+ {#each items as item}
+
{item.name} x {item.qty}
+ {/each}
+
+```
+
+Можно выполнять перебор по массиву или массивоподобному значению, т.е. по любому объекту, у которого есть свойство `length`.
+
+---
+
+Блок `each` также может отдавать _индекс_ элемента, аналогично второму аргументу callback-функции в `array.map(...)`:
+
+```sv
+{#each items as item, i}
+
{i + 1}: {item.name} x {item.qty}
+{/each}
+```
+
+---
+
+Если указать параметр _ключ_, который однозначно идентифицирует каждый элемент списка, то при изменении данных Svelte будет использовать его для изменения списка в нужном месте, а не просто удалять и добавлять элементы в конец массива. Ключом может быть любой объект, но рекомендуется использовать строки и числа, поскольку они позволяют сохранять уникальность при изменении самих объектов.
+
+```sv
+{#each items as item, i (item.id)}
+
{i + 1}: {item.name} x {item.qty}
+{/each}
+```
+
+---
+
+При желании в блоках `each` можно использовать деструктуризацию и развёртку:
+
+```sv
+{#each items as { id, name, qty }, i (id)}
+
{i + 1}: {name} x {qty}
+{/each}
+
+{#each objects as { id, ...rest }}
+
{id}
+{/each}
+
+{#each items as [id, ...rest]}
+
{id}
+{/each}
+```
+
+---
+
+Блок `each` тоже может иметь блок `{:else}`, который будет отрисовываться, если переданный список окажется пустым.
+
+```sv
+{#each todos as todo}
+
{todo.text}
+{:else}
+
Нет задач!
+{/each}
+```
+
+### {#await ...}
+
+```sv
+{#await выражение}...{:then имя}...{:catch имя}...{/await}
+```
+
+```sv
+{#await выражение}...{:then имя}...{/await}
+```
+
+```sv
+{#await выражение then имя}...{/await}
+```
+
+```sv
+{#await выражение catch имя}...{/await}
+```
+
+---
+
+Блоки `await` позволяют обрабатывать три возможных состояния промисов — ожидание, выполнение или отклонение. В режиме SSR на сервере будет отображаться только состояние ожидания.
+
+```sv
+{#await promise}
+
+
Ждём пока промис выполнится...
+{:then value}
+
+
Значение равно {value}
+{:catch error}
+
+
Что-то пошло не так: {error.message}
+{/await}
+```
+
+---
+
+Блок `catch` может быть опущен, если не нужно ничего отрисовывать, при отклонении промиса (или это вообще невозможно).
+
+```sv
+{#await promise}
+
+
Ждём пока промис выполнится...
+{:then value}
+
+
Значение равно {value}
+{/await}
+```
+
+---
+
+Если состояние ожидания промиса не требует информирования, можно также опустить и первый блок.
+
+```sv
+{#await promise then value}
+
Значение равно {value}
+{/await}
+```
+
+---
+
+Аналогично, если нужно показать только ошибку, можно опустить блок `then`.
+
+```sv
+{#await promise catch error}
+
Произошла ошибка: {error}
+{/await}
+```
+
+### {#key ...}
+
+```sv
+{#key выражение}...{/key}
+```
+
+Блок `key` уничтожает и пересоздаёт свое содержимое всякий раз, когда значение выражения меняется.
+
+---
+
+Он полезен когда, вам нужно проиграть какой-либо переход при изменении значения переменной.
+
+```sv
+{#key value}
+
{value}
+{/key}
+```
+
+---
+
+Когда внутри помещаются компоненты, они будут пересозданы заново.
+
+```sv
+{#key value}
+
+{/key}
+```
+
+### {@html ...}
+
+```sv
+{@html выражение}
+```
+
+---
+
+В текстовых выражениях, символы вроде `<` и `>` экранируются, а в HTML выражениях — нет.
+
+Выражение должно быть самодостаточной и валидной HTML-разметкой — `{@html "
"}содержимое{@html "
"}` _не сработает_, поскольку `
` не является валидной HTML-разметкой, и _не_ скомпилирует код Svelte.
+
+> Svelte не очищает HTML код перед его обработкой! Если данные приходят из
+> ненадёжного источника, необходимо их проверить. В противном случае, вы
+> подвергаете пользователей возможным XSS-атакам.
+
+```sv
+
+
{post.title}
+ {@html post.content}
+
+```
+
+### {@debug ...}
+
+```sv
+{@debug}
+```
+
+```sv
+{@debug переменная1, переменная2, ..., переменнаяN}
+```
+
+---
+
+Тег `{@debug ...}` — это альтернатива для функции `console.log (...)`. Он отображает значение указанных переменных при их изменении, и приостанавливает дальнейшее выполнение кода при открытых _инструментах разработчика_ в браузере.
+
+```sv
+
+
+{@debug user}
+
+
Привет {user.firstname}!
+```
+
+---
+
+`{@debug ...}` принимает разделенный запятыми список имён переменных (не любых выражений).
+
+```sv
+
+{@debug user}
+{@debug user1, user2, user3}
+
+
+{@debug user.firstname}
+{@debug myArray[0]}
+{@debug !isReady}
+{@debug typeof user === 'object'}
+```
+
+Тег `{@debug}` без каких-либо аргументов установит оператор `debugger`, который будет срабатывать при любом изменении состояния.
+
+### {@const ...}
+
+```sv
+{@const assignment}
+```
+
+---
+
+Тег `{@const ...}` определяет локальную константу.
+
+```sv
+
+
+{#each boxes as box}
+ {@const area = box.width * box.height}
+ {box.width} * {box.height} = {area}
+{/each}
+```
+
+`{@const}` допускается только в качестве прямого дочернего элемента `{#each}`, `{:then}`, `{:catch}`, `` или ``.
+
+
+### Директивы элементов
+
+Наряду с атрибутами у элементов могут быть и _директивы_, которые предоставляют некоторые дополнительные возможности.
+
+#### on:_событие_
+
+```sv
+on:событие={обработчик}
+```
+
+```sv
+on:событие|модификаторы={обработчик}
+```
+
+---
+
+Используйте директиву `on:` для обработки событий в DOM.
+
+```sv
+
+
+
+```
+
+---
+
+Можно задать обработчики непосредственно на месте, без какой-либо потери производительности. Как и у атрибутов, значения директив могут быть заключены в кавычки для совместимости с подсветкой синтаксиса.
+
+```sv
+
+```
+
+---
+
+_Модификаторы_ событий DOM добавляются после символа `|`.
+
+```sv
+
+```
+
+Доступны следующие модификаторы:
+
+* `preventDefault` — вызывает `event.preventDefault()` перед запуском обработчика. Полезно, в том числе для обработки форм на клиентской стороне.
+* `stopPropagation` — вызывает `event.stopPropagation()`, предотвращает распространение события до следующих элементов.
+* `passive` — улучшает производительность прокрутки при тач-событиях или при прокрутке колёсиком мышки (Svelte добавит этот модификатор автоматически там, где это безопасно).
+* `nonpassive` — явно устанавливает `passive: false`
+* `capture` — вызывает событие в режиме _capture_ вместо _bubbling_.
+* `once` — удаляет обработчик события после первого вызова.
+* `self` — обработчик сработает, только если в свойстве `event.target` находится сам элемент, на котором слушается событие
+* `trusted` — обработчик сработает, только если `event.isTrusted` имеет значение `true`. Т.е. если событие инициируется действием пользователя.
+
+Модификаторы можно соединять в цепочку, например `on:click|once|capture={...}`.
+
+---
+
+Если директива `on:` используется без значения, то компонент будет _пробрасывать_ событие. Таким образом можно обрабатывать события из глубоко вложенных компонентов.
+
+```sv
+
+```
+
+---
+
+Можно назначить несколько обработчиков для одного события:
+
+```sv
+
+
+
+```
+
+#### bind:_свойство_
+
+```sv
+bind:свойство={переменная}
+```
+
+---
+
+Данные обычно передаются от родительского элемента к потомкам. Директива `bind:` позволяет передавать данные в другую сторону, от дочернего элемента в родительский. Большинство привязок соотносятся с конкретными элементами.
+
+Простейшие привязки просто передают значение свойства элемента, например, `input.value`.
+
+```sv
+
+
+
+
+```
+
+---
+
+Если имя свойства и значения одинаковые, можно использовать сокращение.
+
+```sv
+
+
+
+```
+
+---
+
+Значения из числовых `input` элементов автоматически приводятся к нужному типу. В структуре DOM значение свойства `input.value` таких элементов будет являться строкой, но Svelte будет рассматривать его как число. Если значение `input` пустое или недействительное (в случае `type="number"`), оно будет равно `undefined`.
+
+```sv
+
+
+```
+
+---
+
+На элементах ``с атрибутом `type="file"` можно использовать привязку `bind:files`, чтобы получить [список выбранных файлов в виде `FileList`](https://developer.mozilla.org/ru/docs/Web/API/FileList) только для чтения.
+
+```sv
+
+
+```
+---
+
+`bind:` может быть использован вместе с директивой `on:`. Их порядок определяет значение связанной переменной при вызове обработчика событий.
+
+```sv
+
+
+
+```
+
+##### Привязка к значению `
+