What are /r/Frontend's favorite Products & Services?

From 3.5 billion Reddit comments

Both Vercel and Netlify are both free(to a certain extend) fronted hosting websites. They also have automatic deploy when pushing which can be pretty handy.

Here's a short list, but hopefully it'll give you some things to look into. Any of the items should be easily searchable in your search engine of choice.

You should know:

• HTML5, including semantic sectioning elements (article, header, footer, main, aside, etc.)
• CSS3, including transitions and keyframe animation

You need to know:

• JavaScript. Pick up a copy of Crockford's "JavaScript: The Good Parts."
• Version control. Especially git. Doesn't matter if you use GitHub or BitBucket -- just keep track of your files.

You'll likely want to learn:

• CSS Preprocessors / postprocessors. SASS leads the pack, LESS is equally useful, Stylus is equally useful, much faster than the alternatives, but much less popular. PostCSS is gaining traction very quickly, is very fast, and will eventually be the most powerful of the bunch.
• A JavaScript front-end framework. The two biggies are Angular and React. Angular 2.0 will be out relatively soon, and will not be backwards compatible. Beyond that, Backbone, Vue, Ember and Knockout are your best bets. I really, really like Vue.
• A build tool. Gulp and Grunt are the two big contenders. Gulp is easier to use, and quicker since it utilizes streams of data instead of relying on writing things to disk between steps.

Useful tools:

• NPM - The Node Package Manager. You'll find this indispensable in installing packages.
• Bower - Another package manager. There's no clear benefit to using this over NPM in my mind, but it's still a great tool.
• Browserify, Webpack, etc. - Bundle everything up for deployment.

I think I feel your desire for an alternative. I've tried some myself. After doing several frontend projects in 2018 I basically came to the following conclusions.

1. I generally try to use vue-cli, create-react-app, and nuxt.js/next.js when possible. They largely abstract away the need to deal with webpack. I find this route works for most projects.
2. If I am doing something more complicated that needs to get into the weeds I think that webpack is still king. It understands more and can be configured to do more than anything else I have tried. There is no doubt a learning curve, and the switch from 3 to 4 was absolutely a pain for me, but it's still an extremely powerful tool.
3. If I am doing something very simple I use Parcel. It's super easy to use (until it's not, but a lot of simple projects won't get there).

I actually think the future is in tools like Parcel. I look forward to it.

Yeah, this is a known issue. Something you can do is set 1/100th height of the screen in a CSS variable, like this:

const calcViewportUnits = () => { const vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', vh + 'px'); }; You will need to put this function in an eventlistener that listens to the resize event. And in your CSS you can do something like this:

height: calc(var(--vh) * 100);

This will always give the right ratio for vh.

And to test mobile webbrowsers, you can use Browserstack, however it is not free.

https://jekyllrb.com/

Jekyll is a static cms, meaning once you did the html template, you simply add pages with some header configuration to generate a blog.

Biggest upside IMHO is that you can host your blog for free on github pages.

It's a free cms, that comes with free hosting so you only might need a domain if you don't want a something.github domain. And it's pretty simple to develop locally and push to github when ready.

No actual coding required, only yaml configuration files.

https://parceljs.org and https://rollupjs.org/guide/en are good alternatives.

Webpack is great though, though their docs definitely need some work. We’re still stuck on Webpack 3 because of the lack of documentation around Webpack 4 - it’s a little better now but on launch day there was almost no documentation at all.

https://ngrok.com/

Second this. It makes your local dev URL internet facing with a new URL generated every time you start ngrok. you can access the url on any device like normal.

This however means your Dev work is exposed to anyone who gets your URL, very very very unlikely but Always close ngrok after use don't leave to ports open for longer than necessary.

Code wars is great for logic/algorithmic based Javascript challenges. https://www.codewars.com/

And freecodecamp has some basic challenges for React.

Lastly, I'd recommend just trying to recreate a site/webapp using React. Like a mini Netflix or Asana, etc.

I've been working on this little side project the past couple weekends. Any time I found a neat SVG for a web project online, there would always be some arbitrary amount of baked-in white space that I had to account for in my layout. This tool crops the SVG to just its contents. You can download the cropped file(s) or copy the markup to clipboard. That's really all there is to it.

Launched it on Product Hunt less than an hour ago!

https://www.producthunt.com/posts/svg-crop

Good job.

I'd suggest adding perspective to the card container so the flip animation feels a little more realistic.

I forked it here https://codepen.io/evoactivity/pen/PdWrKj

CKEditor had this rant a few years ago, that starts with:

> Every once in a while some developer notices that there’s still no perfect WYSIWYG editor for the web on the market

It took them years...

https://ckeditor.com/blog/ContentEditable-The-Good-the-Bad-and-the-Ugly/

You can just use pseudo-elements and rotate them with a transform: https://codesandbox.io/s/epic-thompson-ivswq?file=/index.html

Although an SVG as background would probably be better.

i realize this isn’t the question but i’d absolutely consider accessibility with that hero. between the bright image and white font, it’s very challenging to read. lighthouse is a great tool to get an idea of how accessible your site is with specific breakdowns. maybe try a darker font color or a dark overlay on the image and turn down the opacity.

Well, you've learned how to write an infinite loop, that's a good start :-)

