Backend Engineering Skills Are Emphasized Too Heavily for Principal Engineers

by with No Comment architecturecareerdesignprogramming

There is a bias toward backend engineers at the principal engineer level. This leaves frontend engineers heavily disadvantaged when it comes to promotion time.

When someone says they’re a fullstack engineer, what they usually mean is one of two things: 1) They’re a coding bootcamp grad that has minimal experience with Node.js and an emphasis on the frontend. Or, 2) they’re an experienced backend engineer that knows a little bit of HTML and CSS. A truly fullstack software engineer is a rare find.

That being said, principal engineer job requirements focus almost entirely on backend engineering skills. The companies I’ve worked for in the past have had requirements for expertise in areas like networking, system design, database design, building scalable microservice architecture, or designing fault-tolerant systems.

And while all those things are important, especially for someone at a principal level with a backend emphasis, these lists of requirements are often missing many skills that may be unique to frontend engineers but that are equally important.



Valuable Frontend Skills for Principal Engineers

What about the ability to build scalable design systems? Are you able to build atomic-level components that can be built up into molecules, organisms, templates, and eventually pages? Do you understand what should or should not be included in a design system’s component library? Do you understand how to provide clear design constraints to create a consistent UI while also allowing for flexibility in the usage of your components?

What about the ability to build accessible web applications? Accessibility is an often-overlooked skill but one that is becoming increasingly important, especially for software as a service companies in a competitive market. Are you able to build apps that conform to the WCAG 2.1 AA specifications? Do you understand basic design principles and common UX patterns for various widgets? What’s fascinating about accessibility is that so much of it is provided for you, right out of the box, with HTML. Yet most developers don’t create widgets that are operable using a mouse, a keyboard, and a screen reader, opting instead to focus on mouse users only and to ignore common UX patterns.

What about the ability to think clearly about microinteractions in the app? Are you able to create a seamless user experience that keeps users from becoming disoriented? Are you good at thinking through edge cases in how widgets function? Do you have a good design sense? Do you practice inclusive design? Piggybacking off of the previous paragraph, so much of accessibility is really just usability.

What about the ability to optimize performance on the frontend? Do you understand how dev, peer, and regular dependencies work? Do you understand how to optimize bundle size for your frontend app and how to avoid downloading the same resources multiple times?



Conclusion and Invitation

These kinds of skills and many more are extremely important in frontend architecture, and yet they are rarely included in skills requirements for principal engineers.

My advice to engineering leadership everywhere is to look for the valuable skills that frontend engineers bring to the table and find ways to include those skill sets in your requirements for promotions, especially for those positions at higher levels.


Source link

Leading developer relations at a Silicon Valley Startup

by with No Comment careerjavascriptopensourceproductivity

Moving to San Fransisco and working for a startup in Silicon Valley has been a dream of mine for a while. After all, it is the startup tech hub of the world. As a fresh college graduate last year, I got a chance to make it a reality.

I want to tell the story of leading growth and developer relations at an early stage devtool startup called Fig. It all started with a Twitter DM, that lead to an interview, that a few weeks later, led to me moving across the country to San Fransisco.



The work

To set the scene, we were a small and scrappy team of 6 having recently raised a seed round of a few million dollars. And we just needed to execute.

The fast pace was no joke. In the first week, we spent about 12h a day at the office for onboarding, that then decreased to ~10.5h a day. The founders spent even more time working. We prioritized tasks on a week to week basis which led to me being able to work on a wide variety of things. In terms of the 3 pillars of developer advocacy, I was lucky to do work in every pillar.



What I did

What I did while I was at Fig can be broken down into five primary areas:



1. Discord Community

I helped grow the Fig Discord community by DMing new users and answering people’s questions. At one point, I sent a personalized DM to every single user that joined until it become unscalable.

I also livestreamed myself contributing to Fig’s open source repo weekly on the Discord to encourage our users to contribute and did a livestream with Nader + Fig’s CEO. I ended up helping them scale their Discord community from 1k members to over 2k over the two months I was there.



2. Twitter Account

