How coding is like crocheting

At first glance, coding and crocheting appear to have little in common outside of both being words that start with the letter “C.” One is a process that allows us to build cutting-edge computer software, websites, games, and apps. The other is an allegedly old-fashioned craft, more often associated with grandmas in rocking chairs than anything high-tech.

But what if I told you that the two are more similar than you might think? Barbara Oakley, in her famed Learning How to Learn Coursera program, teaches us that the “chunks” of information we know from one concept can sometimes have surprising links to another idea we’re learning. In my case, I realized after finishing the first week of a software engineering course that crocheting and coding aren’t all that different when it comes to things like the language, the community, and the journey to a finished product.

Don’t believe me? Read on to see what I mean.



Coding and crocheting have mystifying lingo

When you look at code in a language you’re unfamiliar with, a lot of it seems like gibberish. You may not know right away what </div> or rgb() or JSON means, but once you become more acquainted with the syntax and terminology, the letters and symbols laid out in front of you start to make sense. With some study and practice, you can recognize which part of the document results in what output on a page.

Crocheting, like coding, has its own lexicon as well. Read any pattern on how to make a hat and you’ll see it’ll go something like “Ch 87. Ss in 1st ch to join. Ch 2. *[FPdc in next st, dc in next 2 sts]” – not so easy to decipher when you don’t know crochet lingo, but the function of each term becomes much clearer after learning some of the language.



Their communities are generous and supportive

Spend a bit of time on (the good side of) #techtwitter and you’ll see that there are tons of people in tech offering support to those who are new to coding or are trying to break into the field as engineers and developers. Many of these seasoned professionals volunteer their precious time to troubleshoot code, mentor juniors, and review portfolios. There are also endless free resources online for learning programming languages or building projects, shared openly by enthusiasts entirely out of generosity. I myself have enrolled in a full-stack web development training program for a total of $0.00 thanks to one very altruistic instructor, Leon Noel. This is all to say that plenty of folks who have a passion for coding also have a passion for giving, and often all they ask for in return is for you to pay it forward.

The same generosity can be seen in crocheting circles and the abundance of knowledge that crafters make available for anyone to access. Google “crochet basics” and you’ll find thousands of tutorials from experienced crocheters explaining everything there is to know about the art. There are also crafters who spend hours upon hours building, testing, and writing patterns that they then release for free, much like developers do with some of their code. In a way, crocheters have their own open-source databases of projects that they can enhance and customize to their needs.



You use similar methods for fixing mistakes

One of a crocheter’s worst nightmares is pausing to look at your work in progress only to realize that it’s a little wonky. Fixing a project that’s gone awry involves closely examining your stitches and pinpointing the row(s) in which you may have skipped a stitch, forgotten to change colors, or used the incorrect number of turning chains. Once you figure out where things went wrong, then you can get back on track to finishing your scarf, sweater, or what have you.

You don’t always get it right the first time when coding, either (in fact, I’d be really impressed – maybe even slightly suspicious – if you did). Just like with crochet, debugging your code calls for carefully inspecting what you’ve worked on and repairing existing errors. Gradually, you learn how to become patient and attentive to detail whether you’re working in VS Code or wielding a crochet hook.



You can create beautiful and functional things with just your hands and minimal tools

Give a crafter some yarn, a crochet hook, and time, and you’ll be amazed at what they can make: blankets, reusable market bags, board shorts, and even amigurumi. In the same vein, programmers can build a limitless array of products with only a computer, a text editor, and probably (highly likely) some caffeine. These two disciplines use minimal tools to construct something beautiful, useful, or often both. At the end of the day, coding and crocheting are different but analogous ways to be creative using your hands–just remember to be careful, because you can get carpal tunnel syndrome doing either activity!



You learn something new every day

Whether you’re a beginner at crochet or a crafter with 10 years of fiber art under your belt, there’s always a new technique to practice or a fresh project to undertake. Being a good crafter means you never stop working to improve your skill or expand your knowledge. The same can be said for coding: to become a great coder is to sign up to be a lifelong student. Engineers, developers, and programmers are constantly picking up new languages, frameworks, and technologies to keep themselves current in their fields. While this may seem daunting, it’s a big part of what keeps the work unique and exciting.

Have I convinced you that code and crochet are not as different as you may have thought? Did this make you think about unexpected links between your interests? I’d love to hear them!




Source link

Will No-Code Replace developers?



Lets first understand, what even is No-Code or Low-Code?

No-Code is made for people in every background to create stuff/software. No code platforms have pre-built drag-and-drop elements that have been coded for reuse and scale, so that anyone, even beginners can make anything they want easily.



Will No/Low Code replace programmers?

No Not at all, we will surely need programmers… There will always be a need for coding. They benefited in there both alternatives.



Subscribe to my newsletter



So does No/Low Code does have any future?

Yes No/Low Code do have a future but they are not the future of code. It is certainly having a place in the future and will be leveraged to make many applications For ANYONE. The future is low-code or no-code with an expected growth rate of 44.4% by 2022 to $27.23 billion (up from $4.32 billion in 2017).



Why No/Low Code so famous?

No/Low Code is popular because it doesnt matter on what background you come from, you can make softwares. Making software in nocode platforms can be fast and done pretty regularly to build prototypes and MVP in a record time.

Thats all for this blog, its a pretty small blog, but its just a start for me 🙂


Source link

How to Become a Web Developer in 2022

Hello, welcome, and in this article am going to show you how to become a Web Developer in 2022. There are numerous companies out there who are ready to pay a large sum of money to have a web developer in their company. You may say in 2022? I say Yes in 2022!. There are also a good number of companies and businesses that require web developers to help create a website that will represent their businesses online.

Before we talk about how to become a web developer, let’s quickly look at who a web developer is. If you are ready to sail with me, then let’s dive right in



Who is a Web Developer?

who
A web developer builds World Wide Web applications. In other words, someone who develops or builds websites or web applications is a web developer. The act or process involved in making these websites or web apps is known as Web Development.

