fabiochiu/medium-articles huggingface dataset:
Exchange rate calculator with Javascript
Tags: JavaScript, Frontend Development, Frontend, Front End Development, Web Development

Exchange rate theory is about fetching the data and calculating based on an input value.

Github

Feature:

different currency selections and the input number value exchange rate API to fetch data

HTML

The credit for the exchange rate API free version

First-line shows the basic equation of the exchange rate which will be manipulated in js part.

The two currencies are two parts: currency and number.

selection options below:

<select name="" id="currency1"> <option value="AED">AED</option> <option value="ARS">ARS</option> <option value="AUD">AUD</option> <option value="BGN">BGN</option> <option value="BRL">BRL</option> <option value="BSD">BSD</option> <option value="CAD">CAD</option> <option value="CHF">CHF</option> <option value="CLP">CLP</option> <option value="CNY">CNY</option> <option value="COP">COP</option> <option value="CZK">CZK</option> <option value="DKK">DKK</option> <option value="DOP">DOP</option> <option value="EGP">EGP</option> <option value="EUR">EUR</option> <option value="FJD">FJD</option> <option value="GBP">GBP</option> <option value="GTQ">GTQ</option> <option value="HKD">HKD</option> <option value="HRK">HRK</option> <option value="HUF">HUF</option> <option value="IDR">IDR</option> <option value="ILS">ILS</option> <option value="INR">INR</option> <option value="ISK">ISK</option> <option value="JPY">JPY</option> <option value="KRW">KRW</option> <option value="KZT">KZT</option> <option value="MXN">MXN</option> <option value="MYR">MYR</option> <option value="NOK">NOK</option> <option value="NZD">NZD</option> <option value="PAB">PAB</option> <option value="PEN">PEN</option> <option value="PHP">PHP</option> <option value="PKR">PKR</option> <option value="PLN">PLN</option> <option value="PYG">PYG</option> <option value="RON">RON</option> <option value="RUB">RUB</option> <option value="SAR">SAR</option> <option value="SEK">SEK</option> <option value="SGD">SGD</option> <option value="THB">THB</option> <option value="TRY">TRY</option> <option value="TWD">TWD</option> <option value="UAH">UAH</option> <option value="USD" selected>USD</option> <option value="UYU">UYU</option> <option value="VND">VND</option> <option value="ZAR">ZAR</option> </select>

CSS

Imported font from google fonts.

flex to set in the center of the browser and basic styles

For responsive small screen setting

JS

select the DOMs needed

when either selection of currency changing, run the calculate()

when the input number changing, run the calculate()

when clicking the swap button, swap the currency type and run the calculate()

fetch the data from the exchange rate API site and show in the rate DOM, then the second currency amount calculated based on the rate
CSS, A responsive footer. A thorough walkthrough of three…
By: 田少谷 Shao
Tags: Software Engineering, Footer, CSS, Rwd, Frontend

0. Intro

Though smart contracts are usually the core part of a DeFi project, an easy-to-use & informative website also serves a crucial role. Therefore, the first article of this publication is about CSS frontend coding: footers!

Curve, my favourite UI design in DeFi; though this is perhaps another man’s trash ;)

While I was learning frontend coding with this course (an amazing one, definitely recommend it!), I decided to make a website for my lab as a side project. However, it wasn’t until using a larger screen recently did I found that the footer I made before was missing the responsive aspect (RWD).

Zoom in/out 100% on a 13-inch screen; the footer looks pretty normal

Using the website I made for my lab as an example ;)

