DEV Community: Arkadiusz Chatys

Why is it worth to attend local meetups?

Arkadiusz Chatys — Wed, 28 Aug 2019 22:36:40 +0000

In April 2019, I've moved from a medium-sized city in Poland to London, one of the biggest cities in Europe, with really big front-end community.

One of the first things that I've started to explore, was attending front-end meetups. Recently I started to wonder what is it about meetups, that makes me still want to attend?

I'll try to write down a few reasons. I'm really curious what are your reasons for attending meetups or what keeps you away from attending them?

Why do I attend local meetups?

1. I mean... who doesn't like free pizza, right?

I'm obviously joking, as it's the least important part, but it's always nice to treat yourself with a complimentary slice of pizza and drink. It truly helps to gather people in one space and start a bit of networking (I'll get back to networking a bit later though).

2. Inspire vs Learn

It may sound weird but I'm not looking for new knowledge there. I look for inspiration. People have great ideas, they are passioned about what they do. It gives you a kick of positive energy to explore new things, to try harder, to find new ways of enjoying it.

3. What's trending?

Attending local meetups can help you understand current trends and what's popular at the moment (React Hooks were on the list of almost every single meetup I attended in last few months, so were PWAs last year). Thanks to that, you can try to follow the new technologies and stay up to date

Don't treat it too serious though! Solid knowledge of JavaScript is more important than some trending framework, which we will all forget about in 2 years.

4. Learn how to speak in public

If you ever thought about public speaking, the first step can be to attend local meetups and observe the speakers. How do they talk? What's their body language? How does their slide deck look like? When the crowd seems to be more interested? What tricks do they use to engage people? What mistakes did they make?

5. Just doing something different for a change

It's just something different, then watching Netflix, going to the pub with friends or playing sports. It doesn't require any effort from you and it doesn't cost you a dime. Might come handy when the payday is far away and you already spent your budget for entertainment that month.

6. Tell your colleagues about something cool!

Surprise your work friends with some cool new thing you've seen on meetup and gain those RESPECT POINTS.

Networking?

I promised to get back to that topic, and I purposely haven't put number 7 next to the title. Networking is something that you can try to do during meetups, but I find it surprisingly difficult. Part of the problem is definitely that I'm a massive introvert and I find it uncomfortable and stressful to speak to people I don't know. If there's one pro tip that I can give people like me is, try to come to the conference a few minutes after the doors are open. There will be most likely only a couple of people, not too many so it's easier to start talking to someone, but at the same time, you won't be sitting there alone waiting for other people to come.

Which meetups do I attend?

There are few meetups that I genuinely like and I think people who organise them are doing a great job, so if you are currently living in London, I highly recommend those meetups:

https://www.frontendlondon.co.uk/

https://www.meetup.com/js-monthly/

https://meetup.react.london/

What are your reasons [to attend]/[not to attend] local meetups?
What are your favourite meetups in your town?

Use snippets in VS Code, to boost your productivity and simplify your work!

Arkadiusz Chatys — Thu, 15 Aug 2019 17:20:21 +0000

Let's talk about snippets. How often you repeat particular parts of code within your repository or look for a syntax of some mixin or function?

How often you need to use media queries or functions that you'd just wish to type as quickly as possible and move on with your code?

There's a really easy way of making this process way more pleasant. You can create code snippets, that will boost your productivity A 👏 L👏O👏T.

How it works

Let's take media queries as an example. Instead of typing:

@media screen and (min-width: $breakpoint-desktop) {

}

you could simply type in (and this is just an example) md and hit enter. This would create the structure above and put tabulator inside of it.

You can create multiple snippets like that, where you could define:

(Naming convention here is just an example)

mm - media for mobile
mt - media for tablet
md - media for desktop

You can go with a slightly different approach and leave min-width empty, and fill it in after hitting enter (so you don't have to create multiple snippets for the same purpose)

Use cases

Some of the simple use cases for snippets:

1) You have custom mixins in your boilerplate, that you don't need/want to remember. Maybe you are used to different syntax in other boilerplate that you use, and you want to unify that by creating snippets.

2) You're bored with typing console.log() every single time you debug something.

3) You hate typing @media queries.

4) You have some custom SCSS functions.

5) You hate creating the structure of imports and functions for your React components.

AND 👏 SO 👏 MUCH 👏 MORE

Let's build our snippet

1) Open VS Code with the project that you want to work on
2) Click ⌘ + ⇧ + P, which opens commands list (ctrl+shift+p on Windows).