I came up with our Twitter strategy and executed, posting a variety of tweets over an average of 5 times a week. Fig was a very visual product so I also recorded a lot of short videos and GIFs to show it off.

We also ran promotions and giveaways on Twitter. Fig was invite-only at the time so we partnered with popular developer influencers to give away hundreds of Fig invites and increase our userbase. I ended up growing their Twitter from 2k to over 4.5k followers.



3. Open Source Contributions

Another thing I did was manage our open source repo. Along with a part-time team member, I reviewed dozens of PRs with some back and forth with our contributors to make sure we were pushing quality code and following best practices.

I also submitted several PRs myself – a total of 63 commits and 19k lines of code. Some of this code was generated using CLI parsers and scripts that I wrote. You can look through my commits here.



4. Writing code

Yet another thing I helped with was the frontend for our Fig settings app. I redesigned and reimplemented it, fixed some bugs, and added features to make it easier for users to customize their settings.

I also helped with creating parsers for popular CLI tools like curl and GCC. I did this to programatically grab all the different options and arguments of a CLI tool and generate a completion spec so Fig could autocomplete for them.



5. Developer Experience

The final thing I did was help improve the overall developer experience of the product. I collected feedback from users each week through Discord chats, Twitter DMs, zoom calls, and my livestreams and relayed it over to our engineering team.

I also revamped our entire documentation to improve the UI, base it on the Divio system and write a few extra guides. Naturally, our docs used Next.js and were hosted on Vercel 🙂



Lessons Learned

Overall, my work contributed to us getting thousands of more members in our Discord and Twitter, which lead to more OSS contributors, more Github stars, and significantly more users. I’m proud of what I did at Fig.

It was a hectic and rewarding couple months and even though it didn’t work out in the end, I’m extremely thankful to Fig to giving me my start in the world of SF startups and for everything I learned.

They taught me how to ruthlessly prioritize and focus on the biggest pain points first. They taught me that a plan means nothing without solid execution. And they taught me that unexpected events occur and you need to be ready to deal with them.




Source link

My first 100 followers on Dev

by with No Comment beginnerscareerproductivitywriting

First of all, thanks to the Dev community for giving feedback on my posts and appreciating my content.



How it started

I always had a thing for writing. I had been writing Medium blogs about my travel for some time now. It brings me joy to share and express myself through words.

During my college, I made a YouTube channel and posted tutorials about CPU simulators & assembly programming. It made me realize that I love to teach. Last December, when I checked, my channel reached 300 subscribers, and I thought, let’s continue doing what I like.

I thought this year let me start contributing to the Dev Community and resume making YouTube videos. So during this New Year’s long weekend, I re-branded my YouTube channel and created a Dev account.

I’ve posted two articles on Dev and received more than 2k views with 150+ reactions and gained 100+ followers.



Where it’s headed

I’ve been a developer for four years now. Although I have a CS degree, I consider myself a self-taught engineer. I’ve grown so much in my career that at the age of 22, I’m an Eng. manager with five direct reports. I feel my experience will be a lot helpful for the community.

I plan to continue writing and making videos at least once per week. It would be an achievement to keep this going for a year.



Goals

  1. Improve my writing and speaking skills.
  2. Create content that I can be proud of
  3. Deliver one Dev post and a YouTube video per week.
  4. Earn the 4/8/16 week streak badges from Dev.

I hope this post was helpful to you. Should you have any feedback or questions, please feel free to put them in the comments below. I would love to hear and work on them.

For more such content, please follow me

Until next time




Source link

Freelancing For The Summer

by with No Comment careerdiscusspythontypescript

I’m graduating high school this summer, and I’m not sure any of the places I’ve applied to for internships will even reply 😅

Does anyone have any expreience with freelance work on Fiverr or similar platforms?

What jobs did you offer?

What did your page look like and what specifically do you think landed you the jobs?

I’m considering building sites for companies/people using Python/TypeScript for the backend and Jinja2(templating only)/React for the frontend

Thanks


Source link

Moving to Germany

by with No Comment career

