r/webdev - How to prevent a page from scrolling down when adding another component?
Strategy

How to prevent a page from scrolling down when adding anothe…


I’m working on a component that asks a user to upload a profile photo. There is a `next` button greyed out below the image container. When the user uploads a photo, a photo size slider appears between the photo container and the button. This causes the button to scroll down and the user has to scroll down to click next. My goal is to prevent this and perhaps make the container go up instead to keep the button visible. I’ve linked to 2 images that illustrate a before and after and I’m showing the React component with `styled-components` code below.

Before:

r/webdev - How to prevent a page from scrolling down when adding another component?

Before

r/webdev - How to prevent a page from scrolling down when adding another component?

After

import React, { useContext, useState, useEffect } from 'react';
import styled from 'styled-components';
import Typography from 'components/Typography';
// import { useMediaQuery } from 'beautiful-react-hooks';
import { medium } from 'constants/mediaQueries';
import AppButton from 'components/AppButton';
import useFetcher from 'hooks/useFetcher';
import { getMeApi } from 'utils/apiRoutes';
import Loader from 'components/Loader';
import routePaths from 'containers/Router/routePaths';
import { useHistory, useLocation } from 'react-router-dom';
import { UserContext } from 'containers/context/UserContext';
import checkmarkImage from 'assets/images/checkmark.svg';
import { useDispatch } from 'react-redux';
import BackArrowGrid from 'components/Auth/BackArrowGrid';
import UploadImageInput from 'components/UploadImageInput';
import { setPlainLogo, setInitialLogo } from '../../store/header/actions';

// const MOBILE = 250;
// const DESKTOP = 356;

const Container = styled.div`
  width: 100%;
  min-height: 0;
  align-items: center;
  justify-content: flex-end;
  display: flex;
  flex-direction: column;
  border: pink solid 2px;
`;

const ButtonContainer = styled.div`
  margin-top: 32px;
  display: flex;
  align-items: center;
  flex-direction: row;
  div {
    margin-bottom: 16px;
  }

  img {
    margin-left: 8px;
  }
`;

const Title = styled(Typography)`
  font-size: 40px;
  text-transform: uppercase;
  margin-bottom: 64px;

  @media (min-width: ${medium}) {
    margin-bottom: 64px;
  }
`;

const ButtonContent = styled.span`
  display: flex;
  align-items: center;
`;

const Form = styled.div`
  width: 100%;
  display: flex;
  flex-direction: column;
  align-self: flex-end;
  border: yellow solid 2px;
  .empty {
    display: none;
  }

  @media (min-width: ${medium}) {
    flex-direction: column;
    align-items: center;
    min-height: auto;

    .empty {
      display: block;
      width: 118px;
    }
  }
`;

const UploadPicture = () => {
  const { fetcher, error, isLoading } = useFetcher();
  const { setUserFromLogin } = useContext(UserContext);
  const history = useHistory();
  const location = useLocation();
  // const isDesktop = useMediaQuery(`(min-width: ${medium})`);
  const dispatch = useDispatch();
  const [image, setImage] = useState({});

  const uploadImage = async () => {
    const result = await fetcher({
      url: getMeApi,
      method: 'POST',
      body: {
        photo: image.croppedImage.source,
      },
    });
    if (result.errors) {
      return;
    }
    setUserFromLogin(result.user);
    if (location.profile) {
      history.push(routePaths.Profile);
    } else {
      history.push(routePaths.Welcome);
    }
  };

  useEffect(() => {
    dispatch(setPlainLogo());
    return () => dispatch(setInitialLogo());
  }, []);

  const onPictureChange = newImage => {
    setImage(prevImage => ({
      ...prevImage,
      ...newImage,
    }));
  };

  return (
    <>
      <BackArrowGrid>
        <Container>
          <Title h1>Profile photo</Title>
          <Form>
            <div className="empty">&nbsp;</div>
            <UploadImageInput
              onChange={onPictureChange}
              image={image}
              placeholder={
                "Upload a profile photo. This is how you'll appear to other Color TV users."
              }
              height={356}
              width={356}
              horizontalPadding={60}
              aspect={1}
              round
            />
            <ButtonContainer>
              {error && (
                <Typography error>
                  Error while uploading the image, please try again.
                </Typography>
              )}

              <AppButton
                primary={!!image.croppedImage}
                disabled={isLoading || !image.croppedImage}
                onClick={uploadImage}
                noBorder
              >
                <ButtonContent>
                  {isLoading ? <Loader className="center" size={30} /> : 'Next'}
                  {!isLoading && !!image.croppedImage && (
                    <img src={checkmarkImage} alt="checkmark_icon" />
                  )}
                </ButtonContent>
              </AppButton>
            </ButtonContainer>
          </Form>
        </Container>
      </BackArrowGrid>
    </>
  );
};