Zoom out 75%; the footer goes off :(
custom video player with Javascript
Tags: JavaScript, Frontend Development, Frontend, Front End Development, Web Development

Features:

video api video.play() & video.pause() progress custom timestamp calculating

Github code

HTML

link all the needed styles.

the range.css is from css tricks

the play and stop icon are from font-awesome

video tag with a poster to show the image default

the controls have four parts,play button,stop button, progress bar and timestamp.

CSS

the screen is the audio player with border on the top

the four parts in the controls inline display.

the button without border

for small screen setup

JS

select all the DOMs

when click the video,toggle the status of videoo

when pause and play the video,update the icon in the bar and change the progress

click event on play and stop button

when progress changes,the video change the current time

toggle play and pause event when click the video

when the status of video is paused,the button should be a pause,either way the button is a play.

there is not stop(). which can replace by pause() and also retrait to beginning of video

When click on the progress bar,the video should play the current time according to current progress bar position.

For displaying the timestamp,the current time is a digital time with double number.

Meanwhile the progress bar should be same with video current time.

More:

MDN video and audio API

another demo about video player with Javascript which has more functions.
SPA、MPA是什麼？
By: Mino Chen
Tags: Frontend, HTML, JavaScript

Learn more. Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Make Medium yours. Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore
Debugging JavaScript — Tips and Tricks
Tags: Java, JavaScript, Frontend, Front End Development, Web Development

But first — what the bug actually is?

The term “bug” describing defects was common among engineers since the 1870s and used in the context of error by Thomas Edison already back in 1878. In terms of computer error it was probably used for the first time in 1947 when an actual bug (moth) was found in Harvard Mark II computer.

A page from the Harvard Mark II electromechanical computer’s log, featuring a dead moth that was removed from the device.

We know that there are 2 types of developers. Those who debug with debugger using breakpoints and those who use console.log. This post should satisfy both sides.

debug(function)

It works only in Google Chrome console and on function and methods that you can access from global scope. All it does is invoking debugger and pausing code execution inside a given function once it’s called. Try this example (type in console):

The intended use is when you don’t debug your local code, finding the wanted function or method seems impossible in an obfuscated source, and you can access the function or method from the console.

DOM Breakpoints

You can add breakpoints that are not bound to line number but element modification. To do it right, click on the element in Dev Tools Elements inspector window. In the context menu choose “Break on” and then one of options.

All breakpoints added that way can be toggled in the debugger window in the “DOM Breakpoints” panel.

XHR Breakpoints

If you are trying to find a code responsible for sending specific requests, then use “XHR Breakpoints”, accessible from the debugger tab. You can specify any part of the URL and code execution will be paused once AJAX send() or regular fetch() methods will be called with that URL. If you don’t specify any URL in XHR breakpoint then execution will pause on every request.

dir(object)

It’s a less known method of logging objects in the console and makes no difference with regular console.log() if you pass a regular object as an attribute. The real difference is present when you pass an HTMLElement object. Try this in console:

console.dir() can be used both in code and in console but dir() works only in Google Chrome console.

Monitoring events

You can monitor specified event of specified DOM Element, like: “click”, “keyup” and “resize”. You can also keep track of all events but that might be overwhelming. This way of monitoring events is available only in Google Chrome console.

$() in console is an alias for document.querySelector().

Profile

You can profile code from Google Chrome console. It’s ideal when you like to start recording a few snapshots at the same time with different names.

Open profiles panel to see the results.
HOW I WON A LAPTOP WITHOUT A CONTEST?
By: Victoria Fadare
Tags: Leadership, Technology, Coding, Frontend, Growth

HOW I WON A LAPTOP WITHOUT A CONTEST?

How possible is it?

I was getting ready for opportunities, preparing myself for the journey ahead, because I know where I was going.

I remember when an international opportunity came, it require an international passport to complete the registration but I didn’t have one. I went to the immigration office in my state to apply for one, I was told it will be ready in 3 months, I was shocked, something I needed urgently. I was later advised to go to another state but I was going to pay double of the money. I eventually went to another state paying double of the money but I got the passport the same day.

The stress was damm much, you can’t imagine the stress I went through because of an international passport. I learnt a lot of lessons then.

I was just in the phase of still gathering knowledge and learning, not knowing my consistency will pay off soon. I remember updating my twitter account profile a month ago that I was an ex-mentee at SheCodeAfrica.

Then recently, I saw a tweet on the Twitter app by someone who wants to give out laptop to young developers.

I quickly jump on it and replied:

Invest in me with this laptop, you won’t regret it.

It was actually a self conviction.

His next message

Updating my profile page on Twitter to show my journey so far in tech made me to get his attention

Can you share me your progress since you left She Code Africa? A big question.

Guess what?

I just fixed my website portfolio a week to when the opportunity came, I was just lucky because I have been postponing doing the website portfolio, I haven’t launched the website yet because I was still working on it and I have so many typos. I was just lucky I didn’t postpone it this time. Maybe I could have missed the opportunity.

I sent the website portfolio link to him alongside the Github and LinkedIn profile link.

I was still waiting for recommendation from the founder of She Code Africa, when two of my friends already vouch for me as the right person to give the laptop. I was dazed, just keeping doing good and adding value, people are watching.

The Founder of She Code Africa send a nice recommendation below.

What next?

I got it!!!!!!!!!

Follow my Tech Journey on Twitter https://twitter.com/v_fadare?s=09

Also on LinkedIn https://www.linkedin.com/in/victoriafadare
form validator with Javascript
Tags: JavaScript, Frontend Development, Frontend, Front End Development, Web Development

Form validator is a basic function when building a website with sign-in and sign-up sites. Normally the backend will require the user’s name ,email and password,meanwhile double type the email to verify the email is no typo error.

The form contains username,email,password and verifying password.

HTML

The container includes form which can submit. Four inputs with labels.

And also link the css style and js script.

snall is the section to show up the messager.

CSS

set up the label to block to show in one line.

when input is being focused,change the brorder color and hidden the outline.

hide the message first,when error happends,the message shows up.

and also the border color changes when the status of input changed.

when focusing the button, the style changes.

JS

select the DOMs first ,with getElementById() or querySelector()

When the form submits, it’s time to validate all the functions.

first prevent the submition before all the events async.

when error happends,showError function works.The small tag shows up.

when success,showSuccess function works. the class name is success and the message is hidden.

check every input value,if it’s empty,then showError() message.otherwise run showSuccess()

And also there is other functions to validate.W3C

And the “required” attribute in html is a good way. More details from here

check input length.

If username or password is too short or too long which is not qulified. There is number restrict length.

The getFieldName() is to convert the first character to uppercase.

check the email format .It’s very convenient to do with RegEXP. stackflow

function validateEmail(email) {

const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

return re.test(String(email).toLowerCase());

}

whether the two passwords is same.If not, show error message.

Here is some related form validility here:

MORE

there are lot validator libraries can be used for developer.Such as Formvalidation is a Javascript library.

For exanple,the other way to validate the email with the library

And I found a good explaination for basic Javascript for validation from freecodecamp

Another form validator with Javascript article
movie seat booking with Javascript
Tags: JavaScript, Frontend Development, Frontend, Front End Development, Web Development

Movie seat booking course from Brad Travacy.

Fetures:

select option value in html perspective in css changeing color of seats when click available seats seats number and price from localStorage

HTML

the selection part with four options concludes value

brief vector demostration for user understanding

screen is for white screen display

there are 5 rows and each row contains 8 seats.total is 40 seats.

text show at the bottom with number and price.

CSS

the select with appearance none: without error shape.And for different browser using, apply -moz and -webkit.

every seat shaped and colored with different class name .

set the space between the first two coloum and the last two which is the aisle.

when hovering the seat, scale the size.

set the container toperspective:1000px. the shape of screen rotated 3d.

JS

select DOMs with getElementById or querySelector

when click the seat,the class of seat toggled.

and run the updateSelectedCount()

all the selectedSeats is the NodeList. So it’s better to map the seats to get the index of seat(index).And storage the index into local storage

NodeList.length is the seats’ length.

Then pass the number and price into DOM.

When select different movie, choose different movie value and run setMovieData()

Also update the count again.

storage the movie index and price in localstorage.

When refresh teh page, the UI should show the data get from localStorage.

get the data from localstorage first.

if something in it,loop every seat index and add the occupied class.And also show the selected movie inde and price.

run the populateUI() and updatedCount() when load the page.

More:

Array.indexOf():the outcome is a number.First is 0. MDN

ElementNode.classList.add() and also remove,toggle and so on . MDN

When select all the seats DOMs, there is a NodeList.For convient loop,using […] to convert to array.
위코드 사전스터디 개인과제인 홈페이지 만들기를 위해서, 다시 HTML/CSS를 공부할 필요가 생겼다. 필자의 경우, 개인 포트폴리오 사이트를 구상하는 것이 나중에 도움이 될 것으로 생각하여 개인 포트폴리오 사이트를 만들어보기로 결정하였다. 개인 포트폴리오 페이지를 만들기 위해서, 인터넷에서 다양한 디자인 예시들을 찾아보았다. 이를 토대로, 기본적인…
By: Gyu-Bo David Shim
Tags: CSS, HTML, Frontend

개인 포트폴리오 페이지를 만들기 위해서, 인터넷에서 다양한 디자인 예시들을 찾아보았다. 이를 토대로, 기본적인 HTML 5 레이아웃을 기준으로 들어갈 항목들을 정리하였다.

1. Navigation

왼쪽상단) Page logo,