If you follow me, you know I have worked as a consultant for the last year. I have decided to take the next step in my career and move to Hamburg this week.

It was a difficult choice, and I wanted to stay in india and grow with the community; the Indian tech community will always have a special place in my heart. I became GDE; you all voted me to be the First GitHub star from India and gave me lots of love.

Some personal and professional decisions led to this.

  • Better community outreach: Being in Europe will give me access to a broad community, as the timezone in india sometimes affects the participation in many conferences and meetups.

  • My future ambitions: It is not a secret that I want to work as a Developer Advocate one day. Last year, I got a few calls, but many discussions due to salary and location expectations didn’t go ahead.

I will not miss the Indian community at all, I will keep rooting for you all, and if you need any help from me, I am just a DM away. I was lucky to meet a few of you before moving.

Six years ago, I came to Pune and got everything I came looking for in this City: a better life for my family, money, and peaceful life. Wish us that we get the same thing in a new country as we start a new chapter of our life.


Source link

4 questions to ask in interviews to assess codebase health

by with No Comment careercodequalityinterviewprogramming

We all love good, quality code – and if we don’t, we should. Code that is consistent, clean, and easy to understand is essential to a healthy codebase. A healthy codebase is one that’s optimized for testability, maintainability, and scalability. It helps programmers code more efficiently and makes engineering teams more productive.

The health of a company’s codebase plays a large role in employee satisfaction. Unfortunately, the pressure to quickly add new features imposes harsh deadlines on programmers. The trade-off is a decrease in code quality. This is the reality of the software development world. We can expect a level of imperfection in any company’s codebase, but the important thing is how responsible a company is about resolving or preventing the damage that results from pushing rapid development.

When interviewing to find a developer job you love, there are questions you can ask to get a sense of their codebase health. By asking these questions, you can feel more confident about your interest in the company and the long-term sustainability of your work there.

We’ll cover:



Nursing healthy code and managing technical debt

To help foster a healthy codebase, companies need to have a regular cadence and strategy with which they manage technical debt. Technical debt refers to the time, money, and resources that are lost in exchange for hasty development. This can consist of code debt, design debt, and documentation debt. By asking their engineering teams to churn out functionalities at a rapid pace, any company can expect to incur technical debt. What’s important is that companies take measures to prevent and pay it off.

A developer-centric company must prioritize managing technical debt, not only for their financial gain but for employee satisfaction and retention as well. An unhealthy codebase is a thorn in the side of many programmers and software engineers. In a 2021 study by Stepsize, 51% of developers confirmed that they had left or considered leaving a company because of technical debt.



4 questions to ask in interviews to assess codebase health

There are questions you can ask in your interview to get a sense for the health of the company’s codebase. Many companies have room for improvement, and these answers don’t have to make or break your decision. While they may not have all the best practices in place, many interviewers would be impressed to have a candidate who is concerned and knowledgeable about matters concerning technical debt.

Note: Be mindful of your tone when asking questions. Come from a place of curiosity rather than judgment. You never know where a company or startup is in their growth.



1. What is your strategy for dealing with technical debt?

This is a high-level question that can give you a sense for how robust a company’s strategy is for managing technical debt. At the very least, your interviewer’s answer shouldn’t deny that their company incurs technical debt. At most, it should show that that leadership balances adding new features with repaying technical debt. We hope you’ll hear a well-rounded strategy ranging from code reviews to communication pipelines and incentivizing programmers to clear debt.



2. Do you conduct code reviews?

Despite being a best practice for maintaining code quality and scalability, not every company conducts code reviews. We hope you’ll hear a yes. Code reviews reduce bugs, facilitate optimization, and helps peers share knowledge and skills.

If they conduct code reviews, you can ask additional questions:

  • What does your approach look like? Some do formal line-by-line reviews, others do informal “check-in buddies,” while others leverage Git to do a code review for all pull requests. It’s worth clarifying if they review code for all projects, as some only prioritize the most “critical” ones.
  • How are priorities determined? Ideally, the code review’s priorities are informed by a knowledge of the technical debt they’ve recently incurred. The best code reviews will prioritize code quality and coding best practices such as commenting, rather than simple adherence to company or team coding standards.
  • Who is reviewing the code? Gold stars can be given if code is given a most objective review by peers who aren’t involved in the project. If not, that’s okay too. Again, we have an ideal world, and a realistic one.



