• Breaking News

    Thursday, August 23, 2018

    Home Unlabelled The React tutorial I posted a few days ago got added to the official React tutorials as an easier resource for beginners web developers

    The React tutorial I posted a few days ago got added to the official React tutorials as an easier resource for beginners web developers

    August 23, 2018

    The React tutorial I posted a few days ago got added to the official React tutorials as an easier resource for beginners web developers

    The React tutorial I posted a few days ago got added to the official React tutorials as an easier resource for beginners

    Posted: 23 Aug 2018 05:16 AM PDT

    NASA's Jet Propulsion Laboratory has put together a masterpiece. The Open Source build-it-yourself Rover Website is nothing short of incredible.

    Posted: 22 Aug 2018 10:58 PM PDT

    I spent hours and hours today dealing with axios and the FormData API. Finally got my server to recognize my file uploads as well as an array of FAQ's to go along with every post. Felt damn proud of myself.

    I give myself a break and decide to check out the explore option on GitHub and see this plastered at the top:

    JPL's Open Source Build-It-Yourself Rover

    The (desktop) experience on this site is absolutely amazing. I didn't inspect and dig deep but I imagine they're using three.js for the initial background and controls. The fluid transitions from one segment to the next are top notch. Just stunning through and through.

    Seeing this stomped out all senses of pride I had with my forms before, but I'm incredibly pleased that I stumbled upon it.

    Thought I'd share!

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

    CSS Grid in 45 mins

    Posted: 23 Aug 2018 07:50 AM PDT

    I couldn't find any extension like EditThisCookie on Firefox, so I made my own cookie editor extension. It's also available for Chrome

    Posted: 23 Aug 2018 12:40 PM PDT

    Synchronization between two DOM elements (One-Time, One-Way & Two-Way binding)

    Posted: 23 Aug 2018 12:53 PM PDT

    Please suggest redux projects/clones to practice

    Posted: 23 Aug 2018 02:22 PM PDT

    I'm looking forward understand the how action creator works with middleware mostly like with Redux-promise and then how it hands over data to reducer

    But I get really confused at times because of the modularization so I'm wondering if you guys can suggest some react-redux articles/videos that uses redux and builds something like some clone or some other projects like blog site and stuff. It would help me explore new things and understand things well maybe or either suggest some path.

    Also I want to learn and grasp redux thunk as well. I hope I get a job soon maybe remote job would be exciting xD

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

    UI/UX guy, wanted to learn how to use Vue.js so I created a prettier To-do list app. Open it in your mobile phone for a better experience - Work in Progress

    Posted: 22 Aug 2018 09:22 PM PDT

    Debating between straight out hiring a webdev or attempting some on my own

    Posted: 23 Aug 2018 11:46 AM PDT

    I'm creating a startup and have the graphic designs practically finished. I've read up on html/css and halfway through a JS book starting to look at Jquery. However I'm really unsure if I should attempt to develop some of it myself (I honestly don't think I can do all of it) and it may take me too much time to do the things I think I could (I would like the site done by end of the year). Even if I do attempt to do the html/css layout/UI I'm wondering if I hand-off the work to a hired dev will they struggle or laugh at the work I do and it be pointless? Also trying to figure out what the final cost should be for my custom website (imagine it would be similar to something like redbox.com). Any insight from you guys appreciated, thanks.

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

    Implementing single file Web Components

    Posted: 23 Aug 2018 06:39 AM PDT

    The Node.js Handbook

    Posted: 23 Aug 2018 02:02 AM PDT

    Needing Help with CSS Style Sheets.

    Posted: 23 Aug 2018 03:45 PM PDT

    I'm having a real hard time trying to figure out why this isn't working. I've tried everything..but still...nothing seems to work. I'm at my wits in. I know it has to be something little. Can anyone help me (It's just practice for my html class)

    ​

    /* HTML and Body Styles */

    ​

    html {

    background-color: hsl(27, 72%, 72%);

    }

    body{

    color: rgb(91, 91, 91); background-color: ivory;

    }

    ​

    /* Heading Styles */

    ​

    h1 {

    color: white; background-color: rgb(222, 128, 60);

    }

    h2 {

    color: white;

    background-color: rgb(235, 177, 131);

    ​

    }

    ​

    These are both the parts. I just wished I could figure out what in the world am I doing wrong.

    ​

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

    Choosing the right stack

    Posted: 23 Aug 2018 03:24 PM PDT

    I have done a few tutorial courses on node.js, with jQuery as the front end library. I haven't completed a full web application, but have worked on several other .net and game projects over my career.

    I am starting to develop something similar to Trello but for a specific industry, think collaborating drag and dropping style interface, with multiple user accounts with permissions in the back end.

    I just don't have the experience to architect the stack. I would like to keep it in the JavaScript world and am aiming for it to be realtime collaborative across users viewing the same data, so if I've user makes a change everyone can see it.

    I will be the solo developer.

    I looked at firebase with angular as the front end, but I don't want to have issues with clients accessing from China, which is a strong possibility for the industry the product targets.

    Whilst I have setup a couple of Ubuntu servers locally and in the cloud to run node, I don't feel confident being able to secure or scale them for a production environment.

    Thoughts and advice welcome.

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

    In your opinion what dev tool/platform has the worst/best developer experience?

    Posted: 23 Aug 2018 02:59 PM PDT

    In your opinion what dev tool/platform/framework/language/... has the worst/best developer experience?

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

    Pageok Error

    Posted: 23 Aug 2018 02:52 PM PDT

    I have a website i work on that gets a page ok error only at our office as far as i can see. I can access it on my phone and on a computer outside of my workplace. Any ideas?

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

    How to make sure your API key cannot just be copied and used? API Authentication Question.

    Posted: 23 Aug 2018 10:27 AM PDT

    One thing I often struggle with when developing my API's is authentication. I didn't have much trouble with this when I was making them for just a single website and was able to implement the following flow:

    1. Server creates a session on request
    2. A hidden input field called `accessToken` gets the value of this session
    3. Upon a query to the API, it sends the hidden `accessToken` field
    4. If they match, the request is authenticated

    This method seemed pretty fool proof since with each new request to the site, a new accessToken was validated.

    I have now moved onto developing apps that feed off the same API as my website and am having a harder time figuring out authentication. Now that I have an app, I can't simply just send the value of a session to the app like I could with my PHP based website. For simple get requests of public data, authentication wouldn't be required but when I create a user account, modify that users account, etc... I would want to make sure the request is coming from the proper source, not from someone who simply took the authentication key and is running the request in postman or curl.

    Any ideas on how I could properly authenticate would be great, this is a concept that I've struggled with massively for a while and need to at least somewhat understand.

    tl;dr: How can I make it so my API is only authenticated to the proper sources and not just someone who took the API key and plugged it into postman or curl.

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

    Web Developer Boot Camp In Late 2018

    Posted: 23 Aug 2018 01:59 PM PDT

    Is this Udemy course still mostly useful this far in 2018? I know for a fact some things are outdated but I myself am too new to web development and a bit misinformed to really know what's good to learn now. Also, is there any other good udemy courses made this year covering a lot like the web developer boot camp? Thanks.

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

    Trying to implement stacked modals (without Bootstrap). How would you architect this? (Vue/Vuex)

    Posted: 23 Aug 2018 01:44 PM PDT

    Right now, I have a module in the Vuex store (similar to Redux if you aren't familiar) for modals that has an "isOpen" prop and a "type" prop. Clicking on button that opens a modal adds a wrapper component, which contains the grey backdrop and sets the body to overflow: none. The wrapper contains all the other modal components, and mounts different ones based on the "type" prop. But one of the modals has a section that brings up another modal with a list, and certain items in the list need to bring up an alert modal.

    I could just duplicate the logic and have a modalTwo module, modalThree module, etc. But that isn't very DRY. How would you architect this?

    submitted by /u/-endjamin-
    [link] [comments]

    Can't get group of buttons to wrap in IE11, but fine in Chrome, Safari, Edge and Firefox

    Posted: 23 Aug 2018 07:30 AM PDT

    The last bug I know about before I launch a web app for a company this weekend is in IE11. There are a bunch of <button> generated based on server response that are supposed to fit inside a max-width: 1200px container. In every major browser besides IE11, it wraps the buttons to new lines just fine. After several hours, I can't replicate it in IE11. I do have a question over at SO along with Github repo that demonstrates the issue.

    Any thoughts or suggestions on this particular issue? Coming down to the wire, so getting anxious about resolving it before this weekend.

    https://stackoverflow.com/questions/51958182/cant-get-buttons-to-wrap-to-new-line-instead-of-overflowing-container

    https://github.com/ishraqiyun77/button-issues/

    EDIT

    Looks like I forgot to mention I'm also using Bootstrap 4.

    Generated HTML

    <body class="modal-open"> <div id="app"> <div> <button type="button" class="btn btn-secondary" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);">Open Modal for Buttons</button> </div> </div> <script src="../assets/bundles/js/manifest.js"></script> <script src="../assets/bundles/js/vendor.js"></script> <script src="../assets/bundles/js/app.js"></script> <div tabindex="-1" style="position: relative; z-index: 1050;"> <div class=""> <div class="modal fade show" role="dialog" tabindex="-1" style="display: block;"> <div class="modal-dialog results-modal modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Button Issues</h5> <button type="button" class="close" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="results-bq-cuts"> <div class="row"> <div class="col"> <button class="cuts-btn btn btn-secondary">1 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">2 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">3 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">4 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">5 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">6 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">7 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">8 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">9 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">10 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">11 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">12 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">13 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">14 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">15 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">16 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">17 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">18 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">19 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">20 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">21 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">22 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">23 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">24 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">25 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">26 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">27 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">28 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">29 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">30 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">31 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">32 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">33 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">34 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">35 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">36 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">37 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">38 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">39 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">40 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">41 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">42 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">43 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">44 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">45 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">46 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">47 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">48 - Test</button> </div> <div class="col"> <button class="cuts-btn btn btn-secondary">49 - Test</button> </div> </div> </div> </div> </div> </div> </div> <div class="modal-backdrop fade show"></div> </div> </div> </body>

    Sass

    .results-modal { max-width: 1200px; .modal-content { .modal-body { margin-left: 13px; margin-right: 13px; .results-bq-cuts { width: 100%; .col { padding:2px; } .cuts-btn { font-size: 11px; padding: 3px; width: 100%; box-shadow: none; } // .col { // padding: 2px; // display: table-cell; // flex-basis: 100%; // flex: 1; // } // .cuts-btn { // font-size: 11px; // padding: 3px; // width: 100%; // box-shadow: none; // } } } } }

    ​

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

    Need advice on layout of website redesign proposal

    Posted: 23 Aug 2018 01:12 PM PDT

    Hello all!

    My husband and I are both web developers. He is a senior level remote web dev, I am a entry level freelancer with only a couple projects under my belt. We are always seeking more work with our independent business. My local city planner is seeking someone to redesign their two websites for the town. They say all proposals are due September 10. I've never done a proposal before, but it is essential to learn if we ever want new clients in the future. Also, if this proposal gets turned down, I could use it as a template for other local towns and approach their city planner.

    What are the essentials that should be included? I was planning on doing a redesign of their homepage in Photoshop, possibly a couple other pages to include. They gave a list of 10 items they want to be addressed how we will solve each one. Do I use a number list or paragraph form? I would like some advice how to structure all of this. Right now I envision a cover letter, a solutions page, the visuals I made in Photoshop and lastly a fees and estimates cost page.

    Thanks for a your help.

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

    Swagger vs. Apiary vs ????

    Posted: 23 Aug 2018 12:17 PM PDT

    Hi everyone, I've been tasked with finding a good tool for documenting an API. I have some familiarity with Swagger and Apiary but are there any other good tools out there to make use of? I just want to know my options and what other folks have used.

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

    Career advise for a software developer wanting to swith to web dev

    Posted: 23 Aug 2018 12:14 PM PDT

    Hello Guys, I am a Software developer, i got my CS degree on 2015, and have been working as C++ software developer (Telecommunications) since 2014 (previous i worked on IT).

    My stack right now is: C++, Linux, SQL, Python, Bash, PHP, HTML, CSS, booststrap(very little)

    So I have wanted to switch to Web Dev for a while and my initial plan was to learn HTML+CSS+JS and then Node+Angular+React .. (I want to work primary on backend, but knowing some front-end will not harm, especially if I get some freelance work on free time, and maybe later work just a freelance) ..

    Yesterday I talk with a friend from college, and told me that he was working with Java on backend since College (Java was our primary language to learn coding at college) .. and that he recommend java over Node for backend web (And its heavily use it in the city where i want to move back, some Node there too)

    So, I don't know really what to do, lean Node+JS+Angular or go back to Java and learn Spring+Hibernate, etc

    What do would you recommend to me ? Thanks for reading and sorry if my english was not perfect.

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

    Help needed. Images on chrome are not staying in their proper place. Other web browsers images show fine.

    Posted: 23 Aug 2018 12:12 PM PDT

    How would I draw a diagram on a web page with clickable/interactive elements?

    Posted: 23 Aug 2018 12:11 PM PDT

    Apologies for the vague question, but I don't know enough to narrow it down for specifics. I'm part of a high school club and we're currently trying to create a club website, which will include one page with an organization chart to show how we are related to other high schools/clubs. The chart itself looks something like this: https://i.imgur.com/dEeHe7p.png

    We were thinking of making it interactive - i.e., each little box/circle would be highlighted if you moused over it, and clicking on one of them would bring up a little in-page popup with some text that had details on that specific box. The issue is that none of us have any familiarity with creating websites (or coding in general, aside from the basic stuff you learn in high school coding classes), so we were wondering what the best way to go about doing something like this would be.

    Googling has found us some basic CSS/HTML/Javascript tutorials on doing the highlighting on mouseover and in-page popups that we were thinking of, but the issue that we're having is figuring out how to actually create the chart itself inside of the webpage. We really like the design of our existing chart, where it has a central large box with smaller boxes branching out of it in all directions, but that doesn't fit into a neat format so we can't get it to work with any of the flowcharts/diagrams/chart plugins that we've found.

    Is there some simple way to create this chart on a website, or some library/plugin that we can use to do this easily? It doesn't have to be super flexible or complicated since it's just for a club website, so it doesn't have to be the most professional looking thing in the world. I think that as long as we can figure out how to draw the diagram on the webpage, we would be able to handle the rest of it ourselves.

    Apologies in advance for such a dumb beginner question, but we don't really have any idea where to start figuring out how to do this, so I thought I'd ask you guys.

    Thanks!

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

    Struggling with getting a non repeating random number

    Posted: 23 Aug 2018 11:10 AM PDT

    Hi everyone. I'm building a lorem ipsum generator to help me learn javascript.

    I have 30 quotes inside of an array, on button click I run the displayIpsumContainer function which checks whether the inputted value is >50:

    function displayIpsumContainer(){

    // check if inputted value < 50
    if(inputtedNumber.value < 50){
    btnGen.addEventListener('click', () => {
    // display container
    ipsumContainer.style.display = 'block';
    getRandomQuote();
    })
    } else {
    // hide container if inputtedValue > 50
    ipsumContainer.style.display = 'none';
    }
    }

    This is the getRandomQuote function:

    function getRandomQuote(){
    let randomNumber = Math.floor(Math.random() * quotes.length);
    ipsumText.textContent = quotes[randomNumber];

    ​

    The getRandomQuote() I have now works fine, however, I have a number input in which the user decides how many quotes they would like. So I tried to use repeat on the quotes[randomNumber] and repeat it by the inputted number value.

    function getRandomQuote(){
    let randomNumber = Math.floor(Math.random() * quotes.length);
    ipsumText.textContent = quotes[randomNumber].repeat(inputtedNumber.value);
    }

    Now whenever I try to display the quotes[randomNumber] based on their number input value, I end up displaying the same quote up to the number they inputted. For example, if the user inputs 5 it will display " People who live in a glass house have to answer the door." fives times (if the random quote was that).

    ​

    I've tried to store the quotes[randomNumber] into it's own variable then checked it against a previousNumber variable to make sure it isn't the same as last time but I'm not entirely sure if I'm doing that right or if it just doesn't work.

    ​

    Any help is appreciated, thanks.

    ​

    ​

    ​

    ​

    ​

    ​

    ​

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

    No comments:

    Post a Comment