DEV Community: Tim

What happens when Amazon accidentally sends all of their support traffic your way?

Tim — Wed, 05 Jan 2022 15:44:16 +0000

Update: The issue has been resolved, but we still have no explanation as to what happened

A sudden massive spike in web traffic is something every tech startup dreams of (unless you’re on the SRE team). When it happened to us at Openbase, we were thrilled. While we already take in ~400k visitors per month, we wanted to be thorough and dive into our analytics in order to find the source of all this new traffic, in hopes that we could capitalize on it and keep the trend going.

Unfortunately, this proved to be a little difficult to investigate. All of the traffic was direct, meaning that the sudden influx of users weren’t clicking on a viral tweet. Instead they were typing openbase.com directly into their browser URL bar - or so we thought. After a few mentions of this during our morning standup meetings, and a cursory glance at the horizon for unsolicited “Go to Openbase.com right now” billboards, the investigation took a backseat while we went back to the typical startup stuff. New features, improving the world of open source, building Yelp for package discovery, etc.

Then the strange support tickets started flowing in. “FireTV not working”. “My package came but it’s broken”. “We redeemed an Amazon gift card and wanted the money back on the card.” - Okay perhaps that last one (which is entirely real) was a bit of a helpful clue.

For some reason, Amazon support requests were coming to us.

At first glance, Openbase.com doesn't share any similarities with Amazon.com. To start, we’re not an ecommerce brand, we’re an open source package search and discovery platform. “A” and “O” are very far apart from each other on a standard QWERTY keyboard. Why then were we getting a 900% increase in direct traffic from angry Amazon.com customers?

After pouring through all of our analytics services, logs, and anything else we could think of, we still had nothing. Finally, through a third party SEO service, we found a new backlink - http://amazom.com - which redirects to https://openbase.com. Surprisingly, this link isn’t just the result of fat-fingering, a quick google search will reveal this typo exists all across the web.

Here’s where things get really strange - Amazon owns this domain. Why does it redirect to us at Openbase? Is it possible that the almighty DevOps at Amazon love Openbase SO MUCH? Why did the traffic start pouring in on December 4th? Why did one of Kaitlyn’s 2 pack color changing mugs arrive broken in the box? We don’t know. We’ve reached out to Amazon for clarification, and are excited for (but certainly not expecting) an explanation.

We’ve learned a few things from this ordeal:

Always investigate traffic spikes thoroughly
Angry users understandably don’t care that Openbase.com looks nothing like Amazon
Double boxing, along with plenty of styrofoam and bubble wrap isn’t always enough to ensure mugs don’t break in transit. While we don’t do any shipping here at Openbase, we do care very deeply about open source packages, so be sure to start your search for tools, frameworks, and libraries at openbase.com

Create a virtual business card with Dev.page!

Tim — Wed, 10 Nov 2021 15:35:50 +0000

Dev.page has finally launched, which means you can claim your username to get access to your own page with all of your relevant developer credentials.

This all-in-one free homepage for developers is a convenient way to organize all of your profiles: LinkedIn, Twitter, Codepen, Openbase, and even Dev.to!