Seriously, they are different languages altogether, and the scripting/programming distinction is not really applicable anymore. What you need to learn is JS, but I'll assume you already know that.

I can't recommend you a JS tutorial, but once you have a basic grasp of the language I recommend you to try https://www.codewars.com/?language=javascript for exercises. It is valuable both for figuring out solutions yourself and to check how others have solved the same problems.

Free Code Camp is a great place to get some basics down.

The Odin Project is a great place to put those new skills to the test (and introduces you to GitHub, a very good skill to have).

This kind of markup clutter is why I wish more browsers would get a move on and ship Web App Manifest.

At this point, an HTML file is just sort of a bootstrap for JavaScript. The smaller and simpler we can make it, the better.

So basically nodejs without needing a package.json. Imports work like this instead.

import * as log from "https://deno.land/std/log/mod.ts";

Plus typescript out of the box plus some security guarantees by sandboxing and restricting access to the system.

Seems like a solid improvement on node in theory. I wonder how it will play out.

https://deno.land/manual.html#philosophy

LPT: use http://caniuse.com/

Keep in mind it uses global browser stats. If you go to the settings you can import the browser-usage from your own Google Analytics and use that to see how much of your actual audience can use a feature.

You can use the old syntax - just run your modern syntax through autoprefixer

As for the Numbers - it totally depends on your audience but stats counter shows global usage of ie11 to be very high- which is great!

http://caniuse.com/usage-table

Aside from implementation issues, that's a pretty dodgy graph generally. Hard to compare similarly sized wedges to each other. Unless it's literally a dial with ranges (which might be better represented as a sequence of colour, e.g. from blue to red) it's not a good way to show data.

This gauge chart on D3 might be of interest but I'm not sure it quite addresses the use case: http://c3js.org/samples/chart_gauge.html

Another: http://codepen.io/jaketrent/pen/eloGk

They do offer the tools to use it. It's just a command-line tool first. Others have made GUI apps (of which Sass recommends several), but in the end all they do is run the same terminal commands for you.

I'll agree, there is a bit of a barrier to entry for newcomers because of the skills required, but their target audience is more the power user who knows CSS very well and wants to expand their tools.

Susy is an interesting grid system. Instead of using classes you define your own and use their robust mixins.

Foundation is a popular alternative to Bootstrap. I believe it is modular and you can include just the grid system without the whole framework.

Page optimisation is a must for a frontend developer. A quick search on Google gives the following info/courses:

https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing

https://www.udacity.com/course/website-performance-optimization--ud884

Thanks for the post btw, I will add the course on my todo list.

Bulma is based on flexbox, which is only partially supported by any version of IE http://caniuse.com/#search=flexbox

If you are still supporting IE8, I reckon you're gonna have some trouble using any relatively modern frameworks.

I suggest you look for jQuery 1.x based frameworks... like Bootstrap 3.

This is what gets me about using straight VanillaJS. It's an absolute cross-browser nightmare. I seem to have enough of that with CSS alone.

IE11 doesn't even fully support such a simple part of the API. http://caniuse.com/#feat=classlist

I include jQuery on virtually every project I do. I could sit there for hours trying to code my own VanillaJS API wrappers, but really, why? The truth is, jQuery represents to me, an API so much more reliable and intuitive and one that any other developer can jump on board with. The documentation is there and well rehearsed.