3. Do you have CI/CD pipelines?

Not all companies have CI/CD pipelines, but the most successful software development companies do. In a perfect world, CI/CD pipelines should be consistent across all projects and tech stacks. CI/CD pipelines helps teams ship new features faster, increases visibility and collaboration, and helps ensure continuous reliability. A CI/CD pipeline automates CI/CD, which frees up developers’ time to focus on, well, development.



4. How much time is spent refactoring code?

Refactoring code reduces code complexity and supports the maintainability, security, and scalability of an application. Refactoring is an ongoing part of the development process. In addition to writing and testing, refactoring is likely to take a good amount of your time. Ask this question to get a sense for how frequently it’s done and how it’s built into the development process.



Wrapping up and next steps

The better the code health of a company, the more productive you and your team members will be. How a company balances adding new features with managing technical debt will be crucial to fostering a healthy codebase. It allows for effective long-term development – and happier and more productive engineering teams.

To help developers level up in their careers, we’ve gathered all our interview prep resources in one place at Interview Prep with Educative. You can find company-specific interview guides, coding interview tutorials, advice from industry experts and more.

Happy learning!



Continue learning about interview prep



Start a discussion

What questions would you ask to get a feel for a company’s codebase health? How have your employers managed technical debt? Let us know in the comments below!


Source link

How to create a two-column layout with HTML & CSS (YouTube Clone – part 1)

by with No Comment careercssHTMLtutorial

Welcome to this lesson which is a part of a series of tutorials to build a YouTube Clone unlike what you have seen before.

In this lesson, we are going to discuss how to make the layout of our YouTube clone project with HTML and CSS and you are going to learn how to make a two-column layout.

If you have been struggling to build a real website with HTML & CSS, you’re so lucky to be reading this because I am about to teach you to do it step by step to reduce your struggle.

Just wait: If you’re a total beginner and you can’t operate computers properly, please check out the video below to learn everything you need…


If you know me very well, you would have known I am an advocate of breaking things up into sections, sub-sections and components. So, we have to break this YouTube clone into smaller units and we’re going to be building each of them step by step.

In this YouTube clone, the website has about 6 units:

Youtube clone

  1. Header: It contains three sections (left, center and right). The left section contains the logo and menu; the center section contains the search box and an icon, while the right section contains navigation icons. The icons have a similar element, which means, we design an icon element; then, copy, paste and edit it to create others.

  2. Main: It contains two sections (sidebar and content). The navigation links in the sidebar are also similar, so they are just one thing. The same thing happens to the videos in the content section.

So, it has a header, main, sidebar, content, video-card, navigation link and navigation icon as the major units. That is the breakdown of the units of the web page we want to create.

The first thing we have to do is create the layout structure of the YouTube clone with HTML as in below: 

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Material Icons -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <!-- CSS File -->
    <link rel="stylesheet" href="styles/index.css" />
    <title>Youtube Clone with HTML & CSS</title>
  </head>
  <body>
      <header class="header">.</header>
      <main>
          <div class="side-bar">.</div>
          <div class="content">.</div>
      </main>
  <!-- Main Body Ends -->
</body>
</html>

In this lesson, I assume you have an understanding of how to use HTML meta tags and how to link a CSS file. If you don’t, learn more about it later in the video I added above. But you don’t need to understand them for what we are learning in this lesson, so keep on reading.

We have a header tag to create the header section of the YouTube clone. YouTube logo, search box and other navigation icons will be added to the header later.

There is also the main section that contains side-bar and content. The side-bar will contain some navigation links while the content will contain videos. So, that is it for the structure with just HTML.

Then, let’s add CSS to it to really create a YouTube layout.

Here is the CSS step by step: 

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

