tl;dr: Bookmarklets are bookmarks charged with the power of JavaScript. They let you execute JavaScript code by clicking on a bookmark.​

Ever found yourself repeatedly copying a particular text, navigating to a specific webpage, or performing some other routine task while browsing? Bookmarklets are a neat trick that can help you automate these mundane tasks. Instead of using a URL, these supercharged bookmarks leverage JavaScript to perform complex tasks at the click of a button.

How do Bookmarklets work?​

Creating a bookmarklet is similar to creating a bookmark. The difference is that instead of inserting a URL, you add JavaScript code. Whenever you click on the bookmarklet, this JavaScript code is executed. It's a powerful feature that can automate a plethora of tasks that you perform in your browser. Any JavaScript code that you can run in the browser console, you can run in a bookmarklet.

Copy a frequently used string to the clipboard​

javascript:navigator.clipboard.writeText('ce34839b-5eca-4ab5-86ac-02cc8ba76c8e');

Fetch data from an api​

we can also use this to fetch data from an api, and display it in the console.

javascript:fetch('https://jsonplaceholder.typicode.com/todos/1').then((response) => response.json()).then((json) => console.log(json));

Expanding Your Bookmarklet Library​

The power of bookmarklets is limited only by your imagination. You can automate numerous tasks that you frequently perform on your browser. For more ideas and inspiration, check out these repositories:

https://github.com/Krazete/bookmarklets

https://github.com/marcobiedermann/awesome-bookmarklets

Conclusion​

Bookmarklets offer a way to harness the power of JavaScript to automate your browser tasks and enhance your productivity. They're easy to create and can be as simple or complex as you need them to be. But, like all powerful tools, they need to be used with caution. So, remember to use or create bookmarklets from trusted sources to keep your browsing safe.

Recursion is a computer science practice where a function calls itself until it reaches an exit condition. Sound pretty simple, right?

I Used to struggle with recursive code; it was hard to grasp the notion of something calling (invoking) itself, and it felt too abstract. Usually, recursion is demonstrated with the Fibonacci sequence, binary search tree, or some other theoretical example, which could be tough to wrap your head around. I wondered where such practice would be helpful UI-wise. For example, a comment section where each comment can have a sub-comment which will have a sub-comment of its own, which will have a sub-comment of its own, well, you got the idea.

const Comment = ({ author, content }) => {
  return (
    <div>
      <span>{author}: </span>
      <span>{content}</span>
    </div>
  );
};

const Comment = ({ author, content, subComment }) => {
  return (
    <div className='comment'>
      <span>{author}: </span>
      <span>{content}</span>
      <Comment {...subComment} />
    </div>
  );
};

What is wrong with the code above? It's not working! We get an error that says "Cannot read property 'author' of null". We need the exit condition for this component. When do we want this component to stop rendering itself? If the comment object doesn't have a sub-comment would be the specific case.

We could do this in two ways:

const Comment = ({ author, content, subComment }) => {
  if (!author || !content) return null;
  return (
    <div className='comment'>
      <span>{author}: </span>
      <span>{content}</span>
      <Comment {...subComment} />
    </div>
  );
};

const Comment = ({ author, content, subComment }) => {
  return (
    <div className='comment'>
      <span>{author}: </span>
      <span>{content}</span>
      {subComment && <Comment {...subComment} />}
    </div>
  );
};

In the first solution, we call the Comment function (component). When the condition is not met, we exit it, and in the second solution, we check for the condition before calling the function.

You can play with the code here: https://codesandbox.io/s/simple-react-recursion-ycrtbb

Thanks for reading!

2020 was a busy and challenging year; due to covid and downsizing, I had lost my previous job, and after more than two years, I had to start looking for a new job while the unemployment rate was sky high, losing my job caught me unprepared. When I was looking for a new job, I soon realized that even though I was practicing pretty modern and cutting-edge technologies, I still had many knowledge gaps. While searching for a new job, I learned a lot and caught up a bit, but I'm still not where I would like to be. During this period, any time I came across something I didn't know and wanted to learn, I added this to an endless list that just kept getting longer and longer. Thinking about where I see myself in a year and what knowledge I would like to possess, I refind the list while trying to be as efficient and realistic as possible at the same time. I hope to return to this post in a year and see that I have accomplished (hopefully most of it).

Learn​

Bundlers: webpack,rollup,parcal,snowpack.​