I'd love to use VanillaJS, but for me, the cons outweigh the positive's. As soon as your app becomes even a little bit more involved, the use of a decent DOM library is essential (if you're not already using some other framework / library).

Python is for data science / web scraping / machine-learning

You want to learn Javascript (+ HTML & CSS,) but most of your logic will be in JS

Here's a great resource to use as a guide: https://www.theodinproject.com/

There's been a lot of fud about bower recently. I'm undecided about this but it's good to talk about.

Bower isn't dead. http://bower.io/blog/2015/bower-alive-looking-contributors/. Something was published recently that said the project was dead, but it's not.

I have concerns about only using npm and I think it boils down to two issues, mainly.

First, in the server I don't like the idea of mixing my node modules with my web modules. npm does a good job with "npm list" about identifying unused dependencies by tracking modules that haven't been required. Unless I'm mistaken, dropping web components into package.json is going I show them as extraneous. This is going to make it very messy to know when/if a module is being used or not.

Second, I'm really against the idea of bundling all the js into a single file. I'm not too concerned about multiple copies of big files, but rather the lack of control. A well architected app should be pretty modular. Part of that includes only loading the resources you need when they're needed. A modern web app can potentially use hundreds of kb of javascript. But if my mobile users are on a slow connection, they only need to get the minimal js initially to start the page. If they have to download 300kb first, that might be 5-10 seconds before they can use the app. That's just unexceptable. With gulp or other build system, I am able to package up my js and deliver it as needed.

Two things I really want to see in place with using npm are:

1) Have a web_modules path along with node_modules. That way everything uses npm, but there's a clear separation of concerns.

2) Using browserify, webpack, or whatever, retain control over how things are packaged for delivery to the browser. This may already be possible but I haven't looked at it yet.

I think your best bet would be figma community files. Here's an example - https://www.figma.com/community/file/886138994287878976/Hotel-Website-Design

Another option would be to integrate a cms. It might be more complexity than you're looking for, but it means you can let others add and edit the content without you needing to dig into the code. I use CraftCMS for client work and it's super easy to get the hang of but very powerful when you need it.

The gist of the templating is instead of having something like <h1>a heading</h1> you have <h1>{{ entry.heading }}</h1> and new pages will stick the heading in there

https://atom.io/ I highly recommend Atom.
In comparison with Visual Studio it's not IDE but it's light weight text editor. But I think it's the best for small projects. i've tested some dev tools and in my opinion:
- vim / emacs needs time to learning specific work techniques
- brackets very slowly when working with many files and folders
- Sublime v2/v3 it's still in beta version and costs $70 if you need a license
"Sublime Text may be downloaded and evaluated for free, however a license must be purchased for continued use."

Kind of true though. Node.js has installers, binaries, or you can compile from source. Compiling is arguably the most complicated way to do it, and even that's an essential part of programming.

The gist of the article is off; most programmers understand that there is a vast array of areas of expertise and that a embedded dev doesn't necessarily know anything about front end development and vice versa. It still doesn't override the need for basic self-help and resourcefulness, which are probably the most important aspects to being a successful developer.

I store all my clients info in a password manager (e.g. LastPass).

That way I can generate random, secure passwords and don't have to worry about losing them or not having them on another device when I need access to them. It also has secure "notes", so storing IPs etc is no issue either.

> The biggest advantage of SASS is that it's all pre-compiled on your machine, not on the clients. I'm not terribly sure, but I think you can do the same with LESS.

You should never, ever, ever, send pure LESS down the pipe and have the browser compile it with LESS.js at the end in production. Maybe for development - maybe. There's an entire tutorial on how to compile LESS on the site.

The Pragmatic Programmer is a great book about programming, not super specific to frontend architecture but I think it still applies because it gives you a lot of ideas and a mental workflow in how to structure code for efficiency

Did you copy the globe from Github who copied it from Stripe?

I like the colour pallete and overall site-design though, good job.

Looks like you have a collection of movies and you add a document with an id of user.uid to this collection. Because the id is always the same for the same user you end up replacing the document. So your data structure only allows for storing one movie per user.

You could try to add a movie with a unique id each time and store user's id as a property of the document, e.g.

db.collection('movies').doc().set({ u_id: user.uid, m_id: movie.id,name: movie.name || movie.original_name, url: movie.backdrop_path
})

Or make movies a subcollection of users. See https://firebase.google.com/docs/firestore/manage-data/structure-data

Yep, no problem.

Good HTML should use the right tags for the structure of the content. If you're making a list with <p> tags, or making a page layout with <table> tags, you're doing it wrong. Using Semantic HTML really impresses me.

Good HTML should validate. You can check that here or install one of the many VS Code extensions to check your HTML as you type. As with all things in development, getting it wrong and learning from the error messages in the validator is a valuable way to learn. Failure is constructive.

dont worry, I always have this problem, I don't know the correct name to look it up lol

here are some examples (the third one)
and with bootstrap

Check out snipcart, you can simply create a shop with snipcart and add products into simple HTML page with some JS, they provide a checkout page and so on.

https://snipcart.com

I would recommend taking a look at three.js if you're interested in doing 3D on the web and are just learning Javascript. It's a massively popular 3D library with a ton of support.

While it handles a lot of the lower level WebGL stuff for you, if you do have a curiosity to learn the lower level implementation it is open source, so once you get the hang of the basics you can always dig into the code.

