Front-end Developer Handbook 2019 - Learn the entire JavaScript, CSS and HTML development practice!
▻https://frontendmasters.com/books/front-end-handbook/2019
-
-
Easily Impossible: One approach to designing a great API
▻https://hackernoon.com/easily-impossible-one-approach-to-designing-a-great-api-16fc02e42d?sourcWhy building graphical user interfaces is hard.Why is it so hard to write and maintain UI code? One of the reasons is poor API design. Specifically poor balance of control vs effort over a set of use cases. Effort is the time it takes to implement a use case using an API. Control is how fine-grained the commands that we send to an API can be.This issue of balance is not GUI-specific, it’s a generic problem in API design. This post is my attempt to understand the dynamics between control and effort using examples from #frontend development.The lost art of geometryHere’s a puzzle. Let’s say we have two rectangles. One is taller and wider than the other. We want to place and vertically center the smaller rectangle inside the larger one.The height of the larger rectangle is h1. The height of the (...)
-
Vue.js: Good, Bad, and Choice
▻https://hackernoon.com/vue-js-good-bad-and-choice-dcc1d27f82c6?source=rss----3a8144eabfe3---4For 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 (...)
-
Getting started with #redux
▻https://hackernoon.com/getting-started-with-redux-aa37180dbe93?source=rss----3a8144eabfe3---4ReduxI have worked on a couple of projects which had Redux, and i see there is a lot of confusion among people who are getting started. My opinion is if we understand “what problem is redux trying to solve” and “responsibilities of the core components of redux”, life will be easier. This post is my attempt on trying to explain these things.The Problem…SPAs(Single Page Applications) these days are pretty complex and they maintain a lot of state in the front end, e.g: api responses, cache data, state of the #ui widgets like spinners and progress bars, etc..Usually we have Models which hold the data and Views which render them. A View can update a single Model or multiple Models, a Model can update another Model and based on these Model changes Views get updated. Because of all these (...)
-
Understanding Micro Frontends
▻https://hackernoon.com/understanding-micro-frontends-b1c11585a297?source=rss----3a8144eabfe3---As a #frontend developer, all these years you were developing monoliths, even though you already knew it was a bad practice. You divided your code into components, used require or import and defined npm packages in your package.json or mounted sub git repositories into your project, yet you ended up building a monolith. It’s time to change it.Why is your code is a monolith?All frontend applications are a monolithic application in nature, except apps that already implemented micro frontends. The reason is if you are developing with the React library and if you have two teams both should be using the same React library and both teams should be in sync on deployments and always will be conflicting during code merges. They are not separated completely and most probably they are maintaining (...)
#javascript #microservices #agile-development #micro-frontends
-
#react #hooks: useState(using the state hook)
▻https://hackernoon.com/react-hooks-usestate-using-the-state-hook-89ec55b84f8c?source=rss----3a8A new way of working with React.React Hooks are currently available in the alpha release of react@16.7.0-alpha.0.In this article, we will attempt to understand what is React Hooks and rules we have to follow when using them. Plus we will create a counter application using useState React Hook.What are React Hooks?React Hooks are functions that let us hook into the React state and lifecycle features from function components.By this, we mean that hooks allow us to easily manipulate the state of our functional component without needing to convert them into class components.Hooks don’t work inside classes(because they let you use React without classes). By using them, we can totally avoid using lifecycle methods, such as componentDidMount, componentDidUpdate, componentWillUnmount. Instead, we (...)
-
Apollo vs Relay Modern: Which #graphql Client to consider using in 2019
▻https://hackernoon.com/apollo-vs-relay-modern-which-graphql-client-to-consider-using-in-2019-74I first wrote a version of this article just over 16 months ago, and it’s pretty impressive how much the GraphQL community has achieved in that time.First of all, the question is no longer really Apollo or Relay, but rather Apollo or does one even need a fancy client at all. If you’re just testing the waters with GraphQL and don’t want to change your existing app too much, you can just use fetch in your component like so:fetch(’/graphql’, method: ’POST’, headers: ’Content-Type’: ’application/json’, ’Accept’: ’application/json’, , body: JSON.stringify(query: " hello ")) .then(r => r.json()) .then(data => console.log(’data returned:’, data));The main benefit to adopting a GraphQL client is the cache (...)
-
What Companies Look For in Frontend Developers
▻https://hackernoon.com/what-companies-are-looking-for-in-a-frontend-developer-in-2019-60e59898cThe frontend development space is hot. According to Stack Overflow’s 2018 Developer Survey, #javascript is the most popular programming language with developers around the world.That being said, the frontend development space is also incredibly large. To some, frontend development means jQuery, or vanilla JavaScript. To others, they’re deep in the #react world, or in TypeScript.To celebrate the launch of my new project Frontend Jobs, I looked at the first three weeks of job postings across many job boards — Frontend Jobs, of course, but a number of other incredibly popular places for developers to find gigs right now — Stack Overflow Jobs, WeWorkRemotely, and Hacker News’ monthly “Who is hiring?” post, to discover any patterns or trends in what companies are hiring for. The results were pretty (...)
-
Calling for Hacker Noon community: We are hiring!
▻https://hackernoon.com/calling-for-hacker-noon-community-we-are-hiring-dcce55252a75?source=rss-Hacker Noon is building the best place for tech professionals to publish — and we need your help.visit jobs.hackernoon.com for more info.As you might have heard. We are building our own Content Management System from scratch, and we need help. We are hiring for these part-time positions:User-centric Frontend Developer with a great taste for Design, andContent Strategist with Social Media expertiseClick on the jobs ad above to apply. Scroll down to learn more about each job.User-centric Frontend Developer with great Design tasteWe’re looking for a scrappy user-centric generalist to help us lay the foundation for Hacker Noon 2.0. Unfortunately, we can’t afford to invest in months of research and planning before taking action. So you’ll need to trust your intuition and proactively figure out what (...)
#hackernoon-hires #content-strategy #we-are-hiring #hackernoon-jobs #frontend-design
-
DIY #redux with RxJS : Part 3
▻https://hackernoon.com/diy-redux-with-rxjs-part-3-87eaf23d4092?source=rss----3a8144eabfe3---4Photo 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 (...)
-
️ The 7 Pro Tips To Get Productive With #angular CLI & Schematics
▻https://hackernoon.com/%EF%B8%8F-the-7-pro-tips-to-get-productive-with-angular-cli-schematics-bAs productive as mother Earth! (Original ? by Markus Spiske)Angular Schematics is a workflow tool for the modern web — official introduction articleQuick IntroThere are many articles on how to build your own Angular schematics but in this one we’re going to focus on using available schematics to the fullest! ?Most of the time we will be using @schematics/angular which are provided in Angular CLI out of the box.What are we going to learnUse shortcuts, they are much faster and easier to type, duhhh ?!Skip creation of an initial applicationGenerate multiple applications and libs to promote code reuseUse schematics from different npm packagesSet schematics defaults in angular.json file so that we don’t need to specify all the flags all the timeGenerate services — providedIn: ’root’ vs —module (...)
-
Using #redux + #redux-observable with Vue.js
▻https://hackernoon.com/using-redux-redux-observable-with-vue-js-c10faca4b77b?source=rss----3a81Photo by Filios Sazeides on UnsplashWe often claim caution when it comes to refactoring a tech stack.But there always comes a time when it needs to get done.When that happens, you want to pick the right tools:Unless you’ve got stupid amounts of VC money, you can’t afford a complete refactoring every quarter.For our own shopping cart v3.0 rewrite, we picked Vue.js and Redux.Weird mix you say? Not quite! In this post, I’ll show you how and why we strapped Vue.js on top of Redux.More specifically, I’ll cover:What are Redux & redux-observableWhy we chose Redux (over Vuex)How we leveraged redux-observableHow we plugged Vue.js to a reactive storeI’m thrilled to finally share some of our work on this newest version of Snipcart with you guys!Let’s start with a bit of context.What is that cart v3.0 (...)
-
Introducing Codier — Front-end Coding Challenges and Creations
▻https://hackernoon.com/introducing-codier-front-end-coding-challenges-and-creations-1ea5df79dd3Around 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
-
5 Must-Read #react Newsletters
▻https://hackernoon.com/5-must-read-react-newsletters-8092926fb298?source=rss----3a8144eabfe3---React is one of the most popular frameworks in modern day javascript. Every week there’s new updates, libraries and tools released to improve your workflow and your skills. These 5 newsletters are a great way to keep up with it all.Awesome React NewsletterIf you’re looking for comprehensive coverage of everything in the React world this is the newsletter for you. Each week it features the most popular React news, articles and recently released libraries.React Native NewsletterReact Native lets you use React to build cross-platform mobile apps. This newsletter covers updates to React native itself as well as popular libraries and apps for it.React DigestReact Digest focuses on just 5 interesting links each week. It covers everything React related including Flux, Redux, MobX, and React (...)
-
Make a slideshow using #ruby on Rails in 50 lines of code and no JavaScript.
▻https://hackernoon.com/make-a-slideshow-using-ruby-on-rails-in-50-lines-of-code-and-no-javascriLet’s face it, nowadays, even the most complex web development tasks are expected to be written in JavaScript. Having said that, the consistently changing landscape of JavaScript is confusing and makes productivity difficult. And it is not as if JavaScript is the most user friendly language in the world. JavaScript is as popular as it is because it has always been a necessary evil in frontend web development.However, there was a time where JavaScript only existed to be sprinkled into your frontend to make it feel more dynamic. In recent years, in a search for perceived performance, large corporations began writing the crux of their applications in JavaScript in the frontend. This considerably shrunk the requirements for backend work in these applications. It is no secret that many (...)
#ruby-on-rails #frontend-development #framework #javascript-frameworks
-
#javascript No More
▻https://hackernoon.com/javascript-no-more-3398a72e8e93?source=rss----3a8144eabfe3---4By relieving the brain of all unnecessary work, a good notation sets it free to concentrate on more advanced problems, and in effect increases… mental power — Alfred North WhiteheadProgramming languages are for people — not computers. Computers don’t need any #programming #language other than machine code. Good programming languages help make problems easier for people to reason about. This is important because writing code is not just about solving problems. It’s also fundamentally about how you think, communicate, and comprehend.On the web today, we have one, dominant language: JavaScript. JavaScript was created because Marc Andreessen, “believed that HTML needed a ‘glue language’ that was easy to use by Web designers and part-time programmers to assemble components such as images and (...)
-
Design rollercoaster. 5 epic fails vs. 5 trendy must-haves
▻https://hackernoon.com/design-rollercoaster-5-epic-fails-vs-5-trendy-must-haves-91c2e052080d?soSometimes creating a web design is like walking across the minefield. You never know which creative solution will endear the users and which will make them leave the brand forever. And while research and analytics tools provide insights into the user’s preferences, some design errors are persistent. Today we want to take you on a rollercoaster ride of the five worst mistakes a web designer can make and the five trendy ways to correct them.Design originality that hinders usabilityDesigners get caught up in the creative flow and forget that they create interfaces for users, not themselves. And when people can’t find content, they turn from interested into annoyed and then just leave never to return. Unhelpful category names, an excess of links and menus, illogical structure and unexpected (...)
#frontend #design-must-haves #design-fail #web-development #web-design
-
Turning Design Mockups Into Code With Deep Learning - FloydHub Blog
▻https://blog.floydhub.com/turning-design-mockups-into-code-with-deep-learningWithin three years deep learning will change front-end development. It will increase prototyping speed and lower the barrier for building software.
In this post, we’ll teach a neural network how to code a basic a HTML and CSS website based on a picture of a design mockup.
-
▻https://github.com/imbrianj/debugCSS
debugCSS : (X)HTML debugging tool built with CSS
SummarydebugCSS is meant to be loaded on an existing page to highlight potentially broken, malformed or legacy (X)HTML.
Not all “errors” are created equally, so they are color coded to highlight severity. Green is “probably not a big problem”, yellow is “worth looking at” and red is “you really should fix this.”
-
Utiliser LESS dans SPIP - romy.tetue.net
▻http://romy.tetue.net/utiliser-less-dans-spip-
Et pour LESS c’est là :
►http://plugins.spip.net/lesscss.htmlEt pour SCSS c’est là :
►http://plugins.spip.net/scssphp.html
-
-
Comment fabriquer des thèmes CSS ? - romy.tetue.net
▻http://romy.tetue.net/comment-fabriquer-des-themes-CSSUn thème est l’habillage graphique d’un site. Il en définit les éléments identifiants : couleurs, style graphique, etc. Concrètement, il est constitué de déclarations CSS rassemblées dans une feuille de style additionnelle, simplement nommée « theme.css » […], laquelle peut appeler d’autres fichiers : images, polices, etc. Un thème est donc nécessairement rangé dans un répertoire, simplement nommé « /theme ».
-
Méthode Daisy, pour du CSS modulaire
▻http://daisy.tetue.netPlus personne aujourd’hui n’est seul·e à produire son CSS : outil de publication, plugins, intervenants différents… Les styles en vigueur sur un projet ont plusieurs origines. Pragmatique, la méthode Daisy leur donne successivement la main :
1. posons d’abord la base CSS,
2. puis laissons passer les plugins additionnels,
3. et reprennons la main, en dernier, pour définir nos styles spécifiques.-
Quand on travaille en pré-processeur, il semblerait que 1 et 2 soit entièrement inversé. En effet, en pré-proc on génère un thème en utilisant des frameworks et des modules. Ce qui est dans 3, utilise ce qui est dans 1 en l’incluant directement afin de pouvoir l’utiliser (par exemple avec @extend). « theme.scss » inclut les trucs de 1.
Or ce qui est dans 2 est ajouté automatiquement par le CMS ou autre outil, de manière externe à la construction du thème. Le 2 est hors pré-proc et a sa propre vie, développé par d’autres et inséré automatiquement.
Ce qui fait qu’on a alors plutôt 2 / 1 / 3, avec 3 incluant 1 en son début.
<head>
- feuilles insérés par le CMS
- theme.css généré par agrégation, incluant 1 en son début
</head> -
Je précise que je parle de ça car la documentation évoque le cas du « pré-processing » :
Daisy s’utilise de façon progressive, sur mesure : en feuille unique, en trois feuilles, ou en framework CSS multi-feuilles (avec ou sans concaténation, preprocessing , etc.)
Et donc je commente uniquement ce cas-là. Et même plus précisément en fait : je commente uniquement le cas où on utilise pré-processeur ET un CMS qui ajoute des choses.
-
Le thème (en 3) n’a pas à inclure la base (= 1), jamais, celle-ci devant passer avant (en 2) les outils (dont CMS) et divers plugins.
La méthode Daisy décrit ce qui se joue dans le navigateur (du CSS donc), quelque soit la façon de le produire (avec ou sans preprocessing).
En cas d’utilisation avec preprocessing, la personnalisation ne se fait plus seulement en 3 (par surcharge CSS), effectivement, mais aussi sur la base, par paramétrage, des variables. En revanche, il n’y a aucune bonne raison d’intervertir l’ordre d’appel dans le navigateur.
-
J’ai pourtant tenté de l’expliquer : en pré-processing, le thème (les choix personnels pour tel ou tel élément) peuvent appeler un ou plusieurs styles définis dans les feuilles du 1. C’est même une bonne pratique pour ne pas redéfinir des styles similaires en plusieurs endroits.
Par exemple si on choisit graphiquement d’afficher tel lien précis « comme un bouton », alors on va dire
.bloc_truc a{ @extend .button; }. Ce choix personnel peut changer plus tard si on pense que graphiquement ou ergonomiquement ça ne va pas, c’est donc bien dans « theme.css » (3), en revanche la définition générique d’un bouton, c’est bien dans 1. Or pour pouvoir utiliser ce code, tout ce qui est dans 1 doit être importé (@import) au début de 3. Sinon c’est inutilisable et le pré-processing ne sert à rien.
-
-
Medium’s CSS is actually pretty f***ing good. — #Medium
▻https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06I’ve been meaning to write something about the #CSS at Medium for a while because I’m not completely ashamed of it…
So how did that happen? What did we do differently? OMG, how can you do the same thing? Or learn from us, or something?
What follows are some notes on our CSS, the steps we’ve taken to get it to where it is, and the world we live in today.
-
Preface — Magic of #CSS — Adam Schwartz
▻http://adamschwartz.co/magic-of-css/chapters/prefaceCSS is a mess. We all love it, but it’s a mess. I liken it to English: there are a bunch of rules, and you can learn them. But sometimes you’re better off just trying shit and seeing what works and what doesn’t. Magic is a codification of what I’ve learned in that crazy process.
The material in this textbook is intermediate-to-advanced. It assumes an understanding of the CSS syntax, cascading and inheritence, and commonly used selectors. It also assumes you’ve had enough experience with CSS to have learned not to make these common mistakes anymore.
-
Why front-end developers are so important to the future of businesses on the web « paulcarvill.com
►http://www.paulcarvill.com/2009/09/why-front-end-developers-are-so-important-to-the-future-of-businesses-oThe roles of web developers and web designers have been around for over 15 years now, and the role of a client-side or front-end web developer started to mature into a distinct entity around 10 years ago, as the content-presentation-behaviour layer paradigm became embedded in people’s working methodologies [...]. Unfortunately the perception of the front-end developer’s role remains somewhat coloured by an early association in observers’ minds with the other, loosely related role of the web designer. The role of web designer is an extremely important and valid one, but it is very different to that of the web developer, and the lack of a clear distinction between the two, in some people’s perception, is unhelpful and does both roles an injustice.
