DEV Community: Ania Kubow

So excited to be a Judge on the WixStudio Challenge 😱!

Ania Kubow — Mon, 24 Jun 2024 11:56:54 +0000

So excited to be a Judge on the WixStudio Challenge 😱! Stay tuned by following #wixstudiochallenge:

#wixstudiochallenge Follow

This is the official tag for submissions and announcements related to the Wix Studio Challenge.

More info here: https://dev.to/challenges/wix

Learn GraphCMS and GraphQL by building a Next.js Disney+ Clone

Ania Kubow — Wed, 15 Sep 2021 19:52:12 +0000

Learn how to use GraphQL and GraphCMS by building a Next.js Disney+ Clone! In this 2hr tutorial I show you how to use a Headless CMS in order to build a working streaming app.

You must sign up here to follow along with the tutorial: https://go.graphcms.com/ania

What you will learn:

00:00 Introduction
01:37 Setting up GraphCMS
25:35 writing GQL queries and mutations
32:54 Starting a Next.js App
37:34 Getting data into our App
50:54 Creating individual movie pages
58:18 Creating Components
01:46:45 Writing mutations in the App
01:57:00 Final styling

Final code: https://github.com/kubowania/disney-clone-graphcms

Text Editor VS IDE - know the difference (PLEASE! 🙏🏻)

Ania Kubow — Thu, 26 Aug 2021 10:41:06 +0000

I recently made a video where people started comparing VSCode to Webstorm - let me tell you why you can't compare the two.

I am going to go through the pros and cons of using text editors such as VSCode (as defined by Microsoft), Sublime and Notepad vs IDEs such as Webstorm, Microsoft Visual Studio and PyCharm. By the end of the video you should have enough knowledge to make an informed decision about what suits you best.

Text Editors

A text editor is a great choice if you are working on a small project, or need to edit a file quickly. That's because a text editor at its core, is exactly that - a text editor. As your projects grow in size and the complexity of your tasks increases, an IDE may become a better option. There are several things to keep in mind though.

An example of text editors are VS Code, Sublime Text, Atom.

These text editors - sometimes known as code editors - are great as they tend to be free, and therefore more accessible to everyone. If you are just starting out, and perhaps trying to figure out if coding is for you, this can be a good choice for you as you are figuring stuff out.

Lightweight and Fast

Text Editors are also lightweight and fast. This is because out of the box (so without any plugins, just as it is when you first download it), they do not have many features. This makes them fast in comparison to IDES.

Less Steep Learning Curve

There is also a less steep learning curve. Because a text editor is so simple, and has less features, that also makes it easier to use. The UI is much more minimalistic, and hence easier to use for most people.

Now let's move onto the extensions.

Extensions

Text Editors can become really powerful if configured properly. This is especially true for VS Code. If you dedicate a lot of time to configuring a code editor - finding and installing the right extensions for the things you need for work - this can make your text editor very close to an actual IDE.

Big Community

VSCode, built by Microsoft, has had a lot of push in the industry. Which is good as it's now used by a lot of people which means a bigger community, which means a lot of tutorials and blogs on how to use it and personalise it exactly as you want.

It also means people are greeting more and more plugins for it, resulting in a rich plugin ecosystem.

Now let's have a look at some of the cons for text editors.

Time costly

Text editors require time from you to configure them properly. Depending on what you’d like to achieve, you may need to spend some time or maybe even a lot of time making your code editor work like an IDE. Customising it, looking for the right extensions, making sure those extensions work as expected and also work fine with each other. You may be not paying for a tool with money but you’re still paying for it indirectly with your time.

Works worse with larger and more complex projects

As you start working with bigger projects in a code editor, you may notice that its performance gets worse, especially if you have a lot of extensions installed. It may also let you down when it comes to working on complex tasks like refactoring code across the entire codebase.

Not every extension, is a great extension

