• Breaking News

    Friday, January 1, 2021

    Monthly Getting Started / Web Dev Career Thread web developers

    Monthly Getting Started / Web Dev Career Thread web developers


    Monthly Getting Started / Web Dev Career Thread

    Posted: 01 Jan 2021 04:00 AM PST

    Due to a growing influx of questions on this topic, it has been decided to commit a monthly thread dedicated to this topic to reduce the number of repeat posts on this topic. These types of posts will no longer be allowed in the main thread.

    Many of these questions are also addressed in the sub FAQ or may have been asked in previous monthly career threads.

    Subs dedicated to these types of questions include r/cscareerquestions/ for general and opened ended career questions and r/learnprogramming/ for early learning questions.

    A general recommendation of topics to learn to become industry ready include:

    HTML/CSS/JS Bootcamp

    Version control

    Automation

    Front End Frameworks (React/Vue/Etc)

    APIs and CRUD

    Testing (Unit and Integration)

    Common Design Patterns (free ebook)

    You will also need a portfolio of work with 4-5 personal projects you built, and a resume/CV to apply for work.

    Plan for 6-12 months of self study and project production for your portfolio before applying for work.

    submitted by /u/AutoModerator
    [link] [comments]

    Pixel rain effect experiments (with source code)

    Posted: 01 Jan 2021 09:36 AM PST

    Self-taught Web Devs — what was your biggest challenge when teaching yourself programming?

    Posted: 01 Jan 2021 10:02 AM PST

    What did you learn on your own, and how did you learn it?

    What wasted your time or frustrated you the most during your self-learning process?

    submitted by /u/DigitalBizRalph
    [link] [comments]

    Are you thinking to learn web development in 2021?

    Posted: 01 Jan 2021 05:05 AM PST

    Go for below youtube channels.

    • FreeCodeCamp
    • Traversy Media
    • Derek Banas
    • Academind
    • The Net Ninja
    • Sentdex
    • Kevin Powell
    • Steve Griffith
    • Dev Ed
    • CodeSTACKr
    • Web Dev Simplified
    • Bitfumes

    Choose the best for you.

    submitted by /u/rootrun
    [link] [comments]

    Frontend Technologies RoadMap / Bird's eye view Based on Traversy Media 2021 Video

    Posted: 01 Jan 2021 05:27 AM PST

    After indexing the video myself I thought it can be helpful for some of you too

    3:54 - Basic Tools

    • Computer & OS: MacOS, Windows, Linux
    • Text Editor: VS Code, VIM
    • Web Browser: Chrome, Firefox
    • Terminal: Default, Hyper, PowerShell, Git Bash
    • Design Software: Adobe XD, Photoshop, Sketch, Figma

    6:31 - HTML & CSS

    • HTML 5 Page Structure & Semantic Tags
    • Basic CSS
    • Positioning
    • Alignment (Flexbox & Gird)
    • Transitions & Animations
    • Responsive Design

    8:24 - Sass (CSS Preprocessor)

    9:11 - CSS Frameworks

    • *Tailwind CSS
    • *Bootstrap
    • Materialize
    • Bulma

    11:04 - UI Design Practices

    • Color & Contrast
    • White Space
    • Scale
    • Visual Hierarchy
    • Typography

    11:49 - Vanilla JavaScript

    • Basics
    • DOM & Styling
    • Array Methods
    • JSON
    • HTTP Requests (fetch API)

    14:38 - Some Other Tools

    • Version Control: *Git
    • Repo Manager: *Github, GitLab
    • Package Manager: NPM, Yarn
    • Module Bundler: Parcel, Webpack

    17:05 - Basic Frontend Deployment

    • Static Hosting: Netlify, GitHub Pages, Heroku
    • CPanel Hosting: InMotion
    • Methods: Git, FTP/SFTP, SSH

    18:53 - Domain Names, SSL, etc

    • Domain Names: Namecheap, Google Domains
    • Email Hosting: Namecheap, Zoho Mail
    • SSL Certificates: Let's Encrypt, Cloudflare, Namecheap

    19:55 - Foundational Frontend Developer Summary

    • Setup a productive development environment
    • Write HTML, CSS & JavaScript
    • USE Sass & CSS framework (optional)
    • Create responsive layouts
    • Build websites with some dynamic functionality and work with DOM
    • Connect to 3rd Party APIs with Fetch & understand basic HTTP
    • Use Git with Github or some other Git repo
    • Deploy & manage a website or small web app

    21:00 - What Now??

    The next step is up to you! Options:

    • Sharpen your JavaScript skills
    • Learn a Frontend framework
    • Learn a server-side language/tech

    21:20 - Frontend Frameworks

    • React
    • Vue
    • Angular
    • Svelte

    24:15 - State Management

    • React: Context, Redux
    • Vue: Vuex
    • Angular: Shared Service

    26:06 - TypeScript

    27:42 - Testing

    • Unit Tests
    • Integration Tests
    • End-to-End Tests

    28:42 - Server Side Rendering

    • Next.js (React)
    • Nuxt.js (Vue)
    • Angular Universal (Angular)
    • Sapper (Svelte)

    30:34 - Static Site Generators

    • Gatsby (React Based)
    • Gridsome (Vue Based)
    • 11ty (JS alternative to Jekyll)
    • Jekyll (Ruby Based)
    • Hugo (Go Based)

    32:20 - Headless CMS

    • Strapi
    • Sanity.io
    • Contentful
    • Prismic
    • Wordpress

    34:10 - The Jamstack

    • Stands for: Javascript, APIs, Markup:
    • Static SItes/ Assets
    • Man
    • Serverless
    • Headless CMS for Content
    • Hosting with services like Netlify

    35:22 - Frontend Superstar Summary

    • Build apps and interfaces with a frontend framework
    • Work with component and global state
    • Connect to backend JSON data integrate into your apps
    • Write and test clean and efficient code

    Optional:

    • Use TypeScript
    • Server-side Rendering
    • State site generators/ JamStack

    Hope it benefits you

    note: the 2nd part of the video covers backend

    submitted by /u/Letsg00o
    [link] [comments]

    Why does the job market for front-end engineers/developers look so bleak these days?

    Posted: 01 Jan 2021 03:26 AM PST

    It seems like so many companies want either full-stack engineers/developers or back-end engineers/developers. The demand for front-end engineering/development doesn't seem to be up there with the other two. At least, that's the impression I'm getting from having applied to jobs in the past month.

    I really want to be a front-end engineer/developer, but it looks like I'm going to have to go full stack if I want to have front-end-related work in my day to day. Either that, or maybe I'm just not searching well enough? It also seems like other fields are more willing to accept junior-level developers, whereas, for the front end, it looks to me like most companies are looking for senior-level front-end engineers/developers.

    submitted by /u/roynotto
    [link] [comments]

    My 2021 webdev resolution: Simplify, simplify, simplify

    Posted: 01 Jan 2021 01:32 PM PST

    I am a freelance dev, and I work alone, so many of these wouldn't work for a team. My list is below, would love any feedback:

    1. Drop node and npm. It doesn't add anything to my workflow. Updates are often breaking and the massive node_modules folders across multiple projects eat into my SSD space. And are often littered with multiple vulnerabilities. I know this is somewhat heretical, but I just don't like it. This relates to number 2:
    2. Give up on the build tools. For CMS-based sites (which are 90% of my work) they can save a little time up front - but often cause intense headaches when going into old projects (see node updates above) to make what should be minor changes. Do I really need to rewrite a gulp file just because the syntax changed and all I need to do is add an underline to a link? I will make an exception for minification though (using my IDE).
    3. Vanilla CSS, but not JS. SCSS is one thing I will surely miss - but I've found the files are extremely bloated compared to vanilla. I can't use CSS vars because of browser support issues (I need to support IE11 for multiple clients), but a quick search/replace helps with global swapping of colors - if you work in an organized way.
    4. I will still use jQuery. Proudly. My vanilla JS files required so many helper functions it wasn't much smaller than minified jQuery.
    5. Walk away from the framework du jour. Vue works for me and my projects. And can easily be dropped into an existing or new site without a build step. Just some bable to make it work in IE11, but not for the code I write.
    6. Drop WordPress support. It's a lot of work (client work that is), but I actively dislike it. Way too much of my time is spent managing various WP updates for client sites. And often clients install crazy plugins and then expect me to help with issues. It's all billable time, but i no like. I no like at all! And it sucks constantly explaining to new clients that you aren't going to completely fuck something up like their last "WordPress Developer" - you know who I mean - someone who installed a paid theme and various plugins and wouldn't know how echo "hello world" in PHP.
    7. Not exactly related - but limit firing up email to 4 times a day (9AM, noon, 3PM, and end of day).

    I just feel like 2020 webdev is a shit show of over complication. I was mentoring a junior dev at a client's company and he had no idea how to start a project from scratch. He'd fire up some command line utility to scaffold a project and in the process was learning nothing at all. This was for basic landing pages mind you, not an app. But the mindset seems to be "let's complicate everything!".

    I don't want to rain on anyone's parade. If you love everything about the state of webdev today, fine. Good for you! But its just not as fun for me as it once was. Its been years since I just coded for fun. I want to get back to that.

    submitted by /u/bobcottle
    [link] [comments]

    What technology stack/hosting would you choose to develop an e-commerce site with a CMS in 2021?

    Posted: 01 Jan 2021 01:13 PM PST

    I'm just curious to poll the community and find out what technology stacks come to mind for ecommerce.

    What payment processors do you like? What CMS do you use for easy product adding / editing / deleting for the customer? What frameworks do you use for the front and which for the back?

    Or do you say screw it all and go with shopify? How much do you leverage Saas solutions?

    submitted by /u/FishingTauren
    [link] [comments]

    Seeking UK devs' advice for networking and how to tackle UK job market

    Posted: 01 Jan 2021 11:34 AM PST

    Hey all,

    Long story short, after 8 months of learning and project building, I'm finally confident enough to start looking for my first junior role.

    Thus, I'm seeking advice from current devs in the UK or London area that could advise me on how to network effectively (obviously with current limitations). I understand that networking is an important channel to land your first job, or at least an interview so I want to start doing it.

    So far, I have added people in LinkedIn with a quick opener question and hoping for the best. Also, when I apply for jobs I do some research for the company and try to connect with people that work in the dev departments. So far, nothing... :( not even one connection...

    Has anyone here got experience in going from self-taught to junior in UK/London?

    submitted by /u/Cabeto_IR_83
    [link] [comments]

    What's the best way to use SVG icons on websites these days?

    Posted: 01 Jan 2021 04:00 PM PST

    I have some icons (in SVG format) that I would like to use on my website. Ideally I would also like to be able to scale and color them with CSS (for example with font-size: and color:).

    What's the best way to do that these days?

    Do you link the individual SVG files with <img>? Do you include the SVG code directly in the page with an <svg> tag? Do you make an SVG sprite and then use <use>? Do you make a webfont? Do you make a CSS sprite?

    I have searched around a bit but the amount of different options and tools is slightly overwhelming. I found some references to gulp-svg-sprite which seems quite useful, but I'm not sure if that is still up to date. There also seems to be an app called IcoMoon that some sites recommend?

    submitted by /u/DangerousPie
    [link] [comments]

    I read that cool math games switched to HTML 5 with Flash now dead. What does that include?

    Posted: 01 Jan 2021 12:04 PM PST

    Is it just all a combo of HTML, CSS, and JS?

    Edit: thank you for all of the answers!

    submitted by /u/anonoman925
    [link] [comments]

    Beginner Resources for Understanding Websockets/How to Move Beyond Local?

    Posted: 01 Jan 2021 03:29 PM PST

    Hello, I am a 3rd year eleceng student who is in a rush to make some interesting project.

    I am aware that this is not directly related to web development however my searches for websocket information on reddit often leads to this subreddit so I am hoping someone here has the knowledge to point me in the right direction.

    I have set a project goal to create a system for measuring moisture in an area and being able to turn on/off a valve in that area over wifi. In order to do this I would need a system that allows 2 way communication, the ability to request data to get a moisture reading, and the ability to send information to turn on/off the valve. I plan to use a esp32 as it allows wifi connection.

    I have looked around and people say websockets are the way to go for real time two way communication, however I cannot find many beginner friendly resources, they all assume I have solid knowledge of how servers work. I took a free crash course in html/css/javascript on frontendmasters and was able to follow a tutorial https://randomnerdtutorials.com/esp32-websocket-server-arduino/ and edit it to work for live control of a motor as a project to gain understanding. However now that I want to take the next step I am very confused. My main issue is that I do not have enough knowledge on Websockets and how they work to create a server and even lesser an idea of how to put one online.

    If anyone has a link to any beginner friendly resources on this topic, point me in a general direction or is able to answer any of my questions I would appreciate it greatly!

    submitted by /u/livesroverrated
    [link] [comments]

    How can I fetch a HTML page inside of a chrome extension without hitting CORS error?

    Posted: 01 Jan 2021 03:17 PM PST

    In my background.js file I am currently calling this function. This function works if I use cors-anywhere proxy. Is there a way for me to avoid using a proxy and still be able to fetch the HTML file from the URL?

    export default function test() { fetch("https://cors-anywhere.herokuapp.com/https://www.ratemyprofessors.com/ShowRatings.jsp?tid=2034405") .then(res => res.text()) .then(body => console.log(body)); } 

    The error I am getting without the proxy

    Access to fetch at 'https://www.ratemyprofessors.com/ShowRatings.jsp?tid=2034405' from origin 'chrome-extension://naaocghbbfdmdlfplcepenoahcmomibm' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

    submitted by /u/EarlyYogurt
    [link] [comments]

    Looking for young people to connect with

    Posted: 01 Jan 2021 11:29 AM PST

    Hello, I am looking for young developers (I'm 17 myself) to connect with. All of my real life friends have different goals and interests than me. Therefore I don't really have anyone to talk with about my self improvement and business. I feel like I really need someone to talk with about those things. If you are into marketing, e-commerce or web development and would like to connect let me know. Maybe we could build some projects together. (English / dutch speaking)

    Also if you have other tips feel free to let me know. ✌🏼

    submitted by /u/stevenvdh
    [link] [comments]

    What do I need to know to create an e-commerce website?

    Posted: 01 Jan 2021 07:02 AM PST

    Besides HTML, CSS and JavaScript, what else does one need to know to make an e-commerce website from scratch? I am sure one needs a database to store information about products, customers and other details... And here is where I get confused, because I see the traditional way is to use PHP, SQL and PHPMyAdmin, but now a lot of people are talking a lot about other concepts such as Django, MongoDB, etc. I don't understand if they are the same thing. Can someone please clarify this aspect?

    Thank you very much!

    submitted by /u/Alex_The_Android
    [link] [comments]

    Using these transitions on actual page changes

    Posted: 01 Jan 2021 02:21 PM PST

    Hello, first off I'll admit that my front end skills are super subpar, and I'm currently trying to figure this problem out on my own, I'm just posting here incase I can't get it.

    I found these page transitions I really like on codepen https://codepen.io/karolpodlesny/pen/npKqu

    But the issue is that they just open and close different containers all in the same html file. I would like to use the transitions to link between different pages on a website. I've tried deconstructing the js but it feels like I'm just grasping at straws

    I would really appreciate any help on this

    submitted by /u/jak0wak0
    [link] [comments]

    [Showoff Saturday] Tracking 300 Years of Succession to the British Throne

    Posted: 01 Jan 2021 01:48 PM PST

    Render My Markdown - Render your Markdown through a simple URL | Product Hunt

    Posted: 01 Jan 2021 01:20 PM PST

    How to install/pull in Semantic UI in a Gatsby project?

    Posted: 01 Jan 2021 01:03 PM PST

    I'm currently starting from scratch a Gatsby project and would like to use Semantic UI, however notice that I'm not trying to use Semantic UI React.

    My first approach was to put the CDN in the `src/components/seo` file inside of Helmet tag from `react-helmet` package. THIS WORKS but when loading the page I notice a slight glitch, the page takes some time to overwrite the local styles to apply the Semantic UI styles. This annoys me.

    I also brought in to the project a `semantic.min.css` file that lives inside of the the `src` folder. In my `gatsby-browser.js` file imported the semantic min css like this: `import './src/semantic.min.css';`
    This approach didn't work.

    I would appreciate any help or different ways to do this and avoid the "glitch" from the first approach. Thanks!!!

    submitted by /u/aeum3893
    [link] [comments]

    CSS Demystified (Full Course With Updates Included & Materials) - Kevin Powell

    Posted: 01 Jan 2021 12:55 PM PST

    Hey guys, the course is currently locked until the middle of this year. I am enrolled into the Bronze membership and I have all the videos, I will upload them to the cloud. All it would cost would be £30. this is the course link: https://cssdemystified.com/

    submitted by /u/Calprior
    [link] [comments]

    Applying Software Engineering Principles to maintaining CSS

    Posted: 01 Jan 2021 12:41 PM PST

    Can someone post an example of a workload you’re expected to finish in a normal, reasonable workday?

    Posted: 01 Jan 2021 08:38 AM PST

    Question about Semantic Elements in HTML5

    Posted: 01 Jan 2021 05:56 AM PST

    Hello, so I know there are semantic elements like Header, Footer, Nav, etc. However, what are the best practices when using these? For example, I believe they can only be used once to describe a main page's header and footer and nav, since a page usually only has one of each and never 2 footers, but lets say if you're creating some kind of Card or Accordion component, you can say those components can have a Footer, e.g: CardFooter or AccordionFooter and you may put action buttons. Is this a good use case for Footer? Likewise, a Card may have a Header, e.g: CardHeader, instead of just using a div, can you also use a Header?

    submitted by /u/ansonplusc
    [link] [comments]

    Trouble finding a good website host

    Posted: 01 Jan 2021 10:49 AM PST

    Hey ya'll I'm trying to create a website for a medium construction company 10-30 employees. They want something that they can attach certain items to QR codes and be able to create "Reports" ,which include, a time stamp, a number, the item, a set remove and notes feature, the person doing the work, and a collection of all the items that they can search through based on the number and specific item. I'm completely lost on where I even begin. I'm not a coder so I need some website that allows these things with pre fabricated options. any suggestions for host sites?

    submitted by /u/Luckyyduke
    [link] [comments]

    How much of your work day is spent googling how to do stuff?

    Posted: 01 Jan 2021 10:43 AM PST

    No comments:

    Post a Comment