오른쪽 상단) About me, Projects, Contact me

2. Section

page 1/MainPortfolio) 설명 문구, 어두운 배경

page 2/About me) 사진, 간단 이력

page 3/Projects) 프로젝트 설명 및 git을 연결한 카드 형식

page 4/Contact me) 이름, 이메일, 연락사항 등을 적어 보내는 문의함

3. Footer

Github, Facebook, Insta 등의 아이콘식 하이퍼링크

Copyright 문구(있어보이게?)
Angular Basic understanding and features -Part 1
By: Abi Aradhya
Tags: Typescript, Angular, Framework, Frontend, Web Development

This series of Angular in depth will cover all the following features part by part :

Basic Understanding of Angular and features

Custom components with @Component

Components @Input and @Output, event Emitters

ngFor

ngIf

ngClass

ngStyle

ngSwitch

Built-In Pipes

Async Pipe

Custom Pipes

@Injectable and Custom Services

HTTP Client — GET POST PUT DELETE

This article concentrates on key features of Angular and basics setup to start with any application.

We will build an example application throughout the whole series and understanding all core features

Basic Understanding of Angular and features

Things required to start Angular development

Understanding on HTML, CSS, Typescript

Node installed in system

install angular cli to scaffold application

npm install -g @angular/cli

Take a tour of the example application

