#front-end-development

Learn to code in 5 months, get hired, and thrive as a web developer
▻https://hackernoon.com/learn-to-code-in-5-months-get-hired-and-thrive-as-a-web-developer-5ab683

https://cdn-images-1.medium.com/max/750/1*FRSrcbGuLEXvvuzaxdmMeg.jpeg

Nowadays we can’t imagine our lives without websites and apps — they changed everything. And as web development continues to grow exponentially, there remains an immense demand for web developers that is projected to grow over a 10-year period.With a wide range of possible ways to become a web developer, most learners are not sure how to begin.In this article, you will find a step-by-step plan on how to become a web developer in 5 months. This article answers three main questions:Part 1: WHY learn to code?Part 2: WHAT you will learn? (the 5-month plan)Part 3: WHEN to start looking for a job?Part 1: WHY learn to code?You can improve your yearly incomeAccording to Paysa, a salary comparison website, “A Web Developer earns an average of $91,587, ranging from $77,544 to $103,370, with top earners (...)

#front-end-development #learn-to-code-online #javascript #learning-to-code #web-development

Avoiding Race Conditions when Fetching Data with React Hooks
▻https://hackernoon.com/avoiding-race-conditions-when-fetching-data-with-react-hooks-220d6fd0f66

https://cdn-images-1.medium.com/max/1024/1*okLGlm1oBbTkR9OIm--MYA.jpeg

