Forem: Nastassia Danilava

Freelancing in 2024: expectations vs realities

Nastassia Danilava — Tue, 23 Apr 2024 20:43:49 +0000

Approximately a year and a half ago I was on maternity leave and decided to return to work. I was a developer with 7 years of experience. I wasn’t ready to work full time yet so I wanted to try myself as a freelancer. So I updated my CV, set the linkedIn status “Open for work” and started finding a job.
The first weeks were crazy and I tried at least to be in the list of candidates who were selected for the interview. I passed through a lot of small calls and interviews and now I understand why it was difficult. It was my first experience where there are no managers or marketing specialists who can sell you or your skills or promote your resume. I had to learn how to sell myself. And sell here is the most important word

1. Customer is...

When considering selling services, it's crucial to identify who most frequently seeks out freelancers. Based on my experience, the primary seekers are:

From this, I’ve learned that there are two main pathways to develop a freelancing career: either acquire unique skills that are in rare supply or seek collaborations with small teams.

2. Sell yourself not as a person but as a service.

Reflect your past experience not by places of employment but by projects. What do I mean by this. In most cases customers are looking for somebody who can create a ready-to-use business solution, so your CV should illustrate this. Compare:

Regular Work	Freelance
Company A (2020-2022):1.leaded fin project 2.introduced integration tests 3.followed agile methodology	Project A (link):1. added the chatBot that amount of leads on 13% 2. added the users analytics
Company B (2022- Present): 1. passed the english test on B2 2. participated in interview process 3. used Vue.JS, React.JS stack on 3 different projects	Project B (link): 1. developed the QR code scanner 2. implemented the landing page that supports most of the screen resolutions 3. organised the tech tasks board for the team of 3 other devs

Collect your achievements

Keep a document where you detail interesting tasks that led to success, or any interesting situations: conflicts you managed to resolve, division of duties, managerial experience.

Here's the structure of my document

It's also very useful to note situations in which soft skills have been beneficial. For example:

Dealing with an unproductive teammate and the strategies used to improve the situation.
Handling situations where overtime is typical and expected of you.
Managing task underestimations effectively.
Strategies for dividing tasks within the team.
Responding to overly high expectations from the team.

And do it during your work, as it’s impossible to revise what task you done 5 years ago.

After I redone the CV several times and spent 2-3 months on freelancers platforms I figured out that the HRs wrote to me several times more often because I was very active on my social networks.

3. Regularly update your social networks

Choose 2-3 platforms where you will be active and post updates about your projects, successes, and failures! Or just be yourself and talk about your day, what inspired or disappointed you today, and alternate with professional posts. Don't be afraid to show your failure: it's an indicator that you've analyzed the situation and will apply the experience to your work.
*Why? *

It’s a eminding potential clients of your expertise and availability.
Increases your chances of being seen by potential clients outside your immediate network.
Sharing insights, trends, and commentary on industry-related topics positions you as a knowledgeable professional in your field.
Be visible on every your career step. Even if you think that the topic you’re going to write is discussed already and everybody knows. No. The way you do it better for someone.

For the freelancer time is everything, I’m working 4 hours per day and that’s why I’m optimize everything that I can that’s why ...

4. Use AI in your work

It's foolish to deny it, but AI has firmly entered our lives and it's here to stay. So, why not apply these technologies? I believe that there are a huge amount of materials covered it but here's 3 things that I’m doing with the help of AI more often

troubleshooting
ask to do boilerplates for the task.
formatting

Recent case
I’m not a designer at all that's why I did screenshots of my product and told AI that I described the feature I need to implement. It gave me an advice where the better place to put a buttons, and the list of UI controls that it’s better to use

5. Money

Initial period for the freelancer is super unstable and it took for me 3 months before I get acceptable income and 7 month before I was satisfied with project and salary

Build a safety cushion for the initial period it’s an essential. Set your minimum acceptable salary and don’t decrease it even. But be ready to do a lot of test tasks for free at th beginning.

When you get the project and salary - breathe out. You've already done it. Constantly thinking about how to raise your income is a path to burnout.

6. Networking

Networking and self-presentation skills are crucial, as you need to constantly pitch your skills and the outcomes of your work. Therefore, proficiency in speaking and presenting is essential.
But how can you improve these skills? Through networking events, public speaking, and even creating videos on social media.
Don't be afraid to tell everyone that you're looking for a project.

I once challenged myself to go out for coffee with 5 strangers over a month. This meant I had to find 5 people at events or through social media, talk to them, and then meet them for coffee.
Two years ago, this idea seemed crazy, but it proved to be an effective method. Speaking about yourself for the first time might be intimidating, but by the time you've talked about your projects or achievements for the 50th time, it becomes second nature.

7. Leverage project management tools and techniques.

When I decided to find a startup not a short-contract project I realised that I need to communicate even more. I wrote lot of cover letters, a lot of interviews.

Freelance and startup industry is a area where the team is not big. As a freelancer, you're not just a developer; you're also managing your projects. Knowledge of project management tools like trello, asana, notion, monday.com, jira , etc. can help you stay organised, meet deadlines, and communicate effectively with clients. Even if it seems to be unnecessary at one point it can be a benefit.

JavaScript Revelations: Journeying Through Frontend Interview Preparation (live-stream note)

Nastassia Danilava — Wed, 13 Sep 2023 14:42:15 +0000