Lets take a tour on example application “Crazy developers” together by exploring all Angular topics one by one

Create new Angular application using Angular CLI

ng new crazydevelopersapp

ng : referring to angular CLI

referring to angular CLI new : is the keyword to create new angular application

is the keyword to create new angular application crazydevelopersapp : application name

If project needs to be created in existing folder

ng new *crazydevelopersapp* --directory ./

CLI asks to enable routing choose yes and choose SCSS for stylesheets. folder structure after scaffolding the template looks like this

Okay now Why Angular ?

we will see main features of Angular Core with an example

custom HTML content: You can create your own custom HTML content and extend application functionality.

app-root is the custom HTML Tag for app component html

separating data or the model of the application from view template

below example shows title in html tag is a variable consists of string “crazydeveloper” in component.ts

component based architecture co ordinates between view and data

built in change detection mechanism which is completely transparent which synchronizes with view

Updating of data in secure way

We will discuss on components, @Input, @Output and Event emitter in our next article.

For latest news on Angular core and other technical articles. follow me on

Other than technical follow me on instagram

https://www.instagram.com/abi_aradhya/
Download and show one by one Images with JavaScript and Promise
By: Mohammad Esmaeilzadeh
Tags: Software, JavaScript, Performance, Frontend, Development

A Yellow Taxi Behind A Rain-Spattered Window Photo | © Burst by Shopify

Sometimes you need to handle images loading into the webpages and it will be a good idea for the performance handling in website. Suppose, your client has not a fast internet connection and you have a lot of pictures into your website… what will happen? they will experience a slow website and it is a negative point for your website.

What is the solution?

For example you can use this code to handle loading images one by one:

A few note for the above code:

We defined an array to store Images URL and have a self-invoked function to execute our start function. In executor function we have a loop on URLs array and then we call the loadImageByPromise(url) with an await to handle Promise and add an interrupt for the async request.

In the Promise we create an Image tag and set src to that and then check has downloaded image by onload method and resolve the promise too. now after the resolve we have an appendChild and can add downloaded image in our container div element.

To check it easily, you can use throttling feature in the Dev-Tool’s Network tab to limit your internet speed and watch the output.

Good Luck.
【JavaScript 二部曲】JavaScript 的同步與非同步
By: Helena Chang
Tags: JavaScript, Frontend, Js, Front End Development, Web Development

Learn more. Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Make Medium yours. Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore
Redux
By: Emelie Svensson
Tags: Frontend, Newprogrammer, React, Redux

The last three weeks I’ve been learning Redux. Or, I’ve started my journey to learn it. There is so much to learn about Redux I don’t know if I’ll ever really learn it all!

Or, what am I saying? Of course I will!

I’ve been hearing so much about Redux, both high and low. I’ve heard it’s the most amazing concept there is, and I’ve heard that it’s unnecessary because you can get away with using React context instead. Yes, it is a boilerplate. Yes, you’ll have to write a lot of code in order just to get started, but the benefits are awesome.

Here’s what I’ve learned so far from Redux:

The separate state. Not having several states in my components, not having to pass all data from a parent-component using props but instead:

I can pass whatever data I want from my components. If I want a component to use only one action in the reducer, I can do so using dispatch.

In the same way I can pass whatever necessary data I want from the store to my components with useSelector. I don’t have to pass all data, only the part I need.

Maybe you can get away with React context doing this as well, I honestly don’t know anything about context yet. However, why not learn Redux? It’s a powerful tool and you’re likely to stumble across several teams using it. It might be a bit abstract (or, very abstract actually) but once you start to grasp it you’ll discover more and more benefits on using it. Not just getting out of sending props to every single component.
belajarFrontend#3
Tags: CSS, Belajarfrontend, HTML, Frontend