Good luck! I've done a bit of work with three.js in the past, so if you do decide to use it, feel free to reach out with questions.

It takes all of 5 minutes to set up either Open Web Analytics or Piwik. I personally prefer Open Web Analytics for the more streamlined interface.

Poor man's solution:

• get all the most popular desktop browsers, and a few older versions

• ietab in chrome can emulate ie 6 and up

• browsershots is a free service which can give you screenshots of your site on various browsers. You have to wait a while, and it's not perfect by any means, but it's free.

• browsersync to sync to any devices you happen to have

If you have money

• browserstack or something like it.
• or an insane room full of tonnes of devices you've bought all hooked up to browsersync.

Those are all common.

With the salary question, always turn it to be "Depends on the benefits, what range are you targeting?"

Also ask "What are you looking for in an ideal candidate?" You might not meet everything but it gives a lot of information.

Third, unless it's SUPER entry-level (like paying minimum wage entry-level), they're going to have technical questions. HackerRank and CodeSignal are two tools that can help prepare you.

When you say "no experience", do you mean no professional experience or no personal project experience? Also, do you have a degree beyond high school? A degree isn't strictly necessary, but it can help you even if it's not related.

Modern front end developer toolkit:

• HTML5/CSS3 and knowing when to know certain features based on browsers: http://caniuse.com/
• Javascript - do not start with jQuery. Learn pure JS first.
• JS Frameworks - Backbone, Knockout, Angular, Ember, React. Some are more heavy-weight than others (Angular), some work well on top of other frameworks (React). I'd suggest learning at least one of these, the others will come easier after.
• CSS pre-processors such as LESS or SASS.
• Task runners - Gulp or Grunt. Automate your build processes.
• Responsive design patterns
• Wishing that JS was statically typed? Check out TypeScript or Dart.
• Use the AMD pattern in your front-end code with RequireJS
• Git for source code management. Use GitHub to publish open source projects/contribute to other open source projects

That used to be the case, but they've added tree-shaking recently: https://webpack.js.org/guides/tree-shaking/

I don't know the difference between named and default, but tree-shaking is definitely in there to some extent now.

I like https://processwire.com/ you can self-host this php CMS, click together fields for your datamodels and it also has a GraphQL module, meaning you probably can use it without touching php and just query for the data e.g. with Svelte. Great multilanguage support, too.

I understand what you mean, I was in a similar situation. I think react felt complicated to me initially because the code samples I saw everywhere had JSX and ES6. Wrapping my head around those things took a lot of time.

So I would suggest you to go through the official documentation which is quite clear with links to codepen examples which makes it easier to test it out.

https://reactjs.org/docs/hello-world.html

Later you can start looking into Babel, Redux, Webpack, etc.

> when I looked at it on my iPhone it was only taking up 3/4 of the screen and not working as intended.

I'm betting you haven't got the correct meta tag set for pixel ratios (i.e. mobile devices typically have a higher pixel densities) :

https://developers.google.com/web/fundamentals/design-and-ui/responsive/

<meta name="viewport" content="width=device-width, initial-scale=1">

> Bootstrap is looking to realign everything in columns based on if you're mobile, tablet or desktop... and that's not what I want.

Only partially true. Yes it does use columns / a grid, however you get to determine how many of those columns your content takes up (almost like a way of declaring width).

