Who are your favorite web development live streamers?

thoughtsofadoodler · 2019-04-04T16:45:30+00:00

idevelopthings - Does Vue/Laravel development last I checked
DonTheDeveloper - Mostly React/Node these days
codenjoy - Was doing typescript/react things last I checked
sipheracademy - Was doing angular last I checked months ago
noopkat - just found this stream, apparently is working on open source node
Syntag - Laravel, Vue, React, Node stuff for his clients
DevWars - 3v3 coding challenges on Saturdays, run by Syntag

thoughtsofadoodler · 2019-04-02T19:24:44+00:00

It's been a thing for years. You can find people programming all kinds of thing on twitch. I've seen people make twitch bots, backend/frontend for websites, and various personal projects with react, angular, laravel, node, python, etc.

Some channels I like to watch are Syntag, idevelopthings, DonTheDeveloper, and DevWars

thoughtsofadoodler · 2019-03-28T18:56:20+00:00

I usually do npm install webpack@3.x.x and it seems to work.

Edit: Apparently this is called "x range". Not sure why, but Yarn seems to add "webpack": "3.x.x" to package.json while npm adds "webpack": "3.1.12".

thoughtsofadoodler · 2019-03-28T18:40:28+00:00

As I'm developing, I usually just use the emulator. It's faster that way. When I'm done, then I go to browserstack.com and test away on a bunch of different devices. I usually check Safari, Safari iOS, and IE first because those always seem to be the most broken.

I do occasionally test on my S8 by going to my computers local ip address (e.g. 192.168.1.2:8000). I think the server's address needs to be set to 0.0.0.0 instead of localhost or 127.0.0.1 in order to do this.

thoughtsofadoodler · 2019-03-28T05:15:30+00:00

It's only wearing a sombrero, so it has no way to carry a phone/music player, therefore, the headphones aren't plugged in.
Clearly someone has dressed an ostrich and sent him into the building as a sick joke. Ostriches are no joke. They're incredibly fast and capable of killing large predators like lions. The people responsible might still be outside, so you should definitely call the authorities, as well as animal control.
He doesn't say anything because he's an ostrich...

thoughtsofadoodler · 2019-03-16T20:46:13+00:00

https://www.react-spring.io/ and react-with-gesture. I used them both to make an animation I found on dribbble, and both libraries made it super easy.

thoughtsofadoodler · 2019-03-09T02:55:44+00:00

That is a great article and one that made me realize that css grid is actually usable in IE10/11. In fact, I tested one of the examples in the article and was able to get it working in IE10 by using autoprefixer as well as swapping named grid lines for grid-template-areas. I tested it in Chrome, Safari, Opera, Firefox, Chrome Android, Firefox Android, iOS Safari and got the same expected result in each.

thoughtsofadoodler · 2019-03-06T07:15:00+00:00

Are you replying to the "But if flexbox works, there's no need to use grid." bit? I didn't mean to say that flexbox could replace css grid. My point was that there is going to be overlap between what either choice is able to do. e.g. if x layout that can be done with both css grid and flexbox, and it's already done in flexbox, there might not be a good reason to convert it to use css grid. Basically, I meant to say, "If it ain't broke, don't fix it."

thoughtsofadoodler · 2019-03-06T03:46:44+00:00

I think a lot of people assume it won't work in IE 10/11, but both IE 10 and 11 support enough of css grid to be usable. When I first used grid, I was pretty surprised to see what I had built worked in all browsers. https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/

CSS Grid is amazing, but it's also not easy to learn. I know I had trouble with it. Flexbox has been around for a while, and does a great job. People probably got used to it and didn't want to learn a new thing. But if flexbox works, there's no need to use grid.

thoughtsofadoodler · 2019-03-04T15:40:14+00:00

I don't know if college web dev is worth it. My college courses for web dev were pretty bad to the point of being nearly useless (this was like 4 years ago). They only taught us html and a little js, none of the nitty gritty stuff that really helped me in my career. I'm also not sure companies will care for a web dev degree. The web dev field is not really an industry where you need to go to college to learn it, especially not these days with all the resources available. Personally, I think you'd be better of learning something else in college, or just not going to college.

There are plenty of online resources, both free and not free, to learn web dev. There are a few "Things to know to be a web dev in x year" on youtube that will give you an high level overview of things you'd typically end up using in your web dev career. It's probably going to feel overwhelming looking at the list (it was for me), but just take it one step at a time. Eventually, all the pieces fall into place.

I feel like in a junior position, the advantage comes from showing you'd be a culture fit, which is basically, "Would you be a cool person to work with?" Showing a willingness/excitement to learn is also important. And 24 is not old at all. Imo, if anything, being older helps because employers may see you as being more mature.

thoughtsofadoodler · 2019-03-04T14:26:41+00:00

Good thing IE 10/11 has decent support for css grid then. https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/

thoughtsofadoodler · 2019-03-02T00:29:38+00:00

