• Breaking News

    Friday, February 5, 2021

    Home Unlabelled I made a skiing game using vanilla JavaScript (code included) web developers

    I made a skiing game using vanilla JavaScript (code included) web developers

    February 05, 2021

    I made a skiing game using vanilla JavaScript (code included) web developers

    I made a skiing game using vanilla JavaScript (code included)

    Posted: 05 Feb 2021 01:56 PM PST

    WebGL Fluid Simulation

    Posted: 04 Feb 2021 11:18 PM PST

    How is this website background made?

    Posted: 05 Feb 2021 09:54 AM PST

    Stay away from SitePoint!

    Posted: 05 Feb 2021 07:00 AM PST

    Hey guys,

    Just wanted to give you a warning about SitePoint, because I had a very unpleasant experience with them.

    Bought a subscription to their service, they advertise a 30 day refund policy, no questions asked on their website. I didn't like the service at all, asked for a refund, got a response that they're going to redirect me to the finance team. I wrote them politely asking about it every week, then after a while - every 2 weeks. But they simply ignored my emails. Well, it's just 10 bucks, so I brushed it off.

    Today, couple months later, I get an email that their database was breached, and hackers made out with user names, email addresses, hashed password and IP addresses of their customers.

    There are also plenty of blog posts from the first few days of January about data being sold from SitePoint on a hacker forum. I'm only notified by them 1 month later.

    TL;DR SitePoint lies on their website, doesn't honor refund requests, leaked users' information.

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

    Understanding front-end data visualization tools ecosystem in 2021 ����

    Posted: 05 Feb 2021 09:06 AM PST

    Hot take: all CSS frameworks are bad

    Posted: 04 Feb 2021 08:27 PM PST

    EDIT: ***read my update at the end.

    I had a long (civil) argument today with a coworker about using Tailwind in React. Basically, he thinks it's better because it's reusable, and I think it's a maintenance nightmare. He was so adamant about using it, though, that it became quite a big deal by the end of the day. So, thanks to that, it inspired this post. Buckle in, I'm gonna break down everything wrong with CSS frameworks. Not just Tailwind, but Foundation, Bootstrap, etc. Any of them, because the very philosophy they all have in common is flawed.

    --

    According to w3c recommendations, we should keep content concerns separate from presentation concerns.

    It's a simple concept, really. HTML is content, CSS is style. Although the famous quote from Adam Wathan may be technically interpreted as true, I think it's attacking the wrong issue.

    When you think about the relationship between HTML and CSS in terms of "separation of concerns", it's very black and white.

    You either have separation of concerns (good!), or you don't (bad!). This is not the right way to think about HTML and CSS.

    Instead, think about dependency direction. There are two ways you can write HTML and CSS:

    CSS that depends on HTML … In this model, your HTML is restyleable, but your CSS is not reusable.

    HTML that depends on CSS … In this model, your CSS is reusable, but your HTML is not restyleable.

    This is addressing the issue of DRY code, which I'll come back to in a minute. This is NOT addressing the issue of what is responsible for which concerns.

    It's a misdirection to start talking about reusability when that's not the issue in question, let's take on only one issue at a time. HTML, by definition, is content. CSS, by definition, is style. Keep these two buckets nice and organized, don't let your meat touch your potatoes.

    "But you have to choose whether to keep HTML or CSS reusable, you can't have both!!"

    Well, actually, yes you can.

    Assuming you're using one of the major libraries of modern times, this issue goes away with a little component composition.

    So you have two components that are very similar, going with the example given by Wathan: .author-bio and .article-preview, which he proposes adding a class that can be shared by both and still make sense, .media-card. He then descends down the rabbit hole talking about all the issues with this approach, but back up, there's something fundamentally wrong here.

    Let's treat these as actual components, instead of just BEM blocks. You would still keep <AuthorBio> and <ArticlePreview>, but since they have common structures, they would both make use of the <MediaCard> component. That's what composition is. This approach leaves no issues behind, so there's no point in joining Wathan in the abyss that follows. If something looks slightly different between the two, you can just tweak it from each of the more specific components.

    for example, in React:

    const ArticlePreview = ({children}) => <MediaCard className={css.articlePreview}>{children}</MediaCard>

    The reusability of all the markup in <MediaCard> is preserved, while also providing the fine-tuned control of the more specific uses of it in <ArticlePreview> and <AuthorBio>. Moving on...

    --

    Non-semantic class names greatly interfere with the readability of the templates.

    It should be a no-brainer that <nav className={css.nav}> is more readable than, say, <nav className={[css.f6, css.br3, css.ph3, css.pv2, css.white, css.bgPurple, css.hoverBgLightPurple].join()}>.

    But maybe that's not enough to convince you, maybe you think it's nice to see how it should look with a quick glance rather than looking at a different file.

    To which I say, first of all, these class names are not even descriptive of the visual effect they have either. In order to be aware of whatever br3 is supposed to mean, you would have to be fluent in this particular CSS framework before you could even read this.

    My main criticism, though, is that this is akin to writing all your CSS rules on a single line. You could potentially write a multiline class name in the markup, but at that point, why would you do that? It certainly doesn't provide any benefit over just simply writing out the style rules in CSS. The abstraction exists to make things easier, so to treat it like a chore seems really strange to me.

    --

    Too many nested divs add unnecessary complexity to the templates.

    Container, Row, Col, Col, Row, Col, Col, Col... Sound familiar? Yeah, it's not fun to have to deal with that when all you want is to find the deeply nested title you're looking for to capitalize a letter.

    This is such a painful thing to see, especially since we now have all these new features in CSS3 to play with, like grid and flexbox. Tab Atkins must feel like a joke watching these frameworks pop up. These features are not that hard to use, and they can work wonders in simplifying your HTML structure.

    There's no reason to consolidate a grid into one class either, because that's what the values in your CSS properties are supposed to be used for. Why overcomplicate that?

    If having standardized spacing is your concern, you can just as easily use CSS custom properties to help out with that, or SCSS or LESS variables if that's your thing. Plus, those values could then be used across multiple properties instead of just the one dictated by the class.

    There's simply no benefit these repetitive classes in HTML can give to you that flexbox/grid cannot.

    --

    Predefined styles are often more difficult to customize and override.

    I cannot tell you how many times I got frustrated trying to customize stuff that was being thrown off due to some globally inherited Bootstrap style. Sometimes it's hard to overwrite these styles because they wrote such specific selectors that you can't work around it without the blasphemous !important. Now, granted, it's been several versions since I last used Bootstrap, but the point remains - when you use generic classes and you have to override them to make small tweaks, it can be a real pain.

    Why sacrifice control over the CSS when you know the client is going to want you to make a hundred small tweaks? Save your future self hours of fighting against the CSS! Everyone can relate to how unpleasant that can be.

    --

    For maintainability reasons, you should always try to keep your layers swappable and modular. By coupling them together, you create a larger surface area for impact and risk management.

    There are several factors with this one. Let's start with risk management. Assume someone asked you to make a button blue. Using Tailwind's approach, you might add bg-blue to your markup. Now let's say you make a typo and accidentally write a > before the end of your HTML tag. Now, what was supposed to be a style change has caused your HTML to render with all kinds of incoherent junk on the page. It wouldn't be the end of the world if the button wasn't blue, but messing up the page content was an unforeseen issue.

    Obviously, this is pretty contrived, this example is not the worst problem ever, but the point I'm making is that by keeping style in CSS, you narrow the impact of your changes to just the CSS. If your company has a change management team, they'll be much more lenient about allowing a stylesheet hotfix at the last minute.

    The next factor is concerning swappable parts. What if you want to drop Bootstrap later on? Maybe your team found out about Tailwind and wants to replace Bootstrap? Well, having all those classes in the markup is going to make that a really painstaking process. When you keep the styles separate, suddenly it's just a matter of swapping out the CSS file, instead of surgically removing or altering every last instance where you repeated the class names in each template.

    --

    Adding a dependency just creates an unnecessary layer of complexity to your project.

    Let's just get down to brass tacks here.

    1. You can compose reusable components so that you never have to copy/paste CSS.
    2. Writing repetitive class names in the HTML is not reducing repetition, it's just moving it from the CSS to the HTML.
    3. As opposed to divs for rows and columns, flexbox and grid actually simplify the layout process.
    4. More control means simpler work and faster delivery, with the added bonus of less frustration, and less of a learning curve.

    Ultimately, a CSS framework does not serve to simplify your project or your workflow. It serves to complicate it. If you believe it simplifies your process, then perhaps your process is too complex to begin with. Having built several websites both with and without a framework, I can personally attest that my process without them is much smoother, less frustrating, faster, easier to make updates later, and easier to work with in a team setting.

    Lastly, if you think a team is better off using generic classes to avoid inconsistency, I'll leave my sentiments to be expressed by the more eloquent Jeffery Zeldman...

    I don't believe the problem is the principle of semantic markup or the cascade in CSS. I believe the problem is a dozen people working on something without talking to each other.

    --

    ========================== UPDATE ==========================

    The comments are starting to get repetitive, so let's address some of those here...

    ​

    Don't reinvent the wheel.

    This is not about me being elitist over customizing everything. I think I'm being misinterpreted a lot here. I just don't see anything I need here. Each website has its own layout, which is why I have grid in CSS. Each website has its own button design, which I have never felt to be cumbersome to style. Each website has its own title font, which I have never decided was too much effort.

    None of these things require so much work that I ever feel a base style would save me any time.

    ​

    It speeds up development.

    That's subjective. If you're at all comfortable with CSS, it doesn't take any more effort to write 6 style rules than it does to write 6 classes in the HTML.

    If you're not comfortable with CSS... why are you writing it? The pain you perceive with getting accustomed to it just shifts the responsibility of taking on a learning curve to everyone who isn't familiar with the framework.

    ​

    Third party documentation is better.

    CSS is not complicated. Non-trivial documentation should be reserved for complex code like JavaScript. CSS should have minimal if any documentation. If it's too complex, your first priority should be simplifying it, not documenting it. If this becomes a real hassle to enforce with code reviews alone, there are steps you can take with linters and pre-commit hooks.

    Of course, you should always document your components, but that's true whether you use a framework or not. Storybook can help with that.

    ​

    You just aren't good at it.

    This is not a valid criticism. This is an ad hominem and a straw man. I don't want to hear you trying to prove that I'm "just bad at it" by quoting me and speculating about how I must write code, or interact on a team, or anything else personal. Please acknowledge my arguments and address those directly if you have criticisms.

    ​

    I've never had a problem with it

    Many people have had a good developer experience with it, and claim it was maintainable enough to leave it for another team later on. Perhaps there's some degree of truth to that, but never encountering a problem doesn't mean problems don't exist with it. I've grown a lot as a developer over the years, and like all of us, I used to write some pretty questionable code because I was so sure the "best practice" was just overkill. Years later I think about how I must have lucked out that nothing broke or needed adjusted after the initial project.

    Ultimately this is just anecdotal. There's a lot of factors here. How good is each member on the team? How well does everyone work together? How successful are code reviews? Etc., etc. I think it's best to shy away from arguments like this because it's just too subjective. There are plenty of anecdotes on the other side of the fence as well.

    ​

    Opinionated CSS keeps the team's styles consistent.

    I understand that it can be tempting to reach for a class name to make sure no one uses some random in-between fully unique padding that doesn't exist anywhere else on the site, but a variable accomplishes this goal just as well and with less obfuscation. I know you will have to enforce the usage of these variables, but you would have to enforce the usage of classes just the same way, so it really doesn't save any time at the end of the day.

    Let's not forget there are CSS style guides available for you to adopt, you don't have to spend time writing your own. Perhaps if you find CSS variables too cumbersome to write, then this may be an opportunity to create a CSS library that exposes a bunch of generic and customizable variables.

    ​

    --

    TL;DR: Defining your own CSS is easier to write and maintain. Frameworks offer you nothing that CSS doesn't already offer you.

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

    What are the important things in Javascript i should learn

    Posted: 05 Feb 2021 02:24 PM PST

    In order to learn Javascript full stack web dev... What are the things that are in Javascript i need to know about (e.g Arrays, If statements, Loops)

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

    How can we take down sites that are stealing ours?

    Posted: 05 Feb 2021 03:49 PM PST

    Hoping someone out there can figure out this puzzle, or has actually had a resolution. Our Shopify store modernnursery.com has been copied onto two other sites (and counting). We found mozonstore.com on monday, and today found fuledbysomething.com spoofing or framing or aliasing our IP. These sites update in real time, any changes we make, and switch out our name for theirs. The first one is even using our trademarked logo.

    Fixes we've tried so far: 1. We installed a security app Shopify support suggested to block their IPs and the entire Czech Republic - where the two are from. This app was added to their store the moment we added it, so obviously this did not help. 2. We implemented the following code to redirect their sites to ours: <script>if (window.location.hostname !== "mystore.com") {window.location = "https://mystore.com";} </script> which ended up redirecting our internal pages to the homepage. This also happened on theirs, but regretfully we cannot have ours do the same to spite them. 3. We submitted DMCE takedown notices to their hosting and domain providers. Ironically they are from the same domain provider, regtons.com. Regtons/Gransy responded with this: we have paid serious attention to the information you have sent us, but please note that company Gransy is in no position to arbitrate content disputes or assess the validity of your claim that the material is false, defamatory, or impersonating. We as company Gransy s.r.o. are only a registrar of this domain and we are not responsible for the content. If you want to block this site, we need an official request, demand or protocol from court or police. According ICANN rules we started WHOIS validation to verify the correct data. The process will take approx. 15 to 20 days and in case the owner won't be successfully validated the domain will get blocked according to rules.

    Shopify is currently "doing all they can" and refuses to implement any server-side fixes. We're worried these spam sites will continue to pop up, as a second already has. If anyone has any tips, they would be greatly appreciated. We also tried to install an anti-framing rule but alas, SHOPIFY DOESN'T GIVE YOU .htaccess FILE ACCESS. We also saw another fix saying to create a rule disallowing any other domain from using your store IP, which is again something SHOPIFY DOESN'T ALLOW YOU TO ACCESS. What a mess.

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

    Launch: Pinocchio - an open source application for Puppeteer testing - BETA

    Posted: 05 Feb 2021 01:12 PM PST

    Hello everyone! A small team of engineers and myself recently launched Pinocchio (in beta), an open-source application for generating Puppeteer tests. This user-friendly GUI allows users to identify selectors for their tests and preview their code in the provided code editor. Once the tests have been created, the exportation of the test suites into the user's application is only a button click away. Any support, feedback, and suggestions would be enormously appreciated.

    Github: https://github.com/oslabs-beta/pinocchio

    Medium article: Play with Pinocchio, a Puppeteer test generation GUI!

    Linkedin: https://www.linkedin.com/company/pinocchio-dev/

    Website: https://pinocchio.dev/

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

    The complete CSS Grid tutorial with color-coded diagrams

    Posted: 05 Feb 2021 03:44 PM PST

    Advice on using templates for portfolio project UI

    Posted: 05 Feb 2021 12:32 PM PST

    I've been learning web dev for about 6 months now. It's time for me to make a personal website and some portfolio projects to put on it. I'm not the best at styling, so I wanted to use some templates to help my website/projects look modern and great (but also to learn from using the templates).

    Anyways, I was looking at purchasing some templates, but the issue I'm having is with product EULAs with redistribution. Basically, I don't want to redistribute their code, but for portfolio projects, I need to host my code in a public Github repository.

    Can anyone recommend some sources of React templates either paid or free where I can host projects containing their code on a public Github repository? From what I see free products it's generally not an issue as long as you include the license/reference - but good/comprehensive free products are harder to find.

    submitted by /u/Living--Macaroon
    [link] [comments]

    I made a PWA with Vue that generates markdown and HTML hyperlinks, it uses share targets as well as the clipboard API to make the process as intuitive as possible!

    Posted: 05 Feb 2021 12:23 PM PST

    Lightweight alternative to Google Analytics?

    Posted: 05 Feb 2021 01:06 PM PST

    I have a site with no advertising needs, so I just need some simple page stats for it. Not the server stats or a self hosted script but something that has an admin panel where I can log in. What's your recommendation? Needs to be small and fast.

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

    I am a backend developer, I have 5+ year of experience writing websites/admin panels in PHP/MySQL but I have no project to show anyone. What should I do?

    Posted: 05 Feb 2021 04:40 PM PST

    Hello guys,

    First excuse me for my bad English, its not my first language.

    So, I have significant experience in backend development.

    I have experience with FireBase, MongoDB, Vanilla PHP, MySQL, Java... basically most backend languages. However, I have nothing to show anyone for some reason mainly because my works were either NDAd or government related.

    Now My contracts with all companies I work for are due and I want to work as a free lancer or apply for a full-time job, but I have nothing to show or add to my portfolio.

    What should I do? How can I showcase my skills without being able to show an actual project?

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

    A web app to chat and enjoy locally available videos in sync. The video should be available on each of the group members device. GitHub: https://github.com/abhay-666/SAVY Any contribution is welcomed.

    Posted: 05 Feb 2021 10:32 AM PST

    Basic authentication works on domain (e.g example.com) but not on a direct URL (example.com/page.html)

    Posted: 05 Feb 2021 01:26 PM PST

    I have basic authentication set up (in htaccess) and you are prompted for a password when you go to the root domain (example.com) but when you type a direct page (example.com/page.html) you are not prompted for a password - the page just loads. What is going on?

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

    What WebRTC means for you

    Posted: 05 Feb 2021 07:50 AM PST

    The Software Rewrite - How To Avoid, And If You Have To Do It -> How To Do It Right

    Posted: 05 Feb 2021 01:05 PM PST

    How to resize an artboard to fit the content?

    Posted: 05 Feb 2021 01:02 PM PST

    How to resize an artboard to fit the content?

    I have hundreds of PNGs but they all have blank space in artboard. Is there any way to resize those to fit the content (with code)?

    https://preview.redd.it/cy608td14qf61.png?width=1082&format=png&auto=webp&s=863a70da6c048d0e0f52dadcd1c5e26d2d54a9d2

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

    Animating a CSS Gradient Border

    Posted: 05 Feb 2021 07:38 AM PST

    Is this self sabotage

    Posted: 05 Feb 2021 10:47 AM PST

    I have been teaching myself webdev with the intention of making a career transition. I enjoy it. I like figuring out why something isn't working or displaying properly. I like debugging. I like making something seem like magic to others. I like that there is a box to work within, but you're still able to be a little creative.

    But I've been reading some posts lately, here and elsewhere, that make me second guess that I'd enjoy WebDev as a career - mainly from those who talk about 900 other technologies and tech stacks they need to work with, or understand before they can make a simple fix that won't disrupt 5 other systems inadvertently.

    Now, I'm happy to be in a career where you always have to learn - I get bored otherwise and think that's just part of life regardless of what career path one chooses - however, I know I'm not going to be fawning over the latest code or technology or being the one to lead TedTalks for my company. It doesn't matter what job I'm in, coding or not, I just don't nerd out at work like that. While I expect there to be an element of learning and building my knowledge base, just like in my current career, it seems a little different in tech.

    Am I setting myself up for failure, or is there a happy medium? Is this self-sabotage to think I'll suck before I even get there?

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

    be careful how you use you words with your client

    Posted: 05 Feb 2021 05:25 PM PST

    I was discussing a project with a gay male client. he wanted to appeal to everyone but wanted another secret page for lgbtq visitors.

    I was describing how an unlinked file could be backdoor access.

    I was told, "sweetie you shouldn't sell a backdoor to a queer man."

    i think I went out of body dead for a moment, and I got the job.

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

    "Full-stack" JS is insane. Is Rails the answer?

    Posted: 05 Feb 2021 06:37 AM PST

    The situation:

    I finally started digging into node/express/mongodb to try and move from frontend towards "full-stack".

    At first, going the JS route seemed obvious — I know JS and React and Vue, I know npm and bundling and linting etc etc etc. I'm not an expert, but I know JS and the frontend JS ecosystem.

    So I started building a small app with node and express, and connected it to Mongodb(Atlas), and all seems going ok.

    BUT THEN!

    Wes Bos released his new course https://advancedreact.com/. I gotta say, it's pretty defeating.

    So now I need: Node, React, Next, Apollo, Mongo, GraphQL and Keystonejs.

    I know it's just the stack that Wes chose, but the fact that it could be swapped out for a bunch of different stuff feels really crazy to me. The stack could have been node, express, mongo, redux. Or it could have been node/express/hasura/etc/forever/etc.

    I know none of these are "needs" but I think he is covering a "modern stack" of tools here.

    Alternatives?

    When I started down this path of gaining more back and experience, I've debated trying Rails or Django or Laravel. I decided against all of these because the only language I really know well is JS.

    After a month or so playing in JS land, it feels almost hopeless. Feels like I could choose any different tool in the stack and the entire set up would be different. So although I know JavaScript, that's really the only thing I know.

    With something like Rails, while I don't know Ruby, at least you get some of the basics for free — thinking of crud, setup conventions, etc here. And it feels like changes in Rails over the years have been relatively additive, not totally replacing.

    Why do this at all / what's my actual goal?

    I'm looking to gain some full-stack experience, but also I need to have some sort of a backend environment that I can build some of my hobby projects with. Right now I just don't know much about backend/databases/etc at all.

    I want a small core set of tools that I can rely on to build a couple of small things per year. I just want to be able to wrangle some data, put it in a database, and access it via a React frontend.

    I feel like going down the Rails path. Even though I don't know a thing about it, and don't know Ruby, I feel like I'd be in a better place in a year or two of building small projects. I feel like Rails would be easier to incrementally learn.

    Is there an actual question here?

    I guess my actual question is: does all this sound stupid? Would Rails actually be easier to build skill with, incrementally over time? It feels l like these JS tools will result in constant flux and churn and starting from scratch. Rails might be big and complex, but it also feels defined, knowable and much more like a "toolkit". Does that resonate with anyone?

    Thanks all!

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

    What's the best practice for reusing HTML components?

    Posted: 05 Feb 2021 05:00 PM PST

    Wondering what's the best practice for reusing HTML components like header, footer etc.

    I tried the Jquery method of $('#targetId).load('./navBar.html');

    But I get a error in the console of chrome saying it's been blocked by cors.

    I'm just currently opening the HTML through chrome from my local file directory.

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

    No comments:

    Post a Comment