Now, whilst some plugins are made by Microsoft, and they probably will look at things like making sure the plugin is compatible with the version of VSCode, not every plugin creator does.
One plugin for example can be created for VSCode by a third and separate party, it works fine, and then VSCode does an update, and that plugin will then be out of date for that version of VSCode, and this could potentially cause issues. The Third party would then have to update their plugin and make sure it is continuously maintained. This is in contrast to IDEs, where the platform comes as a whole.

IDEs

Which leads me onto the Pros and Cons for IDEs.

First let's start with the examples of IDEs.

We have WebStorm, Visual Studio, IntelliJ IDEA, PyCharm, etc.

Out-of-the-box experience

The Pros of these IDES is that, as mentioned, is that you get an out-of-the-box experience. You can start coding straight away without having to research what extensions to install. The support for all the major frameworks and technologies usually just works with zero effort from you. This includes tools for debugging, unit testing, working with the terminal, linters and so much more that comes with the IDE itself .

Good for large complex projects

IDEs are also good for large and complex projects. This is because most IDEs can analyse an entire project and provide coding assistance based on what they are working with. So when you use them for a small project, they might appear to be slower to start, because they still spend time analysing the entire project to see how they can help you, but when it comes to larger projects, this is where the analysing really makes sense and the power of the IDE becomes apparent.

The IDE will look at the project structure and provide more reliable coding assistance whenever you need to do complex operations across your files. This will include navigation, code assistance across files, renaming autocompletions across the entire codebase and much more.

Specialised

One IDE often specialises on one specific technology stack. So for example, they can have all the tools necessary for JavaScript development for example. This can be react prompts and easy project starting, to code snippet shortcuts. This can be a great thing as you get all the support you need, or a weakness if you want to use it for JavaScript and Python, for example.

Now the Cons for IDEs.

Paid

Because of all the inbuilt support, IDEs are usually paid. It is considered a professional tool that allows you to work more efficiently, saving you the time it would take you to set up your code editor, and debug things that might be caused by faulty plugins and so on. If you value your time over the fee, then this is the tool I would recommend for you.

If you are a student or teacher however, or if you are using IDEs for open source projects, some IDEs can be free. There's also things like the Developer Recognition Program from JetBrains that you can apply for, as well as a bunch of other things that will allow you to use some of their platforms for free of charge, or at a 50% off rate - if you work for a startup for example.

Some IDEs have Early Access Programs, which let you try the latest features and improvements for free as well, so keep your eyes peeled for those.

Slower

As mentioned, IDEs are slower than text editors. This is because they are built to analyse big projects, as mentioned before, and the analysing is the bit that takes the time. The time is not very noticeable, we are working with microseconds rather than minutes, but if this is something that you feel is a downfall, and you are working on a simple project, you may want to opt for a text editor instead.

Hard to get used to

And finally some people consider IDEs harder to get used to. This is due to IDEs in general having more features. More features equal more options and in general might be quite daunting to a first time user. Honestly this reminds me of the first time I ever used Adobe Photoshop or Adobe Premier pro, but, honestly these features are what make both such great products for professional use, and same applies to the IDEs.

So there we have it, my pros and cons for text editors and IDEs. So based on this, and what you are learning and where you are at in your journey, I hope you can now make an informed decision on what suits you best for what you are working on - a text editor or an IDE.

Learn Blockchain Development and get PAID per Task

Ania Kubow — Mon, 09 Aug 2021 10:18:01 +0000

Welcome to this mini blockchain development lesson, in which we are going to learn about the new open source blockchain - Nervos, and earn money, crypto ($CKB) or USD, for each task we complete.

The Nervos Training Hackathon is a way for developers to complete Blockchain development tasks and get paid for their completion. There are 11 in total as of today, so you could win a sum of 340USD or the equivalent in crypto, and to get you started I'm here with a special guest Jordan, a senior Blockchain Developer who is going to help us through the first 3 tasks.