Learn more. Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Make Medium yours. Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore
Coding challenges — is it worth it?
By: Remiel Evangelio
Tags: Frontend, Programming, Interview Preparation, Coding Challenge

Companies today uses third party platform for coding challenges. Leetcode style questions, if you know what I mean.

I understand that companies started to adopt this tech because it makes hiring easier. It has the built-in IDE, compiler where in you can select your choice of programming language, tests are executed when you run the app. All in one place. The applicant just need to put their name and email and start the coding challenge straight away.

I have experience using this kind of platform. A company invited me for a coding challenge and it turned out to be 1.5 hours of speed coding. It didn’t feel like a test for quality. It feels like “How much can you code within 10 minutes?” rather than “What’s the best way to answer this question?”. And the platform keeps reminding you that you have 3, 2, 1 minutes left. (LOL). And it automatically submits the form after that.

So now my question is, is this a good assessment of real-world developer capability? Let me know what you think.
[JavaScript] 一次搞懂同步與非同步的一切：待會叫你 — 回呼函式(Callback Function)
Tags: Callback, JavaScript, Frontend, W3hexschool, W3hexschool 鼠年全馬鐵人挑戰

Learn more. Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Make Medium yours. Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore
[Canvas] Particle - 01
Tags: Canvas, Memories, Particle, Frontend, Html5

Learn more. Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Make Medium yours. Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore
Beginners guide to build React Project with Webpack
By: Chirag Maniar
Tags: Webdev, Bundler, Webpack, Frontend, Development

webpack

It’s time to learn something which does not take part in the very initial phase of the development though it becomes really critical when the project starts to grow and inculcates many complexities. The Bundling ….

What is Bundling?

The very first question that arises in anyone’s mind is what the hell is the Bundling? To understand what bundling is, we must understand Why we need it? Hello? Isn’t it? So, When we reach to stage in our development where many packages, libraries, and other important files are being upgraded parallel and the final outcome requires them all together. At that time, it may consume a whole lot of space if we do not compress the development mode files.

A bundler is a tool that takes pieces of code and its dependencies and bundles them into a single file.

Bundlers typically compress the large files and perform a set of rules before it automatically (in the background) compiles all stuff at a single point. Single source of truth 😆. Now that we know, what a bundler is and why it’s needed we need to know what are all tools to achieve a bundle of a project.

What can I use?

There is a number of bundlers available in the market. Webpack, Parcel, Rollup, Browserify, Metro, Bower, Gulp, and many more. Many are being used, some are outdated and some are emerging. But, we need to choose it based on our needs. Our focus is Webpack so we’ll not have other detailed discussions about others. In case anyone wants to evaluate different bundlers, click here.
Why not?. It was never a given for me to apply…
By: Cornelia Ryås
Tags: Frontend, Education, Career Change, Bootcamp

It was never a given for me to apply for a coding Bootcamp, but am I happy I did? Without a doubt!

Photo by Clément H on Unsplash

I’ve peeked at courses in programming off and on for a few years, never really been able to decide if it would be fun or not, what level or language to go for. HTML, Javascript, Expressions for After Effects? Still enjoying animation as a profession I wasn’t even sure what to use those skills for. Then spring 2020 hit the freelancing me and suddenly I had a lot more time on my hands and a wide-open fall. So education seemed like a smart move. But there are so many areas I would love to go deeper into and brand new ones to study, so what should I pick? Then Technigo frontend Bootcamp caught my eyes. A 24-week program, halftime pace, which meant I could keep freelancing, it wasn't for too long and I would get something very concrete from it. Well…why not?

It was not an easy choice for me, I hesitated into the last moment, hit “Accept seat” around 23.59 the last day, and wondered what I had gotten myself into. Now we are more than halfway in and it’s so much fun! With a new project every week we are learning things fast. Looking back at the projects, it’s easy to see the progress. Time is really flying and I constantly catch myself waking up from a flow of coding and realizing I forgot about lunch, or sleep. “Just want to try this little thing, and wow, sense this worked maybe I can do this too… “ Starting the Bootcamp with just a brief knowledge of HTML and CSS I’m excited to say we are already writing our own Todo apps and games with Javascript and React Redux. I’m just loving that the realization of what can be done with the techniques we are learning is growing by the minute. Next week we are diving into Node.js to try our hands at some backend. Imagine those possibilities!
PiterJS #54 + Node.js SPb
By: Inna Lytkina
Tags: Prototype, JavaScript, Frontend, Nodejs, Piterjs