Let’s start with “import url(‘path’)…What does it do? It is used to link to the Google font called Roboto so that we can use it as the font of our website. 

* 
  margin: 0;
  padding: 0;
  box-sizing: border-box;

The (*) is CSS selector that selects all HTML tags on our page and we set their margin and padding to 0; We finally set their box-sizing to border-box. Why do we do that?

We want width or height, border, margin and padding to be sum up to be the total length. This is what I meant. In css, if a box has width of 100px and padding of 10px, the width of the box will now be 110px

but we don’t want that, we want everything to be 100px. Width should still be 100px including the margin of 10px instead of making it 110px. That is what box-sizing: border-box does.

Note: when you’re using it, you will understand better but that gives an insight a beginner can quickly relate with. 

body 
  font-family: 'Roboto', sans-serif;

We select the body tag and set it font-family to Roboto and use sans-serif as a fall-back in case Roboto is not available. 

/* header section*/
.header 
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    padding: 15px;

.header class name is used to select (or connect to) the header section of our website so that we can add some styles to it. We set its display property to flex to create a layout out of it and then, we can easily divide it into sections. We will divide it into sections later.

Justify-content: space-between means we want the contents in the header to have space between each other once they are more than one.

Align-items: centre is used to move all the contents of the header to the centre-left of your screen. That is called vertical alignment. We finally set the height of the header to 60px and its padding to 15px. Do you know what padding is? Well, we will talk about it later. 

main 
    height: calc(100vh - 70px);
    display: flex;
    background-color: #f9f9f9;

We set the height of the main section to calc( 100vh - 70px)…What does it mean? V stands for a viewport which is the visible part of a window’s screen without scrolling while “height” means vertical length and we may also use “w” which means width – horizontal length. In short, 100vh means the total height that is visible in a browser without scrolling. And we use calc ( 100vh – 70px) to run a calculation that subtract 70px from 100vh.

We set its display property to flex to create a layout out of it. Finally, we set its background colour to #f9f99f which is a kind of silver or ash. 

/* Sidebar */ 
.side-bar 
    height: 100%;
    width: 17%;
    background-color: white;
    overflow-y: hidden;

The height of the .side-bar is set to 100% of its parent. That means it will have the same height as its parent. Its width is set to 17% of its parent and background colour set to white. Hey! What is overflow-y: hidden? When Twitter loads 10 tweets at once, you can’t see everything at once and you have to scroll, right? In this case, we hide the scroll bar. Gracias! 

@media (max-width: 768px) 
    .side-bar 
      display: none;

This media query is used to make a website responsive on mobile, tablet and desktop. When the YouTube clone is on a device whose screen is less or equal to 768px (e.g mobile & tablet), the sidebar will disappear. Also, max-width: 768px means such device’s screen can be less or equal to 768px.

Yeah, we have built the layout of our YouTube clone. Below is the result…next time, we will add some other things. See you soon.

youtube clone layout.PNG



One more thing

Learn more by joining one of the groups below:

Discord:
https://discord.com/invite/Ef5Sqd2w

Telegram:
https://t.me/+HEUn1Y-ME6GW9ssD


Source link

21 Tax write offs for freelance web developers in Canada

by with No Comment beginnerscareerproductivitywriting

You’ve put in hours of your time, done all the hard work — you’ve learned to code! Now you’re ready to reap the rewards and set off on your own as a freelance developer.

There are major benefits to working freelance. You get to choose your working hours, clients, and your rate of pay. You can work all morning (or all night for that matter) or maybe only part-time. The world is your oyster.

However, working freelance can make your tax situation a little complicated, to say the least. That’s why I created this list of tax-deductible expenses that you need to track if you want to keep more of the money you make.

Gear and Equipment
You don’t need to splurge on super-expensive equipment, but the costs can still add up. Good thing your computer, keyboard, mouse, monitors and any other equipment you purchase are all tax-deductible expenses.

Website Expense
How you brand yourself as a freelance developer can help you stand out from the crowd and an online portfolio website is a good place to start. Plus, you can write-off your website hosting and domain registration fees.