export default UploadPicture;



Source link

r/graphic_design - Graphic Design Project - New Years Pride
Strategy

Graphic Design Project – New Years Pride : graphic_design


Hi. I am a newer graphic designer, looking to obtain my Graphic Design Associates next school semester. I am new to working on passion projects, and I am looking at making personal cards/projects that will help me improve over time. This is my first off-school project, and I am wondering if there are any mandatory changes that need to be done or anything that will make this nicer or more unique in style. I am open to all criticism.

I wanna use any ideas and see how both modifications and my change in style over the year will change this peace to be posted again fresh next year to see progress.

r/graphic_design - Graphic Design Project - New Years Pride



Source link

r/graphic_design - Logo/Icon Choice HELP [Poll & Suggestions]
Strategy

Logo/Icon Choice HELP [Poll & Suggestions] : graphic_design


Hello there everyone, I have developed several icons for something (it isn’t really important what right now) and I need assistance in choosing one.

r/graphic_design - Logo/Icon Choice HELP [Poll & Suggestions]

Zoom in to get a view of the names

As my usual graphic-design-go-to-suggesters are split right now, I thought this would be a good way of choosing and crowd-testing logos. (Two birds with one stone, right?)

These are not for the same brand name, so the letters they are derived from are not the same for all designs. As you can see, there are a few main ideas, and then the rows branch off and make variants of each other.

FOR THE POLL:

Choose your favorite series and vote for that, or choose your favorite logo and vote for that series and then comment which specifically was your favorite. (the 5-series has only one logo rn.)

I suggest zooming in on the pic to look at the alphanumeric names.

SUGGESTIONS:

If you have any suggestions as to a variant of any of these, label your comment “SUGGESTION” and explain it (along with a pic, if you can). I only want serious suggestions, no bull.



Source link

Showing the terminal with an error output.
Strategy

Integrating TypeScript with Svelte | CSS-Tricks


Svelte is one of the newer JavaScript frameworks and it’s rapidly rising in popularity. It’s a template-based framework, but one which allows for arbitrary JavaScript inside the template bindings; it has a superb reactivity story that’s simple, flexible and effective; and as an ahead-of-time (AOT) compiled framework, it has incredibly impressive perf, and bundle sizes. This post will focus on configuring TypeScript inside of Svelte templates. If you’re new to Svelte, I’d urge you to check out the introductory tutorial and docs.

If you’d like to follow along with the code (or you want to debug what you might be missing in your own project) you can clone the repo. I have branches set up to demonstrate the various pieces I’ll be going over.

Basic TypeScript and Svelte setup

Let’s look at a baseline setup. If you go to the initial-setup branch in the repo, there’s a bare Svelte project set up, with TypeScript. To be clear, TypeScript is only working in stand-alone .ts files. It’s not in any way integrated into Svelte. Accomplishing the TypeScript integration is the purpose of this post.

I’ll go over a few pieces that make Svelte and TypeScript work, mainly since I’ll be changing them in a bit, to add TypeScript support to Svelte templates.

First, I have a tsconfig.json file:

{
  "compilerOptions": {
    "module": "esNext",
    "target": "esnext",
    "moduleResolution": "node"
  },
  "exclude": ["./node_modules"]
}

This file tells TypeScript that I want to use modern JavaScript, use Node resolution, and exclude a node_modules from compilation.

Then, in typings/index.d.ts I have this:

declare module "*.svelte" {
  const value: any;
  export default value;
}

This allows TypeScript to co-exist with Svelte. Without this, TypeScript would issue errors any time a Svelte file is loaded with an import statement. Lastly, we need to tell webpack to process our Svelte files, which we do with this rule in webpack.config.js:

{
  test: /.(html|svelte)$/,
  use: [
    { loader: "babel-loader" },
    {
      loader: "svelte-loader",
      options: {
        emitCss: true,
      },
    },
  ],
}

All of that is the basic setup for a project using Svelte components and TypeScript files. To confirm everything builds, open up a couple of terminals and run npm start in one, which will start a webpack watch, and npm run tscw in the other, to start a TypeScript watch task. Hopefully both will run without error. To really verify the TypeScript checking is running, you can change:

let x: number = 12;

…in index.ts to:

let x: number = "12";

…and see the error come up in the TypeScript watch. If you want to actually run this, you can run node server in a third terminal (I recommend iTerm2, which allows you to run these terminals inside tabs in the same window) and then hit localhost:3001.

Adding TypeScript to Svelte

Let’s add TypeScript directly to our Svelte component, then see what configuration changes we need to make it work. First go to Helper.svelte, and add lang="ts" to the script tag. That tells Svelte there’s TypeScript inside the script. Now let’s actually add some TypeScript. Let’s change the val prop to be checked as a number, via export let val: number;. The whole component now looks like this:

<script lang="ts">
  export let val: number;
</script>

<h1>Value is: {val}</h1>

Our webpack window should now have an error, but that’s expected.

We need to tell the Svelte loader how to handle TypeScript. Let’s install the following:

npm i svelte-preprocess svelte-check --save

Now, let’s go to our webpack config file and grab svelte-preprocess:

const sveltePreprocess = require("svelte-preprocess");

…and add it to our svelte-loader:

{
  test: /.(html|svelte)$/,
  use: [
    { loader: "babel-loader" },
    {
      loader: "svelte-loader",
      options: {
        emitCss: true,
        preprocess: sveltePreprocess({})
      },
    },
  ],
}

OK, let’s restart the webpack process, and it should build.

Add checking

So far, what we have builds, but it doesn’t check. If we have invalid code in a Svelte component, we want that to generate an error. So, let’s go to App.svelte, add the same lang="ts" to the script tag, and then pass an invalid value for the val prop, like this:

<Helper val={"3"} />

If we look in our TypeScript window, there are no errors, but there should be. It turns out we don’t type check our Svelte template with the normal tsc compiler, but with the svelte-check utility we installed earlier. Let’s stop our TypeScript watch and, in that terminal, run npm run svelte-check. That’ll start the svelte-check process in watch mode, and we should see the error we were expecting.

Now, remove the quotes around the 3, and the error should go away:

Neat!

In practice, we’d want both svelte-check and tsc running at the same time so we catch both errors in both our TypeScript files and Svelte templates. There’s a bunch of utilities on npm that allow can do this, or we can use iTerm2, is able to split multiple terminals in the same window. I’m using it here to run the server, webpack build, tsc build, and svelte-check build.

This setup is in the basic-checking branch of the repo.

Catching missing props

There’s still one problem we need to solve. If we omit a required prop, like the val prop we just looked at, we still won’t get an error, but we should, since we didn’t assign it a default value in Helper.svelte, and is therefore required.

<Helper /> // missing `val` prop

To tell TypeScript to report this as an error, let’s go back to our tsconfig, and add two new values

"strict": true,
"noImplicitAny": false 

The first enables a bunch of TypeScript checks that are disabled by default. The second, noImplicitAny, turns off one of those strict checks. Without that second line, any variable lacking a type—which is implicitly typed as any—is now reported as an error (no implicit any, get it?)

Opinions differ widely on whether noImplicitAny should be set to true. I happen to think it’s too strict, but plenty of people disagree. Experiment and come to your own conclusion.

Anyway, with that new configuration in place, we should be able to restart our svelte-check task and see the error we were expecting.

This setup is in the better-checking branch of the repo.

Odds and ends

One thing to be aware of is that TypeScript’s mechanism for catching incorrect properties is immediately, and irreversibly switched off for a component if that component ever references $$props or $$restProps. For example, if you were to pass an undeclared prop of, say, junk into the Helper component, you’d get an error, as expected, since that component has no junk property. But this error would immediately go away if the Helper component referenced $$props or $$restProps. The former allows you to dynamically access any prop without having an explicit declaration for it, while $$restProps is for dynamically accessing undeclared props.

This makes sense when you think about it. The purpose of these constructs is to dynamically access a property on the fly, usually for some sort of meta-programming, or to arbitrarily pass attributes on to an html element, which is common in UI libraries. The existence of either of them implies arbitrary access to a component that may not have been declared.

There’s one other common use of $$props, and that’s to access props declared as a reserved word. class is a common example of this. For example:

const className = $$props.class;

…since:

export let class = "";

…is not valid. class is a reserved word in JavaScript but there’s a workaround in this specific case. The following is also a valid way to declare that same prop—thanks to Rich Harris for helping with this.