Learn more. Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Make Medium yours. Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore
Frontend Developer Profesional? Asah 10 Keterampilan Ini!
Tags: App Development, Indonesia, Frontend, Front End Development, Web Development

Learn more. Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Make Medium yours. Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore
Teste unitário no Front-end, realmente faz diferença?
By: Bruno Benicio
Tags: Unit Testing, Frontend Development, Frontend, Front End Development, Clean Code

Learn more. Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Make Medium yours. Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore
大型組織的大規模前端架構
By: 胡家維 Hu Kenneth
Tags: Frontend, Frontend Architecture, Large Organization

Learn more. Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Make Medium yours. Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore
Cambios en el programa de mentoring de Adalab y por qué vas a querer formar parte de él.
Tags: Adalab, Programming, Frontend, Mentoring, Web Development

Learn more. Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Make Medium yours. Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore
How Google Tackles Frontend Load Balancing
By: Ismayil Shahaliyev
Tags: Google, Frontend, DNS, Front End Development, Load Balancing

What is DNS Load Balancing

Google uses several layers of load balancing, the first of which is DNS load balancing. When a client looks up for an IP address using DNS, simply returning multiple A or AAAA records and letting the client arbitrarily pick IP addresses would not be optimal. Not only there isn’t enough control over the behavior of the client, but also the client cannot determine its closest address. The mitigation of these problems (if possible) leads to having a more complex server implementation and costly maintenance.

As noted in the book, the three important implications of DNS load balancing are the following:

Recursive resolution of IP addresses

Nondeterministic reply paths

Additional caching complications

The recursive resolution has a problem that the IP addresses seen by the authoritative nameserver belong to the recursive resolver and not to a user. It only makes reply optimization possible between the resolver and the nameserver. EDNS0 extension includes the information about the client's subnet in the DNS query sent by a resolver, allowing the nameserver to return an optimal response from the user’s perspective.

Another implication arises when serving millions of users across different demographic regions. An example is a large Internet Service Provider which might run nameservers for its network from one datacenter, and still have network interconnects in each metropolitan area. As a result, ISP will return a response with the IP address according to their datacenter despite having better options.

Responses are usually cached and forwarded by recursive resolvers within time-to-live (TTL) field limits of the DNS record. That may cause a single authoritative reply to reach a single or thousands of users. Google fixes the problem in two ways: Firstly, the list of DNS resolvers with the approximate user base is constantly updated, which allows tracking the impact on a resolver. Secondly, the geographical distribution of the user base is tracked, which increases the chances of directing users to the best location.

The last implication is related to caching. DNS records need a relatively low TTL, as nameservers cannot flush the caches of resolvers. It puts a lower bound on propagating DNS changes to users. Unfortunately, we can’t do much about fixing this problem.

Despite all these problems, DNS is the most effective way to load balancing before a user’s connection starts. However, as there is a 512-byte limit for DNS replies, there exists an upper bound on the number of addresses we can have in a single DNS reply. Virtual IP addresses come in handy here.
belajarFrontend #1
Tags: CSS, Belajarfrontend, HTML, Frontend

Learn more. Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Make Medium yours. Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore
▷ 10 extensiones de Chrome imprescindibles para Desarrolladores Front-End 2021
By: Pablo Álvarez Corredera
Tags: Front End Development, Programming, Frontend, Web, Web Development

Learn more. Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Make Medium yours. Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore
Javascript Arrow Function
By: Daniel Liu
Tags: Arrow Functions, JavaScript, Frontend Development, Frontend, Front End Development

Overview

Arrow functions are similar to Java and Pythons lambda function. Arrow functions can be used instead of Javascript traditional function definition. Arrow functions are more compact but there are some limitations:

No bindings to this or super so it should not be used inside object if they are to be methods

No access to arguments or new.target

Should not be used with call, apply and bind methods because they rely on a scope or the current context where it is being executed

Cannot be used as a constructor

Cannot use yield in its definition

Photo by Nick Fewings on Unsplash

Implementation

Instead of using the function key word you would wrap the arguments in parenthesis as usual than the arrow, =>, followed by the definition. If the there is only one argument you can ignore the parenthesis. Similarly if the definition only has one line you can ignore the curly braces as well the return keyword because it is implied. You can assign the arrow function to a variable as well.

// Traditional function

function square(x) {

return x * x

} // Arrow function