The default grid has 12 columns, therefore if you specify a class of col-12 (assuming you're using latest bootstrap v4 in beta) then when implemented correctly it should take up the entire width.

https://getbootstrap.com/docs/4.0/layout/grid/

> I want everything to look the same no matter what the width of the device is, I want to keep that "640px width" look, stretched out on small devices but have black bars or background or something on larger devices.

Lol you realize this will look ridiculous and potentially be unusable especially at larger resolutions (1440p / 4K)?

Mimicking a mobile app is fine at smaller resolutions but you need to figure out how to expand this on larger screens, such is the nature on responsive design.

> Bootstrap? Something else? Go hardcore and make all the styles myself? I need a direction.

Doesn't matter where you go, bootstrap, foundation, bulma, skeleton, etc most front-end frameworks will use a grid system to address sizing and layout.

I'd do it in the following way:

1. Have your regular menu markup
2. Have a duplicate of the menu under a 'More' dropdown
3. Use mediaqueries to hide the 'More' dropdown when all links fit the viewport
4. Add additional mediaqueries to hide links from the regular menu as they don't fit, and to make them visible in the 'More' dropdown

Here's an example I whipped up: http://jsfiddle.net/xgrjsgxx/

I'm using Sass, but it should be pretty clear what's going on.

You could optionally create the duplicate menu for the 'More' dropdown using JavaScript.

Hi!

My React Bootstrap 5 launched a few hour ago and is doing well so far:
https://www.producthunt.com/posts/react-bootstrap-5

I would really appreciate your reviews & support on the launch.

It is a UI Kit that provides Material Design styles for React 17 integrated with Bootstrap 5.

Material Design:

- ensures accessibility

- makes your design intuitive

- saves you lots of time

- you don't have to fumble in CSS for the whole day - everything is predesigned by professionals - you can simply copy & paste

Bootstrap:

- makes your projects responsive (mobile friendly)

- is easy to learn, use & modify

- is flexible & simple

React:

- ensures faster rendering

- is SEO friendly

- allows writing custom components

- is fast & pleasant to use

I took the best aspects of each and combined them into one robust Open Source tool.

Enjoy!

This is awesome, BUT... I must support IE11 :-(

http://caniuse.com/#search=object-fit

Usually I just use the image as a background image for the container, using background-size:cover or :contain as a solution. Of course, this has it's limitations, like if it must be printable, etc. But nothing that can't be worked around.

Edit: That's not to say I'm not looking forward to using this when Edge 16 becomes the standard and I can drop IE11 support.

With React, you basically write HTML with JavaScript using something called JSX. It’s a little confusing at first, here’s an article to help you understand a little better.

https://reactjs.org/docs/introducing-jsx.html

CodePen link: https://codepen.io/Tepec/pen/aKNeeN

Also, small note: I added a small JS function to enable "swiping left/right" through panels on touch-enabled devices, and some dirty code to enable keyboard arrow navigation as well.

In their current state, I'd probably just remove them.

Animations should enhance the user experience, not be done for their own sake (unless your page is some sort of art project). A common use case is an animated underline on hover over a list item or on some other user action. Or a lightly animated svg when the object comes into view.

Check out Stripe's homepage animations for a good example of how to use them with a light touch.

try theodinproject.com

i did angelas course along with freecodecamp but it wouldn't stick and i wasn't able to build anything. odin project changed everything. they make you really comfortable with using your own dev environment and the whole thing is project based. highly recommend

Start by working through the tour of heroes project in the angular docs

https://angular.io/tutorial

I had a similar position a about 8 months ago, having to transition from React to Angular, and the tour of heroes was a good first step.

As I'm arguing elsewhere in the thread, there is no use case for an icon without semantic meaning.

Font Awesome themselves say that title attrs are "to provide a tooltip for sighted mouse users." Source. I'm not sure what a11y point you think you're making here.

Regardless, their own example code is dogshit compared to some HTML that achieves the same result without using a font icon:

<i aria-hidden="true" class="fas fa-car" title="Time to destination by car"></i>
<span class="sr-only">Time to destination by car:</span>
<span>4 minutes</span>

<img src="car.svg" alt="Time to destination by car" />
<span>4 minutes</span>

You claim that HTTP is faster and transmits less data, and while this is true the difference is almost negligible. The CPU increase on the server is about 2% (according to the same article), which is also not such a huge difference as to decide against HTTPS altogether.

Some things the designer should do:

1) Formalize a color-palett, use the swatches menu and name the colors the same in your .less (or other) file.

Example: http://i.imgur.com/ILDyZfu.png

2) Use the layer comps menu, to reduce the clicking around.

And on your side, get the http://css3ps.com plugin to create css from layers, it's way better then the built in tool.

As mentioned, if this is your first website and you intend to pursue Front End Development - and you have time to do some learning while you build - I'd recommend starting from a blank CSS (or SASS/LESS) doc and going from there.

However if you need a quick framework to get your site off the ground and don't have time to spend on learning as you go, I've been using Spectre.css recently. It's ~10kb, Flexbox based, and works down to IE10+.

It depends on what you're looking for in a CSS framework. Your question is quite broad. What kind of tools are you looking for?

For instance, Bourbon is an awesomely handy Sass mixin library to make it a little cleaner to write good CSS/Sass. Check the docs and you'll see some of the handy little bits it does for you (like writing browser prefixes).

If you use Bourbon, then you can use their Neat library for a dead-simple, semantic grid system which makes source ordering viable and easy. Neat saves me hours of work and pain, and I don't have to rewrite my HTML just to change the layout a bit.

Another suggestion is to try out https://tailwindcss.com/.

It really helps with designing components, since, instead of trying to think up a proper class name to use, utility classes are combined to achieve the desired result.

Here is the link for Yeoman site. http://yeoman.io/

Yeoman is a scaffolding tool. Meaning that it generates project templates for you. Yeoman is comprised for 3 different frameworks.

