DEV Community: YusufAdel

15 web developer interview questions...

YusufAdel — Sun, 05 Sep 2021 17:33:22 +0000

Advanced Interview Questions

The following will cover the senior web developer interview questions but I suggest you go through them even if you are a fresher or an intermediate web developer candidate

0- What are the types of popup boxes present in JavaScript?

There are three types of dialog boxes, which are used in JavaScript:

type	usage
alert	Presents users with a message and an OK button
Confirm	Gives the users a window with OK and Cancel buttons
Prompt	Shows the user input, alongside OK and Cancel buttons

Advanced Interview Questions

The following Blog will cover the senior web developer interview questions but I suggest you go through them even if you are a fresher or an intermediate web developer candidate

What are the types of popup boxes present in JavaScript?

1- There are three types of dialog boxes, which are used in JavaScript

The <window.onload> event is not called until a page is completely loaded with the entire styling from CSS and images. The event does add a bit of delay when rendering a web page.

With the <onDocumentReady> event, it will wait only till the DOM is initialized and will begin the event action. This ensures to reduce any delays in actions.

2- How is type conversion handled in JavaScript?

JavaScript supports automatic type conversion. Since it is weakly typed, you can pass a function as an argument into another function easily.

This ensures that there are no errors or data type-associated warnings as values get converted to the required data type automatically.

3- What is the meaning of the scope of a variable in JavaScript?

Scope refers to the accessibility of functions and underlying variables in the running environment. There are two scopes supported in JavaScript:

Local scope: Here, values and functions declared inside the same function function can only be accessed within that function and not outside it. Consider the following example:

// Code present here cannot use localVariable
function myFunction() {
  var localVariable = "This is a local variable";
  // Code present here can use localVariable
}

Global scope: If a variable is declared as global, it can be accessed from anywhere in the application. Consider the following example:

var globalVariable = "This is a Global variable";
// Code present here can use globalVariable
function myFunction() {
  // Code present here can also use globalVariable
}

4- How are comments used in JavaScript?

JavaScript supports two types of comment insertion in the code. Single-line comments and multi-line comments.

Single-line comment: “//” is used for single-line comment insertion
Example:

//This is a single-line comment