What we will be covering:
00:00 Intro
00:45 What is Nervos
03:50 Prerequisites
04:46 Task 1 - Setting up your CKB Node and CKB Indexer
09:00 CKB Node
19:21 CKB Indexer
33:55 Claiming your prize money
35:34 Task 2 - Create a Godwoken Account on the EVM Layer 2 Testnet
44:47 Create and fund an account with CKBytes on Layer 1
54:21 Deposit some CKBytes on Layer 2
01:03:10 Make a Deposit to Layer 2
01:05:18 CKBytes and Shannons
01:06:04 Creating a Transaction
01:10:35 Claiming your prize money
01:11:08 Task 3: Deploy a Simple Ethereal Smart Contract on Polyjuice
01:23:57 Claiming your prize money
01:25:26 Where to go next

By the end of all 11 tasks you would have successfully taken an existing Ethereum app and put it on Nevros.

Links mentioned in the video:
🔗 Introduction: https://github.com/Kuzirashi/gw-gitcoin-instruction
🔗 Task Setup and Requirements: https://github.com/Kuzirashi/gw-gitcoin-instruction/blob/master/src/task-setup-and-requirements/task-setup-and-requirements.md
🔗 Gitcoin Bounties: https://gitcoin.co/hackathon/nervos
🔗 Nervos Discord (Join #gitcoin-hackathon): https://discord.gg/AqGTUE9
🔗 Nervos Network's Twitter: https://twitter.com/nervosnetwork
🔗 Jordan Mack's Twitter: https://twitter.com/jordan_mack

You can also find me on:
Twitter: https://twitter.com/ania_kubow
Instagram: https://instagram.com/aniakubow

GraphQL Federation Crypto App

Ania Kubow — Mon, 02 Aug 2021 09:22:55 +0000

In this video I show you how to use GraphQL Federation by building a Crypto App. I will use React, Apollo GraphQL and a DataStax Astra database.

0:00 Introduction
1:38 Setting up our Database
3:48 GraphQL API and Playground
7:31 Schema-first approach
14:51 Inserting Coins
18:30 Creating our React App
23:17 Apollo Gateway and Services
51:22 Building out the Frontend
1:14:14 Styling our Project

Final code here: https://github.com/kubowania/graphQL-federation-crypto

Promos codes in this video:
💻 ANIA200 for $200 free credits from https://www.datastax.com/
💻 ANIAKUBOW for 3 months free of Webstorm here: https://jb.gg/webstorm_ide

⭐ New to code and none of this is making sense? Watch my '12hr+ YouTube Coding Bootcamp' in which you will learn HTML, CSS and JavaScript Fundamentals completely from scratch. It's on my channel and its 100% free.

⭐ In most videos I use Tabnine as my A.I autocompletion tool. You can download it for free here: http://bit.ly/tabnine-top-tool

⭐ You can get a blockchain domain with my affiliate link here: http://bit.ly/get-a-crypto-domain

⭐ If you would like to buy me a coffee, well thank you very much that is mega kind! : https://www.buymeacoffee.com/aniakubow

⭐ Sign up for weekly coding tips from my newsletter partnership: https://bit.ly/JS-tips

You can also find me on:
Twitter: https://twitter.com/ania_kubow
Instagram: https://instagram.com/aniakubow

4 Bot Programming Games for Sogetti CodeFest 2021

Ania Kubow — Thu, 29 Jul 2021 11:21:29 +0000

If you know me, you know I love a Coding Competition. And if it's about video games 🎮, well you better believe I am here for it!! To make CodeFest accessible to everyone, I thought I would show you how to get you started with 4 games that I would pick to enter the competition, as well as share advise on how to tackle each of the coding puzzles.

In this video I show you how to start off a game of:

Tron Battle in JavaScript

I chose this game as I was familiar with the concept. It is a puzzle game in which you 'steer' your laser light to try and trap the other player. To win this game it is suggested to use a flood-fill algorithm, a Voronoï-based method, a pathfinding algorithm or Minimax.

I, this short clip, I show you how to get the game started, and what to focus on in order to get coding.

Connect Four in JavaScript

I chose Connect Four as a game to help you potentially win CodeFest2021 as I have actually built a game of Connect Four for my own channel in Javascript. Training the game's AI is a completely different challenge however. In this short video I show you how to get started in creating the game and explain that your first move is how to game essentially 'kicks off'

Ultimate Tic-Tac-Toe in JavaScript

In this Bot Programming game you are asked to play a game of nine tic-tac-toe games, in order to try get three games in a row, to complete an outer game that is being played (very meta!). This bot programming game is great as it requires you to try use algorithms such as Minimax, Alpha-beta, Negamax and Monte Carlo Tree-Search.

Coders Strike Back in JavaScript

The rules to this game are pretty simple - race against the opponent and win! I show you how to control the racers speed and trajectory to get you started.

Good Luck!!!!

more information here: https://www.codingame.com/hackathon/sogeti-codefest-2021

Code Zelda in JavaScript and Kaboom.js

Ania Kubow — Fri, 23 Jul 2021 09:34:42 +0000

In this video I show you how to build Zelda in JavaScript using the Kaboom.js library in my code editor of choice. If you are new to Kaboom I would suggest watching the full course where I explain each method before diving in to the game creating, visit freeCodeCamp.org by clicking here: https://www.youtube.com/watch?v=4OaHB0JbJDI

In the full course I use a preconfigured environment to code Zelda. In this tutorial I create the game from scratch using my code editor of choice.

Final code here: https://github.com/kubowania/zelda

Imgur: https://imgur.com/user/aniakubow20/posts

0:00 Introduction
1:08 Coding starts
5:43 Layers and sprites
17:55 Placing sprites on the first level
29:32 Passing score and levels
34:41 Adding Link
36:09 Keyboard events
40:41 Moving between levels
45:33 Dealing with enemies
01:04:03 Final result

⭐ In most videos I use Tabnine as my A.I autocompletion tool. You can download it for free here: http://bit.ly/tabnine-top-tool

⭐ You can get a blockchain domain with my affiliate link here: http://bit.ly/get-a-crypto-domain

⭐ If you would like to buy me a coffee, well thank you very much that is mega kind! : https://www.buymeacoffee.com/aniakubow

⭐ Sign up for weekly coding tips from my newsletter partnership: https://bit.ly/JS-tips

You can also find me on:
Twitter: https://twitter.com/ania_kubow
Instagram: https://instagram.com/aniakubow

codingbootcamp #coding

Callbacks in JavaScript explained! (video)

Ania Kubow — Wed, 16 Jun 2021 16:33:45 +0000

Video Sponsors: https://getstream.io/aniakubow . Stream is a maker of enterprise-grade developer tools that help product and engineering teams solve two common problems at scale: in-app chat, and social activity feeds.

Callbacks in JavaScript Explained!

In this video I explain what Callback functions are with the help of a simple example, and a more complicated one.

⭐ In most videos I use Tabnine as my A.I autocompletion tool. You can download it for free here: http://bit.ly/tabnine-top-tool

⭐ You can get a blockchain domain with my affiliate link here: http://bit.ly/get-a-crypto-domain

⭐ If you would like to buy me a coffee, well thank you very much that is mega kind! : https://www.buymeacoffee.com/aniakubow

⭐ Sign up for weekly coding tips from my newsletter partnership: https://bit.ly/JS-tips

You can also find me on:

Twitter: https://twitter.com/ania_kubow
Instagram: https://instagram.com/aniakubow

Mario in JavaScript using KaboomJS (video)

Ania Kubow — Tue, 15 Jun 2021 09:59:27 +0000

In this video I show you how to build a Mario in JavaScript using the Kaboom.js library in my code editor of choice. If you want to see the full course on FreeCodeCamp, click here: https://www.youtube.com/watch?v=4OaHB0JbJDI

In the full course I use a preconfigured environment to code Mario. In this tutorial I create the game from scratch using my code editor of choice.

Final code here: https://github.com/kubowania/mario

Imgur: https://imgur.com/a/F8Jkryq

⭐ In most videos I use Tabnine as my A.I autocompletion tool. You can download it for free here: http://bit.ly/tabnine-top-tool

⭐ You can get a blockchain domain with my affiliate link here: http://bit.ly/get-a-crypto-domain

⭐ If you would like to buy me a coffee, well thank you very much that is mega kind! : https://www.buymeacoffee.com/aniakubow

⭐ Sign up for weekly coding tips from my newsletter partnership: https://bit.ly/JS-tips

You can also find me on:

Twitter: https://twitter.com/ania_kubow
Instagram: https://instagram.com/aniakubow

Rock Paper Scissors in React vs JavaScript (video)

Ania Kubow — Wed, 09 Jun 2021 17:33:27 +0000

Video Sponsors: Get 70% off NordPass at https://nordpass.com/aniakubow or use the code aniakubow for the SummerKickOff Sale. Plus, you get an additional month for FREE!

In this video I show you how to code Rock Paper Scissors in React! This is a continuation from my '3 ways to code Rock Paper Scissors in JavaScript' video.

You can find the final code here: https://github.com/kubowania

⭐ In most videos I use Tabnine as my A.I autocompletion tool. You can download it for free here: http://bit.ly/tabnine-top-tool

⭐ You can get a blockchain domain with my affiliate link here: http://bit.ly/get-a-crypto-domain

⭐ If you would like to buy me a coffee, well thank you very much that is mega kind! : https://www.buymeacoffee.com/aniakubow

⭐ Sign up for weekly coding tips from my newsletter partnership: https://bit.ly/JS-tips

You can also find me on:

Twitter: https://twitter.com/ania_kubow
Instagram: https://instagram.com/aniakubow

Build a shortest route app like UberEats / Deliveroo in React! (tutorial)

Ania Kubow — Thu, 03 Jun 2021 15:47:06 +0000

Have you ever wanted to build a delivery app that will calculate the shortest distance from each drop off spot? if so, this is the video for you.

Now, for those of you who have never heard the buzz word Matrix Routing before, it is what we will be using to optimise our multiple deliveries by travel time.

We are going to be using TomTom Map SDK for Web, to show us the best route for us as the delivery driver, to drop off all three deliveries based on time, taking:

The route into account
The traffic on the roads into account.
The traffic incidents on the roads into account

The final route is calculated using the “Routing API” which by default will do a “car”  route. But it can do way more than that. It can calculate the routes for motorcycles, vans, trucks or pedestrians! As you can image, the results will vary. 

00:00 Introduction
02:17 Signing up to get our API Key from Tom Tom ( click here: https://bit.ly/2S5Ry7x )
03:25 Starting our React App Project
05:43 Adding our Map
14:36 Setting the longitude and latitude by Search box + Adding traffic incidents to the map
20:00 Add a Marker to the Map
26:05 Making the Marker Draggable
28:51 Adding a Popup to the Marker
31:06 Adding Multiple Delivery Points and Calculating the shortest route

Get extra API requests using ANIAKUBOW after(!) signing up, here: https://bit.ly/3uCAkvK

⭐ In most videos I use Tabnine as my A.I autocompletion tool. You can download it for free here: http://bit.ly/tabnine-top-tool

⭐ You can get a blockchain domain with my affiliate link here: http://bit.ly/get-a-crypto-domain

⭐ If you would like to buy me a coffee, well thank you very much that is mega kind! : https://www.buymeacoffee.com/aniakubow

⭐ Sign up for weekly coding tips from my newsletter partnership: https://bit.ly/JS-tips

You can also find me on:
Twitter: https://twitter.com/ania_kubow
Instagram: https://instagram.com/aniakubow

deliverooClone #uberClone

Let's code a Netlifx Clone with GraphQL Pagination (Reviewed by a NETFLIX ENGINEER!)

Ania Kubow — Thu, 27 May 2021 16:03:04 +0000

In this video, I build a Netflix Clone using React, Apollo GraphQL, DataStax Astra + Netlify Serverless Functions! For more free credits on top of your already free ones, use code ANIA200 on https://www.datastax.com/

This video is great for those wanting to see how I build an app that fetches data from our Cassandra database using the GraphQL API, as well as learn how to use pagination and slicing. Here are just a few things we will be covering:

00:00 Introduction
04:32 Signing up to our Datastax Astra Cassandra database
07:16 Using the GraphQL Playground
09:51 Creating Tables using GraphQL mutations
18:22 Adding Data using GraphQL mutations (you can use my pre-made data below)
25:03 Retrieving Data using GraphQL queries
26:20 Adding our Movies to our database
34:48 Retrieving all of our Movies by Genre
36:39 Limiting our Data in GraphQL queries
38:01 Creating our React App
41:31 What is LOLOMO at Netflix?
43:05 Setting up Netlify Serverless Functions
49:36 Adding your DataStax token and endpoint
46:03 Adding the Netlify config
46:56 Writing a serverless function to get the Genres
57:36 Getting the Genres using GraphQL
01:04:48 Getting the Movies by Genre in our browsers
01:20:45 Pagination in GraphQL
01:23:51 Calling the next page by button
01:31:19 Loading more Genres when we hover at the end of the screen
01:38:20 Adding a NavBar and HeroSection
01:42:20 Making our Movie Cards pop out when we hover over them
01:51:24 Making videos auto-play and show more info on hover
01:55:28 HeroSection
02:13:36 Font Awesome Icons
02:16:20 Final basic styling

Movie Data: https://github.com/kubowania/netflix-clone-graphql-datastax

As always, please take this project and make it your own. I have done some basic styling for you to get going. This is not a tutorial on styling, it is more to practise your database management skills, so please go wild on the styling yourselves :D! I would love to see what you have made!!

The full finished project can be found here: https://github.com/kubowania/netflix-clone-graphql-datastax/tree/main/data

⭐ In most videos I use Tabnine as my A.I autocompletion tool. You can download it for free here: http://bit.ly/tabnine-top-tool

⭐ You can get a blockchain domain with my affiliate link here: http://bit.ly/get-a-crypto-domain

⭐ If you would like to buy me a coffee, well thank you very much that is mega kind! : https://www.buymeacoffee.com/aniakubow

⭐ Sign up for weekly coding tips from my newsletter partnership: https://bit.ly/JS-tips

You can also find me on:
Twitter: https://twitter.com/ania_kubow
Instagram: https://instagram.com/aniakubow

DEV Community: Ania Kubow

So excited to be a Judge on the WixStudio Challenge 😱!

#wixstudiochallenge Follow

Learn GraphCMS and GraphQL by building a Next.js Disney+ Clone

Text Editor VS IDE - know the difference (PLEASE! 🙏🏻)

Text Editors

Lightweight and Fast

Less Steep Learning Curve

Extensions

Big Community

Time costly

Works worse with larger and more complex projects

Not every extension, is a great extension

IDEs

Out-of-the-box experience

Good for large complex projects

Specialised

Paid

Slower

Hard to get used to

Learn Blockchain Development and get PAID per Task

GraphQL Federation Crypto App

4 Bot Programming Games for Sogetti CodeFest 2021

Tron Battle in JavaScript

Connect Four in JavaScript

Ultimate Tic-Tac-Toe in JavaScript

Coders Strike Back in JavaScript

Code Zelda in JavaScript and Kaboom.js

codingbootcamp​ #coding

Callbacks in JavaScript explained! (video)

You can also find me on:

Mario in JavaScript using KaboomJS (video)

You can also find me on:

Rock Paper Scissors in React vs JavaScript (video)

Build a shortest route app like UberEats / Deliveroo in React! (tutorial)

deliverooClone #uberClone

Let's code a Netlifx Clone with GraphQL Pagination (Reviewed by a NETFLIX ENGINEER!)

codingbootcamp​ #coding

codingbootcamp #coding

codingbootcamp #coding