Yo -> actual scaffolding application Grunt -> Build System Bower -> Package Manager for your UI dependencies

This is literally from their main page:

>Yeoman helps you kickstart new projects, prescribing best practices and tools to help you stay productive.

Check out the link and go through the tutorial. It will all make sense once you do that.

Good Luck!

Wow this is basically the nightmare scenario for why I don't use Bootstrap. Foundation is much easier to override and keeps the base theming to an absolute minimum precisely because of situations like this one.

Short of switching entirely away from Bootstrap, have you tried something like Yahoo's PureCSS? I've never had to integrate it with Bootstrap, but the framework is exceptionally lightweight and it's supposedly easy to drop in Bootstrap modules as needed. Might help you and your UX people find some common ground. (see the bottom of http://purecss.io/extend/)

Damn, I was just thinking about making something like http://ionicframework.com/ for Ember.js based on Foundation 5, but now Foundation's doing it themselves and they're choosing Angular too.

I guess competing with Ionic is easier than competing with Bootstrap, but I really expected them to be more like Embereños.

The good news is you don't need to be a designer to be a front end developer. I've always worked pretty closely with a designer, and the bulk of that responsibility usually falls to them. Although design chops are still very helpful, a lack of them isn't a huge barrier to landing a development job.

The better news is that, like most things, design is a a learnable thing. I would start by just reading the documentation on frameworks like Bootstrap and Material Design. That will get you caught up on most of the standard conventions and best practices in web design. styleguides.io is a great collection of (surprise) style guides from various companies, which will let you get a feel for all the different ways design is put to use in the real world. If you want to go real deep, online learning platforms like Treehouse will get you access to more design courses than you'll know what to do with.

Not sure what your client's time frame is for this, but if you're really determined on doing this, I'd suggest burying your nose in some books or hitting up some in-depth tutorials.

Treehouse has updated their site with some really good WP and PHP vids, and right now you can do a free 14-day trial. I'm not a person who recommends shit I don't 100% believe in, so if you're serious about this I'd definitely check 'em out.

I tried (and by tried I mean, read about and got confused by) many other CMS's but the one I managed to implement easily and really like so far (I'll be using it on my personal site) is Couch CMS. Super simple to use, good docs.

Free version requires you to attribute them in the footer, paid version gets rid of that and allows for branded UI

edit: added link

> CLEAN, not easy to understand code.

Have you read any of Robert C. Martins work, seen any of his lectures, or participated in any of his training? "Clean Code" is all about writing code that "reads like well written prose"

What style bootcamp are you taking? Lots of people have a big preference. Some prefer videos so YouTube and Udemy are great. Others like code-along-style. I've heard some good success stories regarding FreeCodeCamp:

https://www.freecodecamp.org/learn/responsive-web-design/

Yes, cookies are transmitted as part of the headers. You can see this by opening up the dev console and looking at the first request for the HTML page itself and viewing your cookies (I'd paste mine, but then anyone would be able to session jack me!). This means that the more cookies you have, the more overhead every request you make to a domain has, because the cookies are included with every request. This is one of the reasons people use CDNs, because they explicitly do not include cookies.

They're stored on the filesystem and you can find them on your computer.

set image as the background to two divs. stack them over each other. set css3 filter:blur() to the top one. this might even work with legacy ie if you look up the old ms filters.

something like http://jsfiddle.net/ap1Lkv0c/

I see most people have looked at the visuals and content, which I feel like you've pretty much nailed down. However, when it comes to accessibility there's quite a lot to work on. It's not much work, but it's very important and will help you write better code.

First of all, I'm noticing you don't have any landmarks. Neither header, nav, main, article or section. This will enforce better semantics, and do a lot of the work to make the experience when using assistive technologies a lot better. Check out this article to get started.

Looking at contrasts and colors you've pretty much nailed it. Supporting both AA and AAA contrast requirements all over. Really great work!

In your navbar, the GitHub link and Email link is unreadable to a screen reader. So when navigating your page with a screen reader, the links just reads out "Unlabelled link".

Check out a11y.coffee for more information on how you can improve accessibility. Remember: Accessibility is about so much more than visually impaired users. This is about usability, navigation and overall experience of your site.

Yes. This guide is acceptable for setting up a lamp stack, assuming Ubuntu: https://www.digitalocean.com/community/tutorials/how-to-install-linux-apache-mysql-php-lamp-stack-on-ubuntu-14-04

That said, if you have control over your project's technology, use literally anything but Joomla. There are so many better options available these days.

i feel like that's not enough information to make a decision either way. the digital ocean website does all of that with a "traditional" server-driven site, whereas reddit itself can get you to make a user account and start voting on user content with just one trip to the server (technically two, but the second is non-blocking and the user isn't redirected.) they're both really well-designed UX.