There are three kinds of web developers, Front-End Web Developers, Back-End Web Developers, and Full-Stack Web Developers.



Front-End Web Developers

Front-end web developers are involved in making the visible parts (interface) of a website or web app (client-side). What visitors of the website or web app see and interact with is built and maintained by a front-end web developer.

This includes the beautiful designs, animations, form fields that we see. They can also be called client-side web developers.



Back-End Web Developers

Back-end web developers are involved in building the unseen parts of a website or web app (server-side) i.e the server. These guys are lovers of logic, data, technical construction of websites.

Let’s say you fill a form in a web app and then receive a notification that the email is already registered. Now you are thinking, how did this website know my email is registered. Well, a back-end web developer figured it out.



Full-Stack Web Developers

These guys do both the work of a front-end web developer and that of a back-end web developer; they basically do everything.

Okay, now you know the three kinds of web developers, I think it’s time you decide which one you love most and that one you love most is what you should do. I will be referring to these three guys again, and by then you should have decided.



How To Become a Web Developer?

howTo become a web developer, there are certain skills or languages that you need to be familiar with. There are languages we use to communicate with computers as web developers and these are the languages you need to learn. There are a lot of languages but you don’t need to learn them all.

Most times, it is at this point a lot of beginners mix essentials with inessentials and tend to miss the right path. By now you should already know what kind of web developer you want to be, and following that path is what matters and that is exactly what we will be doing now.

For each of the three kinds of web development, I will show you the languages/skills required and those that are optional, I will also recommend the one you should learn how and where to learn it for free or with a paid plan depending on your budget.



Skills/Languages To Become a Front-End Web Developer

They include HTML, CSS, JavaScript, TypeScript, Bootstrap, Tailwind, ReactJS, VueJs, etc. Let’s analyze where each of them belongs and what they do.

Of the above, there are three basic skills to learn that almost the others require you to know before using them. Follow the order below;



1. Markup Languages

You will agree with me that every website or web app has a web page, and every web page contains content (well-structured content). A markup language is what web developers use to structure content on web pages. Simply put, it is what they (web developers) use to display texts, images, buttons, forms, audios, videos to the clients (visitors of the website).

HTML (HyperText Markup Language) is an example of a Markup Language. HTML is the language I recommend you learn as it is most widely used. HTML5 is the latest release of HTML and a lot of companies are making use of HTML5. So you might wanna learn HTML5 as well.

Where do I learn HTML? W3Schools has a very concise tutorial on HTML and HTML5 for free. Check them out. On average, it shouldn’t take you more than 3 weeks to learn HTML if you can dedicate at least an hour to studying daily.



2. StyleSheet

As markup languages display texts, buttons, images, etc, stylesheets style these contents and make them look organized and beautiful, very beautiful.

CSS (Cascading Style Sheets) is an example of a StyleSheet and it is what you should learn because it is most widely used and required by companies looking for web developers. CSS3 is the latest release of CSS and lots of websites are making use of its features, it will do you more good if you learn it.

Where do I learn CSS? Again W3Schools has a very concise tutorial on CSS and CSS3 for free. CSS is very easy to learn, it shouldn’t take you more than a month if you dedicate 1 hour daily to learning it.



3. Scripting Languages

Interactions, behaviors, etc of web pages are made with scripting languages. For Example, when you click a button on a website and then something pops up. A scripting language basically automates task executions.

An example is JavaScript. I will confidently recommend you learn JavaScript. It is widely used in all aspects of development i.e Web Development, Mobile Development, Desktop App Development.

TypeScript is also a great option to learn along with JavaScript.

Where do I learn JavaScript? You can learn JavaScript at W3Schools for free but sincerely that will not be enough. You will need to go wide and as well as have some daily growth activities to get involved with.

A lot of people say JavaScript is hard, honestly, that is as a result of the approach they used. I heard someone say He has been on JavaScript for three years. Learning JavaScript for three years? That must be frustrating.

Don’t get me wrong though, learning JavaScript never stops. The same way being a student never stops. But this is about the basics, that’s terrible in my opinion. So if you use the wrong approach, you may fall victim to depression, confusion, etc.

Learning JavaScript is tricky but it’s not difficult. All you need is to follow the right path and use a good course or tutorial. You may find w3schools difficult to use, so I recommend you use CodeCademy.

CodeCademy gives your projects and exercises to practice with as you learn JavaScript.



Web Frameworks & Libraries

The road-map so far is thus, HTML => CSS => JavaScript. Not HTML => JavaScript => CSS nor JavaScript => CSS => HTML. With the above skills you can build a fully functional static website. Exciting right?

This is the point where you need to build projects with what you’ve learned. It will help you become better at each of these languages.

You need to follow the order. When you are done with HTML, CSS, and JavaScript; then you may wanna consider some frameworks and/or libraries.

There are numerous web frameworks and libraries for CSS and JavaScript out there but have in mind that their primary job is to make coding easier and faster for you. You can learn web frameworks through their documentations for free. Click on any framework or library mentioned below to access their documentation.



CSS Frameworks

Styling a website can take days, weeks, or even months. But with CSS frameworks the duration becomes lesser and the workload becomes easier. CSS frameworks have already built-in style templates that you just need to tap into your HTML. TailwindCSS is a better and popular option Here is a good list of other CSS frameworks.



JavaScript Frameworks/Libraries

Libraries like ReactJs, or frameworks like VueJs should what I’d say you consider learning. ReactJS is widely used, so you should consider learning.

So far the road-map is HTML => CSS => JavaScript => ReactJS. With the above skills you can build a fully functional dynamic website (web application).



Skills To Become A Back-End Web Developer

The languages popularly used for back-end development includes Python, Rust, PHP, Java, etc.

If you already know JavaScript, you do not need the languages listed above to become a back-end web developer. Simply learn NodeJs.

NodeJS is a JavaScript run-time environment that runs JavaScript on your machine rather than the web browser. With NodeJS you can build servers for your website without learning another language other than JavaScript. NodeJs is by far the easiest to learn, with dedicated 1 hr daily to learning; you will complete it in less than two weeks.