Software
From mock-up tools to project management software, there are a number of tools out there that can help you run your business more efficiently. If you decide to upgrade to the paid versions, you can write-off those monthly subscription fees.

Professional Services
Need to bring on a junior developer to support your client’s work? Any fees you pay to other professionals for advice or services related to your business can be written off.
Payment Processing Fee
Getting paid is great, but those pesky processing fees? Not so much. Fortunately, they’re also tax-deductible.

Professional Development
Whether you want to learn a new programming language or framework or develop a new skill, it’s important to invest in your professional development. Coding workshops, programming seminars, online courses and certifications, books and magazines that contribute to your education and development are all tax-deductible expenses.

Marketing
From business cards to SEO website upgrades, even the best developers need to invest some funds into marketing their services. You can write off these costs.

Networking Event
Networking can get a bad rap but it’s still one of the best ways to connect with other professionals and meet with potential clients. If there’s a tech conference or meetup you’ve been dying to attend, remember that these expenses are tax-deductible!



Work from home?

As long as you have a good computer and solid internet connection, you can work from anywhere as a freelance developer—including your own home.

If you do decide to work from home, there are quite a few deductions that you can take advantage of. Contrary to popular belief, you don’t need to have a full home office to claim these write-offs. Even if you only have space for a dedicated desk, you can claim business-use-of-home deductions.

Utilities
Heating bills. Hydro bills. Water bills. We all gotta pay them, but if you work from home, you can write off a portion of your utility costs.

Internet
It’d be pretty tough to work as a freelance developer without the internet. That’s why you can write off a portion of these fees as well.

Rent or Mortgage
While you can’t deduct all of your rent or mortgage payment, you can write-off a percentage of these expenses depending on how much of your home is used for your business.

Property Taxes
Owning a home in Canada can be very expensive and very rewarding at the same time. Fortunately, if you work from home, you can claim a portion of your property tax bill as a write-off.

Insurance
Do you pay for rental or homeowner insurance? You can write off a portion of these costs as home office write-offs.

Maintenance
Cleaning expenses, home repairs, snow removal… these are all tax-deductible expenses if you work from home.

Phone
Do you use your phone for work? You can write off a portion of this monthly bill as well.

Home Office Expense
Most web developers sit at their desks for long periods of time, so creating an ergonomic workspace is pretty key. Office fixtures like a desk, office chair, and second desktop monitor are all tax-deductible purchases.



Meeting with clients?

Imagine this scenario: a potential client is impressed with your website and has enjoyed chatting with you over the phone, and now they want to meet in person. You’re one step closer to winning their business.

First impressions really count. While you’ll want to make sure you do your research beforehand, you also need to think about where you’ll be meeting them. Depending on your relationship with this client, you may not want to meet this person at your house or a neighbourhood coffee shop.

Fortunately, there are a number of options you could explore. For instance, you could meet them at a local coworking space, book a meeting room for the day, or take them out for a meal at a nice restaurant. Whichever option you go with, remember that these expenses are also tax-deductible.

Office Rental

Co-working space memberships, day passes and room booking fees are all expenses that can be written off.

Food and Drink
If you discuss work with a coworker, client, or even a friend at a restaurant, it’s a write-off!



Travel for work?

Think you don’t need to travel for work as a freelance developer? Think again. While developers can do the majority of their work from home or an office space, there will likely be times where you’ll need to meet with a client in person or attend a conference.

Transportation
If you drive to meet with a client or coworker, or to attend a conference or out-of-town meet-up—you can claim car-related write-offs. These include expenses like gas, car maintenance, insurance and registration, parking, tolls, and the annual depreciation of your car.

If you’re travelling out of the city or out of the country, airfare, train tickets and rental car fees can also be written off.

Accommodations
When you travel for work, lodging expenses such as hotel rooms or Airbnb bookings are write-offs.

Food and Drink
When you’re travelling for work, all meals are tax-deductible. Even takeout.

If you enjoyed reading this article, I write about all things business finance in Canada and you can find more more resources here.
https://www.betterwithbenji.com/


Source link