there's not a one-size-fits-all solution, honestly. it's contingent on the project. things to consider:

• is your app small enough that you can feasibly deliver everything you need across the wire all at once?
• if not, can you organize it in such a way that you can load in the rest of the data you need in a non-blocking way?
• is each individual page performant enough that you can make a round trip to the server every time the user requests a new resource?
• what does a single-page app mean in terms of code organization/quality/reuse, especially when contrasted against a "server driven" app with many pages?
• what's your backend architecture like? if you're running mongo and node on the backend you will have a much slower latency across the wire than if you were using php and mysql or postgres.
• are you looking at using a specific framework? backbone, angular, react, etc work well for a single-page app, whereas something more like laravel or express or rails is generally better suited to a "server-driven" app with a whole bunch of pages.

it's all contingent on the project.

GIMP is awful, absolutely awful. Krita ( https://krita.org/en/ ) is the better open source photoshop alternative. I use it when I don’t have access to photoshop. Even https://psdfiddle.com is better than GIMP and its a web app!

Here /u/Mike. I did this quick. This is what I'm trying to guess you're doing or trying to do. Adjust the height of the gradient container and the white container and triangle will always fill and vertically align.

EDIT: As /u/HappyDolt pointed out, you wanted the gradient on the white block, which I didn't even notice. I updated the demo to what you wanted, in the second example. I left the first example because CSS triangles are a helpful resource to use regardless. I don't think my solution is perfect to your needs, but it is what you wanted after I did some research of my own, without knowing your code structure.

Fixed Demo

You'll never be the same after this one simple trick: read the documentation!

Don't touch any code, none.

Read it straight through... like a book with chapters. Then read it again. Then refer back to it to get started.

https://reactjs.org/docs/getting-started.html

This is how I learn best.

Here's one of them https://www.figma.com/file/Y2J4qwVnojoTrdo1aLy7TL/FREE---Online-Courses-Dashboard-by-Bogus%C5%82aw-Podhalicz-(Copy)-(Copy)?node-id=0%3A1

More at https://www.templatefreebies.com/

Honestly, for something like this, you'd probably be better using css border-images, with a high-resolution PNG or even SVG.

With a border-image, you don't have to add any markup, or worry about positioning. Just slap it on there, maybe with a fallback if you care about IE&lt;11.

Plus you can easily make it as fancy or simple as you like. The only real loss is the ability to set the border color directly in the CSS, but that's pretty minor.

The Bootstrap Grid System has a five tier grid classes that you can use to create a responsive design.

Example: <div class="col-md-6 col-lg-4 col-xl-3">Hello World</div>

For more examples, see: https://getbootstrap.com/docs/5.0/examples/grid/

Take a look at Saleor they’re a Django / React based e-commerce system. The whole thing is open source and you can host it yourself if you have the know how - but they also offer a hosted solution where they’ll handle everything for you.

freelancer[dot]com is mostly filled with scams, I would rather recommend your trying to check out upwork.com it's nice and many have been using it continuously since a long time.

One pro to not using Foundation/Bootstrap/other CSS framework is that you can flex your CSS/front end muscle and prove that you don't need to rely on any framework to complete a project. Do a couple projects from scratch--even if it's not a recreation of a webapp. Find an image of a design on dribbble and (with the designer's permission and proper attribution, if needed) create a working prototype based on their design.

I don't want to burst your bubble, but it isn't... It might be one of the most expensive cities in Canada, but it's a ways down the list (#25, according to this: http://www.expatistan.com/cost-of-living/index/north-america )

In Seattle, 60k for a new-hire with 1 year of Exp and no formal education. It could take 3-5 years to grow out of the "Jr" role, but that would land you 80-100k...

You do sound like you have a lot of value to offer. But if you're only being hired to write code, don't expect a company to want to pay for your business experience.

As a side note, there are some red flags here:

1. Little Direction in code reviews. I'm a Sr. Engineer w/ 12 years of experience, I still get good feedback in code reviews. Not getting direction in code reviews is not a vote of confidence in you, it's poor process from your co-workers / company.
2. Commit to master. This is an huge red flag for me. This is absolutely an anti-pattern that should be avoided.
3. You never mentioned how well you work with others, but rather how independent you can be. You don't talk about working with designers, QA, product, or anybody... Engineering is not a place for soloists... You can only succeed by working as a team.

If these pieces had come up in an interview, I would pass. Focus on working with your team, and understand what you need to do to make them better. Rather than taking on solo projects that might look good on a resume, focus on how you can help other parts of the company succeed, even if it's just doing some thankless grunt work.

The difference between Jr/Mid/Sr level Engineers isn't what happens when things go well, it's how you're able to respond to things breaking down around you... whether it's inter-personal, infrastructure, or your code. The way you prove your level is to show how you deal with these problems... day in and day out.

dimsemenov routinely makes the best javascript plugins out there, check out his royalslider (paid) and Magnific Popup

Linode has 24/7 support, looks like they do migration aswell: https://www.linode.com/managed

I use Digitalocean and Linode for most projects, no experience with managed vps though.

Not really 100% relevant in this case but I used to work in a help desk on a shared hosting company, kind of killed my trust in the 24/7 support stuff.

Cloudways looks like a viable option aswell but feels a bit meh.

Otherwise try search/ask r/Hosting

For common public libraries, I'd recommend using a CDN link to a minified production version.

Here are some examples: https://developers.google.com/speed/libraries/

You could also check other CDNs such as Cloudflare.

If you're using npm to pull in apecific, less-common sites, then you should compile and minify them into a single bundle just file. There are certainly gulp plugins for this. Look up uglifyjs.

> check out aurelia.io if you aren't familiar.

If we aren't familiar, how could we answer your question?

What's your experience, have you used any other MV* frameworks before (Angular, Backbone, Meteor, Ember, Etc.)

In general, http://PluralSight.com is the best at what you're looking for. Though I don't know if they cover this specific framework just yet. May have better luck just looking on YouTube.

You can do this in any templating language that has support for partials. Handlebars and Mustache seem to be the most popular. Both have gulp plugins.

You can fully free test your pages (including local) in EDGE browser using BrowserStack: https://www.browserstack.com/test-on-microsoft-edge-browser#live-cloud

For IE consider downloading free Virtual Machines: https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/

I recently used Nuxt and I don't think I'd go back to regular Vue. Check it out it's amazing. https://nuxtjs.org/

I used it to do a quick turnaround for a job interview assessment. It's also highly scalable.

With any framework or tool you use knowing how to use the documentation and find what you're looking for is far, far more valuable and important than being able to recite things off the top of your head.

Also, especially since you're taking a course with BS3, try to actively not memorize the classes, it'll get in the way and cause you headaches down the line if you do.

If you do want to start learning/memorizing something, I'd strongly recommend learning Tailwind. It's 'utility CSS", so you learn a syntax/paradigm and then you can do just about anything you want instead of being locked into a certain framework's way of doing things. Check it out here: https://tailwindcss.com/

Quick note on this: as I understand, your CSS file needs to be named [component].module.css in order for it to be parsed as a CSS module when importing it into your component file.

Source

As others have stated. Tell your CEO that you need to hire a FE dev. Even tough this is a start up you shouldn't have to put up with this amount of pressure.

If you're still interested in learning more about FE, check out this curated list: http://superherojs.com. Pick and choose a few things to read/watch from each section and you'll be golden.

To compliment Superhero.js, check out https://egghead.io. They have a lot of series on React and other things. Many videos requires a subscription, which your company obviously should pay for.

A brief skim through this should get you started.
http://sass-lang.com/guide The awesome part is, if you know CSS, there isn't much you'll have to learn for SASS/SCSS, or any css preprocessor really. I also found this little tool helpful to see how the syntax compiles to CSS. http://sassmeister.com/

I used Jade (it's called Pug now, btw, after a legal fight) for a year and a half in our workflow, but now I'm absolutely in love with Panini. It's from ZURB, the folks that make the Foundation framework.

It supports using layouts, allows you to store data in JSON files (or YAML), and inject it straight into your markup using Handlebars templates...which is great because we built Handlebars into our new CMS / e-commerce platform, meaning that I don't have to spend time creating partials after the fact.

Agreed on the images. 11 images are >1MB, most of which don't need to be (they're rendered small on the page).

@OP: check out Google's PageSpeed Insights. Not everything listed there is universally applicable, but it gives you a good idea on low hanging fruit that can be fixed up-- image size included.

Something like

background-image: repeating-linear-gradient(45deg, #355c2f, #355c2f 1px, #3e6a37 2px, #3e6a37 5px);

will do that easily enough if pure CSS is your thing.

Compatibility

You could also use <code>:target</code> if you don't want to fool with random checkboxes.

I whipped up a basic example on CodePen. The styles super bare so you can see how it's working. I tried to comment it thoroughly, but if you have any questions just let me know (There's another example in my public pens, but CodePen doesn't like my HAML pens for some reason; it keeps throwing crazy errors and won't compile the code =/ ).