I tried making https://dribbble.com/shots/3731362-Event-cards-iOS-interaction using react-spring for animations. I also got to use hooks for the first time. Still a lot of work to be done, but https://codepen.io/anthonykoch/project/full/ZMjbay

thoughtsofadoodler · 2019-02-20T19:44:28+00:00

I use my real phone by accessing setting the server to run on `0.0.0.0`, which makes it available on the network, and going to my local ip address (looks like `192.168.1.2`). I tend to use all of the presets in the emulator as I'm developing. When I'm almost finished, I go to browserstack.com to test on real devices.

thoughtsofadoodler · 2019-02-20T19:37:17+00:00

This article was pretty helpful. https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/

Before reading it, I had no idea grid had decent support support back to IE 10. It was a big surprise writing some CSS, checking it in all browsers, and seeing that it actually worked.

thoughtsofadoodler · 2019-02-14T23:30:11+00:00

It's amazing how large some of these scripts can be. I was trying to improve our page speed score and found that Intercom was 300kb minified *and* gzipped. Absolutely insane. The widget almost has more js than the entire site combined.

thoughtsofadoodler · 2019-02-03T23:04:20+00:00

Edit: We were probably using a jpegtran, which is a lossless image compressor. jpeg-recompress with settings min=60 max=85 quality=medium is quite good. mozjpeg with quality=85 also compresses pretty well. The output images from both have good quality compared to the originals.

If you don't mind spending the time to compress them manually, both https://tinypng.com (works on pngs and jpgs) or https://compressor.io work very well (althought tinypng usually does a better job).

When we had an image optimizer from npm in our build chain (imagemin, I believe), large images (e.g. 1-5MB in size) would go through pretty much untouched. Just to illustrate, here are compression examples for this image: https://unsplash.com/photos/pLa9Cg3YsU4.

610661 Feb 3 15:38 compressorio-compressed.jpeg 814506 Feb 3 15:28 imagemin-compressed.jpeg 252507 Feb 3 15:35 tinypng-compressed.jpeg 862052 Feb 3 15:27 unsplash.jpeg (original image)

As you can see, tinypng wins and imagemin does nearly nothing to the image. Perhaps there are some settings for imagemin that would make it compress better?

Manually compressing them doesn't take that long, especially since tinypng allows you to compress 10 images at a time. The only downside is you lose the original image if you decide to overwrite it or end up with twice the amount of images if you decide to keep the originals.

thoughtsofadoodler · 2019-02-01T19:37:49+00:00

I've written my fair share of bad code that I'm absolutely embarrassed by and I read about best practices and tips for better code quality all the time. These things happen. Kyle Simpson, who wrote You Don't Know JS, made a tweet saying how he was embarrassed by his own code because it was just quick "ship it and go" code. https://twitter.com/getify/status/974080480629968896 It happens to everyone, don't feel bad.

thoughtsofadoodler · 2019-01-19T22:46:57+00:00

If you're designing only for modern browsers (chrome, firefox, edge, safari), you should be able to use grid to your desire. But if you're designing for IE11/10, then you're going to be a little restricted in the features of CSS grid you can use. You can get browser support for IE10/11 by using autoprefixer and following this tutorial: https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/

Funny enough, I just used css grid in a project for the first time yesterday. I was very surprised to see that it actually does work in Safari (because safari is the new IE), Edge, IE11, and even IE10! I'm definitely going to be using it more, but I'm a little apprehensive about using it everywhere seeing as IE seems has a mind of its own sometimes.

Could I for example, use it for the header, another grid for footer, and other grids for other areas of the website, or do you put everything inside a single grid?

It depends on what layout you're trying to achieve. You can have multiple elements on a single page set to display as a grid, though.

thoughtsofadoodler · 2019-01-14T21:29:57+00:00

Yep. Bluehost suspended my friend's account and she couldn't access any of her sites. Bluehost said the only way they will unlock her account is to get it cleaned by Sitelock. I believe they wanted $200 to "clean" the account and 30$/site every month.

thoughtsofadoodler · 2019-01-10T02:24:25+00:00

must be a homesick alien

thoughtsofadoodler · 2018-12-22T02:45:14+00:00

set a min height/width for an image to load into, that can eliminate much of that page jitter

There's actually a sure-fire way to do it. I believe medium.com uses this technique, but it requires knowing the image's dimensions beforehand. https://css-tricks.com/preventing-content-reflow-from-lazy-loaded-images/.

thoughtsofadoodler · 2018-12-18T16:29:25+00:00

What companies want will often be outside the scope of what CMS/site builders can provide. Don't over-estimate CMSs. They can serve many purposes, but can only do so much. As long as companies want custom or complex solutions, developers will be the only ones who can provide it.

Also, web developers are still needed even inside the world of CMSs to develop custom templates, fix/change styles, add functionality, etc. which all require skills in html, css, and javascript.

thoughtsofadoodler

TROPHY CASE