You can feature as many skills as you like, customize your bio with markdown, and choose a custom vanity URL (mine is https://dev.page/tim/) to help share your page with others.

I like showcases like these in lieu of building a portfolio site, especially for developers who focus more on full stack and backend development. The team at Openbase has made this tool very easy to use, with no code or configuration required!

How to finally choose a Javascript framework in 2021

Tim — Tue, 26 Oct 2021 17:23:32 +0000

The JavaScript ecosystem has exploded in the past several years, and shows no sign of slowing down. This trend is especially apparent when looking at the state of front end JavaScript frameworks. Quite simply, there are too many to choose from.

If you’re finding yourself in the position of having to choose a front end JavaScript framework in 2021, don’t worry! Let’s take a look at a few ways to make this decision with the health and success of your next project in mind.

Throw a dart

At first this might sound like a cruel joke, but if you’re trying to choose between the top 3 - 5 available options (React, Vue, Svelte, Angular, etc), and you’re not concerned about the differences in syntax, there’s a high probability that you’ll be fine choosing from these popular options. Because they’re widely used and thoroughly tested, if you run into any trouble, you’re only a quick Google search away from finding a resolution.

But what if you need to search from a larger pool of options, or if you're looking for something new entirely?

Use a dedicated service to review your options

Thankfully, there’s finally a service you can use to get authentic user ratings, insight, and experience, as well as a host of other key metrics related to open source packages. For front end JavaScript frameworks, this service is especially helpful. Openbase has managed to thoroughly categorize nearly any open source package you can find, ensuring that searching for something specific is a breeze.

Looking at alternatives to Angular for example, we can find a wide array of other options, and even sort them by highest rated, most used, or best maintained! Clicking into a specific option gives access to individual user reviews, as well as package specific metrics like bundle size and type definitions.

Using Openbase, it becomes very easy to sort through the seemingly infinite list of front end JavaScript frameworks in order to find the perfect option that meets all of your needs. Once you’ve found the perfect option for your project, you can even find tutorials to help you get started quickly or work through a technical challenge.

Copy from a similar application

If you want to all but ensure you’re making the right framework choice, it’s never a bad idea to look at what other similar applications have done, and make the same technology choices. While it might sometimes be difficult to find a similar application (especially if your idea is new) it’s always helpful to look to see if any of the challenges you may encounter have been solved, and if so, identify the specific technologies used to solve those challenges.

A combination of viewing source code in the browser and looking through GitHub will help you decipher which frameworks are being used, but be careful! Without sourcemaps, it might be hard to figure out which framework the minified + compiled code belongs to!

So there you have it!

Three valid options for choosing a front end JavaScript framework in 2021, at a time when there are more frameworks than ever! If you really want to be thorough, it may make the most sense to employ a combination of all three options:

Look into what similar applications are using
Review Openbase to find user feedback, metrics, maintenance statistics, and alternatives
If you can't choose after you’ve narrowed down 3-5 options, throw a dart!

Have you recently had to choose a javascript framework? How did you make your decision? Which did you end up going with?

5 Reasons You need a Career Coach!

Tim — Mon, 16 Dec 2019 13:58:20 +0000

It's no secret- Tech is growing faster than ever. With more and more developers being added to the talent pool, how can you make sure you stand out from the rest? Here are 5 ways a professional career coach can help to improve your chances at getting hired.

tldr; @Devcareeradvice

You get professional advice that's tailored just for you

General career advice can only get you so far. An outside perspective from a professional, however, can help identify your blind spots, pinpoint your strengths, and give you valuable feedback that you can take with you forever. Online career blogs can’t tell you how to apply catch-all tips with your specific background, skill set and personality in mind. You might be surprised to learn a few things outside of what you hear on blogs and twitter.
Someone to hold you accountable

If you’re in the middle of a job search, the process can be long and exhausting. You need someone to be with you along the way, pushing you to keep going no matter how difficult things might seem. As they say, it’s a marathon, not a sprint. You also need someone to identify what can help you excel and elevate your skills everyday. Web development evolves faster than most industries but you can insure yourself by hiring a personal coach, giving you insider tips and knowledge handpicked to match your career goals.
Connect your skill set to the right opportunity

Whether you’re just starting your career in tech, in a mid-senior level, or just looking to “re-charge”, navigating and defining your path can be overwhelming. There are plenty of possible tracks to take and multiple areas to tackle. Having a coach can help you find your niche and determine your specialization, so that you can narrow your search down to your interest, getting you close to landing your dream job.
Save you time and effort

Skip the easy mistakes by learning from someone who's already been in your position! A coach dedicated to providing you tips and learnings based on what other people have experienced can save you time and money. Yes, mistakes are often part of career development, but there are plenty that you don't want to make, hidden along the career path. A good career coach will illuminate these areas for you, so you can reach your full potential.
Develop your long-term career roadmap

It’s easy to get comfortable once you have landed a good job. Don’t fall into a complacency trap. Stay motivated! Developing both short- and long-term career roadmaps can help you stay focused, hone your skills and stand out. Whether you could use more interview prep, refine your resume, or start a strong career roadmap, a coach can amplify those solutions for you.

Ready to take your development career’s next step? Get personalized feedback, coaching, and more @Devcareeradvice.

Web Development Part 2E: Let's Build It!

Tim — Tue, 18 Jun 2019 01:29:09 +0000

Let's Build It!

We're going to put all of our CSS knowledge to the test! Don't forget to use the hashtag #TimTeachesCode on twitter! Remember, you can all contact me whenever you have questions or feedback.

This course is completely free and will be free forever. It takes a bit of time to prepare and support, so if you'd like to contribute, you can do so at https://paypal.me/tevko. Any contribution helps!
This week: Putting it all together
In the last lesson, we learned about pseudo classes / elements and demoed as many as we could.

In this lesson, we're going to put all of our knowledge to the test by building a complete design!

There is a LOT to be done here, and this will not be easy! Use your best guess as to colors and fonts, and don't worry about making anything functional. Don't forget to be detail oriented! As web developers, a large part of our job is turning designs like this one into a real website. Don't be intimidated, and do reach out with questions!

You can use google fonts and placeholder images for icons and logos.

Homework:
Reply to the email with a new codepen containing the completed design.

Extra points.
Make the FAQ functional, and include as many CSS transitions as possible!

Read: https://mxb.dev/blog/the-css-mindset/

Web Development Part 2D: Let's Get Weird!

Tim — Mon, 10 Jun 2019 22:44:27 +0000

Let's Get Weird!
We're going to learn all about Pseudo elements and classes! Don't forget to use the hashtag #TimTeachesCode on twitter! Remember, you can all contact me whenever you have questions or feedback.

This course is completely free and will be free forever. It takes a bit of time to prepare and support, so if you'd like to contribute, you can do so at https://paypal.me/tevko. Any contribution helps!
This week: Pseudo elements and Pseudo classes.
In the last lesson, we learned about the "checkbox hack" and used it to build another Nav element.

In this lesson, we're going to look at some strange new properties: Pseudo classes and Pseudo elements.
A fun fact: You used one of these in the last lesson. I'll leave it up to you to determine which one!

These elements are incredibly important in a web developers toolbox. It's up to you to learn about them all, but I'll leave a few helpful links.

http://quantityqueries.com/

https://bryanlrobinson.com/blog/2018/08/07/top-3-uses-of-after-and-before-css-pseudo-elements/

https://css-tricks.com/almanac/selectors/n/not/

Homework:
Reply to the email with a new codepen demonstrating as many CSS Pseudo elements and Pseudo classes as you can. They can be random and you don't need to incorporate anything into a larger design.

Extra points.
Demo all of them.

Web Development Part 2C: Time for another test!

Tim — Sun, 26 May 2019 22:06:42 +0000

It's time to do some work!
We're going to learn how to make a nav bar look nice! Don't forget to use the hashtag #TimTeachesCode on twitter! Remember, you can all contact me whenever you have questions or feedback.

This week: Using our new skills to make something.
In the last lesson, we added some CSS to our FAQ page to make it look great!

In this lesson, we're going to take a break from the FAQ page and apply our new skills to a new challenge. We're going to take some raw HTML for a nav item and apply some CSS to make it functional and nice looking.

Copy (or Fork) the content in this codepen to get started.

The Rules:

No Javascript
You can add HTML, but you can't remove any
On small screens, a button should appear. Clicking the button should cause the nav to fly out from the left (like this)
On large screens, the nav should stick to the top of the screen
Use the "checkbox hack" to enable the fly out nav when the button is clicked.
Add CSS to not only make it functional, but look nice as well!

A few tips:

Don't overdesign. Focus on making the nav work on small screens and with the checkbox hack before anything else!
This exercise is hard. Take your time and make sure you understand the exercise before you get started. Reach out if you have questions!
While you may be tempted to add two navs and hide one on small / large screen sizes, don't do it! Duplicate navigations are bad for accessibility!

Homework:
Reply to the email with a link to the redesigned nav and a brief summary of what you've learned about CSS design. Also include your plans to continue studying CSS and what else you think is possible with the checkbox hack!

Extra points.
Add transitions and keyframe animations to the nav interactions!

Web Development Part 2B: Fonts, Colors, Etc.

Tim — Sun, 19 May 2019 20:43:11 +0000

It's time to spice things up!
We're going to learn about fonts, colors, and a few other tricks! Don't forget to use the hashtag #TimTeachesCode on twitter! Remember, you can all contact me whenever you have questions or feedback.

This week: Making it Nice.
In the last lesson, we used Grid and Flexbox to layout our FAQ page. We also added media queries to allow the content to display nicely on all screen sizes.

In this lesson, we're going to add more styles to our FAQ page. This means fonts, colors, underlines, backgrounds, and anything else you can think of! You'll need to do a lot of studying and browsing for this lesson, in order to learn about the different things you can do with CSS.

What you'll need to study

https://css-tricks.com/almanac/properties/

A few tips:

Make sure the CSS you're using is supported by all browsers, and not deprecated!
Find some inspiration to help with your design.
Make sure your color schemes, font sizes, and overall page design is accessible!

Homework:
Reply to the email with a link to the updated codepen and a brief summary of what you've learned about CSS design. Also include your plans to continue studying CSS and how you'll keep this new skill sharp!

Extra points.
Read through https://daveceddia.com/implement-a-design-with-css/ and find a new design to replicate on your own!

Web Development Part 2: CSS is Here!

Tim — Sun, 12 May 2019 23:16:38 +0000

It's time to learn about CSS!
We're going to learn some basics about the language & learn about the many ways to lay out our content! Don't forget to use the hashtag #TimTeachesCode on twitter! Remember, you can all contact me whenever you have questions or feedback.

This week: How to CSS?

In the last lesson, we created a CSS naming convention to add classes to our FAQ page HTML. If you're just joining us in the course, that means you'll need to create an FAQ page (for any topic or fictional company) on CodePen and add CSS classes. Re-Read through the last lesson to understand the nuance behind a proper CSS naming convention.

In this lesson, we're going to add styles to our FAQ page. However, we're only going to work on the layout. This means that we'll only be focusing on arranging the blocks of content to conform to our design. Sidebar on the left, main content in the center, header on top (or fixed to the top of the viewport!), etc. We'll also want our content to collapse into a single column when the screen gets smaller (down to 320px wide) Don't add CSS in order to style anything else! There's enough to learn about layout for one week!

Take a look at the following codepen to help gain an understanding of how media queries work - https://codepen.io/tevko/pen/arZreQ

What you'll need to study

A few tips:
Don't use HTML tables for page layout! They're inflexible and outdated. We have other, more powerful modules for CSS layout!
Make sure you have the correct meta tags in your < head > for the viewport to respond properly when the screen size changes.
Make sure you have enough in your demo to properly experiment with your CSS layout. Ideally, you should have some sort of sidebar, middle column for main content, header, and footer.
Make sure you're using CSS media queries so that your FAQ page is responsive!
Homework:
Reply to the email with a link to the updated codepen and a brief summary of what you've learned about CSS layout. Also include your plans to continue studying CSS layout and how you'll keep this new skill sharp!

Extra points. This lesson will be tough! Take your time, read through all of the material, and triple check your work! When you get done, look through https://www.smashingmagazine.com/category/css and find a few articles to read. Write down your questions about what you've read and work through googling to answer them in your free time!

Web Development Part 1D: Setting up for CSS

Tim — Sun, 05 May 2019 22:37:27 +0000

It's time to take the next step! There's a LOT to learn here. Don't forget to use the hashtag #TimTeachesCode to chat about the course, help each other out, or brag about your new skills! Remember, you can all contact me whenever you'd like, 24/7 and I'll respond ASAP.

** LESSON 4 **

Hello Friends! In the last lesson, we used all of our knowledge of HTML to create a well structured FAQ page. This week we'll be working in the same codepen as we learn about CSS and class attributes. We won't be adding CSS in this lesson, but there's plenty to do in order to prepare!

Study:

https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class

http://getbem.com/introduction/

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Complete: Add class attributes to your HTML source in order to style your FAQ page and contact form. You will want to have a design in mind for your contact form, so search through the web to find something inspiring! We won't be adding any actual CSS to our codepen just yet. While this might seem annoying and tedious, it is important that we learn about properly naming CSS classes, adding style LINK tags into our HEAD, and CSS specificity BEFORE we start actually writing any CSS at all.

This lesson includes more reading than actual coding, and it may very well take a few weeks to get through all of the material. The way in which you name your CSS classes has an enormous effect on the structure and further maintenance of your project.

A few tips:

Don't use ID attributes for CSS. Stick to classes for specificity reasons.
Think of your CSS classes as a system. You'll want to have an organized naming convention that accurately reflects your styling goals.
Don't worry about getting it perfect. This exercise may require multiple rounds as we learn how to create a good naming convention with our CSS classes.

BONUS: Did you know there are preprocessors you can use to add more functionality and utility to CSS? Check out https://sass-lang.com/documentation/syntax and look into how you can configure it with CodePen.

Respond: Reply to the email with a link to the updated codepen and a brief summary of what you've learned about CSS and BEM. Also include your plans to continue studying CSS and how you'll keep this new skill sharp!

Notes: This lesson will be tough! Take your time, read through all of the material, and triple check your work! When you get done, read through https://csswizardry.com/2018/11/css-and-network-performance/ to learn more about working with CSS. Write down your questions about the article and work through googling to answer them in your free time!

Web link to course: https://dev.to/tevko/web-development-part-1c-html-can-do-stuff-bnp

Lesson 5 will go out next week

Tim Evko

//https://timevko.website/

Web Development Part 1C: HTML can do stuff

Tim — Sun, 28 Apr 2019 22:03:57 +0000

LESSON 2 HERE

This lesson includes your first test, and it's challenging! Don't worry, you'll do great! Don't forget to use the hashtag #TimTeachesCode to chat about the course, help each other out, or brag about your new skills! Remember, you can all contact me whenever you'd like, 24/7 and I'll respond ASAP.

** LESSON 3 **

Hello Friends! In the last lesson, we learned about images, additional HTML tags, and accessibility. We also briefly touched on responsive images and view source / inspect element capabilities. This week we'll be putting all of our new knowledge together to demonstrate what we've been learning for the past two weeks! While this lesson marks the end of our HTML review, it doesn't mean that we're done learning! Keep studying on your own. Every question you have has an answer just a google search away.

Study:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

Complete: Make a new codepen! This time we'll be creating an FAQ page (Using the summary details element) with a contact form. Use as many different input types and links as you can. Remember, this shouldn't have any styling! The goal is to simply create an outline for the page that we would later add CSS and JavaScript to.

BONUS: Did you know it's possible to validate input fields with HTML alone? You can use special attributes to allow the browser to check things like emails, dates, and empty fields to make sure the data is correct! If you'd like, include these validations into your contact form. Good Luck!

Respond: Reply to the email with a link to the new codepen and a brief summary of what you've learned about forms, links, and inputs. Also include your plans to continue studying HTML and how you'll keep this new skill sharp! This lesson will be graded! I'll respond to every email with an explanation of your grade, as well as what you can improve on. You may re-submit your pens in order to get a better grade!

Notes: This lesson will be tough! Take your time, read through all of the material, and triple check your work! When you get done, read through https://rjzaworski.com/2019/04/the-web-developers-guide-to-dns to gain a better understanding of how the web works.

Lesson 4 will go out next week

Tim Evko

//https://timevko.website/

Web Development Part 1B: HTML Images

Tim — Sat, 20 Apr 2019 02:24:29 +0000

LESSON 1 HERE

This course is completely free and will be free forever. It takes a bit of time to prepare and support, so if you'd like to contribute, you can do so at https://paypal.me/tevko. Any contribution helps!
Hundreds of you signed up to learn web development. I could not be more excited and proud of all of you. Please stick with it. This is a difficult course, and a difficult career field, but it's extremely rewarding, high paying, and I'm here to help. Please remember that you need to study every day to be successful. I still practice and aim to get better every day, even though I do this for a living. Since most of us are all on twitter, feel free to use the hashtag #TimTeachesCode to chat about the course, help each other out, or brag about your new skills! There's a lot to digest in these emails, so read carefully!!

Don't forget, you can all contact me whenever you'd like, 24/7 and I'll respond ASAP.

** LESSON 2 **

Hello Friends! In the last lesson, we learned about HTML, which is like the skeleton of a website. Its purpose is to outline the content of a document, and there are several tags you can use for this purpose. HTML allows a browser to understand what sort of content is being presented to the user. If we want our users to get the most out of our websites and applications, we need to ensure our HTML is as descriptive and accessible as possible! Let's take it a step further and update our codepen demo so that the content is more semantic, while adding a few relevant images to our demo.

Study: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML

Complete: Add an image or two to the resumè make sure your images have "alt" attributes. Update your HTML to make use of section, article, div, figcaption, figure, main, header, and footer tags (you don't have to use all of these, just the relevant ones). Once you're finished, paste your HTML into the W3C validator, and adjust it until there are as few errors as possible. Continue reading about HTML. There's a lot to learn. What is HTML5? What is a "div" for? Who invented HTML? Who makes new tags? How do browsers understand HTML? What is the W3C?

Did you know? You can view the source of every website you're visiting? Try this out on a few websites, and look at how they structure HTML. You can also "Inspect Element" which makes use of built in browser tools to live edit and debug web pages on the fly!

BONUS: Did you know it's possible to allow the browser to pick the best image size to display based on the type of screen being used to view it? If you'd like, read https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images and try to incorporate this technique into your demo. If you do, let me know, so that I can help you with this technique. Not many courses teach their students about responsive images but it is a skill that will impress employers and enable you to make better, faster websites.

Respond: Reply to the email with a link to the updated codepen and a brief summary of what you've learned about images, as well as what you're going to be studying / reading before the next lesson. What else have you learned about HTML and accessibility?

Notes: Read as much as you can about HTML. There are too many tags to list and they all serve a purpose. Images can be complex. There are various types of images (jpg, gif, png, svg, webp, etc) that accomplish various purposes. These images range in size (kb) and their sizes are important. Learn about these and why they're important. Why do some images take longer to load than others? How do I make my images load faster? Do all browsers support every type of image? These are important questions, and you should google them! Be curious. Have you ever wondered why there are different browsers? What are their differences? Do all browsers display HTML in the same way? Do all browsers support all HTML tags? If I haven't updated my browser in 2 years, will my favorite websites look the same as they do on the latest version?

Lesson 3 will go out next week

Tim Evko

//https://timevko.website/