pix2code - pix2code: Generating Code from a Graphical User Interface Screenshot

•    Python

Transforming a graphical user interface screenshot created by a designer into computer code is a typical task conducted by a developer in order to build customized software, websites, and mobile applications. In this paper, we show that deep learning methods can be leveraged to train a model end-to-end to automatically generate code from a single input image with over 77% of accuracy for three different platforms (i.e. iOS, Android and web-based technologies). The following software is shared for educational purposes only. The author and its affiliated institution are not responsible in any manner whatsoever for any damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of the use or inability to use this software.

front-end-interview-handbook - 🕸 Almost complete answers to "Front-end Job Interview Questions" which you can use to interview potential candidates, test yourself or completely ignore

•    Javascript

Unlike typical software engineer job interviews, front-end job interviews have less emphasis on algorithms and have more questions on intricate knowledge and expertise about the domain — HTML, CSS, JavaScript, just to name a few areas. While there are some existing resources to help front end developers in preparing for interviews, they aren't as abundant as materials for a software engineer interview. Among the existing resources, probably the most helpful question bank would be Front-end Developer Interview Questions. Unfortunately, I couldn't find many complete and satisfactory answers to these questions online, hence here is my attempt at answering them. Being an open source repository, the project can live on with the support of the community as the state of web evolves.

Front-End-Checklist - 🗂 The perfect Front-End Checklist for modern websites and meticulous developers

•    Javascript

It is based on Front-End developers' years of experience, with the additions coming from some other open-source checklists. You can contribute to the Front-End Checklist App reading the README_APP file which explain everything about the project.

Front-End-Design-Checklist - 💎 The Design Checklist for Creative Web Designers and Patient Front-End Developers

The Design Checklist for Front-End Developers is an exhaustive list of elements which can help developers to analyse and understand web designs and ensure the quality of their Front-End development. The Design Checklist for Front-End Developers is an exhaustive list of elements which Web Designers and Front-End Developers need to take into consideration to facilitate their collaboration. The following elements are a mix between known practices and new elements based on a long experience analysing web designs.

Front-End-Performance-Checklist - 🎮 The only Front-End Performance Checklist that runs faster than the others

Performance is a huge subject, but it's not always a "back-end" or an "admin" subject: it's a Front-End responsibility too. The Front-End Performance Checklist is an exhaustive list of elements you should check or at least be aware of, as a Front-End developer and apply to your project (personal and professional). For each rule, you will have a paragraph explaining why this rule is important and how you can fix it. For more deep information, you should find links that will point to 🛠 tools, 📖 articles or 📹 medias that can complete the checklist.

front-end-handbook-2017 - 2017 edition of our front-end development guide

•    Javascript

This is a guide that anyone could use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it in 2017. It is specifically written with the intention of being a professional resource for potential and currently practicing front-end developers to equip themselves with learning materials and development tools. Secondarily, it can be used by managers, CTOs, instructors, and head hunters to gain insights into the practice of front-end development.

front-end-handbook-2018 - 2018 edition of our front-end development handbook

•    Javascript

This is a guide that anyone could use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it in 2018. It is specifically written with the intention of being a professional resource for potential and currently practicing front-end developers to equip themselves with learning materials and development tools. Secondarily, it can be used by managers, CTOs, instructors, and headhunters to gain insights into the practice of front-end development.

dev-practice - Practice your skills with these ideas.

Practice your skills with these ideas. The best thing for you to practice, and give back to the community, is to contribute with Open Source projects.

slim.js - Fast & Robust Front-End Micro-framework based on modern standards

•    Javascript

Slim.js is a lightning fast library for development of native Web Components and Custom Elements based on modern standards. No black magic involved, no useless dependencies. It uses ES6+DOM native API to boosts up HTML elements with superpowers.

front-end-discourse - A place to discuss what it means to be a front-end developer.

This repository is a call to action for us, the front-end community, to all agree on what our jobs are and how we describe them. This will not only help us see how our individual skill-sets fit into the spectrum of front-end web development, but it can also help recruiters and hiring managers write job posts that attract more qualified candidates. I'm hoping that in creating this repository, we can have a designated place to start a conversation that will ultimately result in evolving, community vetted job titles and descriptions for front-end developers by front-end developers.

vuetube - Video resources that will help you to improve your Vue skills

•    Javascript

A SPA that fetch Video resources from Youtube using Youtube Data API 3 and Vuejs for the rendering part. For a detailed explanation on how things work, check out the guide and docs for vue-loader.

graduation-frontend-setups - This repository optimises your front-end workflow

•    Javascript

These setups can be installed during node start.js.

nice-front-end-tutorial - 🌍 Constantly updated front-end resources, tutorials, opinions

•    Javascript

🌍 Constantly updated front-end resources, tutorials, opinions

mac-setup - 🛠️ Front end web development setup for macOS.

•    Shell

This document describes how I set up front end web development environment on my MacBook Air with macOS High Sierra 10.13.6. After a clean install of operating system, there are a couple of tweaks I like to make to the System Preferences. Some of them are not strictly related to web development environment - I use them because of my personal habits.

switch-gulp-to-webpack - 🚀 Starter kit for creating website using Webpack instead of Gulp.

•    Javascript

Clone the repo and install dependencies. Then open http://localhost:8080 to see your website.

gotcha - Turn your Framer prototype into its own live developer spec.

•    CoffeeScript

Press a key and your Framer prototype becomes its own live, self-documenting, developer-ready spec. When enabled, Gotcha provides precise information about your project's elements: from positions and colors to font styling and even component names and relationships. Best of all, Gotcha works seamlessly with Framer Cloud, so the links you send can work as specs, too. Check out the demo. To install manually, download the gotcha.coffee file and drag it into your project's code editor.

patternfly-design - This repo contains the design documentation for the PatternFly project that is published on patternfly

•    HTML

The "patternfly-design" repo houses the design documentation for the PatternFly project. Accepted content will be merged into the "patternfly-design" repo, so that they can appear on the patternfly.org, website. This open format enables contributors to easily access and contribute design documentation and assets. It also has the benefit of dramatically reducing overhead for posting to patternfly.org, as the site can automatically consume the markdown files submitted by designers.

epic-react-exercises - Practical React exercises with detailed solutions.

•    Javascript

A few practical React exercises with detailed solutions. This site is very loosely based on Kent C Dodd's Epic React Workshops.

giraffeQL - 🦒 Developer tool to visualize relational databases and export schemas for GraphQL API's

•    Javascript

Users can create new tables, connect columns, and edit data while seeing their changes take effect in a real-time GraphQL code preview. The code can be exported ready-to-go in any application. Sign-in page: Sign up for an account through GitHub OAuth, or just continue as a guest. Registered users enjoy additional project-saving functionality.

tailwind-airbnb - A demo of how to build Airbnb's home page using Tailwind CSS

•    HTML

A simple starter project for playing around with Tailwind in a proper PostCSS environment. I used Airbnb as a source of inspiration to teach how to use the framework. Now you should be able to see the project running at localhost:8080.