let className;
export { className as class };

If your only use of $$props is to access a prop whose name is reserved, you can use this alternative, and maintain better type checking for your component.

Parting thoughts

Svelte is one of the most promising, productive, and frankly fun JavaScript frameworks I’ve worked with. The relative ease with which TypeScript can be added is like a cherry on top. Having TypeScript catch errors early for you can be a real productivity boost. Hopefully this post was of some help achieving that.



Source link

Calendar with CSS Grid
Strategy

A Calendar in Three Lines of CSS – Calendar Tricks


This is an attempt to demonstrate how CSS Grid Layout makes it possible to make a calendar with only three lines of CSS.

While many would argue that a calendar should be built semantically using a table, there are others who think a list would also be appropriate. And the <time> element could also be a potential solution for semantic calendars.

My choice for this CSS calendar tutorial is a list. Why? Because it’s the easiest way to show the amazing capabilities of CSS grid. Yes, making more complex calendars has been getting easier since flexbox, but CSS grid simplifies things even more.

Calendar with CSS Grid

Let’s start our demo with the HTML part:

<div class="calendar-wrapper">
  <h1>Decemeber</h1>
  <ul class="calendar">
    <li class="weekday">Sun</li>
    <li class="weekday">Mon</li>
    <li class="weekday">Tue</li>
    <li class="weekday">Wed</li>
    <li class="weekday">Thu</li>
    <li class="weekday">Fri</li>
    <li class="weekday">Sat</li>

    <li class="first-day">1</li>
    <li>2</li>
    <li>3</li>
    
    <li>29</li>
    <li>30</li>
    <li>31</li>
  </ul>
</div>

To emphasize the simplicity I kept the calendar in one list. But you use use two separate lists, an unordered one for the days of the week and an ordered one for the actual days.

The CSS part couldn’t be shorter:

.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.first-day {
  grid-column-start: 3;
}

The first line is easy, it tells the browser to display the list as a grid. The second line, well, the second property, grid-template-columns, is used to define the size of each column. A week has seven days, we have seven columns. I could have easily written:

grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

Or:

grid-template-columns: 40px 40px 40px 40px 40px 40px 40px;

But that’s not only repetitive, it’s also prone to typos, so we can use repeat() because all our columns have the same width. The 1fr you see there is a new CSS unit of flexible length, you can read more about it here.

Finally, because most months don’t start on Sunday, we can use the grid-column-start property to specify which day is the first of the month.

There you have it: three lines of CSS to make a calendar. I encourage you to visit MDN and read more about CSS grid and all the things it can do.

See the Pen
Simple Calendar With CSS Grid
by Calendar Tricks (@calendartricks)
on CodePen.



Source link

Album Cover Redesign
Strategy

Album Cover Redesign


Album Cover Redesign

Album cover redesign for Black Midi. This hand drawn cover features The Descendant, and the wood from Kindling iii by my favorite artist James Jean. Color and lighting done using photoshop.

Thanks fellas.

https://preview.redd.it/zbslzowlq3761.jpg?width=1250&format=pjpg&auto=webp&s=4105e4ac97b0c1df0aca2a1269cc030fa1e99418

submitted by /u/mk___jordan
[comments]





Source link

r/webdev - How to achieve this kind of horizontal scroll for blog post?
Strategy

How to achieve this kind of horizontal scroll for blog post?…


Hi,

Someone designed this for me and I need to develop it now. I just don’t know how to achieve that.

r/webdev - How to achieve this kind of horizontal scroll for blog post?

I know how to code how the blog post look, but the fact there is an arrow that make you jump to the other post on the right look really difficult to do and I maybe don’t have this experience.

I was thinking, maybe with the multiple slider per view from Swiper Demos (swiperjs.com) , but in the image above, the slides are not centered.

Thank you



Source link

PrimeNG Datatable Spring Boot
Strategy

Angular + Spring Boot + PrimeNG Datatable CRUD Example


In previous tutorials, we implemented PrimeNG datatable inplace cell editing and PrimeNG datatable row editing. In this tutorial, we will implement a PrimeNG datatable CRUD example. We will use Spring Boot for the backend to expose REST APIs.

Technology Stack

We will be making use of:

  • Angular 9
  • PrimeNG
  • Spring Boot                     

Video tutorial:                                

Implementation