Why: when using options like create-react-app, you might not need that at all, but when you want the ability to custom and modify the build process, I find it necessary to understand these tools better. Most of the time, I had to tweak something, I just copy-pasted it without really understanding the full implications of what I was doing. Since webpack is the most popular one, this is the one I'm going to focus mostly on. After mastering one of these tools, the others will become more approachable and easy to get on board.

How: Reading the official docs, possibly watch a tutorial and dive deep into using it, try to avoid preconfigured builders like create-react-app, and try to write the webpack config from scratch. And most importantly, for any future project that I will start, I can try and configure the webpack by myself.

Testing: jest,mocha,react-testing-library, puppeteer and cypress​

Why: I have a confession. I have never written a test in my life, not even a simple unit test. While I understand the upside of writing tests, I never really needed to learn this paradigm. As I'm maturing as a developer and understanding those processes better, I see the value of using tests in any project. Even on my small and relatively simple projects, I stumble on regressions and errors I know could have been prevented if I had some test implemented.

How: For starters, understand the difference between test types (unit test, e2e, etc.). What kind of tools to use for each, and finally start integrating tests in my existing projects, and obviously in new future projects.

TypeScript​

Why: Quite frankly, I want to learn TypeScript to read and understand the source code of external packages. It's that simple. The best documentation is the source code itself.

Also, the fact that TS is gaining popularity is significant, from a nice to have ability to an almost necessity in the last few years.

How: You guessed it, implementing TS in my existing projects. No reason to get fancy here.

NodeJS​

Why: When I need to write code that doesn't "live" in the browser, the obvious choice for a web developer is node.js. For developing backend servers, writing cloud functions, web scraping, and even IoT devices, Node.js is a powerful tool to have in your toolbelt.

How: To be honest, with node.js, I'm cheating because I already started learning and using it, but I want to expand on using it. For a JavaScript developer, the transition is pretty smooth, even though you still have to understand a few key concepts and get used to not having the 'window' object.

git​

Why: Well, I know git, but I can't say I have in-depth knowledge, pull, push, checkout, really the basics. I want to master it to the point where I don't have to use the GUI, just the commands and the complicated ones.

How: I plan to take the Frontend Masters Git In-Depth course and make the switch to use the terminal more heavily than the GUI.

Goals:​

Codewars: Codewars is a website where you can practice coding problem skills and algorithms for those who don't know. Over the last year or so, I laid aside my progress. I'm currently kyu(level) 6. I believe I can reach level 4 by the end of the year.

yakov.dev: (my blog) I started this blog a few months ago. I want to keep it active, so at least one post per month will be a sufficient pace, although I hope to write even more.

YDKJS (You Don't Know JS): I started this great series by Kyle Simpson a few months ago. I do plan to finish it sometime soon. When reading these books, I have encountered many complex concepts that make my understanding of the language much better. I recommend any web developer to read this series, I've learned a lot from it, and I only read the first two books out of 6.

Mobile Development: I found myself in need of some functionality on my android phone that doesn't exist. After searching for an app, I decided to develop it myself. It should be refreshing to try something new like Flutter for a small project and outside the JS ecosystem.

Chrome & Visual Studio Code extensions: I use Chrome and VS Code extensions daily, and it caught my interest in how those extensions developed and work under the hood. I'll start with one for each app.

Continue Develop my Side Projects I have a few ongoing projects that I try to expand and add features all the time. Although I don't have a defined road map for them, I don't want to neglect them while focusing on the other goals I have set for this year.

To conclude, think about where you would like to be in a year, what skills you would like to have, and set goals for yourself. I believe that in our profession, you can't rest on your laurels, always thrive on getting better, and expand your knowledge.

See you next time! 🏆

Hi *,

Welcome to my new blog and my first post ever!

My Name is Yakov, a Frontend web developer from Haifa, Israel.

As a self-taught developer, I’ve stumbled across many topics, concepts, and disciplines that looked very intimidating and complicated at first. Still, after time and time again, they started to make sense. Subsequently, my confidence has grown, and step by step, I felt more comfortable learning new things.

One of the primary resources of information that helped me through were articles and blog posts, A lot of documentations are long and tedious, especially for a beginner developer, and sometimes a short blog post can simplify and explain some topics much better.

My main goal in starting this blog is to help others the same way others helped me. In this blog, I will write about software development ( mostly web-oriented ), career advice, insights, random tech stuff, and shawarma reviews.

Just kidding about the shawarma…or not…I haven’t decided yet. Wish me luck and see you soon! 👋