Multi-line comment: `/**/” is used to add multi-line comments
Example:

js /* This is a multi-line comment*/

Coming to the next set of interview questions for web developers, here is a common question for JavaScript.

5- What are undefined and undeclared variables in JavaScript?

Variables that have been declared already but not initialized are known as undefined variables.

On the other hand, if a variable is being used in a program without being declared, then it is considered as an undeclared variable.

Consider the following example:

js var undefVar; alert(undefVar); // undefined variable alert(notDeclared); // accessing an undeclared variable

6- What is the method used to submit forms in JavaScript?

Forms can be submitted easily in JavaScript by calling the following method:

document.forms[0].submit();
Here, Zero 0 denotes the index of the form.

7- Why is keyword used a lot in JavaScript?

The <this> keyword is used to access the current object present in a program. This object resides inside a method, and the keyword is used for referencing the corresponding variable or object.

8- What is the use of the ‘defer’ attribute in JavaScript?

The attribute is used as a boolean type attribute. It is used to delay the execution of the JavaScript code on a web page until the parser completely loads and initializes the page.

Example:

<script src="/example.js" defer></script>

9- How can you prioritize SEO, maintainability, performance, and security in a web application?

This is a commonly asked question in a Web Development interview. Here, the interviewer is trying to assess your understanding of the working environment in the firm you’ve applied for.

If it is a large firm, then security will get higher priority over SEO. Whereas, if it is a publication firm, SEO gets the preference. A little groundwork about the company should help you answer this question.

The next web developer interview question we will look at is regarding jQuery. Check it out.

10- What is the result if a jQuery Event Handler returns false?

If the jQuery Event Handler returns a boolean false value, it simply means that the event will not execute further and will halt the execution for the particular action it is associated with.

11- What is the use of the each() function in jQuery?

The each() function in jQuery is used to iterate over a set of elements. A function can be passed to the each() method. This will result in the execution of each of the events for which the object has been called.

12- What is pair programming?

Pair programming is a scenario where you will be working closely with a colleague on the project, and this is done to help solve the problems at hand. If the development scenario is fast-paced, Agile development might not work efficiently. The interviewer asks this question to see if you can work with other people easily and effectively.

12- What is the use of the $() function in jQuery?

The $() function is used as a wrapper to wrap objects into their jQuery counterparts. This is done to give users the ability to call any method that is defined for the jQuery object.

Note: Selectors can also be passed to the $() function, resulting in the output of a jQuery object that contains matched DOM elements.

13- What are the advantages of using a content delivery network (CDN) in jQuery?

CDNs are widely used in jQuery as they offer an ample number of advantages for users.

CDNs cause a significant reduction in the load for the server.
They provide large amounts of savings in the bandwidth.
jQuery frameworks load faster due to optimizations.
CDNs have a caching ability that adds to quicker load times.

14- List out the advantage of HTTP/2 as compared with HTTP 1.1?

The advantage of HTTP/2 compared to HTTP/1.1 is

HTTP headers data compression
Server push technologies
Over a single TCP connection parallel loading of page elements
Prioritization of request

15- What are the types of CDNs supported in jQuery?

There are two widely used CDNs with jQuery:

Microsoft: Used to load from jQuery AJAX CDN

Google: Used to load jQuery from the Google libraries API

If you are looking forward to becoming proficient in Web Development, make sure to check out Intellipaat’s latest offerings for Web Development Online Course. With these programs, you can become an expert in Web Development and earn a course certificate as well.

Object Comparisons: “is” vs “==”

YusufAdel — Fri, 03 Sep 2021 14:55:41 +0000

The == operator compares by checking for equality: if these Python objects we compared them with the == operator, we’d get both objects are equal as an answer.

The is operator, however, compares identities: if we compared our
objects with the is operator, we’d get these are two different objects as an answer.

let’s take a look at some real Python code.

>>> a = [1, 2, 3]
>>> b = a

Let’s inspect these two variables. We can see that they point to
identical-looking lists:

>>> a
[1, 2, 3]
>>> b
[1, 2, 3]

Because the two list objects look the same, we’ll get the expected result
when we compare them for equality by using the == operator:

>>> a == b
True

However, that doesn’t tell us whether a and b are actually pointing to
the same object. Of course, we know they are because we assigned
them earlier, but suppose we didn’t know—how might we find out?

The answer is to compare both variables with the is operator. This
confirms that both variables are in fact pointing to one list object:

>>> a is b
True

Let’s see what happens when we create an identical copy of our list
object. We can do that by calling list() on the existing list to create
a copy we’ll name c:

>>> c = list(a)

Again you’ll see that the new list we just created looks identical to the
list object pointed to by a and b:

>>> c
[1, 2, 3]

Now this is where it gets interesting. Let’s compare our list copy c with
the initial list a using the == operator. What answer do you expect to
see?

>>> a == c
True

Okay, I hope this was what you expected. What this result tells us
is that c and a have the same contents. They’re considered equal by
Python. But are they actually pointing to the same object? Let’s find
out with the is operator:

>>> a is c
False

This is where we get a different result. Python is telling us
that c and a are pointing to two different objects, even though their
contents might be the same.

Conclusion:

An "is" expression evaluates to True if two variables point to the same (identical) object.
An "==" expression evaluates to True if the objects referred to by the variables are equal (have the same contents).

Why you should use Cookiecutter in you next Django Project.

YusufAdel — Tue, 31 Aug 2021 18:03:16 +0000

What is Cookiecutter?

A command-line utility that creates projects from cookiecutters (project templates), e.g. creating a Python package project from a Python package project template.

Features

Cross-platform: Windows, Mac, and Linux are officially supported.
You don’t have to know/write Python code to use Cookiecutter
Works with Python 2.7, 3.5, 3.6, 3.7, 3.8 ,PyPy and PyPy3.
Project templates can be in any programming language or markup format:
Python, JavaScript, Ruby, CoffeeScript, RST, Markdown, CSS, HTML, you name it.
You can use multiple languages in the same project template.
Simple command line usage:

Install cookiecutter

pip install --user cookiecutter

or you can use any package manager

Usage

First, clone a Cookiecutter project template:

$ git clone git@github.com:audreyr/cookiecutter-pypackage.git

Make your changes

Modify the variables defined in cookiecutter.json.

Open up the skeleton project. If you need to change it around a bit, do so.

You probably also want to create a repo, name it differently, and push it as your own new Cookiecutter project template, for handy future use.

Generate your project

Then generate your project from the project template:

$ cookiecutter cookiecutter-pypackage/

and thats is it, your are ready to go.

reference

Documentation: https://cookiecutter.readthedocs.io
GitHub: https://github.com/cookiecutter/cookiecutter
PyPI: https://pypi.python.org/pypi/cookiecutter

helpful language feature gets less attention than it deserves

YusufAdel — Sun, 15 Aug 2021 14:47:28 +0000

I’m going to give you an introduction to using assertions in Python.

At this point, you might be wondering “What are assertions and what
are they good for?” Let’s get you some answers for that.

At its core, Python’s assert statement is a debugging aid that tests a
condition. If the assert condition is true, nothing happens, and your
program continues to execute as normal. But if the condition evaluates to false, an AssertionError exception is raised with an optional
error message.

Assert in Python — An Example

Here is a simple example so you can see where assertions might come
in handy. I tried to give this some semblance of a real-world problem
you might actually encounter in one of your programs.

Suppose you were building an online store with Python. You’re working to add a discount coupon functionality to the system, and eventually you write the following apply_discount function:

def apply_discount(product, discount):
    price = int(product['price'] * (1.0 - discount))
    assert 0 <= price <= product['price']
    return price

Notice the assert statement in there? It will guarantee that, no mat-
ter what, discounted prices calculated by this function cannot be lower
than $0 and they cannot be higher than the original price of the prod-
uct.
Let’s make sure this actually works as intended if we call this function
to apply a valid discount. In this example, products for our store will
be represented as plain dictionaries. This is probably not what you’d
do for a real application, but it’ll work nicely for demonstrating asser-
tions. Let’s create an example product—a pair of nice shoes at a price
of $149.00:

>>> shoes = {'name': 'Fancy Shoes', 'price': 14900}

By the way, did you notice how I avoided currency rounding issues
by using an integer to represent the price amount in cents? That’s
generally a good idea… But I digress. Now, if we apply a 25% discount
to these shoes, we would expect to arrive at a sale price of $111.75:

>>> apply_discount(shoes, 0.25)

Alright, this worked nicely. Now, let’s try to apply some invalid dis-
counts. For example, a 200% “discount” that would lead to us giving
money to the customer:

>>> apply_discount(shoes, 2.0)
Traceback (most recent call last):
File "<input>", line 1, in <module>
apply_discount(prod, 2.0)
File "<input>", line 4, in apply_discount
assert 0 <= price <= product['price']
AssertionError

As you can see, when we try to apply this invalid discount, our
program halts with an AssertionError . This happens because a
discount of 200% violated the assertion condition we placed in the
apply_discount function

You can also see how the exception stacktrace points out the exact line
of code containing the failed assertion. If you (or another developer
on your team) ever encounter one of these errors while testing the
online store, it will be easy to find out what happened just by looking
at the exception traceback.

This speeds up debugging efforts considerably, and it will make your
programs more maintainable in the long-run. And that, my friend, is
the power of assertions.

REFERENCE: Python Tricks A Buffet of Awesome Python Features by Dan Bader

Battery Included Philosophy, python

YusufAdel — Mon, 05 Jul 2021 17:45:10 +0000

Python has a “batteries included” philosophy. This is best seen through the sophisticated and robust capabilities of its larger packages.

Feel free to share with us your experience in handling jobs with one or Built-in modules that will help in day-to-day work.

tools that help you produce web code more efficiently.P1

YusufAdel — Sat, 08 May 2021 22:54:20 +0000

Since the modern developer tooling ecosystem is so large, it's helpful to have a broad understanding of the major issues that the tools address. If you type "front-end developer tools" into your favorite search engine, you'll get a wide range of results, including everything from text editors to browsers to note-taking pens.

From a birds's view Client-side methods can be classified into three different types of problems to solve from a high-level perspective:

Safety net — Tools that are useful during your code development.
Transformation — Tools that transform code in some way, e.g. turning an intermediate language into JavaScript that a browser can understand.
Post-development — Tools that are useful after you have written your code, such as testing and deployment tools.

in this article we will mention the first type.

Safety net.

Linters

Linters are tools that go through the code and inform you if there are any errors, what kind of errors they are, and the code lines they are on. Linters may also be programmed to not only report errors, but also any breaches of a style guide that your team is following (for example, code that uses the incorrect number of spaces for indentation).

Source code control

Source code management, also known as version control systems (VCS), is critical for archiving and collaborative work. In a standard VCS, you keep a local copy of the code you're working on. You then "push" the updates to a "master" version of the code saved on a remote server. So that a team of developers does not constantly overwrite each other's work, there is normally a means of monitoring and scheduling what modifications are made to the "master" copy of the code, and when.

Git most people use these days

It's a Command Line tool but you can use it via friendly user interfaces
you can use a hosted source control website such as GitHub, GitLab, or BitBucket.

Code formatters

Script formatters are similar to linters, in that instead of pointing out mistakes in the code, they normally make sure it's formatted properly, according to your design guidelines, and preferably patch any errors they detect automatically.

Prettier is a well-known example of a code formatter, and we'll use it later in the module.

Bundlers/packers

These are tools that prepare your code for production, such as "tree-shaking" to ensure that only the parts of your code libraries that you use are included in your final production code, or "minifying" to remove all whitespace from your production code and make it as small as possible before uploading it to a server.

Parcel is an especially smart application that falls into this group — it can do all of the above, but it also lets you organise assets like HTML, CSS, and image files into compact packages that you can then deploy, as well as automatically adding dependencies anytime you attempt to use them. It can also help you with any code transformation.

Webpack is another well-known packing platform that performs related functions.

Hosting a Website or online Resume on GitHub (Free!)

YusufAdel — Fri, 23 Apr 2021 19:39:39 +0000

GitHub is not only a great place to store and share your code with others
but they also offer free web hosting of your HTML, CSS, and JavaScript projects!
want something like https://yusufadell.github.io

follow these 8 easy steps
Firstly you should

1-Create a GitHub account on github.com.

after that you have 2 choices.
create a repository from the website then chose setup on desktop

or you can

2-download desktop version:

windows and mac >> this website

for ubuntu-linux

3-(On Mac): After you login, click advanced and make sure that your name and email are correct. Then, click "Install Command Line Tools", just in case you want to start using the command line later in life.

4-Create a new repository in your GitHub application.

Name it your-username.github.io

The name is very important.
Make sure the "Push to GitHub?" box is checked.

5-Move your website's files into the folder that GitHub just created when you made the repository.

IMPORTANT:

Your homepage HTML file must be called "index.html", and it must exist in the top-level directory.

6-Back in the GitHub application, you should see your files in the left column. Make sure they are all checked. If so, enter a message in the text box called "commit summary", something like "initial commit." Then, click the commit button.

7-Click the "Publish repo" button in the top right corner.

8-Give it about 10 minutes, then check your-
username.github.io. Your website should be there!

Interesting in Using a custom Domain name

consider reading this post

Coding is after Design.

YusufAdel — Sat, 17 Apr 2021 20:51:33 +0000

Software design and coding are interconnected, but they are not the same. While many people, including programmers, often view programming as binary (right or wrong, good or bad), the reality is much more subjective. There are usually multiple ways to solve a problem, and this is where code design becomes crucial.

Just as GUI design involves visual elements, code also requires careful design. A software designer, much like a graphic designer, typically doesn’t write any code. Instead, they focus on understanding the project requirements and setting up a functional specification that outlines the technologies, data architecture, and information flow. They define the software’s functionalities and create a high-level blueprint of the software to be developed.

This blueprint is then handed over to a team of programmers who write the actual code to bring the design to life. Ideally, a software designer should have coding experience and a solid understanding of data architecture and workflows. They need to be logical and knowledgeable about the technologies being used to ensure the design is practical and implementable.

In summary, effective software development relies on a clear distinction and collaboration between design and coding, with each role contributing its unique expertise to the final product.

Start a new job, automate tools setup.

YusufAdel — Sat, 17 Apr 2021 14:43:40 +0000

Feel free to share your scripts

Scripts: that installs all the tools you need

Objective of this discuss is to find many solutions as possible for different platforms to help Getting start with setting up necessary tools

By the end of this discuss, I hope we get a useful solution for automating setups for various OS specially ~~Debian based distros~~

1,000.000 open source project under you belt

YusufAdel — Fri, 09 Apr 2021 20:45:22 +0000

the tool is here
I was trying to find a new function for a problem i was trying to solve then i faced this miracle search engine that would save ton of effort for any developer and i want to share it with you.

Also it would be a good opportunity to also share some tools that you find so much useful and increase your productivity.

here is one of the search examples "ordereddict"

it gives you the file which the code came from and also the open source project which contain this file.

provived with related content in same language

even in other languages for extended usage

supported languages

python, java, c#, c++, Go, Js, TS

and there is the awesome search engine ready to find your lost piece to complete your project
Click Here

Design, Coding, Testing and Maintenance.

YusufAdel — Thu, 08 Apr 2021 20:39:35 +0000

Never code until the specifications are precise and complete.

I'm going to survey a great deal of ground, but mainly from a bird’s-eye view, going to expand some of the principles in software engineering

what is software engineering?

It is the study and practice of methods helpful for the construction and maintenance of large software systems. Although small by realistic standards, we are going to illustrate necessary aspects of software engineering.

phases of life cycle

Analyze the problem precisely and completely. Be sure to specify all necessary user interface with care.
Build a prototype and experiment with it until all specifications can be finalized.
Design the algorithm, using the tools of data structures and of other algorithms whose function is already known.
Verify that the algorithm is correct, or make it so simple that its correctness is self-evident.
Analyze the algorithm to determine its requirements and make sure that it meets the specifications.
Code the algorithm into the appropriate programming language.
Test and evaluate the program on carefully chosen test data.
Refine and repeat the foregoing steps as needed for additional classes and functions until the software is complete and fully functional.
Optimize the code to improve performance, but only if necessary.
Maintain the program so that it will meet the changing needs of its users.

we will handle the primary way in which the user and the software engineer attempt to understand each other and establishes the standard by which the final project will be judged. Among the contents of this specification will be the following:

Functional requirements for the system: what it will do and what commands will be available to the user.
Assumptions and limitations on the system: what hardware will be used for the system, what form must the input take, what is the maximum size of input,what is the largest number of users, and so on.
Maintenance requirements : anticipated extensions of the system, changes in hardware, changes in user interface.
Documentation requirements : what kind of explanatory material is required for what kinds of users.

The requirements specifications state what the software will do, not how it will be done. These specifications should be understandable both to the user and to the programmer. If carefully prepared, they will form the basis for the subsequent phases of design, coding, testing, and maintenance.

conclusion
I want to give a small advice Be sure you understand your problem before you decide how to solve it.
and we will be continuing what we have start with forming the basis of software life cycle and go throw SDLC Models & Methodologies.

how to determine a field to get in deep with if you a cs student?

YusufAdel — Thu, 08 Apr 2021 19:49:27 +0000

the more i know the tech world the more i get confused to choose what I'm really want to do.

i have been studying python for over a six months.

doing some cool stuff with it like web development, data visualization, building games, discovering the software world in detailed with it, beside solving problems for over three months.
and i really don't know where i should focus most of my effort to, if you can help me please don't think twice and share you knowledge with me.