We will first implement the Spring Boot backend code to expose the REST APIs for the CRUD operations. In real-world application, Spring Boot will store the information using a database like MySQL. However, for this example, we will be storing the data in a temporary array.

The Spring Boot Maven project will be as follows.

pom.xml:

Create the Book model class as follows: 

Create the controller class for exposing the REST APIs. We will be exposing 4 APIs.

Finally, create the Spring Boot bootstrap class for starting the application: 

Develop Angular Application

In a previous tutorial, we implemented a PrimeNG row editing example. We will be modifying this example perform CRUD operations using the PrimeNG datatable. 

Download the example.

Run the following command to build the project: npm install.

Start the project as follows: ng serve.

If we now go to localhost:4200/books, we can see the list of books populated in the PrimeNG datatable. This books data is currently hardcoded and being fetched from the books.json file in the assets folder.

We will first be implementing the GET functionality to get the books list from the Spring Boot backend to populate the datatable.

Modify the book.service.ts to make a GET call to the Spring Boot backend.

Above, the GET call returns an observable of Book array, which we need to subscribe to in the book component file.

Start the Spring Boot application and go to localhost:4200/books to get the list of books from the Spring Boot backend.

Next, we will be implementing the update Book functionality. We previously already added the edit icons in the data table and implemented the row edit functionality. Now, for the successful edit save, we will want to make a call the Spring Boot backend to update the book data. Also, if the edit is cancelled, we will want to revert the edit made, so we will be cloning the book list before the init is initialized to store the original book list and use it if the edit is cancelled.

Modify the book.service.ts to make a PUT call to the spring boot backend with the updated book data.

We will be making this update call when the edit is to be saved successfully, i.e. in the onRowEditSave method. Also, if the edit reverted, we will need the original data to be displayed again. So, we will do: 

Go to localhost:4200 and test the edit Book functionality.

Next, we will add the delete Book functionality.

Modify book.service.ts to make a DELETE call to the Spring Boot backend.

In the Book component file, add the delete function, which should be called when we want to delete a book from the table:

If we now go to localhost:4200/books, we will see the delete icon, which will delete the book upon clicking.

PrimeNG Datatable Spring Boot

We will now implement the add Book functionality.

Modify the book.service.ts to make a POST call to the Spring Boot backend.

We will be adding an Add Button in the HTML page for adding a new book. For this, we will need to get the book information from the user. We will get this information using an Angular form, which we will show in a dialog box.

We will first need to import the required modules in the app.module.ts file:

We are done with the changes. Now, when the user clicks on the Add button, a form will be displayed. When the user clicks on the Save button, the book will be added.



Source link

Run the Git branch command and pass in the -d flag.
Strategy

How Do You Delete a Local Branch in Git?


At its core, the branching model offered by Git is intended to help you avoid merging unstable code into the main codebase. Working with branches in Git is a breeze, especially if you’re working with the GitKraken Git client to visualize your repository.

How to Delete a Git Branch Locally Using the Command Line

To delete a local branch in Git using the terminal, you’re going to run the git branch command and pass in the -d flag. Next, you will pass in the name of the branch you wish to delete.

Run the Git branch command and pass in the -d flag.

Can You Delete a Local Branch in Git if the Branch Is Checked Out?

It’s important to note Git does not allow you to delete a local branch if you have the branch checked out with unmerged changes. This helps prevent you from accidentally losing commit data.

How Do You See Your Git Branch List?

If you aren’t using the GitKraken Git GUI, you might have to run the git branch again on its own. The git branch command will pull a list of all the local branches in your Git repository.

The Git branch command.

How Do You Delete a Local Git Branch With Unmerged Changes?

To delete a local Git branch with unmerged changes, you will need to run the following:

Then, with a capital D, followed by the target branch name.

Deleting a local Git branch with unmerged changes.

This tells Git that you’re serious about deleting this branch. But be warned! Using the -D flag too often can make losing data very easy, so use with caution.

How Do You Delete a Git Branch Using GitKraken?

As we’ve already mentioned, there are significant benefits associated with using a Git client to visualize your repository.

If you want to delete a branch using GitKraken, simply right-click on a branch name in the left panel or from the central graph and select Delete [branch name].

Deleting a branch using GitKraken.

Delete a branch by mistake? Never fear. You can always utilize the magical Undo button in the top toolbar in GitKraken to make it like it never happened. There’s no comparable feature to the Undo button in the command line.

Want to make deleting branches in Git quick and easy? Download the GitKraken Git GUI for free.



Source link