Forem: Dekel

Last Week I Wrote Some jQuery (and no one fired me 🤓)

Dekel — Sun, 15 Aug 2021 20:40:42 +0000

Short disclaimer - Yes. The title of this post is a bit of a clickbait. Not 100%, but you can definitely read it as one. I’m not your standard full-time employee, so it’s gonna be a bit hard to fire me, but I still decided to write some jQuery code, and everyone was happy with it.

So, let’s rewind a bit

I started using jQuery ~15 years ago (around the time it was released). It was the “go-to” for everything you needed to do, and I think it’s safe to assume that almost every website back in the day included the <script src="jquery.js"></script> line in it. It was even before the days of cdnjs (where the standard for using jquery became <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> and all javascript content was served directly from the websites you built without using any cdn).

jQuery was used originally to make it easy for developers to write code that just works. Unlike today, back in the day browsers had different standards and in order for your code to run smoothly (or just work?) on different browsers - there were many things you needed to learn and remember how to do, and some of the standard things that we have today (document.querySelector) weren’t available (or didn’t work as expected). Using jQuery provided a very easy and standard way to access elements (DOM manipulation), work with events and know that everything will work, regardless of the browser your users used to access your website.

Photo by @Pexels

jQuery UI

Following the wide usage of jQuery - another lib was released, called jQuery-UI. According to the website:

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.

Some of the features that jQuery-UI provides are easy to use APIs for draggable elements, which are super easy and can save us a lot of time if we need to handle everything that is related to drag&drop.

Back To Last Week

So last week I needed to create the following interface:

A simple page that shows a container (a rectangle with some background image).
Inside the container we need to display circles (we have a list of the x/y position of each circle).
Each circle can be dragged, but only on the Y-axis.
The dragging/dropping can be only inside the container.
When finished - we need to save (console.log, for now) the new positions of the circles.

Since it was a POC I decided it’s best to do “quick-n-dirty” work with jQuery, which eventually took ~3 hours. The jQuery-UI lib with the draggable API saved me a lot of time, and since it was a POC I didn’t really care if it would be written using some up-to-date framework (react/vue).
One of the nice things about the draggable API of jQuery-UI is that the axis (which gave me a quick solution for the Y-axis only dragging) and the containment (which provides a way to hold the dragged circles inside the container):

$("#container span").draggable({
  axis: "y",
  containment: "parent",
  ...
})

The final version also contains an option to upload the image/the dataset (the positions of the circles) and a few more things, but for this post I included this version of the code.

Summary

Working with jQuery might not be the first choice of most people (and probably also not my first choice for most projects), but it really depends on which project you are currently working on. Yes, sometimes it’s better to just write vanilla javascript, and in case you need something that is a bit more than ~20-30-40 lines of code and is more complex - it’s probably better to use one of the standard and up-to-date frameworks, but you shouldn’t be afraid to use everything that you have in your disposable to provide fast solutions.

Thinking about what someone will do with your code is not something you should ignore, but if you work on something that is only a POC and you just need to understand if there is a future for that code and someone will actually use it - before over engineer and start a project that will take a week - it’s ok to do something that is “quick and dirty” just to get a feeling and understand how and what to do from here.

Cover photo by Markus Winkler @ pixabay

Let’s Talk About Juniors

Dekel — Sun, 08 Aug 2021 19:56:39 +0000

Over the last couple of years, I was privileged to work with many juniors. I have mentored, helped, hired, fired, consulted, read CVs, advised friends and colleagues on hiring juniors, and decided it’s time to write down my two cents on the topic.

This post is focused mostly on junior developers, but I’m sure its content can be relevant to other positions as well.

There are so many juniors out there. Every year we have thousands of new developers finishing their degrees, whether from universities or colleges and let’s not forget all of the bootcamps, online courses, and self-educated people who just go and learn online. We live in an era where most (if not all) of the learning material is just out there - waiting for people to consume it.

Juniors are eager to start their careers, but unfortunately, there aren’t many positions for people without any background, and most companies prefer to go with experienced employees (whether seniors or "junior with 2 years experience").

Photo by @debbieducic

Open Positions