(x) => {

return x * x

} // Arrow function without parenthesis, single argument

x => {

return x * x

} // Arrow function without parenthesis and curly braces, single argument and one line of code with implied return

x => x * x // Assigning arrow function

const squareArrow = x => x * x

If the arrow functions does not have a argument you still need the parenthesis just like with multiple arguments.

// No argument

const x = () => 'x' // Multiple arguments

const adder = (x, y) => x + y

Conclusion

Arrow functions are anonymous which makes them more difficult to debug compared to traditional functions. Like with Java and Pythons lambda they are often seen being used in higher order functions. When using Javascript’s built in higher order function like find, map, filter you can use arrow functions in place.
renCrv LP Strategy Guide
By: Define Defi
Tags: Blockchain, Bitcoin, Guides And Tutorials, Cryptocurrency, Ethereum

Learn more. Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Make Medium yours. Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore
Basic Economics: A Citizen’s Guide to the Economy.PDF
Tags: Economics, Basic Economy, Guides And Tutorials

I would recommend this introduction to anyone who wants to learn the basics of economics in order to be a better informed citizen. It doesn’t use technical jargon, but outlines basic principles clearly and in plain language, without graphs or equations, using real life examples. Sowell is obviously annoyed by the general ignorance of economics experienced by your average person, particularly by journalists and even politicians, and he sets out to make the basics clear. The basic principles he outlines are true of any economy — whether capitalist, socialist, communist, or mixed — but he also goes on to show how specific economic policies work (or don’t work) in specific contexts. Most importantly, he encourages “the reader to look at economic policies and economic systems in terms of the incentives they create, rather than simply the goals that they proclaim. This means that consequences matter more than intentions — and not just the immediate consequences. The longer run repercussions of any economic policy need to be considered by the public, especially because so many public officials may not look beyond the next election.” He shows how politicians may pursue economically counterproductive policies to gain the votes of two separate groups of people, and he shows how government economic policy can breed shortages, increase the cost of oil and food, and cause the quality of products to decline. Files.3023.Basic_Economics.PDF: http://bit.ly/2DBO1U
Fundraising 101: How to secure £500k for your startup
By: Alexander Fitzgerald
Tags: Technology, Guides And Tutorials, Startup, Fundraising, Seed Investment

Converting 🙏

General advice

This is where you’ll spend most of your time and there are 5 rough stages.

1) The tease: An intro message that doesn’t overwhelm but teases a bigger thread of information. People are naturally interested. Play on that. Cold approaches should be:

Short — Keep it simple. Keep it short.

Informal — You should make it seem like you’ve typed the message there and then and is not just copy and pasted.

Personal — You should reference something personal about the target’s CV or experience. The more investigation it takes to find this information — or the more unique it is — the more likely they are to be impressed that you found it, and then hopefully respond.

2) The deck: Everyone needs this so you kinda need to provide it, often with a five bullets summary to set some context. Try using DocSend so you can track engagement. There’s nothing stopping you from iterating on the deck as the fundraising progresses.

3) The first meeting: This is where you want to wow investors with your story, how you first sought out this market, unit economics and future plans. Most investors ask the same questions, so again try and iterate on the answers.

4) The information dump: You usually then send prospective investors a whole host of information.

Investor deck —slides should tell a story

Unit economics explanation — how the maths add up for each customer

Financial model — how the maths add up over time for many customers

Valuation rationale — why our shares are worth a certain value

Cap table — what shareholders own, including options

Blogs — show what we believe and our world view

5) Follow-ups: This stage is dependent on each investor but can involve 2–3 more calls, references from current investors or even switching to the product! And remember to set up the deal, e.g. via Seedlegals.

What we did

We used the above approach, converting about 8% of those people who viewed our investor deck. That’s double the average global website conversion rate, so we must be doing something right.
Guide to the Stash of Powder and Arms Voyages
By: Jeff Onan
Tags: Sea Of Thieves, Guides And Tutorials, Gaming

Ancient, Wild, and Plentiful Voyages

There’s a voyage for each of the three main regions of the seas, and they are all identical except for taking place across islands in that region.

Chapter 1

At the start of the voyage you’ll receive 3 Maps, each pointing to X-Marks the Spots on islands in the region of the voyage you’ve chosen. Each Map will have 2–3 X’s.

Rewards: Digging these up should yield Gun Powders (which you can sell to the Merchant Alliance- or use for their explosive properties) and Humble Gifts (which can be returned to Larinna for 5 Doubloons)

Final Chapter

