teleren/devto huggingface dataset:
Use Vim as a CoffeeScript IDE
Published: 2020-07-08 09:47:43

---
title: Use Vim as a CoffeeScript IDE
published: true
tags: 
canonical_url: https://spacevim.org/use-vim-as-a-coffeescript-ide/
---

# [Blogs](../blog/) » Use Vim as a CoffeeScript IDE

This is a general guide for using SpaceVim as a [CoffeeScript](https://coffeescript.org/) IDE, including layer configuration and usage. Each of the following sections will be covered:

<!-- vim-markdown-toc GFM -->
- Enable language layer
- Code completion
- Syntax linting
- Jump to test file
- running code
- Code formatting
<!-- vim-markdown-toc -->
### Enable language layer

By default `lang#coffeescript` layer is not loaded. To add CoffeeScript language support in SpaceVim,you need to enable the `lang#coffeescript` layer. Press `SPC f v d` to openSpaceVim configuration file, and add following configuration:

```
[[layers]]
  name = "lang#coffeescript"

```

for more info, you can read the [lang#coffeescript](../layers/lang/coffeescript/) layer documentation.

### Code completion

`lang#coffeescript` layer will load the vim-coffeescript plugin automatically, unless overriden in your `init.toml`.The completion menu will be opened as you type.

![coffeeide](https://user-images.githubusercontent.com/13142418/51876268-fe526e80-23a2-11e9-8964-01fd62392a1f.png)

### Syntax linting

The checkers layer is enabled by default. This layer provides asynchronous syntax linting via [neomake](https://github.com/neomake/neomake).It will run [coffeelint](https://github.com/clutchski/coffeelint) asynchronously.

The coffeelint is command line lint for coffeescript, currently is maintained by [Shuan Wang](https://github.com/swang).To install coffeelint, just run following command in terminal.

```
npm install -g coffeelint

```

Note: if no coffeelint is installed, neomake will ues default command `coffee`.

![coffeecheckers](https://user-images.githubusercontent.com/13142418/51875890-bb43cb80-23a1-11e9-93b2-037e7120f5f2.png)

### Jump to test file

SpaceVim use built-in plugin to manager the files in a project,you can add a `.project_alt.json` to the root of your project with following content:

```
{
  "src/*.coffee": {"alternate": "test/{}.coffee"},
  "test/*.coffee": {"alternate": "src/{}.coffee"}
}

```

with this configuration, you can jump between the source code and test file via command `:A`.

### running code

To run current script, you can press `SPC l r`, and a split windowswill be openen, the output of the script will be shown in this windows.It is running asynchronously, and will not block your vim.

![coffeerunner](https://user-images.githubusercontent.com/13142418/51877740-3f00b680-23a8-11e9-91ce-18cf147dbb95.png)

### Code formatting

The format layer is also enabled by default, with this layer you can use key binding `SPC b f` to format current buffer.Before using this feature, please install coffee-fmt.

```
npm install -g coffee-fmt

```
Vue helper for beginners
Tags: vue, documentation
Published: 2019-03-13 14:17:01

---
title: Vue helper for beginners
published: true
description: I made a little Vue helper for me and I wanted to share it with you.
tags: Vue, documentation
---

Hello folks.

I made a little Vue helper for me and I wanted to share it with you.
Have fun.
bunny ©YUKIJI (https://www.instagram.com/machiko324/)



![alt text](https://thepracticaldev.s3.amazonaws.com/i/vq5kvtyq86u6ckwz5x5v.png)

![alt text](https://thepracticaldev.s3.amazonaws.com/i/263cl8z9b3qt7rabv03j.png)

![alt text](https://thepracticaldev.s3.amazonaws.com/i/1sc8fpxgliehsy4e9b8z.png)

![alt text](https://thepracticaldev.s3.amazonaws.com/i/f1ktz7m8rz0juvgwlkzd.png)

![alt text](https://thepracticaldev.s3.amazonaws.com/i/y1bn98dv5rsoesxrrxc0.png)

![alt text](https://thepracticaldev.s3.amazonaws.com/i/12koep9nbkhy38ng1phi.png)
Dynamic form fields using React with hooks
Tags: react, reacthooks
Published: 2019-03-13 14:11:12

---
title: Dynamic form fields using React with hooks
published: true
tags: react, react-hooks
---

I'm trying to create a form where I'm letting user to add as many number of input fields and also giving an ability to remove any particular added input field.

Adding a field works fine, however, the remove always removes the last field, not the one which I wanted to remove.

```jsx
function App() {
  const [fields, setFields] = useState([{ value: null }]);

  function handleChange(i, event) {
    const values = [...fields];
    values[i].value = event.target.value;
    setFields(values);
  }

  function handleAdd() {
    const values = [...fields];
    values.push({ value: null });
    setFields(values);
  }

  function handleRemove(i) {
    const values = [...fields];
    values.splice(i, 1);
    setFields(values);
  }

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>

      <button type="button" onClick={() => handleAdd()}>
        +
      </button>

      {fields.map((field, idx) => {
        return (
          <div key={`${field}-${idx}`}>
            <input
              type="text"
              placeholder="Enter text"
              onChange={e => handleChange(idx, e)}
            />
            <button type="button" onClick={() => handleRemove(idx)}>
              X
            </button>
          </div>
        );
      })}
    </div>
  );
}
```

The code sandbox is here: https://codesandbox.io/s/q555kp8jj?fontsize=14

The same thing works with Class component, here is the code sandbox: https://codesandbox.io/s/wznq443xl?fontsize=14

To reproduce the issue, follow these steps:
- Add some text in the 1st input text field
- Add a new text field by clicking on **+** button
- Click on **X** button next to the 1st text field

You can see that the above step removes the 2nd field, not the 1st field.

When I inspect, the `fields` state is properly updating when I click remove button. Kindly help.

__Update__: The issue has been solved after making the `input` to **controlled** component. Thanks to a reddit user to find the issue. Refer more [here](https://www.reddit.com/r/reactjs/comments/b0mo2d/help_needed_dynamic_form_fields_using_react_with/eigmygl/?context=3)
My Blog's Architecture
Tags: architecture, blog, major
Published: 2018-12-13 16:05:46

---
title: My Blog's Architecture
published: true
description: Building a blog from scratch using modern tools. 
tags: #architecture #blog #major
series: my_blog
---

# Blog's Architecture

This is my first blog on how I'm creating my [blog](https://blog.zeerorg.site). I've started writing this before the blog site is up detailing what restrictions I'm going to place, the features I'll be adding and how I'll go about them.

---

## Block diagrams ftw
A simple block diagram for the overall architecture. 

![Architecture Diagram](https://zeerorgprocessedblog.blob.core.windows.net/photos/blog-architecture.png)

## Requirements (or maybe restrictions)

Every project needs some requirements so I should underline those for this blog. I want to work under these so I don't go on doing something I actually regret later on.

1. **Easy to write**. I don't want to go though the "write-build-deploy" cycle over and over again everytime I write a post. The process should be as easy as typing in my editor, seeing the preview and uploading the file. That's it, no preprocessing, no building, minimal stuff.  
2. **No bullsh*t features**. The feature set should be minimal. So things like comments and reacting or sharing of a post are not going to be included. Any new feature added will have an explanation on why its there.
3. **Easier on the bill**. This is not going to earn me something so I want this to be as easy on the wallet as possible. This might also push me to find newer solutions (hopefully).

---

## Going about it

This is why and what I decided. 

1. **Storing in Azure blobs**. This is going to be the place for storing original blog markdown files. This keeps a backup and also creates a destination for original source files.  
2. **Stored files are automatically processed when uploaded**. I set this up and the files are processed without my interaction. These processed files are used by the backend to answer requests.  
3. **Frontend and backend live separately**. This is more of a personal choice than a practical one. I'll be writing the blog in react and I need a backend to query my blogs.  
4. **Functions as backend**. They are really cheap to run compared to an always on server.  
5. **Hosting frontend on Netlify**. I have heard good things about netlify and wanted to try it out. Its free tier is great and I can add my custom domain for free.
Multiple blogs with Perch CMS
Tags: perch, cms, frontend
Published: 2020-02-25 21:14:04

---
title: Multiple blogs with Perch CMS
published: true
date: 2019-03-13 13:00:08 UTC
tags: perch, CMS, front-end
canonical_url: https://www.juanfernandes.uk/blog/multiple-blogs-with-perch-cms/
---

An existing client asked me to move their blog from /self-help/blog/ to the root of the website - but they wanted to keep the self-help blog, as well as having a blog for general posts and a blog for media related articles, ie press releases etc.

I wondered if the perch blog app had a built-in way of doing this - it does but not in the way I thought it would. It does have `perch_blog_section()` which allows you to output a blog section onto a page.

You can think of blog sections as virtual folders where you can store some blog posts. So you still write all your blog posts in the same way as before, but you choose which section it belongs to.

## Create the sections

To get started you need to log into perch and create your new sections. Once you're logged in:

1. Click on Blog -> Sections
2. Click the _Add section_ button
3. Add the _Title_ [image is not required]
4. Click _Save_

For my client, I created the sections based on where they were going to be shown _media_ and _self-help_.

You can leave _Posts_ as the blog's default section.

## Multiple blogs

We can now create our multiple blogs. Depending on the website you're working on, you'll either need to create a new page or edit an existing one.

For my clients' website, I created a new page using the default template and then added the following code:

```
<?php
  perch_blog_custom([
    'section' => 'media',
    'sort' => 'postDateTime',
    'sort-order' => 'DESC',
    'template' => 'blog/media_post_in_list.html'
  ]);
?>

```

If you already use Perch, then the above code will look fairly familiar, but if you don't.

- _Line 3_ - instead of getting all the blog posts, we are calling just blog posts that belong to the _media_ section
- _Lines 4-5_ - we are sorting the blog posts in the date they were created and showing them in descending order
- _Line 6_ - this specifies the template to use. This one is specific to my clients' website. You can just use your own one or the default `post_in_list.html` template.

Using the above code, you can create your multiple blogs in different areas of your website.

## Creating the content

Now that you have the code to show posts from different sections on different pages of your website, you can create blogs posts and add them to each section.

1. Login to Perch
2. Go to the Blog app
3. Create or edit a post
4. Switch to the _Meta and Social_ tab
5. Scroll down and select the section from the dropdown
6. Save

Now, go to the page for that blog section on your website and see your posts for that blog section.

### If you're also moving a blog

In my case, I first moved the blog folder to the root of the website, changed all the URLs, updated the settings for the blog app in Perch settings and changed rewrites in the `.htaccess` file.
How to migrate primary keys from bigint to UUID in Rails
Tags: rails, postgres, uuid, tutorial
Published: 2019-10-07 04:15:49

---
title: How to migrate primary keys from bigint to UUID in Rails
published: true
description: Simple way to change your PostgreSQL primary key type in a Rails migration.
tags: rails, postgresql, uuid, tutorial
canonical_url: https://www.kostolansky.sk/posts/how-to-migrate-to-uuid/
---

Rails uses `bigint` as a default primary key type for PostgreSQL databases. This is a solid option, but you may consider using `UUID` as primary keys. There is and endless debate about pros and cons of each of them, so I'm not going to repeat the arguments here. However, if you've decided to migrate to UUIDs, here is one possible solution.

Let's say we have two tables in our database - `users` and `comments`:

```ruby
create_table :users do |t|
  # ...
end

create_table :comments do |t|
  t.references :user, null: false, foreign_key: true
  # ...
end
```

A possible way to migrate these tables to UUIDs is:
1. Add UUID columns to tables
2. Migrate associations
3. Drop ID columns, rename UUID to ID and use them as primary keys

This migration process is in the following example, which is pretty self-explanatory.

```ruby
class MigrateToUuid < ActiveRecord::Migration[5.2]
  def up
    # Add UUID columns
    add_column :users,    :uuid, :uuid, null: false, default: -> { "gen_random_uuid()" }
    add_column :comments, :uuid, :uuid, null: false, default: -> { "gen_random_uuid()" }

    # Add UUID columns for associations
    add_column :comments, :user_uuid, :uuid

    # Populate UUID columns for associations
    execute <<-SQL
      UPDATE comments SET user_uuid = users.uuid
      FROM users WHERE comments.user_id = users.id;
    SQL

    # Change null
    change_column_null :comments, :user_uuid, false    

    # Migrate UUID to ID for associations
    remove_column :comments, :user_id
    rename_column :comments, :user_uuid, :user_id

    # Add indexes for associations
    add_index :comments, :user_id    

    # Add foreign keys
    add_foreign_key :comments, :users    
    
    # Migrate primary keys from UUIDs to IDs
    remove_column :users,    :id
    remove_column :comments, :id
    rename_column :users,    :uuid, :id
    rename_column :comments, :uuid, :id
    execute "ALTER TABLE users    ADD PRIMARY KEY (id);"
    execute "ALTER TABLE comments ADD PRIMARY KEY (id);"
    
    # Add indexes for ordering by date
    add_index :users,    :created_at
    add_index :comments, :created_at
  end

  def down
    raise ActiveRecord::IrreversibleMigration
  end
```

The `gen_random_uuid()` function is from `pgcrypto` extension, so make sure it's enabled in your databse before running this migration:

```SQL
CREATE EXTENSION IF NOT EXISTS pgcrypto;
```

You can also easily write the `down` method to make the migration reversible.

---

Original article: [How to migrate primary keys from bigint to UUID](https://www.kostolansky.sk/posts/how-to-migrate-to-uuid/)
Android == Java but Java != Android
Tags: discuss, healthydebate, android, java
Published: 2019-03-13 12:44:33

---
title: Android == Java but Java != Android
published: true
tags: discuss, healthydebate, android, java
---

Maybe a strange title but let me give a small explanation. Btw I know there is also Kotlin but I am leaving it out of this, only talking about Android/Java.

My frustration is that whenever I do one of the many available dev surveys there is only a Java option but to me I am an Android developer and not a Java developer. I don't know how to make a Java application and even though Android uses Java to me there are still lots of differences.

I would like to see an Android/Java option in these surveys right next to Java.

Lots of survey results have Java as one of the biggest programming languages but in my opinion this is only because Android is a big part of it.

So what do you guys think about this? 
Should surveys split these up? 
If they do will the survey results (for Java) have a big impact?

_Please leave comments like "You should stop using Java and use Kotlin" out of this._
Book Discount
Tags: ruby, rails
Published: 2019-03-13 12:28:14

---
title: Book Discount
published: true
description: 
tags: ruby, rubyonrails
---


Hi there!

*Everyday Rails Testing with RSpec* is making its 7 yrs birthday.

I've learned a LOT from this book, bought a few years ago.

And the author is giving a big discount :)

https://leanpub.com/everydayrailsrspec/c/7thbirthday

** I have no association with the author, I'm just a happy reader.
What was the last accessibility ticket you worked on?
Tags: a11y, culture, discuss
Published: 2019-03-13 12:26:55

---
title: What was the last accessibility ticket you worked on?
published: true
description: 
tags: a11y, culture, discuss
---

What was the last thing you worked on where accessibility was the main concern?

Was it a new feature with accessibility baked in from the start, was it a bug fix or improvement?

Was it prompted by management, team peers or feedback from customers?

Was it a clear requirement or was it disputed? Did anyone push back and try to argue that it wasn't necessary work?

This is a quick spot-check to see how the real world is getting on.
Vscode My plugins
Tags: vscodemyplugıns
Published: 2019-03-13 11:41:08

---
title: Vscode My plugins
published: true
description: Vscode My plugıns
tags: Vscode My plugıns
---

```json

  "name": "My-plugıns",
  "displayName": "My-plugıns",
  "description": "My-plugıns",
  "version": "1.21.0",
  "publisher": "Alicannklc",
  "preview": true,
  "readme": "README.md",
  "engines": {
    "vscode": "^1.22.0"
  },
  "categories": [
    "Extension Packs"
  ],
  "author": {
    "email": "alicannklc.com",
    "name": "Alıcan Kılıç",
    "url": "https://github.com/alicannklc"
  },
  "extensionDependencies": [
    "aaronphy.scss-scan"
  ]
}
```




![vscodemyplugin](https://thepracticaldev.s3.amazonaws.com/i/qtbxcd62pzwehnlpkhe1.png)
```json

"extensionDependencies": [

"dbaeumer.vscode-eslint",

]

}
```

New plugin 


![enter image description here](https://thepracticaldev.s3.amazonaws.com/i/r1502s6xlvypjait7yib.png)
```json

"extensionDependencies": [

"dbaeumer.vscode-eslint",
"ms-vscode.Go"

]

}
```

New plugin

![enter image description here](https://thepracticaldev.s3.amazonaws.com/i/06lxajl3rqwve30yt1u2.png)
```json

"extensionDependencies": [

"dbaeumer.vscode-eslint",
"ms-vscode.Go",
"ms-python.python"
]

}
```


Editing to .vcode/extensions new folder dir.

Thanks you for reading.

Happy coding.
Which celebrity are you? discover it with machine learning!
Tags: opensource, python, resources, machinelearning
Published: 2019-03-13 18:06:40

---
title: Which celebrity are you? discover it with machine learning!
published: true
tags: Open Source,Python,Resources,machinelearning
canonical_url: https://daniele.tech/2019/03/which-celebrity-are-you-discover-it-with-machine-learning/
---

Giphy released their tool to automatic identify faces of celebrities but what happen when you use your face?

The post [Which celebrity are you? discover it with machine learning!](https://daniele.tech/2019/03/which-celebrity-are-you-discover-it-with-machine-learning/) appeared first on [Daniele Mte90 Scasciafratte](https://daniele.tech/eng).
Announcing Aybolit: lightweight web components library built with LitElement
Tags: webcomponents, customelements, javascript, html
Published: 2019-03-13 09:41:40

---
title: Announcing Aybolit: lightweight web components library built with LitElement
published: true
description: 
tags: webcomponents,customelements,javascript,html
---

Yesterday, I released a 0.1.0 version of Aybolit, the pet project I've been working on lately. In two words, it is about writing web components and finding "the common denominator" between popular CSS frameworks.


The problems Aybolit aims to solve are: granular DOM structure with Custom Elements, scoped CSS thanks to Shadow DOM, and flexible theming API with custom CSS properties and calc(). It also leverages the benefit of Constructible Stylesheets landing in Chrome, as the support for it is already integrated into LitElelment.


The initial release 0.1.0 only includes 5 components: button, checkbox, progress, range and switch (more to come soon). At the same time, it provides Bootstrap, Bulma and Material versions for all of those, plus "White Label" variant with bare minimum of styles, easy to override.


I appreciate any feedback and would like to make Aybolit better with the help of community. It's almost 3 years now since I started making first steps with Polymer, and I put all my experience and enthusiasm into this project.

Check it live: https://web-padawan.github.io/aybolit/

Source code: https://github.com/web-padawan/aybolit
Perf question: How many processes in Node js?
Tags: help
Published: 2019-03-13 08:30:23

I have this idea for a CMS (this is a technical exercise only). Traditional CMS's have modules / plugins which deliver a separated piece of functionality extending the base CMS's capabilities.

This got me thinking, what if I spawn a process per plugin in my node based prototype. I could use sigstop and sigcont to pause and resume processes on demand. Infact I have wrote a small API for this and it works! Fantastic, but what if in (my wildest dreams) my CMS turned into the next WordPress or Drupal? A user might add around 100 plugins I suppose. Could the average host handle all this?

What are the limits?

I could assume that some plugins are dependent on another main plugin and so these could run in the same process, that would reduce the amount of processes.

What do you think?

If I'm looking for benchmarks for node's nodeyness what would I Google?
A Server-Side Rendering Engine for Professionals
Tags: javascript
Published: 2019-03-13 08:07:25

---
title: A Server-Side Rendering Engine for Professionals
published: true
description: A powerful SSR engine made easy.
tags: javascript
---

Hi,

We just released an open source project for React server rendering.

Please check it out and let us know what you think.

- [GitHub Repo](https://github.com/gourmetjs/gourmet-ssr)
- [Project Website](https://ssr.gourmetjs.org)
Substring Selection in CSS not in Javascript
Tags: css3, css, csstutorial
Published: 2019-03-13 07:19:48

---
title: Substring Selection in CSS not in Javascript
published: true
description: How to select substring in CSS easier than javascript and ofcourse faster.
tags: CSS3, CSS, CSS tutorial
---
Scrimba Interactive Walk through: [https://scrimba.com/c/cNgw9vuZ](https://scrimba.com/c/cNgw9vuZ)
YouTube: {% youtube ulp3NXamiSo %}
Create User Icon or Profile Icon in Pure CSS with flex layout design
Tags: css3, css, html, csstutorial
Published: 2019-03-13 07:10:17

---
title: Create User Icon or Profile Icon in Pure CSS with flex layout design
published: true
description: Drawing User Icon in CSS
tags: CSS3, CSS, HTML, CSS tutorial
---
YouTube: {% youtube k-lQOCCr0bA %}