• Breaking News

    Thursday, December 24, 2020

    How do major websites like Youtube and Pornhub have their videos load so fast? Is it possible to implement something like this without paying a bunch of money to a video hosting company? web developers

    How do major websites like Youtube and Pornhub have their videos load so fast? Is it possible to implement something like this without paying a bunch of money to a video hosting company? web developers


    How do major websites like Youtube and Pornhub have their videos load so fast? Is it possible to implement something like this without paying a bunch of money to a video hosting company?

    Posted: 23 Dec 2020 06:57 PM PST

    I am trying to understand how streaming works on these video platforms. I have a website I'm making with multiple videos and they load but it isn't nearly as lightning quick as the sort of speeds you'd get on let's say... a Netflix stream.

    I read about HLS and that it's the standard but I am unsure of how to implement this if I am embedding my videos straight onto my website from a file (not from a cloud service). Is it possible to use this with just an mp4 file? I am in over my head with the technology and am very confused.

    There are HLS plugins for VideoJs but they all require a .m3u8 file link and I do not understand how I create this from an mp4 file. Can anyone help me understand how to do this? All the examples use links and I don't understand where these links are pointing to.

    So many thanks to anyone who can help.

    Here is an example of what I mean:

    https://github.com/benjipott/videojs-hlsjs

    Edit: If anyone wants to try and work on this and needs some support please DM me or email me at genevievekuzak@gmail.com I don't know much about this but there are good solutions on here!

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

    Should I focus on React just for the career / job opportunities?

    Posted: 24 Dec 2020 05:37 AM PST

    I have been a VueJS developer for the past 2 and something years. My company uses Vue for all their Frontend needs and I'm pretty happy with the framework. Before joining the company, I had a basic grasp of React, but I haven't touched the framework in about 3 years, so I basically forgot about everything.

    React is still the most popular JS framework by far, and it doesn't appear that this will change. I am approaching the time where I might be considered a "senior" developer for the amount of years of experience I have as a webdev, yet I cannot feel at ease, because I don't know React. There are Vuejs openings in my area (Germany), but they are a drop in the bucket compared to React.

    Sure, in the end it's all JS, and knowing one of the frameworks can make a transition to another one easier if necessary. However, an employer will probably always choose a guy that knows their company's stack over a similar candidate with the same experience but a different framework, especially if you are looking to fill a senior role that is well compensated and specialized.

    I am now planning to start projects of my own outside of work and even though I feel like coding in my usual Vuejs stack, I feel like I should force myself to do it in React for the above mentioned reasons, even though I prefer using Vue.

    I would love to hear your opinions on the matter. Thank you.

    UPDATE: Thank you all for your opinions. It makes me less anxious to see many of you underlining the importance of JS foundations as a whole and transitioning to React being not too difficult.

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

    How do you deal with consistently learning how to code?

    Posted: 24 Dec 2020 05:36 AM PST

    Hello, I'm currently trying to complete the Odinproject then the Unity game dev programs (I'm seeking to get a job in web development or even better in game development) however I've noticed that for a week or so I'll be very productive and then fall of the wagon so to speak where I'll go a few weeks or even a month without going back to coding? how do people deal with this feeling? Are there some techniques that people use that help them stay on the learning path without falling off the wagon?

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

    Web Authentication Methods Compared

    Posted: 24 Dec 2020 04:43 AM PST

    Measuring page performance with Puppeteer & Playwright

    Posted: 24 Dec 2020 07:41 AM PST

    How to prevent a page from scrolling down when adding another component?

    Posted: 24 Dec 2020 03:12 PM PST

    How to prevent a page from scrolling down when adding another component?

    I'm working on a component that asks a user to upload a profile photo. There is a `next` button greyed out below the image container. When the user uploads a photo, a photo size slider appears between the photo container and the button. This causes the button to scroll down and the user has to scroll down to click next. My goal is to prevent this and perhaps make the container go up instead to keep the button visible. I've linked to 2 images that illustrate a before and after and I'm showing the React component with `styled-components` code below.

    Before:

    Before

    After

    import React, { useContext, useState, useEffect } from 'react'; import styled from 'styled-components'; import Typography from 'components/Typography'; // import { useMediaQuery } from 'beautiful-react-hooks'; import { medium } from 'constants/mediaQueries'; import AppButton from 'components/AppButton'; import useFetcher from 'hooks/useFetcher'; import { getMeApi } from 'utils/apiRoutes'; import Loader from 'components/Loader'; import routePaths from 'containers/Router/routePaths'; import { useHistory, useLocation } from 'react-router-dom'; import { UserContext } from 'containers/context/UserContext'; import checkmarkImage from 'assets/images/checkmark.svg'; import { useDispatch } from 'react-redux'; import BackArrowGrid from 'components/Auth/BackArrowGrid'; import UploadImageInput from 'components/UploadImageInput'; import { setPlainLogo, setInitialLogo } from '../../store/header/actions'; // const MOBILE = 250; // const DESKTOP = 356; const Container = styled.div` width: 100%; min-height: 0; align-items: center; justify-content: flex-end; display: flex; flex-direction: column; border: pink solid 2px; `; const ButtonContainer = styled.div` margin-top: 32px; display: flex; align-items: center; flex-direction: row; div { margin-bottom: 16px; } img { margin-left: 8px; } `; const Title = styled(Typography)` font-size: 40px; text-transform: uppercase; margin-bottom: 64px; @media (min-width: ${medium}) { margin-bottom: 64px; } `; const ButtonContent = styled.span` display: flex; align-items: center; `; const Form = styled.div` width: 100%; display: flex; flex-direction: column; align-self: flex-end; border: yellow solid 2px; .empty { display: none; } @media (min-width: ${medium}) { flex-direction: column; align-items: center; min-height: auto; .empty { display: block; width: 118px; } } `; const UploadPicture = () => { const { fetcher, error, isLoading } = useFetcher(); const { setUserFromLogin } = useContext(UserContext); const history = useHistory(); const location = useLocation(); // const isDesktop = useMediaQuery(`(min-width: ${medium})`); const dispatch = useDispatch(); const [image, setImage] = useState({}); const uploadImage = async () => { const result = await fetcher({ url: getMeApi, method: 'POST', body: { photo: image.croppedImage.source, }, }); if (result.errors) { return; } setUserFromLogin(result.user); if (location.profile) { history.push(routePaths.Profile); } else { history.push(routePaths.Welcome); } }; useEffect(() => { dispatch(setPlainLogo()); return () => dispatch(setInitialLogo()); }, []); const onPictureChange = newImage => { setImage(prevImage => ({ ...prevImage, ...newImage, })); }; return ( <> <BackArrowGrid> <Container> <Title h1>Profile photo</Title> <Form> <div className="empty">&nbsp;</div> <UploadImageInput onChange={onPictureChange} image={image} placeholder={ "Upload a profile photo. This is how you'll appear to other Color TV users." } height={356} width={356} horizontalPadding={60} aspect={1} round /> <ButtonContainer> {error && ( <Typography error> Error while uploading the image, please try again. </Typography> )} <AppButton primary={!!image.croppedImage} disabled={isLoading || !image.croppedImage} onClick={uploadImage} noBorder > <ButtonContent> {isLoading ? <Loader className="center" size={30} /> : 'Next'} {!isLoading && !!image.croppedImage && ( <img src={checkmarkImage} alt="checkmark_icon" /> )} </ButtonContent> </AppButton> </ButtonContainer> </Form> </Container> </BackArrowGrid> </> ); }; export default UploadPicture; 
    submitted by /u/dsound
    [link] [comments]

    I'm working on remaking Twitter-like app with features tailored for web devs. It's currently in early stage of development but I got bios, avatars, likes and retweets working. We only have 200 users so far. (It was made in Node, Mongo and vanilla front-end.)

    Posted: 24 Dec 2020 02:05 AM PST

    Why do some people say they are web designers, but they are actually WEB DEVELOPERS?!

    Posted: 23 Dec 2020 11:39 PM PST

    AFAIK web designers skills are:

    Skills to design prototypes by using Figma, XD, etc.

    and web developers skills are:

    HTML, CSS, JS, etc.

    Am I wrong?

    submitted by /u/Septic-Sina
    [link] [comments]

    Which of these books to read first? (or, What order?)

    Posted: 24 Dec 2020 12:21 PM PST

    I started studying web development in late 2018.

    Since then I have already participated in 4 projects, but I did not spend more than 1/2 months on them.

    So, not so much experience with more complex systems. Or project ideas that are not as basic as a Blog and that also does not take years to be ready.

    So, I decided to read some books on subjects that put in the requirements for the jobs of developer and senior developer. As a way to advance my knowledge.

    The list of books I have is:

    Design patterns

    Clean Architecture

    Refactoring

    Domain Driven Design (+ Implementing DDD, the red book)

    TDD with Python

    Clean Code

    Clean Coder

    The Phoenix Project

    Regex (Brazilian book)

    EDIT1: I have knowledge in web in general (full stack) and also a little about linux servers (nginx, ssl, ssh etc)

    edit: some people say to keep coding, but I already know all the basic things, and for complex projects, there is no way to do it alone with developer knowledge, for example a digital payments application, I would need someone with industry knowledge financial for that.

    I've done cruds, jwt authentication with auto refresh, I've used headless cms (wagtail), I've also hosted aws using EC2, S3 + CF. What do you recommend to do then? May it not take months to get ready.

    I could learn algorithms, but I have no knowledge of mathematics, and pretty much everyone I saw requires something, even if it's basic.

    EDIT2: I also got to work on some React projects a little big, but everything seemed basic, just read and see the related things to understand.

    About TDD, there is a small project that the book tests, and DDD, there is the red book, which will create a project with these concepts, so, if they are complex things but there is a project for that, isn't everything okay?

    I read the beginning of the book Design Patterns, there are several concepts that I saw that I needed to know to read the book, such as mentions of the MVC model and other things.

    Now, CA I don't really know how much is needed, it seems to be good for those who create large projects from scratch, but even many experienced developers did not get to do that.

    NOTE: NOTE: about coding and reading, I don't want to be stuck with books as some see, only that I can't imagine anything other than "basic" like CRUDS with authentication, some lib integration, like Python Pillow to do some things with images, as is used in CMS (generate thumbnail and things like that) and for things that I see as complex, it would take months or even years for me to be able to research and do the whole process.

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

    Essential plugins for Web development in VS Code

    Posted: 24 Dec 2020 01:07 PM PST

    Hey I'm starting to learn web development soon. I have downloaded VS Code. Can you suggest the best plugins for it? Eg: Suggesting classes/functions, automatically checking for syntax errors etc

    I need them for HTML/CSS/JS (React)

    Thank you!

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

    ��Countdown Timer | JavaScript

    Posted: 24 Dec 2020 03:31 PM PST

    In this tutorial we're going to build a simple Countdown timer using JavaScript.

    👉https://youtu.be/CeLu1vSuaTQ

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

    How to change rectangle to pentagon in CSS?

    Posted: 24 Dec 2020 06:15 AM PST

    Hi, I have the following code with a rectangle shape. I want to change the shape into this shape. How do I do this in CSS?

    Would like to not use clip path if possible.

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

    Struggling with the Webpack when creating a library - Please Help

    Posted: 24 Dec 2020 07:17 AM PST

    Hi, I am creating a framework/library ( kind of like Vue ) and I am really struggling with module bundling.

    Let's call this library X. In X, there is a lot of development only code like showing warnings and errors and stuff. I want this code to only be included in dev build.

    X library uses certain environment variables like __DEV__ in source code. I know how I can create dev and production builds of X by defining __DEV__ in webpack config of X , but I can't figure out how to setup webpack such that when the APP that uses X is built, environment variables like __DEV__ would also be set.

    Currently, I am getting the error "__DEV__" not found when building the app which uses X.

    Do the user of library X need to define those in their app's webpack config?

    Am I missing something?

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

    What software is best for designing websites?

    Posted: 24 Dec 2020 02:44 PM PST

    Ive heard good things about Figma, Adobe XD & Sketch. I cant use Sketch since i have Windows. How is the free version of Figma? Im just starting with webdev but i like designing stuff. I can also get Adobe XD for free from school. Should i use Figma or Adobe XD?

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

    What platform do you think would be best for a web development community?

    Posted: 24 Dec 2020 01:46 PM PST

    Which platform would be best to build a community?

    I'm currently putting plans in place to build a global software engineering community to help engineers connect with leaders in the space.

    Over the past few years I've built up a network within software engineering and now is the time to bring this all together.

    One way is building an online community with active leaders producing content within the community, driving learning and personnel development.

    I've been looking into which platforms best to build this so thought I would post here.

    The platforms so far I'm thinking about is:

    LinkedI/ Xing (Germany is one of my markets) Is an obvious choice, have close to 20k connections with a mix of Tech leaders, software engineers-perm & freelance.

    The Website- contains all my info, values, proposition etc with videos on interviews with people within the community.

    YouTube- post videos.

    I'm now torn between things like slack, discord as I want to build something where people can discuss topics and ways of approaching certain problems these people are coming up against. This is also a place where people not on social media websites can access.

    Twitter- potentially, I've never been able to build up a bit following on this. Someone recommended a course and copy that but will I get a good ROI vs time it takes to do it.

    I'd Love to get peoples thoughts of other mediums they are currently enjoying for connecting with software engineers that want to develop their skills.

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

    Userscripts Are Fun And Are Still Very Much Relevant

    Posted: 24 Dec 2020 01:00 PM PST

    How to process micro payments easily?

    Posted: 24 Dec 2020 01:00 PM PST

    I'm looking for an API that can process micro payments without a huge fee, does such a thing exist? Something like $0.50 or $1. Know if any APIs that can do such a thing?

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

    Where can I learn about what makes users trust a website to make an action or convert (like "no credit cards required" or "free shipping") or anything related to colors, or human psychology in general?

    Posted: 24 Dec 2020 12:57 PM PST

    Hi

    I would like to learn more about human psychology when it comes to technology or web/app development. For example, what colors are appropriate, what phrases would create trust in the user's mind like "no credit card required. cancel anytime", "free shipping", "30-day money back guarantee" or anything in general about web and human psychology. Do you know any resources/books/websites/talks/ anything?

    Also, anything you have learned throughout your career and during experience is definitely welcome.

    Thank you

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

    looking for devs that want to collaborate on a project, specifically a website that revives the old BBS culture

    Posted: 24 Dec 2020 12:55 PM PST

    Is there any benefit to putting Nginx in front of my Express app on the same host (1 core)

    Posted: 24 Dec 2020 12:54 PM PST

    Background: I'm running an API with Express on a VPS that has only 1 vCPU (1 core).

    I know it's generally recommended to run your web app behind something like Nginx, but in my situation would I actually gain any benefit? I imagine if anything it would only reduce performance.

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

    PWA Based android launcher

    Posted: 24 Dec 2020 06:47 AM PST

    Can you create a Android launcher (like nova launcher) using PWA technology?

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

    How to create a notification badge indicator?

    Posted: 24 Dec 2020 12:01 PM PST

    How do I implement a notification badge indicator for example when a user receives a new inbox message. I want to implement a user notification feature so that a badge notification displays with the count whenever their post receives a new comment.

    There must be a cloud service that should make it trivial to implement something like this. I just don't know what this feature/process is called.

    Image

    Can I use something like Firebase Cloud Messaging to achieve this or do I use something else or do I have to roll out my own solution using WebSockets?

    Thanks

    submitted by /u/desperate-1
    [link] [comments]

    Approach to build a PWA

    Posted: 24 Dec 2020 11:14 AM PST

    I can't figure out how to make this work. It's just a app for exercise tracking. I would like it to work offline and then sync with a database in the background.

    What is the approach to authorisation & database stuff? Is this even possible? I tried using Firebase for this but it doesn't allow you to choose which document in a collection is stored in the users browser. (A collection of users and each user document contained all of the data the user needed)

    Is there any alternatives? Can this even be done? What's the fastest way I can do this or should I just scale back to using mobile only

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

    No comments:

    Post a Comment