Once the first three maps are completed, a final 1 Map will appear, also being an X-marks the spot voyage in your region. It will have around 4 X’s.

Rewards: Among these X’s you should dig up:

-an Ashen Winds Skull

-a Chest of Rage

-two Firebomb Crates (partially filled)

And that’s all there is to it! A quick way to unearth some serious fire power. But if you want even greater rewards, well…

Legendary Stash Voyage

This voyage can only be purchased by Pirate Legends, but as long as one member of the crew can acquire it, they can embark on the voyage with their whole crew, even among non-Legends.

The voyage is largely the same, although it takes place in the Devil’s Roar, and comes with improved rewards.

Chapter 1 Rewards:

Among the expected gun powders and humble Gifts, you have an increased chance of finding a Generous Gift, which is worth 10 Doubloons when handed in to Larinna.

Final Chapter Rewards:

The final island will have 5 X’s to dig up, and along with the Skull of Ashen Winds and Chest of Rage seen in the regular voyage, you’ll also find some Kegs of Ancient Black Powder, a more powerful explosive than the standard Gun Powder Barrel that can be sold to the Mysterious Stranger (at the back of the Tavern) for Pirate Legend reputation.

TIP: Watch out in the Devil’s Roar for GEYSERS! These can and will explode your gun powder barrels the second you reveal them, or while you’re carrying them around. Best to wait for the Earth to calm down!

If you’re hoping to get your hands on some fiery offensive weapons or just trying to sell them, these voyages are hard to beat, and they’ll even come in handy for the Grogmanay challenges that arrive at the end of December- we’ll post a guide to those challenges when they become available!

If you’re looking at Larinna’s extravagant Gilded Voyages and unsure which to claim, check out our Guide here

And if you want a rundown of December’s Event Tab challenges, the 12 Deeds of Giving and Plundered Presents, head over this way
How to turn SLP files into video using OBS and Project Clippi
By: Vincent Au
Tags: Super Smash Bros, Guides And Tutorials, Super Smash Bros Melee

How to turn SLP files into video using OBS and Project Clippi

You’ve managed to comb through your Slippi replays for highlights and now want to convert those SLP replays into video footage. Here’s a beginner’s guide on automatically recording your gameplay footage using OBS and Project Clippi. This guide assumes you already have the latest version of Project Clippi installed and are familiar with using it to find combos. If not, read this guide.

Please note: This feature has really only been tested on Windows. Linux and MacOS users are free to follow along with this guide but may encounter issues along the way. Tweet at @_vinceau or @ProjectClippi to report bugs or other issues.

1. Download and install required tools

Before we continue you will need to install the following:

Please note: Streamlabs OBS (SLOBS) is NOT supported! You must use standard OBS as linked above. You may also want to restart your computer after installing everything for optimal results.

2. Setup OBS

2.1 Enable OBS Websocket

After installing OBS Websocket, open up OBS, go to Tools > WebSocket Server Settings and make sure ‘Enable WebSockets server’ is checked. Setting a password is optional but generally recommended.
useHistory, Don’t Repeat My Mistakes.
By: Akil Griffiths
Tags: Guides And Tutorials, React

I might have mentioned that I have worked on some apps. Nothing too fancy yet, but I am proud of them. There is one app in particular that I have to look back on now, it was a simple game review app. I stopped working on it because it was living up to my expectations, and it wasn’t broken. It was functional but it wasn’t done correctly?

I learned this by working on a different project, that game I keep talking about. Now without going into too many details of the game, the person helping me was asking why I was using window.location to change the page. My previous experiences led me to believe this would be fine. The way I had it setup so far reinforced the idea that this was okay. Then I tried to pass down some more props.

Now in the same review app I ran into a problem with that location method. I know this because I was using localStorage to persist the name of the person signing in instead of just passing it down as a prop. In this app that was the only thing I was passing down, also if the page refreshed it was guaranteed to show the updates because my backend fetch was done correctly. So in this scenario it was working like I wanted it too but was still bad coding on my part.

Back to Building The Game

It was working as intended until, it came time to pass down props. Now I can’t recall if it worked when first getting to the page, and more calls to change the location deleted the props, but as I’m looking to write code that works all the time, there’s no need to find such a distinction. My collaborator told me it is throwing these errors now because I wasn’t using the history method.

After changing all of the window.location bits to incorporate history instead, I had an app that was running again. This time it did not just appear functional, it actually is. I still have a lot of work to do on this game app, but I can relax knowing I’m doing many things right… probably.