It's not my first job as a frontend developer, but I prepare for EVERY interview because some things have changed, some I need to revise, and some I have never known before.

I'm going to write a list of small JavaScript notes that I learned (or found interesting) during the preparation this time. This is a live-stream note, so bookmark this! 😏

Javascript

1. ForEach loop cant be stopped by return or break
Consider the following code snippet. Would you expect it to print '1', '2', and then halt?

array = ['a', 'b', 'c'];
array.forEach(function (element) {
  console.log(element);

  if (element === 'b') 
    return;

});
// Output: 1 2 3 4

Surprisingly, it doesn't. And the same with break
If there is a case when you definately need to stop it use for instead of forEach and break inside it

or with throwing the exception and wrapping the loop with try-catch - thanks @szalonna

2. The __proto__ references can’t go in circles.

Thanks god JavaScript will throw an error if we try to assign and there is no need to care with any try-catch 🙃

M715:1 Uncaught TypeError: Cyclic __proto__ value at set __proto__ [as __proto__] (<anonymous>) at <anonymous>:1:13

The most clear Prototyping inheritance description

3. logical assignment was added in ES2021

a &&= b // equivalent to a && (a = b). will assign if a is false
a ||=b // equvalent to a || (a = b). will assign if a is false

Web

Web security issues (XSS, XSRF). This could be included to the interview, but most you need to know as a FE dev is

XSS - when an application includes untrusted data in a web page sent to the browser without proper validation or escaping. Attackers can inject malicious scripts into web pages.
how to prevent

Input Validation and Sanitization: Ensure that user input is validated before rendering it on the web page. Use security libraries or frameworks that offer built-in protection against XSS.
Content Security Policy (CSP): Implement a CSP that restricts the sources from which scripts can be loaded, preventing unauthorized scripts from executing.
Escape User-Generated Content: Escape any user-generated content when rendering it on the page. This involves converting special characters to their HTML entity equivalents.
Use HTTP-Only Cookies: Store session cookies with the HttpOnly attribute, which prevents JavaScript from accessing them. This helps protect against cookie theft via XSS.

CSRF - attacker tricks a user into performing actions on a website without the user's knowledge or consent. The attacker crafts malicious requests that are executed using the user's authenticated session.
how to prevent:

Anti-CSRF Tokens: Generate unique tokens for each user session and include them in forms or AJAX requests. Verify these tokens on the server side to ensure that requests are legitimate.
Same-Site Cookies: Set the SameSite attribute on cookies to restrict when cookies are sent in cross-origin requests, reducing the risk of CSRF attacks.
Check Referer Header: Verify the Referer or Origin headers on incoming requests to ensure that they match the expected source of the request.
Implement Safe HTTP Methods like GET for actions that should not modify data. Reserve POST, PUT, DELETE, etc., for actions that make changes.

..to be continued

Boo! Pure CSS Halloween card 🎃

Nastassia Danilava — Fri, 30 Oct 2020 13:57:12 +0000

It's Halloween eve now and here's my pure HTML&CSS card on GitHub profile README.md

How to insert full HTML to markdown?

use foreignObject in SVG

<svg fill="none" viewBox="0 0 400 400" width="400" height="300" xmlns="http://www.w3.org/2000/svg">
  <foreignObject width="100%" height="100%">
    <div xmlns="http://www.w3.org/1999/xhtml">
      <style>
      .cat {
        position: relative;
        padding-left: 50px;
        height: 300px;
        width: 300px;
      }
     </style>
     <div class="cat" />
   </div>
  </foreignObject>
</svg>

use SVG file in markdown as usual image

![](./halloween.svg)

live demo

Add commit hash version to your React app

Nastassia Danilava — Tue, 07 Jul 2020 15:30:00 +0000

Problem

Check the current build version to be sure that everything is up-to-date. Ideally in some unnoticeable for user place on the page (if you have any reasons not to use console in this case).

Solution (Step-by-step)

Get the last git commit hash from the command line

git rev-parse --short HEAD

Execute the script above with Node.js. The best option to do this is with Node.js child_process.

child_process.execSync(git rev-parse --short HEAD)
The only thing you should know here is that execSync allows you to execute the command synchronously.

Create an environment variable that contains a necessary hash. By default, your variable should be starting with REACT_APP_. In other cases, it would be ignored.

There are several ways to do it actually. The first one is to replace your standard start and build project commands in package.json with this one

"start": "export REACT_APP_VERSION=$(git rev-parse HEAD) && react-scripts start", "build": "export REACT_APP_VERSION=$(git rev-parse HEAD) && react-scripts build"

or just insert this line to your webpack.config.js
const commitHash = require('child_process').execSync('git rev-parse --short HEAD')
Calculated commit hash should be wrapped with DefinePlugin function in plugins array.

new webpack.DefinePlugin({ 'COMMIT_HASH': JSON.stringify(commitHash), })

That's all. Now your hash is available in the React app code process.env.REACT_APP_VERSION

Note: the environment variables are embedded during the build time. Since Create React App produces a static HTML/CSS/JS bundle, it can’t possibly read them at runtime. To read them at runtime, you would need to load HTML into memory on the server and replace placeholders in runtime, as described here. Alternatively, you can rebuild the app on the server anytime you change them. Create React App docs

It's better to store the value of such variables in any global store like Redux or just as a global variable

window.VERSION = process.env.REACT_APP_VERSION

That's it.

Happy Codding ⌨️! ❤️