Man jumping over clockAbout a month ago, I posted an example of fetching data using React Hooks to Twitter. While it was well-intended, Dan Abromov (of the React core team) let me know that my implementation contained a race condition. Consequently, I promised to write a blog post correcting my implementation. This is that post!Note: If this article helps you, please help spread the word by lending a clap (or 50)! ??SetupIn our example app, we are going to fake-load people’s profile data when their names are clicked. To help visualize the race condition, we’ll create a fakeFetchfunction that implements a random delay between 0 and 5 seconds.const fakeFetch = person => return new Promise(res => setTimeout(() => res($person's data), Math.random() * 5000); );;Initial (...)

#react-hook #reactjs #front-end-development #asynchronous #javascript

Overview of how does #css works behind the scenes?
▻https://hackernoon.com/overview-of-how-does-css-works-behind-the-scenes-498d98b0e404?source=rss

https://cdn-images-1.medium.com/max/960/1*wpvwCo9GaT9MqVIjfoPYSA.jpeg

FrontamentalsLet’s start by understanding what actually happens to our CSS code when we load up a web page in a browser.When a browser starts to load the initial #html file, it takes the loaded HTML code and parses it, which means that it will decode the code line by line. By this process, the browser builds the so-called DOM (Document Object Modal) which describes the entire web document in a tree with parent, children and sibling elements.HTML ParsingAs the browser parses the HTML, it also finds the stylesheets included in the HTML head and just like HTML, CSS is also parsed.But the parsing of CSS bit more complex.There are two main steps that are performed during the CSS parsing phase :1. Conflicting CSS declarations are resolved (also known a cascading)2. Process final CSS values (for (...)

#front-end-development #web-development

Hacking Custom Checkboxes And Radios
▻https://hackernoon.com/hacking-custom-checkboxes-and-radios-5d48230440d?source=rss----3a8144eab

https://cdn-images-1.medium.com/max/1024/1*cTzsWgsSGnHrA5Vocmlr1A.jpeg

Cosmetic improvements to checkboxes and radios using CSSRadios (or radio buttons) and checkboxes are very important input elements commonly found in so many forms on the web.Checkboxes are used where multiple values from a list of predefined values may apply — for example, marking multiple files for deletion from a list of files.Radio buttons on the other hand are used where only one value is applicable — for example, selecting gender from a list.In this tutorial, we’ll examine using a step-by-step approach, how to improve the aesthetics and appearance of radios and checkboxes using #css while still preserving the accessibility of the input elements.In order to fully appreciate this tutorial, a basic understanding of CSS — selectors and style rules is required. However, you don’t really have to be (...)

#software-development #web-development #front-end-development #hackernoon-top-story

Vue.js: Good, Bad, and Choice
▻https://hackernoon.com/vue-js-good-bad-and-choice-dcc1d27f82c6?source=rss----3a8144eabfe3---4

https://cdn-images-1.medium.com/max/1024/1*ACR0gj0wbx91V_xgURifWg.png

For most people building a new front end application nowadays, the choice of framework/library seems to come down to either Angular or React for the most part. Often times, people don’t give enough love to Vue.js. So, I want to share some light on Vue.js and my personal experience working with Vue.js for a production application. Together, we’ll try to answer the question: Is Vue.js the right framework for you?Note: I’m not trying to say Vue.js is better than React, Angular, or even any other front end frameworks. This is just my personal experience using Vue.js in my project.For those of you new to Vue.js or never even heard of Vue.js, Vue.js is a #javascript front end framework that was initially released in 2014 and was developed by Evan You. From that time on, Vue.js has been (...)

#web-development #front-end-development #frontend #vuejs

Planning to Switch Site From Html to Gatsby?
▻https://hackernoon.com/creating-a-portfolio-with-gatsby-and-reactjs-beware-caa290aa5c00?source=

https://cdn-images-1.medium.com/max/1024/1*h1pmDDz3GBKLcgZCPHl4dw.png

Here’s what I learned when I built my #portfolio with Gatsby and ReactJSThe days of WordPress days are all gone now. Even after being a backend developer for 3 years, playing around with PHP still haunts me. I think this is true for most of the Python developers out there. Also, who would want a heavy site for a single page portfolio right?Why I Hate Wordpress?Well, Duh… It’s PHPI moved my blogs to medium, hence all I wanted was a lightweight single page site.Now that the blogs are moved to medium, I no longer have to host my site anywhere, meaning I don’t have to pay a server.At a point, the amount of time I spent with figuring out a plugin, and a template was so much that I decided I would be well off writing things on my own.Why Gatsby?Gatsby is a #react-based, GraphQL powered static site (...)

#gatsbyjs #front-end-development #javascript

12 #javascript Concepts That Will Level Up Your Development Skills
▻https://hackernoon.com/12-javascript-concepts-that-will-level-up-your-development-skills-b37d16

https://cdn-images-1.medium.com/max/1024/1*zDY1styY9gAbl9DEeAS6DA.jpeg

12 Concepts That Will Level Up Your JavaScript SkillsJavaScript is a complex language. If you’re a JavaScript developer at any level, it’s important to understand its foundational concepts. This article tackles 12 concepts that are critical for any JS developer to understand, but in no way represents the full breadth of what a JS developer should know.Note: If you enjoy this article, please give it a clap ? to help spread the word!I will be continuously updating this list in a Github repository called JS Tips & Tidbits. Please star ⭐ and share if you want to follow along!1. Value vs. Reference Variable AssignmentUnderstanding how JavaScript assigns to variables is foundational to writing bug-free JavaScript. If you don’t understand this, you could easily write code that unintentionally (...)

#software-development #front-end-development #programming #nodejs

How environment file works in #angular in detail
▻https://hackernoon.com/how-environment-file-works-in-angular-in-detail-59a65ffaa072?source=rss-

https://cdn-images-1.medium.com/proxy/1*xQW9Spiz8U0tNEuX_m2blw.jpeg

In this article, we will see how environment.ts file works. We will create our custom config files and inject them into our application based on the mode (development or production ). It would be somewhat the same as our environment files.So let’s start with the basic template.Now let’s start by adding a config file in our project which exports an object and let’s name that as ConfigurationObject. to keep things simple I have attached only two properties to it. One property is the URL, and the other is the mode.export const ConfigurationObject :any= url:’▻http://localhost:9001', isProduction:falseLet’s create one type also which has the same definition as our Configuration object. So now our code will look something like:// this is our type export interface Configuration url:string, (...)

#development #configuration-management #front-end-development #javascript

Top 5 Free #jquery Courses for Web Developers — Best of Lot
▻https://hackernoon.com/top-5-free-jquery-courses-for-web-developers-best-of-lot-9f65a1ff25b6?so

https://cdn-images-1.medium.com/max/1024/1*4gfqUG6z6HtvQJnCztzckQ.png

Top 5 Free jQuery Courses for Web Developers — Best of LotThe Complete jQuery Course: From Beginner To Advanced!Hello guys, if you are thinking to learn jQuery and looking for some awesome free resources e.g. books, tutorials, and online courses then you have come to the right place.In this article, I am going to share some of the best free jQuery courses from Udemy and Pluarlsight which you can take to learn this awesome #javascript library.In the past, I have also shared some free books and tutorials on jQuery, which complements these courses. You can also take a look at then while learning different parts of jQuery.Before I share these free courses, let me brief you about what jQuery is and why you should learn it? Well, jQuery is a JavaScript library but unlike any other library it is (...)

#web-development #programming #front-end-development

Whether You Love or Hate Facebook, #graphql is Awesome
▻https://hackernoon.com/whether-you-love-or-hate-facebook-graphql-is-awesome-bbf67f33fe10?source

https://cdn-images-1.medium.com/proxy/1*8gJ4njeOI4lYObngZvBgCA.png

Let’s time travel a bit. Imagine you’re a developer back in the mid-2000s. You’re working on building a web application, and you are solving for the desktop Internet browser because it’s the only platform available. It’s easier to keep your server and client codebase integrated and let the framework abstract away the client-server communication.Fast forward a few years — browsers have now matured to support HTML5 and JavaScript, permitting richer client-side capabilities. At this point in time, the front-end developer emerged. Although developers began to diverge in their roles and responsibilities to keep up with evolving technological advancements, monolithic frameworks such as PHP, Ruby-on-Rails, and ASP.NET continued to dominate the developer ecosphere thanks to their simplicity, (...)

#api #mobile-app-development #front-end-development #low-code

The #react Developer Tools You Should Know in 2019
▻https://hackernoon.com/the-react-developer-tools-you-should-know-in-2019-e681dc4f4332?source=rs

https://cdn-images-1.medium.com/max/1024/1*y2atu3xwACTiPxDbBZbtKA.png

Useful tools to optimize your React workflow in 2019React takes the lead into 2019While the frontEnd world knew some turbulence in the past decade, React’s composable and extendable approach has proved itself viable and sustaining during the past couple of years. As it seems, 2019 will only mark another year of growth for React and it’s ecosystem, which has been growing rapidly.This might be a good time to take a look at some of the best features, tools and libraries to introduce into your React workflow this year, to make the best of it. All of these are open source, so feel free to go ahead and give them a try.Hopefully, these great tools can help speed your workflow and open the door to new capabilities when working in React in 2019. Feel free to comment, add your own suggestions and (...)

#javascript #front-end-development #react-tools #react-developer-tools

An Introduction to #pug
▻https://hackernoon.com/an-introduction-to-pug-1dbe7cfcacd8?source=rss----3a8144eabfe3---4

https://cdn-images-1.medium.com/max/547/1*PmL3-GUNxYP26qTSlVrmzw.png

Pug (formerly known as Jade) is a preprocessor which simplifies the task of writing #html. It also adds a ton of functionality, such as #javascript objects, conditionals, loops, mixins and templates. The syntax is arguably a lot cleaner to read and it can be a real time-saver when working with a lot of HTML (especially frameworks such as Bootstrap, Foundation, etc).Lets take a peek at some Pug syntax & compare it to regular HTML..// index.pugdoctype html html(lang=’en’) head title Pug demo body h1 Welcome to Pug Life div.container p I’m a p that needs to be contained!Note the use of indentation to nest our HTML as we require. And the lack of closing tags!And here’s the standard HTML output:// index.html<!DOCTYPE html> <html lang="en"> (...)

#front-end-development #technology

DIY #redux with RxJS : Part 3
▻https://hackernoon.com/diy-redux-with-rxjs-part-3-87eaf23d4092?source=rss----3a8144eabfe3---4

https://cdn-images-1.medium.com/max/1024/1*rBO29FpCIE8eeZ_hhBhVSA.png

Photo by Steve Halama on UnsplashSo far, in the previous two posts, I covered the topics “How to Create a Redux Library with RxJS” and “How to Write Redux Middlewares”. Before starting the 3rd and the last part of the series, I would recommend you to check the first 2 parts below:DIY Redux with RxJS => RxDxDIY Redux with RxJS: Part 2In this part, I will create a HOC (Higher Order Component) to connect RxDx with #react.Component. I assume that you already know about React.Component, so that I won’t be explaining it again. But I need to explain HOCs which is the heart of what I will demonstrate below.What the heck are these Higher-Order Components?Basically, HOC is a class decorator. But what is a class decorator? Sometimes while we are coding we start feeling that all classes we create have (...)

#front-end-development #javascript #frontend

Essential Software Developer Skills, Technologies & Languages for 2019
▻https://hackernoon.com/essential-software-developer-skills-technologies-languages-for-2019-ce34

https://cdn-images-1.medium.com/max/1024/0*TdT_OWpMTMh8oT3B.jpg

Source: UnsplashIt seems like every other month someone’s out there touting the new best thing in software development or must-have software developer skills. Flutter.io, MongoDB Atlas, Apache Mesos… What are all these techs? And are they really necessary to learn in 2019?The answer is… it depends. But while experience with these techs like these may be crucial in a handful of roles, there are some other more essential skills you should learn first.Today’s article covers the biggies for technical languages, front-end and back-end (plus full-stack), app dev, machine learning, methodologies, and more. It’s packed with all the best technologies to brush up on to get ahead in 2019.To get a better perspective, we also chatted to three experts about what essential skills a software developer needs (...)

#front-end-development #programming #software-development #back-end-development #machine-learning

Lazy loading (and preloading) components in #react 16.6
▻https://hackernoon.com/lazy-loading-and-preloading-components-in-react-16-6-804de091c82d?source

https://cdn-images-1.medium.com/max/1024/1*HK_529G8O-O6_6fYEKc9VQ.gif

React 16.6 adds a new feature that makes code splitting easier: React.lazy().Let’s see how and why to use this feature with a small demo.We have an app that shows a list of stocks. When you click on one stock it shows you a chart:Try itThat’s all it does. You can read the full code in the github repo (also check the pull requests to see the diffs and a running version of the app for each change we’ll do).For this post, we only care about what’s in the App.js file:▻https://medium.com/media/3e885e631886bae1a1c17731c60c2035/hrefWe have an App component that receives a list of stocks and shows a <StockTable/>. When a stock is selected from the table, the App component shows a <StockChart/> for that stock.What’s the problem? Well, we want our app to be blazing fast and show the (...)

#programming #web-development #javascript #front-end-development

What Is Data Visualization? Definition, History, and Examples
▻https://hackernoon.com/what-is-data-visualization-definition-history-and-examples-e51ded6e444a?

https://cdn-images-1.medium.com/max/1024/1*CKwysWOeA6mXXlGNsvKL5g.png

Data visualization is the practice of converting data from raw figures into a graphical representation such as graphs, maps, charts, and complex dashboards. Let’s see what makes it important (meaning), how it has developed (history), and exactly how it can work in real life (examples). Join us on Data Visualization 101, an introduction to dataviz and its power.Significance of Data VisualizationTo understand how meaningful data visualization is, here’s a simple fact: Human brains have a much harder time understanding complex data when it is encoded in numbers and text compared to graphics. Dataviz techniques take advantage of that quality, helping to present massive amounts of information in the most efficient, visual form.In fact, visually displayed data is easier to grasp and analyze, (...)

#big-data #whats-data-visualization #data-visualization #data-science #front-end-development

5 Rules of Remote Project Management
▻https://hackernoon.com/5-rules-of-remote-project-management-273cb8674f06?source=rss----3a8144ea

https://cdn-images-1.medium.com/max/1024/1*SQBoLQPefvMnJqU8Y4_Z1Q.png

How to understand your client, why it’s important to write everything down and what are the advantages of perfectionist managersCSSSR doesn’t have an office and will never have one, while our team consists of dozens of people, who are sometimes located halfway across the world from each other. Nevertheless, all of them are officially employed and work full-time.For more than 6 years we’ve been developing front-end: methodically writing HTML/CSS, courageously implementing complicated JavaScript code, meticulously testing — all completely remotely.Through years of experience we’ve defined 5 main precepts of remote management.1. What is not written down — does not existFor us Internet is the main and only space for communication with a client. Therefore the rule of “putting verbal agreements in (...)

#web-development #front-end-development #remote-working #project-management #teamwork

Draft.js: how to remove formatting of the text
▻https://hackernoon.com/draft-js-how-to-remove-formatting-of-the-text-cd191866d9ad?source=rss---

https://cdn-images-1.medium.com/max/1024/1*eMscODOSsggZ8ImhBOqvNA.jpeg

Photo by Natalia Y on UnsplashOne of the features that we at Propeller miss in Draft.js out-of-the-box is the possibility to clear the stylings of selected text, leaving plain text inside the editor. We believe this behaviour is commonly used and our user may expect this feature to be on it’s place. As always in order to add this feature you would need to spend significant amount of time digging into Draft.js documentation in order to find required information.This post describes what steps you should take in order to add this behaviour into your project.All editing in Draft.js may be divided into 3 groups:Inline stylesCustom entities(for example images, links etc.)Block typesIn order to clean the text up we need to take care of all of these groups.Inline StylesThis one is pretty simple. (...)

#javascript #draftjs #react #front-end-development #web-development

#typescript inheritance deep dive
▻https://hackernoon.com/typescript-inheritance-deep-dive-9a53989af5a6?source=rss----3a8144eabfe3

https://cdn-images-1.medium.com/max/1024/1*jGRprTaT-LcmMcw2K1zmDw.png

How inheritance in Typescript actually works behind the curtain?Typescript and #javascript are both awesome languages. To a lot of developers Typescript feels more familiar because it offers concepts we normally encounter in traditional #programming languages. Inheritance is one of them.Due to backwards compatibility we generally transpile our code to Javascript. ES5 itself doesn’t contain classes nor an extend keyword.So how does this work then? Typescript uses syntactic sugar to “mimic” the class and inheritance behaviour. It creates kind of an illusion of those concepts. Let’s see what I mean by that.In this blogpost we will dive deep. On our way we will encounter a lot of concepts. It is important to wrap your head around those concepts. Take your time and make some breaks if necessary. You (...)

#programming-languages #front-end-development

Introducing Codier — Front-end Coding Challenges and Creations
▻https://hackernoon.com/introducing-codier-front-end-coding-challenges-and-creations-1ea5df79dd3

Around two years ago, I was starting the final year of my degree in Digital Design and had to come up with an idea for my dissertation/major project. At the time, I had a year’s experience as a front-end developer, and one of my biggest passions and hobbies was coding.I spent a lot of my time on sites like CodePen, creating pens and occasionally using them as blog material on my personal site. The only blocker I had to creating more content was my inability to come up with ideas for things to build.Scattered around the internet are coding challenges, often just posted on Twitter by big name developers — discovering these challenges gave me the idea to create a platform where front-end developers could go to get inspiration for things to build, as well as share their code creations with a (...)

#web-development #frontend #front-end-development #frontend-development #web

#javascript Framework Comparison with Examples (React, Vue & Hyperapp)
▻https://hackernoon.com/javascript-framework-comparison-with-examples-react-vue-hyperapp-97f064f

https://cdn-images-1.medium.com/max/1024/1*SqyC-DRj22wZRBiI-NOiwA.png

In my previous article, I tried to explain why I think Hyperapp is a viable alternative to #react or Vue and the reasons I found it easier to get started with it. Lots of people criticized that piece, as it was opinionated and didn’t give the other frameworks a proper chance to shine. So, in this article, I’m going to try to compare these three frameworks as objectively as possible, by providing some minimal examples to showcase their capabilities.The infamous counter exampleA counter is probably one of the most used examples in reactive programming and is dead simple to understand:You need to have a variable to keep track of the counter’s count.You need two methods to increment and decrement the count variable.You need a way to render said count variable and present it to the user.You (...)

#vuejs #web-development #front-end-development

Understanding the destructuring assignment syntax in #javascript
▻https://hackernoon.com/understanding-the-destructuring-assignment-syntax-in-javascript-c3bf8e1e

https://cdn-images-1.medium.com/max/1024/1*l3FWfVg-GUWd8ytyaDDMAA.jpeg

The ECMAscript 6 specification introduced a new syntax which makes it easier to get values out of arrays and objects. We call this syntax “destructuring”.Photo by Dayne Topkin on UnsplashThe destructuring assignment syntax with ArraysThe destructuring assignment syntax allows you to easily get values out of arrays and objects while using an array or object literal like syntax. This syntax is very short and very easy to read.Without using the destructuring syntax getting multiple values out of an array can be quite cumbersome. You would do something like this:▻https://medium.com/media/0f48d8c9ed05e2b4793b7aa8e535a937/hrefWith the destructuring assignment syntax this can be written like this:▻https://medium.com/media/c1eb8151c491b81f572976394d6875fd/hrefPretty neat, right? Let me explain what’s (...)

#destructuring-syntax #assignment-syntax #front-end-development #es6

Creating a Carousel Using Only Jade(Pug), #javascript, #jquery and #css
▻https://hackernoon.com/creating-a-carousel-using-only-jade-pug-javascript-jquery-and-css-b69576

STEP 1: Create divs inside of your page that will contain the carousel elements.gallery .gallery-main .gallery-main-image img(src=”/images/gallery3.jpg”) .gallery-filmstrip a(href=””) img(src=”/images/gallery1.jpg”) a(href=””) img(src=”/images/gallery2.jpg”) a(href=””) img(src=”/images/gallery3.jpg”) a(href=””) img(src=”/images/gallery4.jpg”) a(href=””) img(src=”/images/gallery5.jpg”)STEP 2: Set the styles for all of the elements inside of your carousel:The Displayed Image Gallery:The div around the display for the selected image/set styles for the wrapper around the image that will be displayed on click/.gallery background-color: black;.gallery > .gallery-main position: relative; height: 400px; overflow: hidden;The div that contains the div that (...)

#front-end-development #creating-a-carousel

Moving project’s components/services into packages (the separation of concerns)
▻https://hackernoon.com/moving-projects-components-services-into-packages-the-separation-of-conc

https://cdn-images-1.medium.com/max/600/1*E3ilF7NY9nj5EoyqSmQpdQ.png

Component-based software engineering (CBSE), also called as component-based development (CBD), is a branch of software engineering that emphasizes the separation of concerns with respect to the wide-ranging functionality available throughout a given software system.In this day’s Component-Based Architecture is highly popular, each modern UI framework provides component structure approach. Check out this article for pros and cons. What I like the most in CBA is the separation of concerns?Whether starting a small project or having a huge one the separation of concerns is going to be a key point for easy maintenance, testability, reusability. If you are UI engineer you should have probably heard about #npm package manager. This is a good way to move your reusable components, services (...)

#web-development #front-end-development #javascript #programming

Front End Refactored — #components with Vue
▻https://hackernoon.com/front-end-refactored-components-with-vue-907a08a3630?source=rss----3a814

https://cdn-images-1.medium.com/max/1024/1*-dbbyQwUJz60Znr9SOepQw.jpeg

The more I learn about coding, the more inspired I get about how creative and revolutionary some of these ideas are. From the readability of Ruby, to a world of hashes in #javascript, these ideas keep renewing the way we think and evolve the tech world all the time.“No Logic/Coding in Front End”This was a common stereotype that I noticed was common among up and coming developers at Makers Academy, when consulting them over their job prospects and interests.Front End gets a bad reputation for being ‘uninteresting’ because of how people think there is very little codingIn our company we have found it very difficult to find a mid and senior level front end developer to join our team. It does me think about whether this attitude is something that contributes towards developers not wanting commit (...)

#vuejs #front-end-development #refactoring