• Breaking News

    Saturday, September 5, 2020

    Home Unlabelled [Showoff Saturday] Made a way to screen record websites as pure HTML/CSS instead of as video files. These "videos" are now interactive! web developers

    [Showoff Saturday] Made a way to screen record websites as pure HTML/CSS instead of as video files. These "videos" are now interactive! web developers

    September 05, 2020

    [Showoff Saturday] Made a way to screen record websites as pure HTML/CSS instead of as video files. These "videos" are now interactive! web developers

    [Showoff Saturday] Made a way to screen record websites as pure HTML/CSS instead of as video files. These "videos" are now interactive!

    Posted: 05 Sep 2020 06:56 AM PDT

    ​

    Here's a demo of me using Reddit: https://capsule.click/playback/1598544517133

    An even cooler demo here: https://capsule.click

    (hint: try using your mouse in the demos :))

    ​

    What's happening here is that I recorded myself using Reddit on my computer, but I recorded it just by tracking the HTML/CSS changes in the DOM.

    And now when you view the recording at that link, I'm replaying all the changes right in your browser. So all the elements are actually present, and it's not a regular video screen recording where it's compressed and you have to squint to read text in the video.

    You can use your mouse, click, and scroll in the recordings. Note that javascript is disabled when you're viewing a recording so not all elements in the page will work for you. This is for safety reasons.

    ​

    **I think this would be useful to you if:*\*

    - You're a beginner learning HTML and want to share the webpages you make with others. You can just instantly "deploy" your websites (even from localhost) and share them with others at a simple link.

    - You work on a web dev team at a company and want to show your teammates (engineers or designers) new features you've made in a better way than a regular image screenshot. Just send a Capsule link in 5 seconds.

    - You do web testing, and you want to have better bug reporting. In Capsule recordings, you have access to the direct HTML/CSS of the webpage so you have all the info you need to reproduce bugs your users face!

    ​

    Let me know what you use Capsule for! It's totally free to use: https://chrome.google.com/webstore/detail/capsule-capture-the-web/pkdkjiilohbdhmpcbnmopocdomjhogfd

    Note there are still bugs on some sites since there's a whole bunch of weird things people do on the internet given how large the HTML spec is!

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

    I made full stack clone of Stackoverflow with React/Next. Please check out!

    Posted: 05 Sep 2020 10:19 AM PDT

    I have made a website for cursors to hangout, chat, and draw.

    Posted: 05 Sep 2020 01:36 AM PDT

    I made a PWA that lets you see the Colors of Sound / Music / Your voice. It should work offline too!

    Posted: 05 Sep 2020 07:05 AM PDT

    [Showoff Saturday] I'm a 17 year old developer, and I just created my first webapp: Hoddit! Hoddit tracks the fastest growing posts on all of reddit by upvotes per minute and ranks them accordingly! I spent months learning how to do everything, so I'd appreciate if you guys checked it out :)

    Posted: 05 Sep 2020 03:09 PM PDT

    www.hoddit.com

    Technologies I used:

    • React
    • Node JS (Express, Mongoose, node-fetch)
    • MongoDB
    • Heroku hosting

    If guys have any feedback, let me know!

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

    Recently finishied updating my apps. Do you guys like this UI? I'm thinking about making a reddit client PWA with it.

    Posted: 05 Sep 2020 12:29 AM PDT

    I've been making this website for 2 years just to get a question answered, talktree.me

    Posted: 05 Sep 2020 01:22 PM PDT

    TLD Observer - Get notified when new top-level domains are announced or launched

    Posted: 05 Sep 2020 08:09 AM PDT

    Visual Tailwind Builder - WIP

    Posted: 05 Sep 2020 01:21 AM PDT

    I was getting too many ads on other Note Sharing sites, so I created this simple tool, no ads, no need to sign up

    Posted: 05 Sep 2020 03:11 PM PDT

    My portfolio website as a freelance webdev. Features an in-browser neural network and lots of colors!

    Posted: 05 Sep 2020 11:00 AM PDT

    People who review challenges/tasks for hiring at their companies. What are you looking for in the code?

    Posted: 05 Sep 2020 05:40 AM PDT

    How closely do you look?

    What would really impress you?

    Does your company reject a candidate directly after a review or do you do a walk-through with the candidate to see how they worked?

    While reviewing, what makes your job easier?

    I ask because I recently did a frontend development task for a company that I worked on for 2 days.

    It wasn't a design marvel, I kept it minimal and clean though.

    It implemented all that was asked of me and more, most of all I was very satisfied with the code quality and used modern tools for development - hooks, typescript, emotion, recreated the redux pattern with a useReducer hook.

    Wrote a sensible readme detailing what I implemented, tech I used and why. Things I could improve and expand upon.

    I'm willing to accept that it may not have met their standards but the lack of a review or any notes really bummed me out. I basically have no idea what I need to be improving at this point.

    It also makes me vary of doing these challenges. I don't know if I should continue putting in this much effort or just do a half-assed job in a few hours.

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

    Good Code - Free Front End Coding Challenges!

    Posted: 04 Sep 2020 10:34 PM PDT

    why are so many sites implementing really shitty single-page applications?

    Posted: 04 Sep 2020 05:16 PM PDT

    facebook is trash right now. there are tons of bugs and it takes more than twice as long to load new information. these fuckers INVENTED react. you would think they would know not to over use it for shit that doesn't need it. facebook isn't the only offender though. so many sites are switching over to really shitty single-page app technology.

    i have been racking my brain trying to figure out why everyone is doing this. it obviously doesn't improve user experience. i can't see it reducing storage or processing power needed. i guess it could reduce bandwidth a little but there has to be better ways.

    can anyone give me a decent explanation as to why this is happening?

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

    When - a powerful keyboard shortcut and focus library

    Posted: 05 Sep 2020 08:49 AM PDT

    When - A keyboard shortcut and focus library.

    This is my published library! It was hard for me to keep pushing to get it in a releasable state, I'm a serious procrastinator when it comes to personal projects, but I got there!

    This was actually inspired by something I saw on here on a previous Showoff Saturday, I believe it was called "whenipress". I wanted to take that idea and push the concept as far as I thought made sense.

    This library lets you create complicated keyboard shortcuts (if you so desire) and gives you granular control over how/when they can/can't be triggered.

    I haven't had a chance to actually use it much, but I'm starting to bring it into a project at work, so I'm sure I'll find all the bugs then...

    A little taste of what's possible:

    When.command('EXAMPLE_COMMAND', () => { console.log('Thanks for using When!') }); When('a').Execute('EXAMPLE_COMMAND'); When('b').Execute(() => { console.log('You can also use function literals!'); }); When('ctrl+k ctrl+l (500ms)').Execute('EXAMPLE_COMMAND'); When('1').IsPressed() .Then('2').IsHeldFor(1).Seconds() .Then('1').IsReleased() .Execute('EXAMPLE_COMMAND');

    There are many more features available on the README and documentation :)

    I'd love some feedback, critical or otherwise, and any suggestions are welcome!

    Also, anyone who's willing to contribute to help me support non-QWERTY keyboard layouts would be MUCH appreciated!

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

    Posted my portfolio last week and after getting some feedback I tried correcting my mistakes. Let me know what you think.

    Posted: 05 Sep 2020 10:49 AM PDT

    How would I develop a WYSIWYG editor?

    Posted: 05 Sep 2020 10:45 AM PDT

    I was trying to find resources on how I would manage to develop a WYSIWYG editor. Like for example a Wix clone. With drag and drop elements, save options, maybe publish it to a subdomain.

    I know how to develop web applications with python (flask framework) and got a little bit of NodeJS experience.

    Any help is appreciated!

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

    I built a social network for keeping track of your goals and sharing them among your friends!

    Posted: 05 Sep 2020 06:30 AM PDT

    [Showoff Saturday] GPU Price Checker

    Posted: 05 Sep 2020 02:00 PM PDT

    (Learning Frontend) - Guys, I need some feedback about this mini project. What can I do to improve the quality of my code?

    Posted: 05 Sep 2020 09:56 AM PDT

    Git web - Interact with your git provider from your command line.

    Posted: 05 Sep 2020 01:04 PM PDT

    So, has anyone here built anything serious with Deno yet?

    Posted: 04 Sep 2020 07:58 PM PDT

    I'm just curious to know. It seems like the hype has died down somewhat, but that's not necessarily a bad thing.

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

    Replacement for PHP in a college course

    Posted: 05 Sep 2020 12:50 PM PDT

    At the college I work at, we use a LAMP-based server as part of a intro to full stack development. Is there a replacement for PHP that would minimize the disruption to the operation and give students more up to date skills? No problems per we with PHP --- just wondering.

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

    [Showoff Saturday] I made a clone of frame.io with VueJS/Vuetify

    Posted: 05 Sep 2020 12:43 PM PDT
    Read more
    at

    No comments:

    Post a Comment