DEV Community: Micheal

Expressions, operators, statements in JavaScript

Micheal — Tue, 07 Apr 2020 02:35:46 +0000

There are some terminological confusions in translating these concepts from English to Russian. So, I have tried to clarify...

Source code. Based on this article.

The sort method

Micheal — Sat, 04 Apr 2020 14:52:56 +0000

Source code.

The filter method

Micheal — Fri, 03 Apr 2020 20:22:09 +0000

Scrincast for JavaScript beginners (Russian).

Source code.

The reduce method in JavaScript

Micheal — Thu, 02 Apr 2020 14:09:16 +0000

Source code.

Method map in JavaScript

Micheal — Wed, 01 Apr 2020 16:19:59 +0000

One more vintage styled clicast.

Source code

Try... catch... finally in JavaScript

Micheal — Tue, 31 Mar 2020 22:40:58 +0000

Fresh clicast (termcast? bashcast? vimcast?).

Source code.

Delegates in C#

Micheal — Mon, 30 Mar 2020 22:43:31 +0000

Sources is here.

WARNING

This video contains some Russian texts.

Logical operators in JavaScript

Micheal — Sat, 28 Mar 2020 21:32:18 +0000

Another silent film styled screencast.

WARNING

The following video contains some Russian text).

Source code is here.

String methods of JavaScript

Micheal — Sat, 28 Mar 2020 19:23:47 +0000

Contains some Russian text, sorry.

Source code here.

How to friend Pug and Svelte

Micheal — Wed, 09 Oct 2019 21:22:29 +0000

SvelteJS is great! In recent days I have been using it for my new project and I am delighted. But at one moment I wanted to combine SvelteJS with my favorite preprocessor Pug. This task is not so simple as one can think.

SvelteJS's authors recommend to use Rollup for module compiling. I am not so familiar with this tool, but I have found out how to use it and how to integrate pug and coffeescript preprocessors in it. But result disappointed me: pug-part works fine, but special symbols in script-part break compilation. Finally, I invented simple hack, that let me to reuse my pug-components.

So, there is a recipe. Firstly, let's create some pug-file:

script.
    let postUrl
    let postMessage
    let save = ()=> alert('save')
    // and so on
form
    .columns
        .column
            .field
                .control
                    input.input.is-primary(bind:this='{postUrl}')
        .column.is-narrow
            a.button.is-white(on:click='{showLink}')
                span.icon
                    i.fas.fa-link
    .field
        .control
            textarea.textarea(maxlength=350 rows=6 bind:this='{postMessage}')

.buttons.has-text-right(style='width: 100%')
    button.button.is-primary.is-normal(on:click='{save}')     Save
    button.button.is-primary.is-normal(on:click='{post}')     Post
    button.button.is-primary.is-normal(on:click='{schedule}') Schedule
    button.button.is-primary.is-normal(on:click='{remove}')   Remove

Never mind what it is for. Main thought here is that the pug-code can be pretty complex, with includes and variables.

Let's name this file as PostEditor.pug and compile it with some special options:

pug --pretty -E svelte PostEditor.pug

Option -E means here extension of resulting file. That's all! You have got useful template, where You can develop script-part.

<script>
  let postUrl
  let postMessage
  let save = ()=> alert('save')
  // and so on
</script>
<form>
  <div class="columns">
    <div class="column">
      <div class="field">
        <div class="control">
          <input class="input is-primary" bind:this="{postUrl}"/>
        </div>
      </div>
    </div>
    <div class="column is-narrow"><a class="button is-white" on:click="{showLink}"><span class="icon"><i class="fas fa-link"></i></span></a></div>
  </div>
  <div class="field">
    <div class="control">
      <textarea class="textarea" maxlength="350" rows="6" bind:this="{postMessage}"></textarea>
    </div>
  </div>
</form>
<div class="buttons has-text-right" style="width: 100%">
  <button class="button is-primary is-normal" on:click="{save}">    Save</button>
  <button class="button is-primary is-normal" on:click="{post}">    Post</button>
  <button class="button is-primary is-normal" on:click="{schedule}">Schedule</button>
  <button class="button is-primary is-normal" on:click="{remove}">  Remove</button>
</div>

Of course, You have to remove some quote-marks with your hands now, but it is not so complex task.

Google RIP

Micheal — Tue, 08 Oct 2019 17:46:12 +0000

Веселые айтинки

Micheal — Sat, 05 Oct 2019 16:44:32 +0000

Primitive data types and civilized data types.