3) Search for Preferences: Configure User Snippets. This will open another modal instead of the commands list.

4) Here we have a few different options:

Create global snippets, that will work across all repositories (select New global snippets file).
Create local snippets, that will work inside a single repository (select New snippets file for '<NAME_OF_YOUR_REPOSITORY'>).
Select programming language, you want to create a snippet for.

5) If you select local snippets, this will create .vscode folder with a file inside of your repository. The file will have an example of a snippet that you can use as a starting point.

6) Now when you have your file ready, let's take the example from the file and try to understand it.

"Print to console": {
  "scope": "javascript,typescript",
  "prefix": "log",
  "body": [
    "console.log('$1');",
    "$2"
  ],
  "description": "Log output to console"
}

Line by line

1) "Print to console" is a description of the snippet that will help you to find it in suggested options.

2) In "scope" you need to add all the languages you need that snippet to work in (you don't want to see console.log snippet writing your CSS, right?)

3) "prefix" is literally a name you will need to type in inside your code to get the snippet working.

4) "body" is the most important part. It's an array, which takes strings and each string is the next line of code (in this example, the snippet will create two lines of code). You probably noticed $1 and $2 inside of the body. These are tab stops. It means that after you use the snippet, tabulator will stop first on $1 and after next tab hit, it will jump to $2. That's super useful.

You can also use \n to make a new line and keep the whole body as a single string

5) "description", that's just a longer description of the snippet.

That's it. You've just created your own snippet! 👏👏👏

Few examples of snippets

"Media queries mixin": {
   "scope": "css, scss",
   "prefix": "rwd",
   "body": [
     "@include rwd($1) {",
     "  $2",
     "}"
   ],
   "description": "Snippet is using custom mixin from boilerplate"
}

"React with Styled-Components": {
  "prefix": "rs",
  "body": [
    "import React from 'react';",
    "import styled from 'styled-components';",
    "",
    "const $1 = () => (",
    "  $2",
    ");",
    "",
    "export default $1;"
  ]
}

"setTimeout": {
    "prefix": "st",
    "body": [
      "setTimeout(() => {",
        "$1",
      "}, $2)",
    ],
    "description": "SetTimeout function"
  }

What are the most common use cases of snippets for you? Let me know in the comments!

PS. There's a whole lot of extensions that provide snippets for a particular purpose (React snippets, Vue snippets, ES6 snippets, SCSS snippets, etc.)

Other VS Code Tips & Tricks

Working on multiple windows in VS Code

Working on multiple windows in VS Code? Simple trick to increase productivity!

Arkadiusz Chatys — Tue, 13 Aug 2019 08:12:25 +0000

If you've ever struggled with working in multiple VS Code windows, there's a really neat solution that can help you distinguish, which window are you currently working on. You've might have seen this solution on some of Wes Bos tutorials (React+Node).

Let's say, you work on both React and Node repository at the same time, and you want to make it easier for your eyes to understand which window is currently active.

With a few lines of code, you can change the color of the Title Bar and attach this setting to the project. You can even push it to a repository, so other developers can use it too (you don't have to do it though).

Let's get to work!

Creating a file with settings

Manual

Create .vscode folder and settings.json file inside of the folder in your repository.

Automated

1) Open VS Code with the project that you want to style.
2) Click ⌘ + ⇧ + P, which opens commands list (ctrl+shift+p on Windows).

3) Search for Preferences: Open Workspace Settings. This will open a new Settings tab in your VS Code.

4) In the sidebar choose Workbench > Appearance.

5) Under Color Customizations click Edit in settings.json. This will create a new .vscode folder with settings.json file, inside of the repository.

Setting color of your window

Inside of your settings.json file, you have a few different options that you can set.

titleBar.activeBackground - color window Title Bar when the window is active.

titleBar.inactiveBackground - color window Title Bar when another window is active.

titleBar.activeForeground - color text of Title Bar.

Protip: set inactiveBackground to just slightly darker color from activeBackground to identify which window are you currently using.

There's a lot of different options that you can set to customize the whole window: https://code.visualstudio.com/api/references/theme-color



{

  // rest of your settings,

  "workbench.colorCustomizations": {

    "titleBar.activeBackground" : "#f2c216",

    "titleBar.inactiveBackground": "#ac8b12",

    "titleBar.activeForeground":"#000",

  }

}

Result

Other VS Code Tips & Tricks

Use snippets in VS Code, to boost your productivity and simplify your work!