• Breaking News

    Saturday, February 15, 2020

    Home Unlabelled Week 2 Code Challenge: Stuff the bags! web developers

    Week 2 Code Challenge: Stuff the bags! web developers

    February 15, 2020

    Week 2 Code Challenge: Stuff the bags! web developers

    Week 2 Code Challenge: Stuff the bags!

    Posted: 14 Feb 2020 10:10 PM PST

    Last weeks top solutions: Congrats you two!

    feerzlay : https://jsfiddle.net/feerzlay/hf9grv68/

    frames8t8: https://codepen.io/fram8t8/pen/vYOYeYr?editors=1010

    -----------------------------

    General Rules for the weekly challenges:

    1. Do not post full code here to avoid spoilers for others. Use a code playground of your choice to create your solution and provide only the link, and a fun link title in your comment on this thread.
    2. Only challenge submissions are allowed as top level comments. You may respond to submissions, but any non submission comments made at the top level will be removed. There is a top level comment to use for all non submission related replies and feedback.
    3. You may use whatever languages you want, but since this is a web dev sub, I encourage you to stick with common web languages (JS, PHP, CSS, HTML, etc). No libraries/frameworks allowed unless otherwise noted in the weekly challenge.
    4. Solutions must meet all challenge criteria to be submitted. No half done submissions.
    5. Upvote your favorite solutions. The solution with the most upvotes each week is crowned champion. But note: This really isn't about being #1. It is really about taking the opportunity to challenge yourself and learn. Winning is just icing on the cake!

    ------------------------------

    WEEK 2 CHALLENGE: Let's say you have some special bags that can only hold up to 3kgs of weight. Given an array of integers (where each integer is between 1 and 3) that represent weights, determine how many bags you need to carry all of them.

    Test cases:

    specialBag([1,1,3,2]) => 3 bags

    specialBag([2,2,2,1,3,1]) => 4 bags

    specialBag([1,1,1]) => 1 bag

    specialBag([0]) => 0 bags

    specialBag([0, 1, 2]) => 1 bag

    Requirements:

    1. Must provide an input field to input the comma separated string for testing (eg: 1,1,3,2) - or, let us know what variable to change in your solution to test the output.
    2. Must display the number of bags required for the provided weights back to the user - how you do this is up to you
    3. Whole value weights only required for challenge - but for an extra challenge, you can also allow floats (eg: 2.4, 1.3, 3.44, .. )
    4. All 5 test cases must pass
    5. The best solutions should scale well as the string length increases
    6. Good luck!

    This weeks challenge proposed by u/PurdueKenny

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

    You have any feedback on these animated UX icons?

    Posted: 14 Feb 2020 09:26 PM PST

    [Showoff Saturday] Using TypeScript and WebGL, I've created a minimalist retro-themed video game that also works well on mobile devices. (Link and source code in the comments)

    Posted: 15 Feb 2020 06:46 AM PST

    Live parking citation data from my school using React, Typescript, and Firebase. Info in comments.

    Posted: 15 Feb 2020 03:33 PM PST

    Shoutr: A Social Networking Website Hobby Project Showcase

    Posted: 15 Feb 2020 01:28 PM PST

    Just completed a prototype for a hobby project called Shoutr. Its a social networking website built using React/Redux on the Front-End, NodeJS on the Back-End. Do check it out :) and do share your suggestions.

    Protoype: https://shoutr-app.firebaseapp.com

    GitHub Links:

    1.Protype (Front-End): https://github.com/Xtremilicious/Shoutr-Front-End

    1. Prototype (Back-End): https://github.com/Xtremilicious/Shoutr-Social-Network
    submitted by /u/Xtremilicious
    [link] [comments]

    [RANT]Your cool website's user experience sucks

    Posted: 15 Feb 2020 01:27 AM PST

    for me, at least, if it does any of the following:

    • Disables right-click - uses custom right click.
    • Hijacks scroll. Seriously. The whatever scroll effect you are using is ugly, and serves no purpose other than annoying the users who don't understand why scrolling doesn't work as usual.
    • Use keyboard shortcuts that are also browser shortcuts (looking at you, GitHub, when I press / I want the browser search to fire up, not to use your search bar).

    Basically, don't interfere with my input devices. Don't alter the way they work. Everyone can copy/paste your precious text or images, if they want to, even if you disable right-click. Everyone can block js on your site and take their scrolling back. Some will, some won't. Some will simply press that back button and won't come back (and no, that "Are you sure..." overlay won't help).

    Okay, rant over (after visiting yet another site hijacking the scroll event). Really, don't change the behaviour of mouse/keyboards events.

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

    I made this random colour generator for myself in JavaScript. I like to use it when I'm making command line tools in Node with npm Chalk

    Posted: 15 Feb 2020 02:05 PM PST

    I made this a few months ago in an effort to practice writing html in JavaScript. I use it quite a lot

    https://newcolors.netlify.com/

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

    [Showoff Saturday] I made a calculation app that shows you if it's worth paying with a credit card when there's a transaction fee involved.

    Posted: 15 Feb 2020 12:56 PM PST

    [Showoff Saturday] I made a calculation app that shows you if it's worth paying with a credit card when there's a transaction fee involved.

    ​

    Live demo

    I love getting free stuff with credit card rewards, but I hate paying fees. I recently found out that most of the time, even with rewards points or cashback, it still isn't enough to offset the fee, and you end up losing more money.

    To help combat this, I created a simple calculation app that does all the math for you and shows you if it's worth it to pay with a credit card when there's a transaction fee. You simply enter the purchase total, the amount of points/cashback your card pays out, and the fee percentage.

    It's nothing life-changing and there's a bug with the dark mode button, but it's my very first project and I'm damn proud of it! I plan to expand on it in the future and improve the design.

    Code

    Link

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

    [Showoff Saturday] I created a React App that allows users to search for albums and view a breakdown of how qualities like happiness, tempo and danceability change over their duration.

    Posted: 15 Feb 2020 03:23 PM PST

    Hi all,

    I'm in the endless slog of trying to get an entry-level frontend position and I made a new piece for my portfolio that will hopefully get me out of this rut. It uses Spotify's data to create visualizations of albums, ranking different stats from 1-100 and showing how they change over time to build the 'character' of an album. Check it out and please leave feedback!

    https://www.vibecheckapp.com/

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

    How does this work? I randomly pull up an image on Google search, then 5 minutes later get a job alert from LinkedIn for the company whose website hosted the image.

    Posted: 15 Feb 2020 11:59 AM PST

    [Showoff Saturday] My portfolio - would love to get some feedback

    Posted: 15 Feb 2020 06:13 AM PST

    It's still a work in progress but I would love to get some feedback on it. Thank you!

    https://filipahfelt.se/

    I drew inspiration from various posts on this subreddit, in particular this guy and his terminal.

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

    Best book about Web Accessibility ?

    Posted: 15 Feb 2020 02:16 PM PST

    I would like to know more about this topic and im finding it hard to know which the best books are and some seem outdated aswell maybe? Can you guys recommend any books about web accessibility for a newbie that is up to date?

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

    [Showoff Saturday] Brother and I just finished first prototype of Wasp - higher-level programming language for building web apps - would love to get your feedback!

    Posted: 15 Feb 2020 02:32 AM PST

    A site made entirely of random Arrested Development quotes

    Posted: 15 Feb 2020 04:12 PM PST

    I made a website for a client and my friends say it looks nice but I was hoping to get some real feedback on my travel website... Any would be appreciated

    Posted: 15 Feb 2020 10:08 AM PST

    A Simple app, where you can post, like and comment on other posts, also notifications when someone comments on your post.

    Posted: 15 Feb 2020 04:03 PM PST

    [Showoff Saturday] New to HTML + CSS. Made this website for a fake energy company. Any feedback?

    Posted: 15 Feb 2020 03:50 PM PST

    [Showoff Saturday] My first ever JavaScript project from scratch

    Posted: 15 Feb 2020 08:38 AM PST

    Link to the project | Link to the codepen

    It is a Deal or No Deal game with vanilla JS, CSS and HTML. I included all these details so people that are going through similar steps and are thinking of creating their first project know what I went through (and also to justify my spaghetti code haha). Feel free to skip the wall of text if you're only interested in the game.

    Background

    I finished the JavaScript section of Colt Steele's Web Development Bootcamp and we had to do an exercise at the end (Color Game - where you have to guess the color of a RGB value). It was a code-along exercise and I didn't feel I understood the concepts well enough. So I decided to try and create a project from scratch. The idea of "Deal or No Deal" seemed doable for me as some of the basic logic is similar to the Color Game.

    Some drawbacks, issues and takeaways from the project

    • I tried refactoring the code but it is still a bit all over the place because when I started I did not have a clear idea of what features would the end product have and many features like choosing a box (at first I thought this would be too complicated but then the game felt incomplete) and the tutorial were added after I created the basic game.

    • I learned about vh and vw while trying to make the game responsive, so some of the CSS code is now obsolete. I didn't have enough time to remove it as I would miss Showoff Saturday!

    • I spent about 4 hours trying to figure out how to first execute the code for choosing the box and then the rest of the code. I tried to learn about callbacks but couldn't get it to work… Then it dawned on me that I should just put all the logic in a function and call it after the user clicks (chooses) a box.

    • Because of nesting loops, 'i' wouldn't be recognized in the nested loop, so I had to put stuff in a function and pass i as a value to j (I'm sorry for not using the right words, I find it hard to remember what each thing is called). This took me a couple of hours to figure out.

    • If you look at the source code, you will see the money behind each box, but don't do that haha. I couldn't think of a better way to hide the money.

    • I tried to create a gameshow-like design with some accents from the Deal or No Deal game (mainly the buttons). I don't feel it worked that well, but I am still happy with the overall look.

    • Most of these issues happened because I didn't plan ahead so in my next project I'll have to plan things beforehand.

    • During the project I often felt like I did not have enough knowledge to make it, but I stuck to it and I am very glad I did. I learned a lot.

    Time to complete

    All in all, the project took me about 40 hours. 10 hours coding the javascript, 5 hours the html and css, 5 hours trying to make it responsive for mobile devices and 15 hours of googling, asking questions on Stack Overflow and contemplating life choices. Another 5 hours were spent on polishing the game and writing this post.

    What Now?

    As I said, I'm doing Colt's Bootcamp, but from what I've read, Colt doesn't mention ES6 or newer versions, so the JS I used is a bit outdated. I am looking to learn about ES6 or newer versions after I complete the course. If you know any resources for this, feel free to recommend them. I prefer video-based courses (especially Udemy as it helps me keep track), but any resource would be helpful. Another thing I'm seeing more often is that jQuery's popularity is declining. I already started the jQuery part, but I would like to learn React after I finish the course, so resources for learning React would be helpful too.

    The Project

    Link to the project on my website where I plan to put all my projects. Here's the codepen if you want to see the code.

    Edit: Added links on top!

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

    Developing a page on multiple devices simultaneously

    Posted: 15 Feb 2020 02:19 PM PST

    Hello,

    Does anyone have experience with developing a web app/page on multiple devices (desktop - mobile - tablet) at the same time?

    During my early days, I saw a frontend developer with an interesting setup. He had like a phone holder on his desk next to his monitor. And whenever he scrolled the page on desktop, the page would also scroll on the mobile. Something similar can be achieved with browser-sync.

    Do you know any other ways to hook up mobile and tablet to your development working space and save time switching between devices?

    Is this a common practice, currently?

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

    FEEDweave, or how to build a decentralized social network

    Posted: 15 Feb 2020 02:07 PM PST

    Any way to uncover all DNS records without access to the domain registrar?

    Posted: 15 Feb 2020 02:01 PM PST

    I do a lot of migrations and sometimes it would really help to know all of the DNS entries beforehand. I can only get so much from things like whatsmydns and Google's Dig tool.

    Example, if a domain has a cname that points to imap.secureserver.net.

    Any way for me to peer into this info?

    Thanks!

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

    Why not page builders in 2020? (x-post r/web_design)

    Posted: 15 Feb 2020 01:56 PM PST

    Why not page builders in 2020?

    Appreciate that this is a topic that has been covered by a fair bit but I can't see a particularly recent discussion.

    I have an opportunity to start up a web design business with good access to a niche market. My experience is as a UX designer, not as a visual designer or developer though I have some basic skills in those areas.

    My inclination was to look for a technical co-founder but the more research I do, the more it seems that page builders are the way to go. And much less ridiculed than they were a couple of years back.

    I guess my question is: why would you not use a page builder at this point? What can they still not do?

    Edit: to be clear I'm talking page builders like Elementor alongside a lightweight theme in WP rather than complete site builders like Squarespace.

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

    Without OAuth, how can I let users sign in safely to a third party integration?

    Posted: 15 Feb 2020 01:51 PM PST

    There's a third-party service that's growing in popularity with only unofficial APIs and no OAuth. Existing mods for this service basically involve teaching the user how to get their own auth token out of their browser in their app.

    They have OAuth internally for Google SSO, but I'm assuming the redirect URLs are locked down.

    What's a way I can use these third party auth tokens while keeping them out of my hands so users still have control of their auth data? Or if it's impossible, what's the best compromise?

    I need to make this integration.

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

    [Showoff Saturday] When I get bored, I create random word generators for fun... Here's my John Oliver Insult Generator.

    Posted: 15 Feb 2020 01:06 PM PST

    I just cobble together some old javascript and churn out random things for fun.

    http://edgey.net/JohnOliverInsultGenerator/

    It's nothing magical or cutting edge development - just a fun bit of script to keep me busy. Click it, see what you get.

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

    docker questions

    Posted: 15 Feb 2020 12:53 PM PST

    Im looking at moving to docker, however, there is a lot I am struggling to understand and cant seem to find answers to. This would mainly be used for web apps and I worry about the database most of all.

    In my current set up, updates to our main app is pushed fairly regularly. I then manually run database migrations and restart the web services (uwsgi). From what I understand, deploying an updated docker image would wipe out all our data.

    I also currently use environment variables to determine whether the apps are running in development or production. Obviously I don't want the development code accessing the production database, etc.

    How does anyone actually mange this kind of workflow?

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

    Need to build a social media website with chatting abilities? Which frameworks would you use?

    Posted: 15 Feb 2020 09:04 AM PST

    I know some React and basically leaning towards Python/Javascript. One of my groupmates knows Java though. I'm wondering which frameworks I should use for my skillset and for in general. (Frameworks for Javascript/Python & frameworks in general) React, Angular, Django, etc. are some I'm aware of. Is their any advantage one has over the other or does it not really matter for my purposes?

    submitted by /u/ksnh
    [link] [comments]
    Read more
    at

    No comments:

    Post a Comment