• Breaking News

    Monday, September 28, 2020

    Home Unlabelled A Gentle Introduction to Using a Docker Container as a Dev Environment web developers

    A Gentle Introduction to Using a Docker Container as a Dev Environment web developers

    September 28, 2020

    A Gentle Introduction to Using a Docker Container as a Dev Environment web developers

    A Gentle Introduction to Using a Docker Container as a Dev Environment

    Posted: 28 Sep 2020 01:10 AM PDT

    Am I the only one that doesn't feel comfortable when using position and offset?

    Posted: 28 Sep 2020 03:31 PM PDT

    I know that this is probably a very dumb question but I always feel like I'm cheating or hacking by using position and their offset(Top, left, right, bottom) I feel like there is always a better way than doing this even if I tried everything and failed.

    Am I the only one?

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

    Why P**rnhub's thumbnails suck

    Posted: 28 Sep 2020 12:26 PM PDT

    Introducing visx from Airbnb

    Posted: 28 Sep 2020 01:04 AM PDT

    Stripe's new checkout

    Posted: 28 Sep 2020 11:55 AM PDT

    So back in Apr 2019 Stripe completely changed the way their checkout now runs. I had built my app's checkout prior to that, so we've been running on legacy just fine. But today I had to make some changes, and because I had difficulty finding the docs for the legacy version, I started reading up on the new way to do things. GOOD GOD what a mess it is now. I can't be the only one who thinks things got needlessly more complicated?

    The legacy checkout was as simple as dropping in some html with data-attributes, which generated a nice little on-site checkout modal, then handling the submission on the server.

    Now we're expected to pre-generate a checkout session, pass that to the client, attach that the the click-event which sends the user to a Stripe hosted checkout page, then set up/catch the webhooks that come as a result of that. It's like what Paypal Express checkout has been doing for years, but worse, which was a pain to work with too.

    What's everyone else's opinion?

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

    What’s the next step to building beautiful websites?

    Posted: 28 Sep 2020 03:39 PM PDT

    Hey everyone, so I've been building a couple of websites for a few months now. Im good with HTML, CSS and JavaScript and to build my websites mobile friendly and everything I use bootstrap. I really enjoy the grid system and the features and what not. I most of the time just have sections contained with container, a bit of styling here and there etc.

    I've been looking at a lot of the modern website designs on Dribble. I really really love the ones that have the type of cartoon people all on them, and have a lot of cool shapes and designs all around and overall have bright beautiful color themes. However my main question is, what is the next step to be able to build websites like the ones off there? Where do I find those cartoon people, or those shapes and designs. What technologies or frameworks are used to overall build those types of designs? How are the animations made?

    When I built stuff off bootstrap everything is kinda just all compacted and gridding out and held inside the container class, so the types of websites I build never really reach the ideas I see off there. How do they make certain images of things go off to other sections, like overlapping some sections and stuff.

    All in all what's my next step after understanding bootstrap and css and html, to creating the most beautiful and modern website friends like the ones I see on dribble? Where's the best place I can get the design cartoon figures I see on there for free? Where do I go from here?

    Any tips?

    https://dribbble.com/shots/14247310-Marketing-Agency-Landing-Page

    https://dribbble.com/shots/14086389-Oncoin-product-page

    Stuff like this is what I'm aiming to be able to build. One thing I never understood is are the sort of shapes and figures in the background, are they just background images a person designs and they put as the background? Or are they somehow built in the code and put there or is it like individual images u put a position to absolute and put wherever you want?

    I hope someone could grasp what I'm trying to ask overall here cause I realize I'm going on a tangent, just really wanna take it all to the next level!

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

    I get that careless use of tables is bad, but when are they allowed? Would a bingo board be an appropriate use?

    Posted: 28 Sep 2020 02:44 PM PDT

    Or would that be better off being made of flexbox divs?

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

    Frosted glass effect based on main colour from image

    Posted: 28 Sep 2020 01:54 PM PDT

    I am looking to created a sort of frosted glass effect background colour based on the colour of the image in the foreground. Juts like this example design here https://dribbble.com/shots/11822678-Music-Player-Light-Version/attachments/3447093?mode=media

    I have a basic version of this working where I set the background url to the image used in the foreground and use the css filter property with blur. However I would like to pull the main colour from the image and be able to use that is other areas too. Is this possible with css/js just yet?

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

    Building a Modern-Day Hit Counter

    Posted: 28 Sep 2020 09:40 AM PDT

    Resources/tips for finding clients consistently?

    Posted: 28 Sep 2020 10:15 AM PDT

    Hey everyone,

    My buddy and I started a Web Dev company and immediately found some solid success. 4 clients in our first month! We've had a lull in the past 2 weeks where we just haven't been able to find a client.

    I've been cold calling businesses past the first page of google searches with the pitch "Hi this is __, I work at ___, and I wanted to give you a quick call because I noticed your site isn't ranking well with google and I think we could fix that and try to help generate more business for you. If you're open to it, I'd love to send over some info or even set up a consultation."

    I've been focusing on law offices but need to branch out and get a stronger sales plan. Are there any resources or tips that you have that can help me develop a stronger marketing strategy?

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

    What do I need to know in order to build a product page with user login?

    Posted: 28 Sep 2020 12:21 PM PDT

    I'm a CS student with no experience on web development ( HTML/CSS and some JS, nothing backend) and I've just been asked to make a product page for a family friend's business. They know that I'm inexperienced so they are giving me time to study and do research.

    What they want is:

    • User login in order to view the products prices

    • New account request: they want to be able to approve/reject new account requests before they are actually given a membership

    • Orders be made through automated email: basically they want users to be able to add items to their shopping cart, but "checkout" will send an automated email to the office with the order info

    I'm assuming I don't have to code all of it myself and that there are third parties that could handle the backend part. Would appreciate if someone would point me in the right direction.

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

    Is the .NET ecosystem really open now?

    Posted: 28 Sep 2020 05:56 AM PDT

    Is the .NET ecosystem really open now?

    1. Do you know companies that use C# with databases other than SQL Server? Can you name them, please? Can I read somewhere which technologies do they require from job seekers?

    2. The .NET Core didn't have all the features of .NET Framework. For example in EF Core 2.0 it wasn't even possible to do GROUP BY on a database [1], which looked very non-professionally for me. .NET 5 is supposed to be better - for example there will be Entity Framework many-to-many. But what other deal breaking problems will remain in .NET 5? Will there really be all that is needed to write web applications that connect to databases other than SQL Server and run on Linux? Can C# finally compete with Java in this respect?

    [1] "Before version 2.1, in EF Core the GroupBy LINQ operator would always be evaluated in memory" https://docs.microsoft.com/en-us/ef/core/what-is-new/ef-core-2.1

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

    Practical intermediate database advice

    Posted: 28 Sep 2020 03:36 PM PDT

    How do I add a <a href> link in between a <p> or <h1> tag?

    Posted: 28 Sep 2020 03:23 PM PDT

    Seems like it'll skip a line every time instead of a continuous single line.

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

    Is fixing dependency vulnerabilities worth it on a small side project?

    Posted: 28 Sep 2020 02:43 PM PDT

    I'm working on an app, and the intended user base is small. Is it worth it to devote time to dependency vulnerabilities? I use the Github Dependabot tool, so it notifies me of any dependency vulnerabilities it detects. Sometimes it takes 15 minutes to resolve one of these vulnerabilities, because automatic updates are not possible, and the vulnerable dependency is used by other dependencies.

    What's your policy for checking for/dealing with vulnerable dependencies?

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

    Which path should I pursue if I want to work remotely from overseas?

    Posted: 28 Sep 2020 02:21 PM PDT

    1. Path 1 - backend development

    2. Path 2 - devops

    I wanna be able to work remotely from my country (Egypt) and I'm down to learn anything to speed up that process. I know some frontend basics and python, but that's about it.

    Which path would you choose?

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

    Cloudflare Week is here

    Posted: 28 Sep 2020 01:35 PM PDT

    Every year, Cloudflare does a "Cloudflare Week" to celebrate their own birthday, where they release the majority of their new features.

    Love 'em or hate 'em, it's hard to deny that they put out some incredible products. Worth keeping an eye on their blog this week as they roll out a new feature or product each day.

    OP here: https://blog.cloudflare.com/welcome-to-birthday-week-2020/

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

    Sharing more Front End practice interview questions

    Posted: 28 Sep 2020 09:39 AM PDT

    Sharing more Front End practice interview questions

    Last month I posted a handful of practical Front End interview practice questions. I did this after noticing a big difference in the common generic advice of 'grind Leetcode'/'expect a bunch of tiny HTML/CSS/JS trivia questions', and what I experienced in my (Bay Area company) interviews which heavily leaned towards actually implementing some small project from scratch.

    A good number of people seemed to find the questions helpful and asked for more, so I wanted to take the time to write up and share some others.

    Since reddit posts are pretty ephemeral, a friend and I thought it would be cool to throw together a small site and upload all the questions we've written up so far. You can find the six practice questions that I've posted on reddit on frontendeval.com - we have a few more we're writing up, which we'll post soon.

    A couple of quick notes before I jump into the questions:

    • I understand there may be a lot of companies out there where this advice doesn't apply, that do ask Leetcode questions, or don't even ask you to code anything in an interview. I can only say that recently in my Bay Area interviews, the majority were nothing like that.
    • I omitted any 'time limits' from these questions because I don't think the focus should be on solving a question as quickly as possible. When practicing for practical coding interviews the focus should be on improving your overall approach: how you break down a problem, ask the right clarifying questions, understand trade-offs in different approaches, learn how to debug issues, etc. Your speed will improve as a result of practice.
    • I mentioned this in my previous post, but it's worth mentioning again: use an online editor such as CodePen to practice. I'm pretty sure all interviews are going to be remote for the foreseeable future, and sites like CodePen/CodeSandbox are the easiest for interviewers to setup. You don't want to waste the first five minutes of your interview figuring out the interface or how to import React!

    ​

    Front End coding practice questions

    Modal overlay

    Prompt: Create a dismissible modal overlay. The UI should initially show a 'Show offer' button which, when clicked, displays an overlay resembling the mockup below, including a transparent grey overlay over the background. The modal should be vertically and horizontally centered, and always in the same position regardless of scrolling.

    https://preview.redd.it/7wi4ovj71xp51.png?width=361&format=png&auto=webp&s=23b3f0c7f832ae77075908ae4ee33cb72be69e98

    https://preview.redd.it/ugexs8p81xp51.png?width=361&format=png&auto=webp&s=88f5bc6ff3fdc5aa9ebd087b098f0cd16268625e

    If the user clicks anywhere on the grey background or the 'x', the modal should be dismissed and the UI should again just show the 'Show offer' button. However, if the user clicks the 'Accept offer' button, the modal will dismiss and the UI should now show the text "Offer accepted".

    https://preview.redd.it/lytcljna1xp51.png?width=361&format=png&auto=webp&s=a7ee3395a60c0032b5623d0a3c370bfe0b8d3fc7

    Hints

    • The grey overlay should cover the entire viewport and the modal should be centered, and both should be unaffected by scrolling: make sure you have a good understanding of CSS positioning

    Possible extensions

    • Can you extend the UI to support multiple modals? For example, the UI should have buttons for 'Show offer one' and 'Show offer two'. If the user accepts offer one, that modal button should change to 'Accepted offer one', and the UI should still have the 'Show offer two' button
    • Make it so that the Esc key closes the modal as well
    • Make the modal responsive so that on mobile web the modal takes up the entire browser window
    • If the page is longer than one screen (has a vertical scrollbar), prevent scrolling when the modal is open

    ​

    Two-factor code input

    Prompt: Create a 4-digit security code input that allows you to enter a two-factor authorization code. It should resemble the screenshot below:

    https://preview.redd.it/4qqjot6d1xp51.png?width=261&format=png&auto=webp&s=5427bb279418a27c4e992f334443a88feb2671fa

    Implement a form submission handler that calls a submitCode(code) function with the 4 digits as a concatenated string. Implement a submitCode function that validates the code given against a hardcoded 4-digit string.

    The inputs should be as usable as possible, specifically:

    1. Each field should allow only one digit between 0-9. Any other input should be rejected
    2. Entering a number in a field should advance the cursor to the next field, except in the case of the last field
    3. Pressing backspace at the beginning of a field (whether that field is populated or not) should focus the previous field and delete the input inside
    4. Very basic styling guidance:
      1. Inputs should be positioned next to one another
      2. Inputs should be roughly rectangular as pictured
      3. Submit button should be positioned below

    Hints

    • How will you handle rejecting feedback invalid feedback, i.e. if not all the fields are filled out or the code is invalid?
    • The main difficulty with this problem is moving the cursor between the fields. You'll probably want some sort of key handler on all the inputs in order to do this. Think about what type of key handler(s) would work best for this, e.g. input, change, keydown, keyup, keypress
    • You'll probably need a specific key handler for Backspace

    Possible Extensions

    • It doesn't make sense to submit anything other than a 4-digit number. Add some validation to ensure that the user cannot submit without having all fields populated. Highlight the fields that are missing.
    • Is this built as a reusable component? Turn it into a reusable component if not. Make the number of digits customizable.
    • People will often be copying and pasting their one-time code from their SMS. Make copy and paste work if you have the first field highlighted.

    ​

    Mortgage calculator

    Prompt: Create a calculator that accepts three inputs and calculates your monthly mortgage payment:

    1. Principal loan amount
    2. Interest rate (annual)
    3. Number of years on your mortgage

    The standard math equation for calculating your monthly mortgage payment is:

    P(r(1+r)^n/((1+r)^n)-1))

    Where:

    • P is the principal loan amount
    • r is the monthly interest rate
    • n is the total number of payments on your mortgage

    Note the bolded differences between the equation variables and the inputs. The inputs are set up that way as a matter of user experience: borrowers tend to be presented numbers like this by their bank. Your job when working on this feature is to convert the user inputs into the numbers that will be used in the calculation. Users will make 12 payments on their mortgage per year of their mortgage, and the monthly interest rate is the annual interest rate divided by 12.

    https://preview.redd.it/awiiziqf1xp51.png?width=612&format=png&auto=webp&s=fbc38f50af89e76da3cce97006f2d690f6d7f938

    You can use the pictured example to check your math:

    • Principal loan amount: $500,000
    • Interest rate: 3%
    • Length of loan: 30 years
    • => $2,387 monthly mortgage

    Hints

    • Make sure to convert the math formula to something that Javascript can interpret. You'll need the exponentiation operator, which you probably don't use much in your day-to-day.

    Possible Extensions

    • Format the monthly payment amount nicely, as pictured
    • Some borrowers think in terms of down payments. Substitute inputs for down payment and what percentage of the total loan that was for the principal input. For instance, if the user were to input a $100,000 down payment as 20% of the total loan, you could calculate for them that the total amount of principal is $400,000 ($100,000 / 0.2 - $100,000)

    Looking for more questions?

    As I mentioned above, we've put all of the questions on frontendeval.com - we only have a small library so far, but we have plenty of other questions that were asked in interviews. It takes a little time to write up a question, but we'll try to post new ones onto the site pretty regularly.

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

    Is it possible to make a Single Page on a custom website using Squarespace/Wordpress?

    Posted: 28 Sep 2020 09:37 AM PDT

    So I have a fully custom website using HTML and CSS with some JavaScript. Would it be possible to create a single page on this website using Squarespace or Wordpress? I want to make that single page using a CMS so that other people can easily edit it.

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

    Scripting on top of other websites you frequent?

    Posted: 28 Sep 2020 09:05 AM PDT

    Sometimes I visit websites and want to have some automated action or processing happen. For instance, maybe I want to do something upon visiting the site or a specific page of the site like clicking a bunch of buttons, or performing some scraping for new video links embedded on a tutorial page I visit, or quickly automate user creation and login for an app I'm developing etc....

    I know I could do the perfected method of automating everything with a headless browser, but that sounds drawn out to me - I have to login, get cookies, use a horrendous API... I think for most use-cases a chrome extension would be sufficient, so I was wondering if any of y'all have a means of doing this without having to write your own extension per site? (Never written a chrome extension)

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

    How this design can be implemented in CSS?

    Posted: 28 Sep 2020 12:50 PM PDT

    How this design can be implemented in CSS?

    Hi, I'm a backend and frontend developer. Since one month I'm developing a full all-in-one invoice making app with API (in Swift and Vapor) + Frontend Web-app (VueJS) + iOS application (SwiftUI) for a company.

    I almost finished everything, but I'm not satisfied with my frontend which is actually in Vue using Vuetify as "theme" (because I have good knowledge on it and it's pretty fast to code with it).

    Since few months, I see a lot of design like this on Dribbble and I'd like to know how I could integrate this (shadows, sort of translucent background, etc.). By the way, is there a name for this genre of design?

    Took from Dribbble: https://dribbble.com/shots/14000947-Financial-Dashboard/attachments/5615917

    ​

    TL;DR: I'd like to know how this type of design can be implemented in CSS and does this genre has a name so I could do some researches about it.

    ​

    Thank you

    submitted by /u/0x0177
    [link] [comments]

    Empty Adress bar on website

    Posted: 28 Sep 2020 08:37 AM PDT

    I want to program a Chrome extension, that redirects to a website, when a new tab is opened. It would be amazing, if the address bar would be empty and selected (ready for a google search). Does anyone of you know if this is possible and if so, what would be the code (in the json or html file) to do so?

    Thanks a lot and have a great day!

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

    Best way to prevent mail/phone number from being scraped while still being convenient?

    Posted: 28 Sep 2020 12:16 PM PDT

    On a page I want to add a phone number and an email for people to contact me. Obviously I'd like for both to be not scraped within days and receive tons of spam. One idea would be to show them as images on the page, but then users would have to type the number or email which is a huge hassle and most probably just won't contact then. Is there an easy way that has the best of both worlds? Protection and user convenience?

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

    No comments:

    Post a Comment