Learning NodeJs is not the end, you need to learn some other NodeJS frameworks like ExpressJs or Fastify(https://www.fastify.io). These frameworks won’t take you more than a week to learn the basics.

Also for the back-end, you need to learn a database language/system. You can either learn SQL or NoSQL or both (though not necessary). I recommend learning NoSQL and an example of NoSQL that you should learn is MongoDB.

So to become a back-end web developer this is the roadmap NodeJS => ExpressJS/Fastify => MongoDB/MySQL



Skills To Become A Full-Stack Web Developer

To become a full-stack web developer, you basically need to know everything, and here is everything

HTML => CSS => JavaScript => ReactJS => NodeJS => ExpressJS => MongoDB/MySQL

CodeCademy offers a premium course to learn everything listed above and other goodies to become a full-stack web developer.



A tool for you

Finally, there is a tool I made to go along with this article. It provides a roadmap for you who wants to be a web developer. It shows you what you need to learn, and in what order, and where to learn them. The resources there now, is way more than what you find in this article.
So head there, and see for yourself. It’s free to use. and it’s called devRoadMap.

You can also contribute to the resources on GitHub. I hope to feature more dev roadmap on this website soon.



Conclusion

Choosing between front-end, back-end or both should be based on what you love doing. If you love designing, content structuring; do well to go for front-end dev.

If you love logic, data analysis then go for back-end dev. If you love both, then full-stack is for you. Becoming the one you love is what makes programming fun for you.

Alright, that’s it. Thank you for reading, I will see you in the next article. Don’t forget to hit me up and follow me on Twitter @elijahtrillionz.




Source link

What Does a DevOps Engineer Do?

Hiring a DevOps Engineer for the first time? Knowing what to look for in a talented engineer can be a challenge. In this article, I discuss what you can expect from a DevOps Engineer in today’s marketplace. I share some of my own experiences hiring DevOps Engineers in today’s competitive labor market. Finally, I talk about cheaper alternatives to hiring a full-time DevOps Engineer.



When Do You Need a DevOps Engineer?

In my past articles, I’ve discussed DevOps release pipelines, stacks, and stages in-depth. A release pipeline is a software-driven process that development teams use to promote application changes from development into production. The pipeline creates multiple stacks – full versions of your application – across multiple stages of deployment.

A development team usually starts a pipeline automatically via a push to a source code control system, such as Git. The team then pushes the change set gradually through each stage (dev->test->staging->prod), testing and validating their changes along the way.

What I haven’t discussed (directly, at least) is how complicated this process is. A DevOps release pipeline is itself a piece of software. It requires code to run – and that code needs to be tested, debugged, and maintained.

Many teams and small development shops get started without a dedicated DevOps engineer. Yours may be one of them! In these situations, a few team members generally own pieces of the pipeline and keep it running. Pipelines at this point are usually a mix of automated promotion and old-school manual deployment.

However, as your application and requests from your customers grow, you may realize the lack of a dedicated DevOps engineer is slowing your team down. Some of the signs include:

  • Your team’s velocity slows under the weight of its current (mostly manual) deployment processes.
  • You have a somewhat automated deployment process but maintaining it is consuming more and more of the team’s time.
  • You realize after a high-profile failure that your release procedures need professional help.
  • You know you should improve your deployment process but your team is so crushed with feature work that no one has time to spend on it.

If you’re facing down one or more of these issues, it may be time to hire a part-time or full-time DevOps Engineer.



Responsibilities of a DevOps Engineer

A DevOps Engineer’s role will likely look slightly different at every company. However, the following broad-based responsibilities tend to be common and consistent.



Automate the Full Release Pipeline

A good release pipeline eliminates unnecessary manual steps and reduces the time required to deploy changes to your application. Building and maintaining this pipeline is the DevOps Engineer’s primary job.

DevOps Engineers usually craft release pipelines using a Continuous Integration/Continuous Development tool. Tools such as Jenkins, Atlassian, GitLab, and Azure DevOps integrate with source code control tools (usually Git) and handle triggering automated actions in response to repository check-ins. If your team already uses such a tool and is committed to it, you’ll want to find someone proficient in your specific CI/CD toolset.

Many CI/CD toolsets offer a set of predefined actions to assist with the CI/CD process. However, other actions will be specific to your team’s application. A DevOps engineer uses one or more scripting languages to automate complicated deployment tasks your team may have been executing manually. Python, JavaScript, shell scripting, and PowerShell (on Windows) are some of the more popular scripting languages that DevOps Engineers use.

For cloud-deployed software, a DevOps Engineer is also responsible for setting up the entire stack on which the application runs using Infrastructure as Code. A DevOps Engineer should be able to design and implement a stack deployment that can be deployed multiple times to any stage of your release pipeline.

Some engineers implement Infrastructure as Code using a scripting language such as Python. However, it’s more common to use a templating language, such as CloudFormation on AWS or Azure Resource Manager (ARM) Templates on Azure.



Setting Best Practices for Software Development

As part of setting up the build and release pipeline, your DevOps guru will also define best practices for coding and validation of changes. In other words, they’re the point person for your team’s change management approval process.

For example, a DevOps Engineer may work with their team to devise the best way to manage the overall work process. For most teams, this usually means adopting an Agile approach to software development such as Scrum or Kanban. It could also mean defining a code review process and teaching the team how to conduct good reviews.



Monitor Builds and Deployments

The DevOps Engineer is responsible for ensuring the continued health of the team’s CI/CD pipeline. This includes:

  • Monitoring build progress and logs from your team’s CI/CD tool
  • Moving quickly to resolve broken builds and keep changes flowing through the pipeline
  • Observing dashboard metrics as new instances of the application come online
  • Staying alert for errors as your deployment shifts more users over to the new version of your application

Monitoring should occur in all stages of the pipeline. As Atlassian points out, pre-production monitoring means you can stomp out critical errors before they ever reach customers.

Depending on the size of your organization, the DevOps Engineer may supervise all of this themselves. They may also work in conjunction with a Sustained Engineering or Support team that’s ultimately responsible for maintaining application health. In either case, your DevOps Engineer should take the lead in defining what the team needs to monitor.



Be the Git Guru

Ahhh, Git. The free source code control system is a marvelous invention. You can’t be a developer nowadays and not know at least the basics of Git. And yet even seasoned developers will sometimes find themselves mired in Merge Conflict Hell.

A team’s DevOps Engineer should know Git inside and out. They should understand, for example, the difference between a merge and a rebase – and which one to use when. They are the person primarily responsible for defining the team’s branching and merging strategy – and maintaining quality internal documentation for other team members.



What to Look for in a DevOps Engineer

As an engineering manager, I’ve hired multiple DevOps engineers. During the interview process, my loops focus on validation a combination of technical and soft skills:

DevOps knowledge

Does the candidate have the basics of CI/CD down pat? What successes have they accumulated in developing successful pipelines? What setbacks have they encountered – and how have they overcome them?

Cloud platform and DevOps tools

In what DevOps tools is your candidate most experienced? Do they know the tools your team is already using?

A DevOps Engineer will also need to make numerous decisions on whether to buy or build certain parts of the DevOps process. For example, does your team roll its own artifact storage features? Or does it leverage a tool like Artifactory? DevOps Engineers need to remain up to speed on the tools marketplace so they can make these critical buy vs. build decisions.

Leadership

A DevOps Engineer needs to do more than build a pipeline. They need to convince a (sometimes reluctant) team of engineers and stakeholders to change the way they develop software. Does your candidate have experience talking a tough crowd into adopting new processes?

As a manager, I like to use STAR (Situation-Task-Action-Result) questions to determine a candidate’s experience with being a technical leader. So I might ask something like, “Tell me about a time when you received pushback from your team on a process change. What was it and how did you resolve it?”

Growth mindset

The DevOps and cloud spaces are changing constantly. So it’s important that a DevOps Engineer not get overly set in their ways.

I also like to use STAR questions to gauge a candidate’s willingness to grow. For example, what’s the last thing that they learned just because it looked interesting? Did they end up using it on the job? If so, what was the result?

Alternatively, I may ask when was the last time they received critical feedback from their manager. What was it? And how did they use that feedback to improve their job performance?



Alternatives to Hiring a Full-Time DevOps Engineer

You’ve determined that you need more DevOps savvy in your org. But that doesn’t mean you need to start off with a full-time position out of the gate. Maybe you can’t afford a full-time position at the moment. Or perhaps you’d just like to test the waters before diving in with both feet.

Fortunately, there are a couple of alternatives to hiring someone full-time.



Hire a Part-Time DevOps Engineer

You may not need (nor even desire) a full-time team member. It may be enough to hire someone on a part-time basis to construct and maintain your build and release pipeline.

In this scenario, you’d want to find a DevOps Engineer who’s good at building self-service solutions. Your team should be able to kick off builds, perform releases, and monitor rollouts without having a full-time DevOps Engineer on call to oversee a successful outcome.



Migrate to TinyStacks

Another option? Forego the engineer! You can potentially save both time and money by adopting a DevOps tool that essentially provides you “DevOps as a service”.

TinyStacks is one such tool. Built by a team with deep experience building out the Amazon Web Services console, TinyStacks provides an automated approach to DevOps. Using a simple UI Web interface, your team can migrate its application into a full release pipeline – complete with AWS cloud architecture – within the week.

Read a little more on what TinyStacks can do for you and contact us below to start a discussion!

Article by Jay Allen


Source link

How To Use HarperDB Custom Functions With Your React App.

Last week, I got a chance to explore HarperDB – a fast, modern database that allows you to develop full-stack apps.

I’ve developed a ToDo React app with HarperDB Custom Functions.



HarperDB is a distributed database focused on making data management easy.

  • It supports both SQL and NoSQL queries.
  • It also offers to access the database instance directly inside the client-side application.

In this article, let’s learn about HarperDB and how to build a React app using HarperDB Custom Functions!



Let’s talk about HarperDB custom functions:

  • Add your own API endpoints to a standalone API server inside HarperDB.
  • Use HarperDB Core methods to interact with your data at lightning speed.
  • Custom Functions are powered by Fastify, so they’re extremely flexible.
  • Manage in HarperDB Studio, or use your own IDE and Version Management System.
  • Distribute your Custom Functions to all your HarperDB instances with a single click.

harperDB1.JPG



What are we building?

We will create a simple ToDo React App. When we are done, it will look like this when it runs in localhost:

7.JPG



Let’s look at how we develop our To-Do React app:

This ToDo app allows a user to create a task that needs to be completed by the user.



It has 2 states:

  • Active
  • Completed

Users can filter the tasks list based on the status of tasks as well. It will also allow the user to edit a task & delete one as well.

So the main idea is whatever task is created by the user which you can see in the “View All” list, all the tasks will be saved in HarperDB with the help of Custom Functions.



Project setup overview:

Create React App is the best way to start building a new single-page application in React.

npx create-react-app my-app
cd my-app
npm start

Dependencies used:

 "@emotion/react": "^11.5.0",
    "@emotion/styled": "^11.3.0",
    "@mui/icons-material": "^5.0.5",
    "@mui/material": "^5.0.6",
    "@testing-library/jest-dom": "^5.15.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "axios": "^0.24.0",
    "classnames": "^2.3.1",
    "history": "^5.1.0",
    "lodash.debounce": "^4.0.8",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.0.1",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"

it just creates a frontend build pipeline for this project, so we can use HarperDB in the backend.

Alternatively, you can clone the GitHub repository and use the start directory as your project root. It contains the basic project setup that will get you ready. In this project for the CSS you can refer to Tasks.css (srctodo-componentTasks.css)



Let’s talk about the react components which are being used:

This is the folder structure:

file.JPG

In file structure, we can see that Tasks is the container component where we are managing the application’s state, here the app state means the data we are getting from HarperDB using API endpoints, and this data is shared across all child components through props.



Task component (Tasks.jsx):

Here is the file reference in the project:

srctodo-componentTasks.jsx

This component acts as a container component (which is having a task list & task search as a child component)

import React,  useEffect, useCallback, useState, useRef  from 'react';
import  useNavigate, useSearchParams  from 'react-router-dom';
import TaskSearch from './task-search-component/TaskSearch';
import './Tasks.css';
import axios from 'axios';
import debounce from '@mui/utils/debounce';
import TaskItem from './task-list-component/TaskList';
import Snackbar from '@mui/material/Snackbar';

export default function Tasks() {
  const navigate = useNavigate();
  const [searchParams, setSearchParams] = useSearchParams();
  const [taskList, setTaskList] = useState([]);
  const [filteredList, setFilteredList] = useState([]);
  const [open, setOpen] = useState(false);
  const [msg, setMsg] = useState('')
  const selectedId = useRef();
  useEffect(() => 
    getFilteredList();
  , [searchParams, taskList]);

  const setSelectedId = (task) => 
    selectedId.current = task;
  ;
  const saveTask = async (taskName) => 
    if (taskName.length > 0) 
      try 
        await axios.post(
          'your_url_here',
           taskTitle: taskName, taskStatus: 'ACTIVE', operation: 'sql' 
        );
        getTasks();
       catch (ex) 
        showToast();
      
    
  ;

  const updateTask = async (taskName) => 
    if (taskName.length > 0) 
      try 
        await axios.put(
          'your_url_here',
          
            taskTitle: taskName,
            operation: 'sql',
            id: selectedId.current.id,
            taskStatus: selectedId.current.taskStatus,
          
        );
        getTasks();
       catch (ex) 
        showToast();
      
    
  ;

  const doneTask = async (task) => 
    try 
      await axios.put(
        'your_url_here',
        
          taskTitle: task.taskTitle,
          operation: 'sql',
          id: task.id,
          taskStatus: task.taskStatus,
        
      );
      getTasks();
     catch (ex) 
        showToast();
    
  ;

  const deleteTask = async (task) => 
    try 
      await axios.delete(
        `your_url_here/$task.id`
      );
      getTasks();
     catch (ex) 
        showToast();
    
  ;

  const getFilteredList = () => 
    if (searchParams.get('filter')) 
      const list = [...taskList];
      setFilteredList(
        list.filter(
          (item) => item.taskStatus === searchParams.get('filter').toUpperCase()
        )
      );
     else 
      setFilteredList([...taskList]);
    
  ;

  useEffect(() => 
    getTasks();
  , []);

  const getTasks = async () => 
    try 
    const res = await axios.get(
      'your_url_here'
    );
    console.log(res);
    setTaskList(res.data);
     catch(ex) 
        showToast();
    
  ;

  const debounceSaveData = useCallback(debounce(saveTask, 500), []);
  const searchHandler = async (taskName) => 
    debounceSaveData(taskName);
  ;

  const showToast = () => 
    setMsg('Oops. Something went wrong!');
    setOpen(true)
  

  return (
    <div className="main">
      <TaskSearch searchHandler=searchHandler />
      <ul className="task-filters">
        <li>
          <a
            href="javascript:void(0)"
            onClick=() => navigate('/')
            className=!searchParams.get('filter') ? 'active' : ''
          >
            View All
          </a>
        </li>
        <li>
          <a
            href="javascript:void(0)"
            onClick=() => navigate('/?filter=active')
            className=searchParams.get('filter') === 'active' ? 'active' : ''
          >
            Active
          </a>
        </li>
        <li>
          <a
            href="javascript:void(0)"
            onClick=() => navigate('/?filter=completed')
            className=
              searchParams.get('filter') === 'completed' ? 'active' : ''
            
          >
            Completed
          </a>
        </li>
      </ul>
      filteredList.map((task) => (
        <TaskItem
          deleteTask=deleteTask
          doneTask=doneTask
          getSelectedId=setSelectedId
          task=task
          searchComponent=
            <TaskSearch
              searchHandler=updateTask
              defaultValue=task.taskTitle
            />
          
        />
      ))
      <Snackbar
        open=open
        autoHideDuration=6000
        onClose=() => setOpen(false)
        message=msg
      />
    </div>
  );
}

your_url_here = you should replace this with your HarperDB endpoint URL.

For an example of the URL, look below:

16.JPG



Task List (TaskList.jsx):

Here is the file reference in the project:

srctodo-componenttask-list-componentTaskList.jsx

This component is used to render all the list of tasks that we are getting from the HarperDB


import React,  useState  from 'react';
import classNames from 'classnames';
import IconButton from '@mui/material/IconButton';
import DoneIcon from '@mui/icons-material/Done';
import EditIcon from '@mui/icons-material/Edit';
import ClearIcon from '@mui/icons-material/Clear';
import DeleteIcon from '@mui/icons-material/Delete';
import TextField from '@mui/material/TextField';

export default function TaskItem( task, searchComponent, getSelectedId, doneTask, deleteTask ) 
  const [editing, setEditing] = useState(false);
  const [selectedTask, setSelectedTask] = useState();
  let containerClasses = classNames('task-item', 
    'task-item--completed': task.completed,
    'task-item--editing': editing,
  );

  const updateTask = () => 
      doneTask(...task, taskStatus: task.taskStatus === 'ACTIVE' ? 'COMPLETED' : 'ACTIVE');
  

  const renderTitle = task => 
    return (
      <div className="task-item__title" tabIndex="0">
        task.taskTitle
      </div>
    );
  
  const resetField = () => 
      setEditing(false);
  
  const renderTitleInput = task => 
    return (
    React.cloneElement(searchComponent, resetField)
    );
  

  return (
    <div className=containerClasses tabIndex="0">
      <div className="cell">
        <IconButton color=task.taskStatus === 'COMPLETED' ? 'success': 'secondary' aria-label="delete" onClick=updateTask className=classNames('btn--icon', 'task-item__button', 
            active: task.completed,
            hide: editing,
          ) >
          <DoneIcon />
        </IconButton>
       </div>

      <div className="cell">
        editing ? renderTitleInput(task) : renderTitle(task)
      </div>

      <div className="cell">
      !editing && <IconButton onClick=() => setEditing(true); getSelectedId(task) aria-label="delete" className=classNames('btn--icon', 'task-item__button', 
            hide: editing,
          ) >
          <EditIcon />
        </IconButton> 
        editing && <IconButton onClick=() => setEditing(false); getSelectedId(''); aria-label="delete" className=classNames('btn--icon', 'task-item__button', 
            hide: editing,
          ) >
          <ClearIcon />
        </IconButton> 
        !editing && <IconButton onClick=() => deleteTask(task) aria-label="delete" className=classNames('btn--icon', 'task-item__button', 
            hide: editing,
          ) >
          <DeleteIcon />
        </IconButton> 
       </div>
    </div>
  );




Task Search (TaskSearch.jsx):

Here is the file reference in the project:

srctodo-componenttask-search-componentTaskSearch.jsx

This component provides a text box to users where users can enter the name of the task which they need to perform. (Same component we are using while editing a task)


import React from 'react';
import TextField from '@mui/material/TextField';

export default function TaskSearch( searchHandler, defaultValue, resetField ) 
  const handleEnterKey = event => 
    if(event.keyCode === 13) 
      searchHandler(event.target.value);
      event.target.value="";
      if(resetField) 
        resetField();
      
    
  

    return (
        <TextField
        id="filled-required"
        variant="standard"
        fullWidth 
        hiddenLabel
        placeholder="What needs to be done?"
        onKeyUp=handleEnterKey
        defaultValue=defaultValue
      />
    );

Here you can find the complete source code of the ToDo App.

In the Tasks.js component, you can see we are leveraging Custom Function APIs which allows us to save & edit the data from HarperDB.

8.JPG



How we develop an API using HarperDB Custom functions:



Let’s create the schema first:

10.JPG



Created table:

11.JPG



Create a project:

Tip: Before creating a project, you need to enable custom functions, once you click on functions you will see a pop up like below:

12.JPG

Click on the green button “enable the custom function” it will look like 👇

13.JPG



Now let’s create project “ToDoApi” which will look like 👇

15.JPG

Under the section “/ToDoApi/routes” we will see one file example.js contains the API endpoints.



Let’s write our own API endpoints in order to :

  • create a task
  • edit a task
  • delete a task
  • get task



Save Task endpoint:

Which is used to store data in DB

  server.route(
    url: '/saveTask',
    method: 'POST',
    // preValidation: hdbCore.preValidation,
    handler: (request) => 
      request.body= 
        operation: 'sql',
        sql: `insert into example_db.tasks (taskTitle, taskStatus) values('$request.body.taskTitle', '$request.body.taskStatus')`
      ;
      return hdbCore.requestWithoutAuthentication(request);

    ,
  );



Edit Task endpoint:

This is used to edit an existing record in your DB, we are using the same endpoint as the save task but having a different method type as PUT.

 server.route(
    url: '/saveTask',
    method: 'PUT',
    // preValidation: hdbCore.preValidation,
    handler: (request) => 
      request.body= 
        operation: 'sql',
        sql: `update example_db.tasks set taskTitle="$request.body.taskTitle", taskStatus="$request.body.taskStatus" where id='$request.body.id'`
      ;
      return hdbCore.requestWithoutAuthentication(request);

    ,
  );



Delete a task endpoint:

server.route(
    url: '/deleteTask/:id',
    method: 'DELETE',
    // preValidation: hdbCore.preValidation,
    handler: (request) => 
      request.body= 
        operation: 'sql',
        sql: `delete from example_db.tasks where id='$request.params.id'`
      ;
      return hdbCore.requestWithoutAuthentication(request);

    ,
  );



Get task endpoint:

// GET, WITH ASYNC THIRD-PARTY AUTH PREVALIDATION
  server.route(
    url: '/tasks',
    method: 'GET',
    // preValidation: (request) => customValidation(request, logger),
    handler: (request) => 
      request.body= 
        operation: 'sql',
        sql: 'select * from example_db.tasks'
      ;

      /*
       * requestWithoutAuthentication bypasses the standard HarperDB authentication.
       * YOU MUST ADD YOUR OWN preValidation method above, or this method will be available to anyone.
       */
      return hdbCore.requestWithoutAuthentication(request);
    
  );




All about helpers in Custom Functions:

In this, we can implement our own custom validation using JWT.

helper.JPG

In our, ToDo React app on the UI.

How to get the endpoint URL to hit on the UI.

16.JPG



You can host a static web UI:

Your project must meet the below details to host your static UI

  • An index file located at /static/index.html
  • Correctly path any other files relative to index.html
  • If your app makes use of client-side routing, it must have [project_name]/static as its base (basename for react-router, base for vue-router, etc.):
<Router basename="/dogs/static">
    <Switch>
        <Route path="/care" component=CarePage />
        <Route path="/feeding" component=FeedingPage />
    </Switch>
</Router>

The above example can be checked out at HarperDB as well.



Custom Functions Operations:

There are 9 operations you can do in total:

  • custom_functions_status
  • get_custom_functions
  • get_custom_function
  • set_custom_function
  • drop_custom_function
  • add_custom_function_project
  • drop_custom_function_project
  • package_custom_function_project
  • deploy_custom_function_project

You can have a more indepth look at every individual operation in HarperDB docs.



Restarting the Server:

For any changes you’ve made to your routes, helpers, or projects, you’ll need to restart the Custom Functions server to see them take effect. HarperDB Studio does this automatically whenever you create or delete a project, or add, edit, or edit a route or helper. If you need to start the Custom Functions server yourself, you can use the following operation to do so:


    "operation": "restart_service",
    "service": "custom_functions"


That was it for this blog.

I hope you learned something new today. If you did, please like/share so that it reaches others as well.

If you’re a regular reader, thank you, you’re a big part of the reason I’ve been able to share my life/career experiences with you.

Let me know how you will use HarperDB to create your next project.

Follow HarperDB on Twitter for the latest updates.

*Connect with me on Twitter *

If you like this. I encourage you all to sign up for my newsletter.

It’s free. You can ask me your questions via email.

Check out old editions here: The 2-1-1 Developer Growth Newsletter by Ankur




Source link

The CodeNewbie Challenge Is Returning for 2022 with Exciting New Updates



CodeNewbie Challenge 2022 begins on January 31st. Register for Cohort 1 by January 30th.

In early 2020, DEV acquired an incredible, supportive community for early-career software developers and people learning to code called CodeNewbie.

Since then, we’ve embarked on many exciting adventures together including two entirely virtual CodeLand conferences and the creation of CodeNewbie Community: the official home of CodeNewbie built on Forem.

In 2021, we relaunched the CodeNewbie Challenge together. This collection of email-based challenges including (“Start Coding”, “Code More”, “Write More”, and “Get a Job”) existed long before DEV and CodeNewbie joined forces, but together, we updated it and added in additional support options and a central hub on CodeNewbie Community. Those who participated benefitted from structure, public accountability, inspiration, and ample learning opportunities to reach their goals.



We’re thrilled to share that we’re updating the CodeNewbie Challenge for 2022 (#CNC2022).

#CNC2022 returns on January 31st. This time, we’re making a few changes, including:

  • A pre-registration, cohort-based model that allows you to stay in tighter communication with others participating in your chosen challenge
  • Updated resources
  • A brand new “Learn in Public” challenge that will give you the guidance you need to turn your technical learning journey into a tool for others

If you want to make a change in your career or coding journey, we highly encourage you to sign up for Cohort 1 of #CNC2022.

Learn more, pick your challenge, and sign up for Cohort 1 here by January 30th. The challenge officially kicks off on January 31st, 2022.

Cheers to starting to code, coding more, writing more, getting a job, and learning in public with the CodeNewbie Challenge in 2022 ⭐️


Source link

How to Write an Effective Technical Résumé

Getting your résumé writing right is an important step in your developer journey.

Have you ever been a part of the job search process—be it an internship or a full-time opportunity—as a student or a new grad?

If yes, you already know: getting past the résumé screening step, and landing that interview call can often be harder than the actual interview.

It's so hard

Over the next few minutes, you’ll get to know some actionable tips for résumé writing, that you could use to revamp your résumé. This post is inspired by Jessie Newman’s webinar for WWCode, NYC chapter.

Let’s get started.



What goes on a résumé?

Let’s start with this question:

What are companies and hiring managers looking for?

Well, they’re looking for candidates who:

  • can improve the company’s products with their technical expertise,
  • be enjoyable to work with, and
  • can contribute positively to the company’s culture and growth.

Even if the recruiter skims through your résumé for less than a minute, you should stand out as a prospective candidate, yes?

For this to happen, the content on your résumé should be:

  • Recent: Always present information in reverse chronological order—starting with the most recent experience first.
  • Relevant to the role that you’re applying to.

  • Clear even to a reader who has no context.

Typically, your résumé should only be about a page long. And that’s all you’ve got to make an impression on the reviewer.

As they say, “You’re much more than a one-page résumé—but your résumé should not be more than one page.😄



Format of a résumé

There’s no one recommended format to draft your résumé. However, the following sections should typically be present:

- Name and Contact info
- Objective (optional)
- Education
- Technical Experience
- Skills
- Leadership | Volunteering

Let’s now visit each of these sections, and see how you can best structure each of them.



Name and contact info

✅ Include your name, your email address, links to your portfolio/GitHub.

✅ Be sure to check if your email address is professional enough.

✅ Include social media handles—like LinkedIn—only if you’ve updated them.



Objective (optional)

Include the objective section only if you aim at providing some context to the reviewer.

Every line should tell the recruiter something that they don’t already know.

For example, if you’re a CS major applying to a software engineering role, your objective isn’t going to provide any context to the recruiter.

On the other hand, suppose you’re a professional accountant, who’s looking to break into software development. Then, the objective tells the recruiter upfront that you’re trying to switch careers—and they won’t look for a CS degree or developer experience as they skim through your résumé.



Education

Always cite details of your education—starting from your highest qualification first.

study
If you’re a Master’s student, only mention details of your Master’s and undergraduate degree. Some companies do have a certain cut-off GPA, so be sure to include your GPA.

Some people do include Relevant Coursework subsection in their Education tab.

However, you should use it only if needed.

Being a CS major, doing courses in algorithm design and analysis, and operating systems isn’t any interesting to the reviewer. If you’re from a non-CS stream, but have supplemented your coursework with courses from the CS bucket—you may include them in the Relevant Coursework section.



Technical Experience

This section should account for nearly 80% of your résumé, and should include:

  • Relevant work experience and
  • Projects

▶ We’ll talk about this in greater detail in the next section.



Skills

You should always organize your skills by category—ordered by proficiency.

Here’s an example:

Languages: Python, JavaScript
Libraries: NumPy, pandas, scikit-learn
Tools: Git

You should always remember to demonstrate your skills in the other sections.

For example, if Python is the language that you’re most proficient in—your projects should be indicative of your proficiency.



Leadership | Volunteering

If you’ve been volunteering, involved in open-source communities, mentoring and the like, you may include them in this section.

Ensure that you’re communicating your interests and impact clearly, and keep this section short and towards the end of your résumé.



How to describe your technical experience

This section is the most crucial section in your résumé—be sure to draft this section carefully.

Here are a few suggestions on how you should explain your experience and projects.

❌ Do not list down your job responsibilities.
✔ Write what you accomplished.

❌ Do not tell what you learned.
✔ Instead, explain what you built with that knowledge.

❌ Do not use weak language.

Avoid phrases like:

- Helped build, 
- worked as part of the team,
- helped implement

✔ Use strong language that’s impactful.

Say:
- Built,
- Worked on,
- Implemented

❌ Do not be vague when specifying impact.

...worked on speeding up the inference pipeline --> # not quantifying impact

✔ Quantify impact wherever possible—talk numbers!.

...worked on speeding up the inference pipeline by 30% 
by reducing the inference time to 2.5 ms --> #quantifying impact

❌ Do not include many projects without explaining each of them.
✔ Explain your projects clearly in detail—prioritize quality over quantity.

  • Be sure to specify the programming language, and tech stacks used.
Built a ____ using JavaScript, React.

Used Python to code a process scheduler.

  • Never leave the recruiter guessing why the project is interesting/relevant. Explain clearly.

Now that you know how to draft all major sections in your résumé, let’s list down a few concluding points.



Points to remember

  • Have a résumé for every role that you’d be applying to.

If you’re interested in both software engineering and data analytics, be sure to draft a dedicated résumé for each of these roles.

  • Don’t be terse in explaining your projects—including portfolio links doesn’t suffice.

The recruiter may not have time to look at your portfolio. So your résumé should do the talking for you.

  • Do not use fuzzy language just to make your projects sound look cool and complicated.

explain me

Prefer using simple and clear language instead—just the way you’d explain to your friends.

🎯 And you’ve reached the end of this post on best practices in résumé writing.



Conclusion

Thanks for reading all the way up to here!😄

Hope you found this post helpful. If you know someone who’d find this useful, do share with them as well.

If you’re currently looking for opportunities, I wish you loads of luck in your endeavors.
good-luck


Source link

Insights into a working day of a developer in a project

Today was my first day on the new project team. Although today’s focus was on the setup, I already learned a lot of (useful) things and tools that I didn’t know before. (I guess that’s the great part of always working in other project teams).

Let me describe today in more detail 🤓

Daily Scrum Meeting
I attended the usual Daily for the first time today. The project has been going on for several months and I’m new to it (this is common, people coming and going during the project). All the devs talked about their issues and the latest status.

I had been assigned a mentor 🥰 with whom I set up my laptop. By the way, this is an additional laptop, there is an extra laptop for each project for security reasons. I was given all the access to the tools they use, Microsoft Teams, GitLab, etc.

Jira
New for me was that we work with Jira, an agile management tool, with Scrum board (there are also other boards like Kanban). There all current issues are entered in the Scrum Backlog, active ones were assigned to a Dev, in the Product Backlog you can find the whole list of all issues. Jira is a very clear and good tool to work effectively as a Scrum team.

As you can see, Scrum is very present, so I recommend you to get familiar with the framework before your first job. It will definitely come across well in the interview if you have already dealt with it.

Jenkins
Furthermore, we use Jenkins, also new for me, with which I guess you can build, deploy and automate the software. I haven’t used it yet, so I don’t know anything about it.

CMD Shortcuts
Shortcuts I learned today in the CMD 📝: when you type ‘cd ‘, you can tab through all the existing folders in your current folder to select the one you want and don’t have to remember exactly what the folders are called. And if you want to run an already executed command again, you can tab through all the previous commands and select the one needed with the up arrow key. Very handy, I wish I had known it earlier.

GitLens
GitLens was also recommended to me to use. It is an extension in VSC that allows you to run git commands very quickly. It shows available branches, which one has merged into which one and much more. 😵 I have never seen so many branches in one project…. My issue has the number 875 😅

NVM
I also had to install NVM, a node version manager. I heard about it for the first time. We use it because webpack doesn’t always have the same version in the different branches. And for everything to work, you have to select which node version you want to work with in each branch using e.g. nvm use 16.13.1.

Today was great. 🥳 I learned so many new things without writing a single line of code. I’m really looking forward to finally getting started with my issue.

Thank you

Thanks for your reading and time. I really appreciate it!


Source link

Self-Taught Developer Journal, Day 29: TOP JavaScript Fundamentals Part 2 – Practice and Knowledge Check

Today I completed The Odin Project JS Fundamentals Part 2 Knowledge Check Section after reviewing all of the materials.



Knowledge Check

  1. What are the eight data types in JavaScript?
    Numbers, BigInt, Strings, null, undefined, Boolean, Objects, Symbols
  2. Which data type is NOT primitive?
    Objects
  3. What is the relationship between null and undefined?
    The expression, null == undefined, returns true when using the loose equality operator, “==”, but not for, “===”
  4. What is the difference between single, double, and backtick quotes for strings?
    Single and double both behave the same. Backtick quotes can format strings with variables and expressions.
  5. What is the term for embedding variables/expressions in a string?
    Template literals
  6. Which type of quote lets you embed variables/expressions in a string?
    Backticks
  7. How do you embed variables/expressions in a string?
    $…
  8. How do you escape characters in a string?
    Put a blackslash, “”, in front of a character
  9. What are methods?
    Actions performed on Objects
  10. What is the difference between slice/substring/substr?
    Slice extracts a part of a string and returns the extracted part in a new string.
    Substring is similar to slice, but can’t use negatives indices
    Substr is similar to slice, but the second parameter specifies the length of the extracted part.
  11. What are the three logical operators and what do they stand for?
    && (AND), || (OR), ! (NOT)
  12. What are the comparison operators?
    Operators that compare values between operands
  13. What are truthy and falsy values?
    Values that return the boolean value true or false
  14. What are the falsy values in JavaScript?
    0, empty string, null, NaN, and undefined
  15. What are conditionals?
    evaluates whether a statement/expression is true or false
  16. What is the syntax for an if/else conditional?
    Refer to end
  17. What is the syntax for a switch statement?
    Refer to end
  18. What is the syntax for a ternary operator?
    condition ? value1: value2;
  19. What is nesting?
    Putting a statement inside of another statement, therefore nesting them.

For Question 16:

if 
  ...
 else 
  ...

For Question 17:

switch (condition) 
case a:
code block
break
default:
code block




Resources

The Odin Project Landing Page Project


Source link