Whenever a new junior position is being published - there are so many candidates that send over their CVs. LinkedIn is one of the main resources for those publications - whether directly on the LinkedIn Jobs section, or posts that people share on their feed. But there are other places as well. Many juniors are members of groups that share those open positions - Telegram groups, WhatsApp groups, Facebook groups, and more. Many people volunteer to find and share new open positions in those groups - just to help other juniors start their journey.

Check out these job ads on LinkedIn:

Only 2-3 days, and already more than 200 candidates submitted their CVs to these positions.

With so many candidates it’s super hard for the managers who are in charge of the hiring process to actually go over each and every CV and give it enough attention. As a candidate - if you really want to be one of the few selected to continue the process - you must find a way to stand-out.

Photo by @geralt

Standing Out as a Junior Developer

There are so many ways to make sure that your CV gets the right attention, but regardless of the design/colors/fonts/professional photo/cleanliness - here are a few things that can help you stand-out and make sure that your CV does not get skipped accidentally:

LinkedIn profile is a must.
Add some intro paragraph about yourself - what is the type of position you are after, what are your strengths, how would the company benefit from your experience if they take you.
Make sure to include a link to your GitHub account.
Have some interesting repositories in your GitHub account. Projects that you worked on (and not the standard "to-do list"; that is probably one of the most-common projects for juniors).
A portfolio is great, if you can have one. Definitely not a must, but at the end of the day - you want to show that you are better than the other CVs in the pack, and a decent portfolio is indeed a way of showing that you are better.

Why put so much attention to the CV?

Photo by @brandsandpeople

Think of it this way - I’m hiring a junior, and I’m getting 200 CVs. Let's assume that half of them contain GitHub accounts, and the other half doesn’t. Unfortunately - I have only one position, and I must skim very quickly over all of those CVs. Whether it’s intentional or not - CV that does not contain a link to a GitHub account, where I can actually go and read some code - gets lower priority. Out of the half that does have GitHub accounts - I will be able to read some code and understand which is better and worth my time to actually call the candidate and check if we can move on to the next steps.
Eventually - you as a candidate should help the hiring person focus on your CV and move it up the stack. It’s your job to stand-out.

What Are The Benefits in Hiring Juniors?

This question is something that you hear from so many managers. Assuming your company has enough money to hire only seniors - why would you hire juniors at all? It’s no secret that sometimes you hire juniors because their salary is lower. No one would say otherwise. But salary is not everything. There are many other reasons to hire juniors as well:

Juniors have less experience, but they can come with fresh perspectives.
Hiring juniors requires you to spend time on mentoring - which is good for everyone. You might have a small team and consider promoting someone to a team-lead - putting them developer in charge/mentor for 1-2 juniors (without officially giving a title) is a great way to check if it can work in the future.
With great power comes great responsibility; you can (and should) make your team of juniors better with time - making you a better team lead/manager, in the process.
Seniors are hard to find. It’s a fact. Hiring seniors is a long process and during that time - juniors can help you grow your business.
Juniors are eager to show they are worth it. They are eager to learn and motivated to be part of the team and start working on "real world" problems.
There are always tedious tasks. Even if way say that everything in our company is super interesting and nothing is boring - eventually - there will be something that our seniors will prefer not to do (and will be super interesting for a junior that never did it before).

Finding The Right One

Like every process - finding the right junior can take time. It's not only about finding the most brilliant one, or the one that has the best grades, but it's also about finding the one that you can motivate, mentor, direct and grow.

Photo by @benjaminsweet

Cover photo by Ian Schneider @ unsplash

Tagged Template Literals - The Magic Behind Styled Components

Dekel — Sun, 01 Aug 2021 08:11:48 +0000

Intro & Background

If you have some experience with React, you probably came across styled-components. In the last few years, the concept of css-in-js became more popular, and there are multiple libraries that are available for us to use. styled-components is one of them, but you can also find Emotion, Radium, JSS, and more. In this post I'm not going to cover the pros and cons of traditional stylesheet files vs. styled-components, and instead - I'm going to focus on tagged template literals - the "magic" that let us use the styled-components syntax.

styled-component basics - a quick reminder

Let's take the following simple syntax for example:

The StyledDiv in the example above is actually a React component that returns a div block with the css of color: red; font-weight: bold;.
Well... kind of. Actually - it's a bit more complicated than that. The output of the above is a div with specific css class-names having the above css definitions inside:

Some of you are probably using this without giving it too much of a thought. If we take a closer look we can see the usage of the backtick (`) right after the styled.div.
This syntax in Javascript is called Tagged Template Literals.

Template Literals

Let's start with Template Literals, and then move on to the more interesting concept.
In javascript - template literals are strings that can contain expressions within them:

As you can see from the example above - expressions can be variables, but are not limited to them:

We can use either variable or function inside a template literal, and the value that will be used is basically the string representation of the expression:

Now that we understand the power of template literals - it's time to move on to tagged template literals - or just tagged templates.

Tagged Templates - Whats the fuzz?

With tagged templates, we have the power to parse the template literal ourselves using our own "home-made" function.

Note that in the example above - the variable strB contains the string String A (and not String B as you might expect).

Let's break it down

The function funcA returns the string String A.
By using the function funcA as a tagged template - we completely ignored the string that was sent, and we just return something else.
We can use it with an empty string, and the output will be the same.

Check it out:

Advanced features

The function we use in a tagged template can return everything that we want - we are not limited to only return strings:

Building tagged templates have an option to also accept variables that can be used:

The first argument is a special object, which behave as an array and provides access to all the "native strings" in the original string that was passed to the tag-template function (strings[0], strings[1], strings[2]), alongside a raw property, which allows you to access the original raw strings.

The rest of the arguments are the expressions that we used inside the template literal.

Time to build - let's start with something basic

Now that we know a bit more about template literals it's time to move on to some more complex examples.
We already know that template literals don't have to return strings, so how about creating a simple example of a tagged template that returns a react component with the relevant style?
We will start by creating a simple div example to just wrap our text with some styling on it:

The tagged template is the following code:

The full example is available here:

Check out the helper functions (the cssObjFromStr). we are going to focus on it in the next example.

Using props in the component

The basic example gave us a nice intro, but what about the component's props? We use them all the time in React, and losing them is not an option. Moving to the next example, we will add the option to also use props as part of our component that we would like to style:

We will use the onClick prop on the div element.
The full example is here:

Using props in the template

Props are not only relevant to the components, but also to the template itself. We want to use the props of the component inside the template itself - colors, elements behavior, and more.
To do this we will need to pass the props from the <Div...> to the cssObjFromStr method:

But this is not enough.
Let's assume that we use the <Div> element with the property textColor="blue":

The issue we face here is that the <div> component (inside the cmp) will get the textColor property, which is not a valid property of a div element.
A specific solution can be to extract the textColor from the props, and pass the rest of the properties down to the <div> element:

Working example can be found here:

The styled-components solution is a bit more elegant (and much more generic) - all props that start with $ are considered "private props" and will not pass down to the actual jsx component.
We will use the same concept, but in our example, we will use the _ (underscore) to create private props.

Full working example can be found here:

Summary

The styled-component library contains much more than that, with the entire built-in HTML tags, wrapped-components, classes and inheritance (instead of inline-style), global themes and more, however styled-components is just an example of how to use the tagged template literals, which is eventually "just" a native javascript feature as of ECMAScript 2015 (also known as ES6).

Cover photo by Gerd Altmann @ pixabay

Setup a new mac (for devs [and others]) 💻

Dekel — Sun, 25 Jul 2021 08:17:36 +0000

"Got a new macbook🥳! What should I install now 🧐?"

I'm getting this question every couple of weeks from friends and colleagues, and every time I'm sending them instructions on what and how to install in order to setup their environment to make their experience better.

There are many tools/apps/configurations that you can use to make your life easier and your experience better with your mac.

So I decided to finally write everything down and share it (instead of copy&paste emails/whatsapp/slack/discord messages).

Here is my basic setup and recommendations for others.

Key repeat & delay

Change the key repeat and repeat delay - this is usually the first thing I'm changing:

You can find it under System Preferences -> Keyboard.

And if you like the red arrows - keep on reading 😉

Screenshots to clipboard

By default, screenshots are saved to your desktop. To change this - click ⌘+shift+5 and under the "options" menu set the "save to" to "Clipboard".

To capture an area use ⌘+shift+4
To capture the entire screen use ⌘+shift+5

Note: ⌘ is the command key. You can find it left to your space key.

I'll start with some general tools that just make my life easier:

Rectangle

Rectangle is an open-source tool that gives you the ability to easily move the windows-apps around your desktops using your keyboard (left-half / right-half / top / bottom etc)
https://rectangleapp.com/

Monosnap

Monosnap is a tool to edit your screenshots. They have both paid and free versions (for personal usage).
Remember the red arrows? This is what you want:

https://monosnap.com/

Homebrew

This is the de-facto package manager for macos (as a developer - most of the packages you need you can install using homebrew).
Open your terminal (cmd + space) and run:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

AltTab

Personally, I don't use this tool, but many of my friends like it, so I decided to keep it on my list.
If you moved from Windows to MacOS - AltTab is probably your friend - it brings the power of Windows's "alt-tab" functionality to your Mac.

(Image from AltTab's website)
Install using brew:

brew install alttab

iTerm2

iTerm2 is a replacement for the standard macos's terminal (and is so much better).
Now that we have homebrew installed we can use to install iterm2:

brew install iterm2

iTerm2 configuration:

There are many settings that you can change in iterm2, here are a few that in my opinion are a must:

Disable the bell: iTerm2 Preferences -> Profiles -> Terminal -> Notifications -> Silence Bell
Set iterm to jump over words on option+left/right arrow and move to begin/end of line with cmd+left/right arrow. iTerm2 Preferences -> Profiles -> Keys:

1. ⌥← (option + left arrow) - set action to "Send Escape Sequence" - Esc+ b
2. ⌥→ (option + right arrow) - set action to "Send Escape Sequence" - Esc+ f
3. ⌘←(cmd + left arrow) - set action to "Send Hex Code" - value is 0x01
4. ⌘→(cmd + right arrow) - set action to "Send Hex Code" - value is 0x05

Oh My Zsh 😱

oh-my-zsh is a framework for managing zsh configurations. zsh is the default shell on macos these days.
There are hundreds themes and plugins and you can configure almost everything inside.

Lets start by installing oh-my-zsh:

sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

We also need fzf for fuzzy search (some plugins need it):

brew install fzf

Themes:

There are so many oh-my-zsh themes that you can use. I like intheloop, but you can try others and find the one that you like the most.
To set the relevant theme open your ~/.zshrc file and change the value of ZSH_THEME:

ZSH_THEME="intheloop"

Plugins:

zsh-autosuggestions

brew install zsh-autosuggestions
echo "source /opt/homebrew/share/zsh-autosuggestions/zsh-autosuggestions.zsh" >> ~/.zshrc

zsh-syntax-highlighting

brew install zsh-syntax-highlighting
echo "source /opt/homebrew/share/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh" >> ~/.zshrc

zsh-yarn-autocompletions - not in brew, so we need to install it manually:

Download the mac zip/targz file from the release age: https://github.com/g-plane/zsh-yarn-autocompletions/releases
Extract it
Run the following: ./install.sh $ZSH_CUSTOM/plugins
Once installed - add it to your plugins section in the ~/.zshrc file:

plugins=(
# some plugins
yarn-autocompletions
)

This is an important step - to allow running this file you need to set some permissions.
Open Finder, go to ~/.oh-my-zsh/custom/plugins/yarn-autocompletions, hold the shift key, right-click on the yarn-autocompletions file, click open (while holding the shift-key).

By default - oh-my-zsh comes with many other plugins. You just need to enable them. The complete list can be found in your ~/.oh-my-zsh/plugins folder, and you can just edit your ~/.zshrc file and add them as part of the plugins config.

Here is a good list to begin with:

plugins=(
# other plugins
aws
git
npm
yarn
zsh-interactive-cd
)

The Fuck

The Fuck is a great tool that corrects errors in previous console commands.

Here is an example:

➜ git push
fatal: The current branch master has no upstream branch.
To push the current branch and set the remote as upstream, use

    git push --set-upstream origin master


➜ fuck
git push --set-upstream origin master [enter/↑/↓/ctrl+c]
Counting objects: 9, done.
...

To install just run:

brew install thefuck

Do you think I'm missing something? Let me know in the comments.

Cover photo by Christopher Gower @ unsplash